Squash & Stretch Bounce text animation: the word aimotions animated in this style
110KineticCSS

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-agnostic
Animate 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

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Squash & Stretch Bounce look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

111KineticCSS

Stomp Cut Edit

stomp text animation · fast cut typography · beat synced text · punchy promo titles

Details →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