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.
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.
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.
Made with 💛 by @Karim Saif
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.
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.
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.
Made with 💛 by @Karim Saif
