---
title: "Animated Letter — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. About Animated Letter Button is a high-energy, interactive CTA component for Framer featuring playful per-letter spring interactions, tactile…"
canonical: "https://framer.elliotli.dev/component/animated-letter"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Animated Letter

# Animated Letter

Playful per-letter spring interact

[View on Framer](https://framer.com/marketplace/components/animated-letter/?via=elliot-li)

![Animated Letter preview image 1](https://framer.elliotli.dev/og/component/animated-letter/f38d533ccb1388f3/1600x1053.jpg)

## Summary

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…

## Description

## 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](/community/creator/@karim-saif/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6985

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-25
- **Updated**: 2026-07-25
- **Added**: 2026-07-25
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow