ChromaType - Boost engagement with dynamic text animations
Update 1.0Initial release with multi-text support and custom gradient fills.
ChromaType brings high-end, cinematic text animations to your Framer projects. Whether you want to simulate a terminal, showcase a rotating list of services, or add a storytelling element to your hero section, ChromaType provides a seamless, code-free way to animate your copy. It’s designed to be lightweight, responsive, and highly flexible to match any brand identity.
Renders a sequence of strings with a customizable typing effect. It handles complex transitions between multiple phrases, and gives you full control over the cursor’s behavior. The component can trigger automatically on page load or wait for user interaction like a click or hover, making it perfect for both decorative and interactive UI elements.
Text & Styling: Input multiple text strings, adjust text casing (Capitalize/Uppercase), toggle text wrapping, and choose any font.
Animation Controls: Fine-tune the typing speed and easing (Ease In/Out), set a start delay, and toggle the loop on or off. You can even add a Blur effect for a softer, more modern transition.
The Cursor: Choose between three styles (Line, Block, Underscore), customize the cursor color, and adjust the blink speed to fit your site’s rhythm.
Interactions: Set the animation to trigger on Auto, Click, or Hover. For advanced users, there is a Custom CSS field and Command ID support for deeper integration.
Hero Sections: Dynamic headlines that cycle through value propositions.
Portfolios: Listing diverse skill sets or roles (e.g., Designer, Developer, Creator).
Tech & SaaS Landing Pages: Creating a "coding terminal" or "command line" aesthetic.
Empty States & 404s: Adding a playful, interactive element to keep users engaged.
Product Walkthroughs: Simulating real-time typing for chat or AI search demos.
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
ChromaType - Boost engagement with dynamic text animations
Update 1.0Initial release with multi-text support and custom gradient fills.
ChromaType brings high-end, cinematic text animations to your Framer projects. Whether you want to simulate a terminal, showcase a rotating list of services, or add a storytelling element to your hero section, ChromaType provides a seamless, code-free way to animate your copy. It’s designed to be lightweight, responsive, and highly flexible to match any brand identity.
Renders a sequence of strings with a customizable typing effect. It handles complex transitions between multiple phrases, and gives you full control over the cursor’s behavior. The component can trigger automatically on page load or wait for user interaction like a click or hover, making it perfect for both decorative and interactive UI elements.
Text & Styling: Input multiple text strings, adjust text casing (Capitalize/Uppercase), toggle text wrapping, and choose any font.
Animation Controls: Fine-tune the typing speed and easing (Ease In/Out), set a start delay, and toggle the loop on or off. You can even add a Blur effect for a softer, more modern transition.
The Cursor: Choose between three styles (Line, Block, Underscore), customize the cursor color, and adjust the blink speed to fit your site’s rhythm.
Interactions: Set the animation to trigger on Auto, Click, or Hover. For advanced users, there is a Custom CSS field and Command ID support for deeper integration.
Hero Sections: Dynamic headlines that cycle through value propositions.
Portfolios: Listing diverse skill sets or roles (e.g., Designer, Developer, Creator).
Tech & SaaS Landing Pages: Creating a "coding terminal" or "command line" aesthetic.
Empty States & 404s: Adding a playful, interactive element to keep users engaged.
Product Walkthroughs: Simulating real-time typing for chat or AI search demos.
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
