Letters that fall with gravity · magpui

Components

Letters that fall with gravity

Click anywhere and random letters drop into a box, bouncing and piling up with real physics.

Industries: creativeportfolio
Colors: light greyblackrainbow
Styles: minimalplayfulphysics
Category: playfulphysicstypography

REFERENCE
- Gallery page: https://magpui.com/en/i/letters-that-fall-with-gravity-dcb279
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/letters-that-fall-with-gravity-dcb279/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/letters-that-fall-with-gravity-dcb279/clip.mp4
- Original post: https://www.rareui.com/components/gravityletters by Rare UI
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.

BUILD
A light box where every click spawns a letter or number that falls, bounces and stacks with the others under gravity. A row of color dots below sets the color of new letters.

DESIGN SYSTEM
- Background #EDEDED; box 300x260 with 1px border #DADADA radius 10px; hint text 11px #AAA in the middle.
- Letters 18px bold sans, black by default; color dots 10px in a white pill.

MOTION
- Physics: gravity 1, restitution 0.4, friction 0.3; letters have small random spin.
- New letter appears at the click point with scale 0.6 to 1 in 120ms.
- Picking a color tints only new letters.

SECTIONS
- Box with walls, letters, color picker.
- States: empty (hint), filling, full (oldest letters fade out over 400ms after 120 letters).

IMPLEMENTATION
- matter.js (or a tiny custom verlet loop) with DOM spans or canvas text bodies.
- Pause the simulation when off-screen.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.

ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.

SUCCESS CHECK
- Each click drops a letter that stacks with the others.
- No more than 120 bodies at once.
- The picker changes new letters only.

Paste the prompt in your agent

Compare with the original