TextReveal X

A cinematic hero text component with a signature shutter reveal animation. Three colored slices sweep across each character in sequence, creating a sophisticated reveal that makes any hero section impossible to ignore.

Features

• Shutter reveal animation across each character individually

• Three accent-colored slices sweep in different directions per character

• Blur-to-focus fade-in for added depth on entry

• Staggered character timing for a dynamic sequential reveal

• Replay button with hover and tap animations to restart

• Optional decorative grid background with adjustable opacity

• Corner accent decorations for an editorial frame

• Fully customizable text, fonts, colors and background

• Canvas-optimized — previews cleanly in Framer editor

Property Controls

Content — hero text string

Typography — family, size, weight, spacing, line height, transform

Colors — background, text, accent slices, button, button icon

Decorative — grid background toggle, grid opacity, corner accents toggle

Technical Details

• Framer Motion with AnimatePresence for clean replay transitions

• CSS clip-path for precise three-slice shutter effect

• Per-character split with staggered delay calculation

• React key reset pattern for frame-perfect animation replay

• startTransition for React 18 performance

• useIsStaticRenderer for canvas optimization

Use Cases

Hero sections · Landing pages · Portfolio intros · Brand reveals · Product launches · Agency homepages · Editorial headers

SEO Keywords

framer text reveal · framer hero animation · text animation framer · framer shutter effect · hero text framer · framer animated text · text reveal animation framer · framer landing page component · framer motion text · character animation framer · framer hero component · animated headline framer · framer code component · framer text component · hero reveal framer