← All effects

Falling Letters

TextVanilla JS · zero dependenciesgravity + a bounce per letter
click to drop again
-- fps
prefers-reduced-motion detected — text shown in place

X-ray · layers

letters accelerate as they fall
they hit the baseline and rebound (off = land dead)
they drop one after another (off = all together)

Parameters

Your text 
Gravity0.7
Bounce0.55
Drop height220 px
your version · updates as you tinker

How this effect works

Each letter is a tiny falling body with two numbers: a vertical position and a velocity. Every frame gravity adds to the velocity and the velocity moves the letter — v += GRAVITY; y += v; — the oldest trick in animation, and the reason the fall accelerates instead of sliding at a constant speed. Turn gravity off and the letters drift down linearly, which immediately looks wrong; that one addition is what makes it read as weight.

When a letter reaches the baseline it doesn't stop, it bounces: the velocity flips and is scaled by BOUNCE, so each hop is shorter until it settles — a real damped bounce, not a scripted keyframe. Stagger is the last piece: each letter's start is delayed by its index, so the word assembles left to right instead of dropping as a block. Everything runs the same three lines; the only difference between letters is when they begin and how far they started up.

Production notes: respects prefers-reduced-motion (text sits in place, no drop) · letters are spans transformed on the compositor · your text is escaped before it reaches the page · click or tap the stage to replay · the copied snippet is self-contained HTML + CSS + JS.