Squash & Stretch Bounce
Letters drop in one by one, squash flat on impact and stretch tall as they rebound: the first principle of classic character animation applied to type. Ideal for playful brands, kids content, games and app onboarding.
Prompt · replace [TEXT]
Tool-agnosticAnimate the word [TEXT] with classic squash-and-stretch. Each letter falls from above with a short stagger, squashes wide and flat when it hits an invisible floor, stretches tall as it rebounds, then settles with two smaller bounces. Preserve volume (wider when shorter) and pivot every deformation from the letter's base. Under each letter, an elliptical contact shadow grows and darkens as the letter approaches the floor. Use chunky rounded display type, a different flat bright color per letter, one solid warm background and snappy cartoon timing. Hold for a beat, then each letter squats in anticipation and hops off the top; loop seamlessly.
Visual DNA
- Staggered drop-in, one letter at a time
- Squash on contact, stretch on the rebound, volume preserved
- Contact shadows that grow as each letter lands
- Chunky rounded display type in flat bright colors
- Anticipation squat before the letters hop away
- Category
- Kinetic Typography
- Demo built with
- CSS
- Energy
- Lively
- Background
- Light bg
Also known as
No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.
Keys: ← → browse · C copy