How to Create Advanced Spotlight and Prism Hover Effects in Webflow

This masterclass offers a comprehensive guide to constructing a sophisticated, interactive hero section within Webflow, bridging the gap between no-code design and custom development. The tutorial moves beyond standard layouts to implement a dynamic "spotlight" effect that tracks user cursor movement, creating an immersive focal point for portfolio or landing page designs. By layering distinct interaction models, the viewer learns to manipulate the DOM structure—specifically utilizing relative and absolute positioning—to ensure visual elements stack correctly while maintaining responsiveness across viewports.

The instructional value deepens as it introduces a hybrid approach to animation, combining Webflow’s native "Classic" interactions with the platform’s newer GSAP-powered capabilities. Viewers are guided through the logic of radial gradients to simulate lighting, using precise viewport-based units to synchronize the spotlight's movement with the mouse cursor. Furthermore, the lesson addresses critical edge cases in interaction design, such as preventing layout breakage when animated elements reach the viewport boundaries, by employing advanced sizing and offset techniques.

Finally, the tutorial elevates the design by integrating custom code and SVG filters to achieve a premium "prism" distortion effect. Viewers will acquire practical experience in embedding HTML to define complex filters (specifically manipulating RGB channels via feColorMatrix and feOffset) and writing JavaScript to animate these parameters. The result is a professional-grade asset that demonstrates how to seamlessly blend standard Webflow visual development with the power of GreenSock (GSAP) timelines for bespoke, high-performance web experiences.

• Logic-Driven Spotlight Mechanics: To create a realistic spotlight, the tutorial demonstrates using a radial gradient overlay (black to transparent) positioned absolutely over the image. The animation logic relies on mapping mouse movement to the overlay's position using viewport width (VW) and height (VH) units to ensure the light source stays perfectly aligned with the cursor.
• Advanced Overflow Management: A critical insight involves sizing the interactive overlay to 200% of the viewport width and height and applying a negative offset. This technique ensures that as the spotlight moves to the extreme edges of the screen, the overlay never reveals its boundaries, maintaining the illusion of an infinite dark room.
• Hybrid Interaction Systems: The workflow showcases the strategic use of different animation engines: "Classic" Webflow interactions are best used for continuous mouse movement (spotlight), while the new GSAP-powered interactions are utilized for complex timeline control, such as the scale and rotate effects on button hover.
• Continuous Timeline Execution: When building hover states with GSAP, the tutorial emphasizes setting triggers to "Play" on enter and "Reverse" on leave rather than restarting the animation. This ensures the animation behaves like a continuous fluid timeline, flipping direction smoothly even if the user interrupts the transition mid-way.
• SVG Filter Manipulation via Code: The most advanced takeaway is the method of using an HTML Embed to define an SVG prism-basic filter that splits image channels. By utilizing custom JavaScript to animate the dx and dy attributes of the filter on hover, developers can achieve a "chromatic aberration" or prism glow that native CSS cannot offer alone.

