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-agnosticSet [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
No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.
Keys: ← → browse · C copy