A macOS-style dock made of real glass. Not a blur: a displacement map built from the rounded rectangle, so whatever sits behind the slab is genuinely bent, with a chromatic split at the edges. Put it over stripes and watch a straight line leave the slab as an S.
Icons magnify along a cosine bell as the cursor approaches - neighbours grow less, the falloff is continuous, and the slab widens to hold them. A specular edge trails behind the movement, and that lag is what makes the surface read as glass.
Twenty icons are drawn by hand in the code - home, search, gallery, camera, play, music, mail, messages, profile, settings, cart, heart, star, bookmark, calendar, folder, grid, globe, bell, external link - on one grid with one stroke weight. Or bring your own image, or paste your own SVG, which is cleaned through a strict whitelist before it is used.
IMPORTANT: glass needs something to refract. Place it over a photo, a video or a gradient; on a flat white or black page there is nothing to bend. A Preview backdrop is included for designing, and it should stay off on a live site.
Real links, keyboard reachable, visible focus. Nothing loaded from outside. Honours prefers-reduced-motion and rests quietly on the Framer canvas.
A macOS-style dock made of real glass. Not a blur: a displacement map built from the rounded rectangle, so whatever sits behind the slab is genuinely bent, with a chromatic split at the edges. Put it over stripes and watch a straight line leave the slab as an S.
Icons magnify along a cosine bell as the cursor approaches - neighbours grow less, the falloff is continuous, and the slab widens to hold them. A specular edge trails behind the movement, and that lag is what makes the surface read as glass.
Twenty icons are drawn by hand in the code - home, search, gallery, camera, play, music, mail, messages, profile, settings, cart, heart, star, bookmark, calendar, folder, grid, globe, bell, external link - on one grid with one stroke weight. Or bring your own image, or paste your own SVG, which is cleaned through a strict whitelist before it is used.
IMPORTANT: glass needs something to refract. Place it over a photo, a video or a gradient; on a flat white or black page there is nothing to bend. A Preview backdrop is included for designing, and it should stay off on a live site.
Real links, keyboard reachable, visible focus. Nothing loaded from outside. Honours prefers-reduced-motion and rests quietly on the Framer canvas.
