TextReveal X

Hero text reveal with shutter animation

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

Hero text reveal with shutter animation