Cipher

Each letter rotates through a virtual 3D cube to reveal a second word, a second color, or both. Before the flip fires, a cipher scramble cycles every character through random glyphs — like encrypted text decoding in real time. No CSS transition or Webflow interaction replicates this.

Triggers Hover (tap-to-toggle on mobile), Click, In View, and Loop — with configurable interval and hold duration so the component self-demos in any hero section without requiring interaction.

Effects Scramble with 5 character sets: Mixed, Uppercase, Numbers, Symbols, and Matrix (Japanese katakana カタカナ). Motion blur peaks at the flip midpoint for physical depth. 2px is subtle; 6px+ shifts to glitch.

Directions Top, Bottom, Left, Right, Random (stable per render), and Cycle (cascades through all four axes across characters).

Easing presets Snappy, Elastic, Cinematic, Butter, and Custom — replaces raw spring and tween values with named feels so designers pick a vibe, not a damping number.

How to use Drop onto any dark-background frame. Set Text ("THINK") and Reveal Text ("BUILD") — match character counts for a clean 1-to-1 swap. Pick a trigger, set Front Color to white, Back Color to your brand accent. Done in under a minute.

Works best on hero headlines, scroll-triggered section headers, and looping CTAs. Pair short, semantically connected words for maximum impact: DESIGN → SHIP, FAST → FASTER, NOW → WOW.

Best pairings Full-bleed dark hero → Cipher headline → logo marquee below. In View trigger on section headers fires the cipher on scroll entry, reverses on exit.

Technical Canvas preview adapts to light and dark editor backgrounds automatically. Accessible: role="text" and aria-label on wrapper, back-face spans are aria-hidden. Full typography controls: size, weight, family, tracking, leading, word gap. Perspective control from 300px (dramatic) to 3000px (nearly flat).

All sales are final.