Kinetic Ransom Note Text Revealer component for Framer
Bring high-energy typography and expressive micro-interactions to your Framer sites with Typer Engine. Inspired by digital ransom note typography, glitchy terminal decoders, and dynamic kinetic editorial layouts, this component animates text character-by-character using customizable style blocks, pill fills, accent borders, and easing transitions.
Built with performance in mind, it renders smoothly using CSS custom variables, handles word wraps gracefully with contiguous pill-merging logic, and includes full support for Framer’s native Property Controls.
Dynamic Ransom & Decoding Effect: Animates individual characters through multiple visual states (solid fills, inverse blocks, accent highlights, and outlined pills) before resolving to standard text.
Smart Pill Merging: Adjacent characters sharing similar visual styles merge seamlessly into cohesive inline pills (pill-start, pill-middle, pill-end, pill-single) for clean typography.
Deterministic Randomization: Uses a Mulberry32 PRNG engine with a configurable seed, ensuring consistent character variation across re-renders and static site generation.
Multiple Animation Presets: Choose from built-in animation speeds and cycles:
🍃 Gentle: Subtle, relaxed text revelation.
🌊 Smooth: Standard fluid transition.
⚡ Fast: High-energy quick typing.
👾 Glitch: Rapid, chaotic multi-cycle decode.
🎬 Cinematic: Dramatic, frame-paced reveal.
⚙ Custom: Fine-tune FPS and animation cycles directly.
Made with 💛 by @Karim Saif
Kinetic Ransom Note Text Revealer component for Framer
Bring high-energy typography and expressive micro-interactions to your Framer sites with Typer Engine. Inspired by digital ransom note typography, glitchy terminal decoders, and dynamic kinetic editorial layouts, this component animates text character-by-character using customizable style blocks, pill fills, accent borders, and easing transitions.
Built with performance in mind, it renders smoothly using CSS custom variables, handles word wraps gracefully with contiguous pill-merging logic, and includes full support for Framer’s native Property Controls.
Dynamic Ransom & Decoding Effect: Animates individual characters through multiple visual states (solid fills, inverse blocks, accent highlights, and outlined pills) before resolving to standard text.
Smart Pill Merging: Adjacent characters sharing similar visual styles merge seamlessly into cohesive inline pills (pill-start, pill-middle, pill-end, pill-single) for clean typography.
Deterministic Randomization: Uses a Mulberry32 PRNG engine with a configurable seed, ensuring consistent character variation across re-renders and static site generation.
Multiple Animation Presets: Choose from built-in animation speeds and cycles:
🍃 Gentle: Subtle, relaxed text revelation.
🌊 Smooth: Standard fluid transition.
⚡ Fast: High-energy quick typing.
👾 Glitch: Rapid, chaotic multi-cycle decode.
🎬 Cinematic: Dramatic, frame-paced reveal.
⚙ Custom: Fine-tune FPS and animation cycles directly.
Made with 💛 by @Karim Saif
