Glass Shatter Hover text animation: the word aimotions animated in this style
004ReactiveCanvas

Glass Shatter Hover

Shattering glass text effect: cyan glass letters in a dark pane crack where the cursor passes. Fast swipes knock shards flying and tumbling before they snap back into place. Ideal as an interactive, animated website hero title.

Prompt · replace [TEXT]

Tool-agnostic
Set [TEXT] in bold wide letters made of cyan-to-violet tinted glass with bright bevel glints and a soft inner glow, fused into a faint glass sheet over near-black. At rest a slow invisible touch drifts across the pane, leaving hairline white cracks along a triangular fracture pattern that heal behind it and chipping out a single shard now and then. On hover the pointer cracks the glass wherever it goes, and fast swipes knock triangular shards out of the pane in the swipe direction: they fly, tumble and glint with cyan edges, start to fall, then snap magnetically back into place, the cracks fading until [TEXT] is whole again within about two seconds. A press punches a radial shatter burst out of the pane. On touch screens the finger cracks and shatters it the same way.

Visual DNA

  • Cyan-to-violet glass letters fused into a faint pane on near-black
  • Hairline cracks follow the pointer and heal as the glass settles
  • Fast swipes knock triangular shards out; they tumble, glint and fall
  • Shards snap magnetically back into place within two seconds
  • Press punches a full shatter burst out of the pane
Category
Reactive Styles
Demo built with
Canvas
Energy
Lively
Background
Dark 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 Glass Shatter Hover 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 ♥