BouncyTextAnimation

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.