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.
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
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
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
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
Hamim Reza
