TypewriterCodeBlock brings your static code snippets to life with a fully dynamic typing animation built right into Framer. Drop it into your documentation pages, developer portfolios, or landing pages to showcase code in a deeply engaging, interactive way. It flawlessly handles single or multiple snippets, adjusts to multiple themes, and scales smoothly into any layout you choose.
Renders a clean code block that simulates real-time typing and deleting effects based on your custom code inputs. It supports language syntax highlighting like Python, switches between multiple color themes, toggles line numbers, and lets you fully control the pacing of the typing, deleting, and pausing intervals. The component also includes smooth cursor animations to give it a completely authentic terminal or text editor feel.
Snippet settings: Toggle between multiple or single snippets, paste your raw code inputs, and select your preferred programming language.
Animation speeds: Finely adjust typing speed, deleting speed, and the exact pause duration after a snippet finishes typing out.
Aesthetics & typography: Choose between popular themes like Dark, Dracula, Monokai, or Nord, set custom background colors, and swap the text font to perfectly match your brand style.
Layout & cursor: Show or hide line numbers, enable or disable custom patterns, toggle the cursor blink on or off, and select your preferred cursor style from Block, Underline, or Bar.
Developer portfolios and resumes
Product landing pages and SaaS headers
Technical documentation and blog posts
Onboarding guides and interactive tutorials
"About me" or terminal style sections on any site
If you ship something cool with it, post it on X and tag me @Dulajweb , or send it over. I’d love to see what you create.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
