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