• 03:16 – Set section height to 100 VH to ensure it fills the viewport exactly.
• 03:23 – Set section overflow to hidden and position to relative to contain the spotlight effect later.
• 11:09 – Change the main container's position to relative to fix z-index stacking issues (ensuring text sits above the absolute image).
• 14:40 – Set the overlay div to absolute position (full) and apply a radial gradient background.
• 16:04 – Adjust gradient stops (Black at 50%, Transparent at 20%) to create the spotlight definition.
• 18:10 – Initialize a "Mouse move over element" interaction using Webflow's Classic interactions.
• 19:40 – Configure X-axis movement: Set 0% to 50 VW and 100% to 50 VW.
• 20:41 – Configure Y-axis movement: Set 0% to 50 VH and 100% to 50 VH.
• 23:34 – Resize the overlay width and height to 200% to prevent edges from showing during movement.
• 23:57 – Set top and left offsets to 50% to recenter the enlarged overlay.
• 26:38 – Configure GSAP interaction triggers: Set Mouse Enter to "Play" and Mouse Leave to "Reverse".
• 29:47 – Change the animation target from "Trigger" to the class section_image.
• 30:30 – Define animation properties: Set Scale to 1.1 and Rotate to 3 degrees.
• 32:26 – Add an HTML Embed element containing the custom SVG filter code (feColorMatrix and feOffset).
• 34:11 – Apply the SVG filter to the image using the custom CSS property filter: url(#prism-basic).
• 35:03 – Add a Javascript Embed to animate the SVG filter attributes (dx and dy) via GSAP.
• 36:20 – Add the custom attribute FC-prisbutton to the button element to link it to the script.

Tutorial: Building an Interactive Spotlight Hero with Webflow & GSAP

This guide covers the construction of a cursor-tracking spotlight effect, a hybrid animation system, and a custom SVG prism distortion filter.

Phase 1: Structure & Styling

1. Set up the Section Dimensions

• Timestamp: 03:16 - 03:23
• How: Create a new Section. Set the Height to 100 VH, Overflow to hidden, and Position to relative.
• Why: 100 VH ensures the hero always fills the screen. Overflow: hidden is critical to prevent scrollbars when the spotlight animation moves elements outside the viewport boundaries later.

2. Configure the Content Layer

• Timestamp: 03:53 - 11:26
• How:‍
  
  • Add a main-container inside the section. Set it to Flex (Center/Center).‍
  • Crucial Step: Set the main-container Position to relative.
  • Add your content (Heading, Paragraph, Button) inside.

• Why: By default, static elements sit behind absolute elements in the stacking context. Setting the container to relative ensures your text sits on top of the absolute background image we are about to add.

3. Add the Background Image

• Timestamp: 09:41 - 10:35
• How: Add an image element to the section. Give it a class of section_image. Set Width and Height to 100%, Object Fit to cover, and Position to Absolute (Full).
• Why: Object Fit: cover ensures the image maintains its aspect ratio while filling the screen, regardless of the device size.

Phase 2: The Spotlight Logic

4. Create the Darkness Overlay

• Timestamp: 14:27 - 14:52
• How: Add a generic Div Block inside the Section (place it above the image in the navigator). Name it overlay. Set Position to Absolute (Full).
• Why: This element will hold the gradient that simulates the lighting. It sits on top of the image but behind the text.

5. Sculpt the Light with Gradients

• Timestamp: 15:41 - 16:38
• How: Apply a Radial Gradient background to the overlay.
  
  • Set the center stop to Transparent (approx 20%).
  • Set the outer stops to Black (approx 50% - 100%).

• Why: A standard gradient fades too slowly. Tightening the stops (e.g., Transparent at 20%, Black at 50%) creates a sharper, more realistic "flashlight" falloff.

6. Animate the Spotlight (Classic Interaction)

• Timestamp: 18:10 - 20:49
• How:‍
  
  • Select the Section. Go to Interactions -> Classic -> Mouse move over element.‍
  • X-Axis: 0% = -50 VW, 100% = 50 VW.‍
  • Y-Axis: 0% = -50 VH, 100% = 50 VH.
  • Apply this animation to the overlay div.

• Why: We use Viewport Width/Height (VW/VH) units to map the mouse position directly to the overlay's movement. This ensures the clear center of the gradient perfectly tracks the cursor.

7. Fix the "Edge" Problem

• Timestamp: 23:34 - 24:03
• How: Select the overlay class. Change Width and Height to 200%. Set Top and Left positions to 50%.
• Why: When the spotlight moves to the far right of the screen, the left edge of the overlay would normally become visible (revealing the image underneath). Doubling the size and creating a negative offset ensures the "dark room" is infinite and edges never enter the viewport.

Phase 3: GSAP Hover Animation

8. Configure the Continuous Timeline

• Timestamp: 26:05 - 28:30
• How: Select the Button. Create a new GSAP Interaction (not Classic).‍
  
  • Trigger 1 (Mouse Enter): Action = "Play".‍
  • Trigger 2 (Mouse Leave): Action = "Reverse".

• Why: Unlike standard animations that restart on every hover, this creates a fluid timeline. If a user hovers out halfway through, the animation reverses smoothly from that exact point rather than jumping.

9. Target the Image

• Timestamp: 29:41 - 30:39
• How: In the GSAP timeline, change the target from "Trigger" to Class (section_image). Set Scale to 1.1 and Rotate to 3 deg with a duration of 1.5s and Power1.inOut easing.
• Why: This creates an immersive effect where hovering the button affects the background environment, signalling to the user that they are about to "enter" the experience.

Phase 4: The Prism Effect (Advanced)

10. Define the SVG Filter

• Timestamp: 32:26 - 33:06
• How: Add an HTML Embed to the page. Paste code containing an SVG with <feColorMatrix> (to split RGB channels) and <feOffset> (to move them). ID the filter prism-basic.
• Why: CSS filters cannot split image channels (Red/Green/Blue). We need a raw SVG filter to define this capability before we can manipulate it.

11. Apply the Filter to the Image

• Timestamp: 34:11 - 34:19
• How: Select section_image. In the Style panel, go to Custom Properties. Add property filter with value url(#prism-basic).
• Why: This links the visual output of the Webflow image element to the SVG logic defined in the Embed.

12. Animate Filter Attributes with JS

• Timestamp: 35:03 - 36:25
• How:‍
  
  • Add a Javascript Embed (before </body>). Use GSAP to target the <feOffset> nodes inside the SVG and animate their dx and dy values on hover.
  • Select your Button. Add a Custom Attribute: Name=FC-prisbutton.

• Why: The JavaScript acts as the bridge. It listens for hovers on the element with the specific attribute (FC-prisbutton) and tells GSAP to drive the values inside the SVG filter, creating the chromatic aberration effect.

Create a div overlay with a radial gradient that fades from transparent (center) to black (edges). Use a "Mouse move over element" interaction to map the cursor's 0-100% position to x/y transforms of -50vw/-50vh and 50vw/50vh, ensuring the "light" stays perfectly aligned with the mouse.

Resize the moving background element to at least 200% of the viewport's width and height to cover the extra distance traveled. Apply negative top and left offsets (e.g., -50%) to re-center the element, ensuring the edges never enter the visible viewport area even at extreme interaction coordinates.

Instead of creating separate "hover in" and "hover out" timelines, build a single animation sequence. In the interaction triggers, configure "Mouse Enter" to "Play" and "Mouse Leave" to "Reverse," allowing the animation to fluidly flip direction from any point without jumping.

Embed an SVG filter containing feColorMatrix (to split RGB channels) and feOffset primitives into your page. Apply the filter to the image using custom CSS (filter: url(#id)), then use JavaScript and GSAP to animate the dx and dy attributes of the offset nodes on hover.