Glare Tilt Card 2.0
A metal membership card lit per pixel in WebGL: brushed metal with an anisotropic sheen that slides as it tilts, laser-engraved type whose edges catch the light, a polished gold chip, a holographic patch, and a turn to its back on click.
WebGL20 deps1 file · 31 KB TSXreduced-motion aware
Props
"use client"; /* * GlareTiltCard2: a metal membership card, lit per pixel in WebGL2. * * The card is brushed metal under a studio: two softboxes and a lit room are * reflected with anisotropic highlights that stretch across the brushing, so * the sheen runs as a band that slides as the card tilts. The member's name, * number and the house mark are laser-engraved: recessed, frosted, and their * edges catch the light on the side facing it. A gold contact chip is * polished, with its contacts cut in. A holographic patch splits the light * into a spectrum that slides with the tilt. Click (or press Enter) and the * card turns over: a glossy magnetic stripe, a signature panel and the small * print on the back. * * It tilts toward the pointer on springs, and sways gently on its own when * left alone. Reduced motion holds it flat and flips without the turn. */ // --------------------------------------------------------------- // Full source available with a viberdy Pro subscription. // https://viberdy.dev/pricing // --------------------------------------------------------------- }
Details
About this component
The card a members' club hands you, as an interface. It is brushed metal under a studio: two softboxes and a lit room are reflected with highlights stretched across the brushing, so the sheen runs as a band that slides as the card tilts, broken by the fine lines of the brush. The member's name, number, joining year and the house mark are laser-engraved from a texture drawn at runtime: recessed, frosted and darker, and the walls of each cut catch the key light on the side facing it, so the type glints as it moves. A gold contact chip is polished, with its contacts cut in. A holographic patch splits the light into a spectrum over fine concentric lines, and the colour slides with the tilt. The rounded rim rolls a line of light round the edge. Click it (or press Enter) and it turns over on a spring to a glossy magnetic stripe, a guilloche signature panel with the member's name, and the small print. It leans toward the pointer on springs, its shadow falling away from the light, and sways gently on its own when left alone. Four metals: titanium, black, champagne and cobalt; every line on it is a prop.
Curator’s note
Glare Tilt Card, rebuilt as a premium 2.0 beside the original. The first one sweeps a CSS gradient across a tilting card; this one is a metal card shaded per pixel in WebGL2: brushed anisotropic metal, laser engraving with lit edges, a gold chip, holographic foil, and a back. One file, no dependencies.
