Shutter-Slice Word Cycler
A premium text animation for Framer that turns static copy into a kinetic headline. On visibility, each word reveals through shutter-style slices with subtle flicker, then holds cleanly before the next word appears. It’s elegant, fast, and built for production.
Segmented “shutter” reveal: The word is divided into vertical slices that open in a staggered cascade.
Flicker finishing: Characters micro-flicker as slices resolve, then settle to crisp text.
Word cycling with hold: Each word animates in, holds for your chosen duration, then advances.
Responsive by design: Font size scales from the parent’s height for effortless, layout-true responsiveness.
Layout control: Left/center/right alignment with fit-content width so it hugs text (no ugly gaps).
Looks premium out of the box (editorial pacing + mechanical snap).
Tuned for real-world hero sections, quotes, and case study headers.
Hug-the-content width prevents spacing issues in inline sentences.
Zero external dependencies. Clean TypeScript + Framer property controls.
Words: as many upto 10
Typography: Full font control (size is your baseline at intrinsic height)
Colors: Text Color, Scrambled Color
Timing:
Animation Speed (ms) — shutter duration
Word Hold Duration (ms) — dwell after resolve
Motion shaping:
Slice Count — number of vertical slices
Stagger Delay (ms) — per-slice offset
Flicker Count — intensity of micro-flicker
Flicker Speed (ms) — flicker frequency
Alignment: Left / Center / Right
Hero headlines with a single dynamic word
Quotes with one rotating verb/noun
Feature banners and launch callouts
Portfolio case titles that need subtle motion
Fit-content width + inline flow keeps the left edge pinned; growth occurs only to the right.
Slices animate with eased progress and per-slice stagger for the “shutter” look.
Character flicker is time-limited so the word always resolves cleanly before the hold.
Intersection-aware: animates when in view, resets cleanly when out of view.
Keep Slice Count reasonable (6–12) for smooth 60fps on most devices.
Use shorter Flicker on mobile for clarity.
Choose high-contrast Scrambled Color that still feels subtle (e.g., a tinted gray).
Motion is brief, legible, and resolves to static text between cycles. Consider pairing with a reduced-motion variant if your page is motion-heavy.
Framer Code Component (.tsx) with property controls
Clean, commented code you can extend (no external libs)
Ayush Rawat
