BouncyText is a Framer Workshop code component that turns any text into a playful physics scene. Each character drops under gravity, collides, and then settles into a stable pile a
Made with Workshop
Build your own component with AI
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).
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.
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.
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.
