Refractive Glass Letters text animation: the word aimotions animated in this style
128MaterialWebGL

Refractive Glass Letters

Thick clear glass letters bend a bright striped backdrop through their rounded edges, splitting it into rainbow fringes and caustic light. A crisp, premium material text effect for tech launches, product reveals and website hero titles.

Prompt · replace [TEXT]

Tool-agnostic
Render the word [TEXT] as thick, perfectly clear glass letters in a heavy condensed grotesque, all caps, with softly rounded edges. Behind them, bold diagonal stripes in tangerine, hot pink, violet and sky blue drift slowly over a soft gradient. Through the glass the stripes are magnified and bent along every curve, and the edges split them into thin red, green and blue rainbow fringes. Add white fresnel reflections on the rims, sharp specular glints, and a light-through shadow offset down-right on the backdrop with bright focused caustic lines. Start with the glass forming from nothing as the bending grows, hold while a gentle ripple runs across the letters, then let it dissolve back into the stripes and loop.

Visual DNA

  • Rounded slab glass that warps the stripes behind it like a lens
  • Chromatic dispersion: red, green and blue bent by different amounts at the edges
  • Bright caustic rims and an offset light-through shadow on the backdrop
  • Fresnel edge reflections and crisp white specular glints
  • Slow drifting candy stripes; a ripple runs through the glass mid-loop
Category
Materials & 3D
Demo built with
WebGL
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 Refractive Glass Letters 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 ♥