Skip to main content
Hero

Cursor Spotlight Reveal Hero with Gooey Text Animation

9views
6/13

A full-screen, black-backed hero section where a hidden "final" image is revealed only inside a soft circular spotlight that follows the user's cursor (or finger, on touch devices) across a wireframe/base image underneath. A radial-gradient CSS mask creates the smooth, feathered reveal edge, smoothed further with a lerped cursor position for a fluid, lag-free feel. Layered on top is a liquid "gooey" text animation — built with an SVG feColorMatrix threshold filter — that seamlessly morphs between multiple headline words (e.g. "Tick." → "Tock." → "Forever.") instead of simply fading or sliding between them. A minimal top-left brand lockup (logo + wordmark) completes the layout. Fully responsive and touch-enabled, this template is ideal for product reveals, teaser landing pages, agency portfolios, or any brand wanting a tactile, interactive first impression.

Upgrade to Pro to access the full source code, setup guide, and implementation details.
Preview
Pro
Premium Cursor Spotlight Reveal Hero with Gooey Morphing Text React component preview

Pro Preview

This is the component you unlock with the Pro plan. Subscribe to access the source code, installation guide, dependencies, and usage instructions.

View Pro pricing
Explore more

Related components

Cursor Spotlight Reveal Hero with Gooey Text Animation