Cloth Banner Wind text animation: the word aimotions animated in this style
002ReactiveWebGL

Cloth Banner Wind

Interactive cloth text effect: the word is printed on a fringed fabric banner hanging from a brass rod and swaying in a breeze. The cursor pushes folds through the cloth like a hand or a gust. Ideal as an animated website hero title.

Prompt · replace [TEXT]

Tool-agnostic
Print [TEXT] in a bold cream brush script on a navy woven fabric banner with a thin gold inner border and a gold fringe along the bottom, hanging from a brass rod by rings against a warm plaster wall. The cloth sags in soft scallops between the rings and a light breeze keeps folds slowly rolling across it, so the word sways but stays readable. On hover the pointer acts like a hand pushing into the fabric: the cloth dents away from it, folds radiate around the contact and fast moves drag the banner sideways like a gust, with the fringe swinging. Top-left light shades every fold. When the pointer leaves, the banner swings back and settles into the breeze. A press throws a strong gust. Touch pushes the cloth the same way.

Visual DNA

  • Navy woven banner with a cream script word, gold border and fringe
  • Hangs from rings on a brass rod, sagging in soft scallops between them
  • Real cloth physics: folds, ripples and a hard shadow on the wall
  • Pointer presses the fabric back and drags it along as it moves
  • Press throws a strong gust through the whole banner
Category
Reactive Styles
Demo built with
WebGL
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 Cloth Banner Wind 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 →

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 ♥