Animated Letter

About Animated Letter Button is a high-energy, interactive CTA component for Framer featuring playful per-letter spring interactions, tactile button press dynamics, multi-layered…

About Animated Letter Button is a high-energy, interactive CTA component for Framer featuring playful per-letter spring interactions, tactile button press dynamics, multi-layered depth lighting, and fully customizable gradient or solid fills. Built with performance and accessibility at its core, it gives landing page buttons a responsive, high-converting feel. What it does Interactive Letter Physics: As the user moves across the button, individual letters lift upward with customizable spring physics ( cubic-bezier timing) for a smooth hover sequence. Tactile Depth & Press Dynamics: Layered inset light/shadow effects adjust seamlessly between idle, hover, and pressed states, providing immediate compression feedback on click or touch. Solid & Gradient Background Modes: Smoothly transitions between custom dual-color gradients (with controllable angles) or solid background colors on hover. Smart Accessibility & SSR: Uses useIsStaticRenderer for clean Canvas rendering and respects system motion preferences via prefers-reduced-motion queries, complete with explicit focus rings for keyboard navigation. What you can customize All aspects are directly editable via Framer’s Property Panel: Text & Typography: Set custom button text, text case transformations ( UPPERCASE , lowercase , Capitalize ), full font styling (family, weight, size), and letter spacing. Colors & Gradients: Toggle between linear gradients and solid fills with independent controls for normal and hover states, gradient angles, borders, and letter text color. Letter Animation: Enable/disable individual letter bouncing, adjust bounce height (in pixels), and fine-tune animation speed. Press & Hover Motion: Adjust button hover lift height, click scale compression, hover/press speeds, and custom pointer cursors. Connect Made with 💛 by @Karim Saif

Playful per-letter spring interact