Spotlight Animation & Prism SVG Filter Effect (GSAP)

In this tutorial we’ll build a fully interactive hero section in Webflow — complete with a spotlight effect that follows your cursor, a smooth GSAP-powered hover animation, and a custom SVG prism filter that adds a premium color-shift glow. Here’s what you’ll learn step by step: ✅ Setting up the hero section with clean, scalable structure ✅ Creating a radial spotlight overlay that tracks the mouse ✅ Animating the hero image with GSAP scale & rotate on hover ✅ Styling the button with subtle CSS transitions ✅ Applying a custom SVG filter ✅ Using GSAP + JavaScript to animate the RGB offsets for the prism effect ✅ Ensuring full accessibility (pointer + keyboard) The result? A dynamic, elegant hero section that feels premium and professional — and one you can easily adapt to your own projects. 👉 Watch on YouTube: https://youtu.be/334aRtyb35w