About

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.

What it does

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.

What you can customize 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.

Great for 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

Share your build

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.

Need help? Questions or feedback? Reach me anytime: We stand by the quality of our components. If you encounter any bugs, technical issues, or errors that prevent you from being fully satisfied with your purchase,

please reach out to us at dulajdilshan766@gmail.com within 7 days. If we cannot resolve the issue, we will issue a full refund immediately