Shutter Text Cycle

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)