Shutter Text Cycle

Shutter-Slice Word Cycler A premium text animation for Framer that turns static copy into a kinetic headline.

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. What it does 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). Why it’s different 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. Controls (all visual) 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 Best use cases 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 Implementation details 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. Performance tips 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). Accessibility Motion is brief, legible, and resolves to static text between cycles. Consider pairing with a reduced-motion variant if your page is motion-heavy. What’s included Framer Code Component (.tsx) with property controls Clean, commented code you can extend (no external libs)