---
title: "BouncyTextAnimation — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Harsh Abhonkar · Text. BouncyText is a playful Framer code component that turns any text into a tiny physics scene: each character drops under gravity,…"
canonical: "https://framer.elliotli.dev/component/bouncytextanimation"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/BouncyTextAnimation

# BouncyTextAnimation

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

![BouncyTextAnimation preview image 1](https://framer.elliotli.dev/og/component/bouncytextanimation/31c4613b29be44a8/1600x1200.jpg)

## Summary

BouncyText is a playful Framer code component that turns any text into a tiny physics scene: each character drops under gravity, collides, and comes to rest in a neat pile at the…

## Description

**BouncyText** is a playful Framer code component that turns any text into a tiny physics scene: each character drops under gravity, collides, and **comes to rest in a neat pile at the bottom**. You can nudge letters with hover, or pick them up and toss them with drag & throw. It’s responsive, emoji-friendly, and perfect for hero sections, headings, or delight moments.

**Built entirely in Framer Workshop** (no external build tooling).

## What it does

-   Spawns one physics body per character (or emoji).
    
-   Characters **fall, collide, and then stop**—forming a stable pile (no endless bouncing).
    
-   Hover near letters to gently push them; optionally enable **drag & throw**.
    
-   Physics runs only when the component is in view for performance.
    

## Customization (matches the controls in your screenshot)

-   **Text** – The content to animate (supports emojis).
    
-   **Font** – Choose the font stack used for rendering.
    
-   **Font Color** – Color applied to the letters themselves.
    
-   **Background** – Set the frame’s background (Color / Gradient / Image).
    
-   **Background Color** – Pick the actual background color when using the Color option.
    
-   **Padding** – Inner spacing of the frame.
    
-   **Corner Radius** – Rounds the frame’s corners.
    
-   **Shadow** – Toggle a soft drop shadow on the container.
    
-   **Gravity** – How fast letters fall.
    
-   **Bounce** – Letter restitution (lower = quicker settling).
    
-   **Air Friction** – Air drag to bleed energy and help letters rest.
    
-   **Hover Radius** – How far the pointer’s push force reaches.
    
-   **Push Strength** – How strongly the pointer pushes letters.
    
-   **Enable Drag** – Turn drag & throw on/off.
    
-   **Reset on Exit** – When off-screen, optionally reset letters to the top.
    
-   **Spawn Seed** – Deterministic randomness for repeatable layouts.
    

## How it’s made (brief)

-   Framer Workshop code component using a lightweight physics setup.
    
-   Safe dynamic import for the physics engine; walls rebuild on resize.
    
-   Floor uses zero restitution + high friction; bodies sleep when still to ensure a **clean, settled pile**.
    

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

-   All · #10139

## Details

- **Author**: Harsh Abhonkar
- **Price**: $5.00
- **Published**: 2025-09-17
- **Updated**: 2025-09-22
- **Added**: 2025-09-01
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos