Flawless 60 FPS Performance: Optimized by migrating scramble and flash effects completely to GPU-accelerated Framer Motion keyframes. Say goodbye to lag or drop-frames.
Zero Layout Shift: Standard inline-block wraps can break words awkwardly. This component tokens text by intact words and locks structural spacing, ensuring zero jarring shifts during reveal.
Smart Word Wrapping: Wraps strictly by words (no mid-word breaking) while honoring your manual line breaks (\n).
Designer-Friendly Preview: Instantly previews as clean static text within the Framer Canvas Editor for easy alignment, layout fitting, and font tweaking. The animation only kicks in on live preview or publish.
Fully Customizable: Easily adjust base delays, character speeds, flash color/duration, typography (font, size, line-height), blur effects, and caret properties directly from the Framer sidebar.
Hero Headers: Create an unforgettable first impression for portfolios, agency sites, or technical landing pages.
Terminal Loding/Intro Sections: Perfect for simulating computer boot sequences, system logs, or cryptographic reveals.
Feature Highlights: Draw strict user focus to key selling points, tech stacks, or project data counters with an active, eye-catching text reveal.
Bento Grid Accents: Fits snugly into small or responsive grid cards to add dynamic motion without overcomplicating the design.
Creatives & Portfolios: Designers and developers looking to add a personalized, geeky, yet incredibly sleek touch to their personal brand.
Tech Startups & Web3 Projects: Ideal for brands working in SaaS, cybersecurity, AI, blockchain, or gaming looking for a native retro/hacker aesthetic.
Framer Freelancers & Agencies: A dependable, highly customizable asset to ship high-end client sites faster without worrying about responsiveness or performance bugs.
Drop the AsciiTypeReveal component into your Framer layout.
Paste or type your content inside the Text area control. You can safely use Enter for manual line-breaks.
Tweak the Char Delay to control typing speed and Base Delay if you want to sequence it after other layout animations.
Set Preview in Editor to toggle between the live animation loop or clean static text layout inside your working canvas.
Text: Support multi-line input string.
Uppercase: Toggle to automatically capitalize all inputs.
Char Delay / Base Delay: Fine-tune the rhythm and launch-lag of the typewriter.
Flash Duration / Flash BG: Control the color and lifetime of the ASCII backdrop cells.
Blur (px): Adds an authentic analog/CRT chromatic aberration blur depth to characters.
Caret properties: Fully customizable blinking indicator icon and pulse intervals.
Sang
