Variable Weight Wave text animation: the word aimotions animated in this style
113KineticCSS

Variable Weight Wave

A smooth wave of font weight rolls through the letters, swelling each one from hairline to black and back while the word reflows. A signature look of variable-font specimens, type foundry promos and editorial title cards.

Prompt · replace [TEXT]

Tool-agnostic
Animate the word [TEXT] as a variable-font weight wave. Set it huge and centered in a condensed display sans on warm off-white paper. A smooth sinusoidal wave of weight travels through the letters from left to right, each letter swelling from a hairline to an ultra-black weight and thinning again, so the word reflows and breathes while staying on one baseline. Letters tint from ink black to vermilion as they reach full weight. Midway, all letters swell to black together and hold for a beat, then the wave runs back the other way and thins everything out. Frame it like a type specimen: thin blue guide lines at baseline and x-height, small monospace axis labels, and a live weight number under each letter. Calm, rhythmic, seamless loop.

Visual DNA

  • One condensed display word swelling from hairline to black weight
  • Wave travels letter by letter, so the word reflows and breathes
  • Heaviest letters shift from ink black to vermilion
  • Specimen chrome: baseline guides, axis labels, live weight readouts
  • Warm paper background, calm sinusoidal timing
Category
Kinetic Typography
Demo built with
CSS
Energy
Calm
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 Variable Weight Wave 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 →

098KineticCanvas

Echo Trails

echo text effect · repeating text trail · stacked color echo · motion trail typography

Details →
029InkCanvas

Sumi-e Ink Brush

ink wash painting · japanese brush calligraphy · shodo brush stroke · dry brush text

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 ♥