Skip to content

component

Chroma_Type_Cursor

By Dulaj dilshan

Details

Summary

Boost engagement with dynamic text

Description

ChromaType - Boost engagement with dynamic text animations Update 1.0 Initial release with multi-text support and custom gradient fills. About 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. What it does 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. What you can customize 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 Great for 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. Need help? Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb

Introduction

Boost engagement with dynamic text

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600172648/148/208/279/39/10
  • All · #7264