Text Curtain Hero

A hero section built around an interactive text animation: a curtain of hanging letters between a background image and a cut-out foreground. Move the cursor across it and the strands part, swing back and ring; the glyphs you touch translate into your own words.

Text effect, cursor interaction, physics and sound in one component. No plugins, no setup: drop it on the page, upload two images, type your words.

WHAT YOU CAN CHANGE

- Images: any background, any cut-out PNG in front. The curtain is cut to the shape of the transparent area by itself

- Words: each strand repeats one of your words, one letter per bead, in any alphabet

- Look: alien signs that translate on hover, or plain letters always readable. Colors, size, spacing, tint from the image

- Physics: gravity, swing, wind, cursor reach and strength, parallax

- Sound: glass chimes or an eerie "alien" tone with a low drone. Off until the visitor turns it on

- Text: title, paragraph, fonts, colors, hint, credit

BUILT PROPERLY

- Responsive: its own layout and framing for phones, works with mouse and touch

- One screen tall on the live site, whatever the frame size

- Light on the page: starts when the browser is idle and lowers its own resolution on slow devices

- Respects "reduce motion" settings

- Still, silent preview inside the Framer editor

INCLUDED

- The code component

- 2 demo scenes for the same background, plus the Earth image

- Install guide and commercial license

Great for: landing page heroes, portfolio intros, product launches, sci-fi and cinematic sites, storytelling pages, event and music sites.

The demo images were created with generative AI tools.

License: the Marketplace badge reads "Single-Use", but this component comes with a broader license: one person or one company, unlimited projects, personal or for clients, with no reselling or redistribution of the component or its media.