Auralis

Interactive Glass Gradient

An interactive hero section for Framer. Cycling display text reveals itself with a directional blur that sweeps in from alternating sides on each change, set over a dark, customizable gradient. On hover, a translucent glass bubble follows the cursor and sheds a trail of smaller bubbles that drift and fade. Click anywhere and the bubble pops into a burst of tiny bubbles, then reforms.

Fully responsive and controlled from the properties panel: an editable text list and interval, a native font picker with weight, style, size, tracking, alignment, and free positioning, two bubble tint colors with bubble size, blur, opacity, and trail life, a dark background as a solid or two-stop brand gradient, and a corner radius that inherits the parent or can be set directly. It respects reduced-motion preferences and scales down cleanly to mobile.

Drop it into a section, set width to Fill and a fixed height, and it's ready. Ideal for landing page heroes, agency and portfolio intros, and any section that needs a bold, playful focal point.