# Ice Logo

> Any SVG logo cut from ice: it crumbles into splinters, chips and powder under the cursor, then pieces itself back together.

Live: https://vanilla-motion.com/ice-logo/ · Tuning app: https://vanilla-motion.com/ice-logo/app/ · Code reference: https://vanilla-motion.com/ice-logo/skill.md · Params: https://vanilla-motion.com/ice-logo/params.json

Ice Logo turns any SVG logo into a block of ice. Move the cursor over it and the ice cracks into splinters, chips and powder, then the pieces fly back and the logo heals itself. We first built it for a client's brand page, then made the logo an input so the same effect works for any mark.

## How it works

**The logo stays one solid mesh until it breaks.** The SVG is read with Three.js's `SVGLoader`, centred, and scaled so its larger side is always the same length. That way the tuned values (depth, bevel, reach) look the same for a wide wordmark and a square icon. The shapes are then extruded into one smooth, bevelled mesh.

**The cracks are planned before anything breaks.** Points are scattered over the logo and turned into Voronoi cells with `d3-delaunay`, then stretched so they read as splinters rather than tiles. Each cell is clipped to the logo outline with `polygon-clipping`. Which cells are broken is stored in a small texture, and the shader on the intact mesh cuts a hole wherever a cell is marked broken.

**Each broken cell has a hidden twin.** For every cell there's a jagged chunk, hidden until its cell breaks. Then it flies out with a push, a spin and gravity, and a spring pulls it back to its place. When it lands, the hole closes and the chunk hides again. Powder and small chips are drawn from fixed pools, so a burst of breaking never allocates new objects mid-animation.

**The ice is a physical material.** It uses Three.js's transmission (glass) material with frost textures drawn on a canvas at startup. The frost changes as the logo turns toward or away from the light, so the ice moves between cloudy and see-through while the cursor moves.

## When to use it

If a brand page has one hero moment and a logo that people will play with, it works well: it rewards the cursor without asking for a click.

If the page is long, or the logo sits next to text people need to read, keep it smaller or use something lighter. The effect runs WebGL with a glass material, so it costs more than a CSS animation, and on low-end phones it is worth lowering `cells` and `dust`.

Every value in the tuning app is also a `data-*` attribute on the embed, so what you set in the app is what you ship.