FOIL / A LIVE MATERIAL0° / 0°MOVE OVER THE CARD · DRAG ON TOUCH · ARROW KEYS WHEN FOCUSED
04 / MOVE THE LIGHT
Tilt and sheen respond together.
pointer → bounded tilt + moving reflection
THE IDEA / A MATERIAL THAT RESPONDS
Keep the shape. Change the light.
A foil card works because several small effects agree. The shape stays sharp, the colour flows, the grain feels tactile, and the reflection moves when the card tilts. The copy sits quietly above all of them.
Build an editable web card with five palettes, ticket cuts, material controls and PNG export, then isolate each layer. The experiment needs no setup. Basic JavaScript and shader knowledge help if you edit the starter.
01 / THE SILHOUETTE IS THE FOUNDATION
Clip every layer with one shape.
Start with a rounded rectangle. Remove a circle from each side, a little below the centre, to suggest a ticket. The cut radius is independent of the corner radius: one makes the object friendlier, the other gives it a recognisable detail.
The mask keeps the foil, grain, reflection and ink inside the same boundary.
mask = rounded rectangle − side circles
Our model generates a single path. CSS uses it to clip the preview; Canvas uses the same path to clip the exported image. The even-odd fill rule removes the overlapping circular cuts. Keeping one geometry source prevents a clean preview from becoming a square PNG.
Try: select Shape, then Layout. Set Ticket cuts to zero. Increase Corners. Compare a plain rounded card with a ticket silhouette, then try the landscape proportions.
02 / COLOUR BEFORE SHINE
Let the palette flow.
The foil begins with three palette colours blended across broad bands. A low-frequency noise field bends those bands so they feel less like a perfectly straight gradient. A small spectral contribution introduces changing rainbow hues without taking over the palette.
This diagram isolates the colour field. Reflection and grain are separate layers.
Colour angle rotates the sampling direction. Iridescence controls the strength of the spectral shift. The pointer slightly changes the sampling phase as well as the highlight, helping the material feel responsive.
Try: select Foil. Compare Pearl with Graphite. Set Iridescence to zero, then increase it. Rotate Colour angle. The silhouette and text should stay in place while the colour field changes.
03 / A PERFECT GRADIENT FEELS DIGITAL
Add small imperfections.
Fine variation gives the material a surface. Stipple mixes tiny flecks and cloudy variation. Brushed uses directional lines. Prism crosses two fine patterns. Each texture changes brightness in the material; it does not blur the card copy.
The diagram enlarges the marks so their organisation is visible. In the card, they stay fine.
textured colour = colour + texture × grain
The texture is calculated in card coordinates, so its features stay attached to the surface as the preview tilts. A fixed pseudo-random hash keeps the flecks stable rather than replacing them with new static every frame.
Try: select Texture. Keep one palette and compare the three textures at 50% Grain. Then set Grain to zero. Look for the smallest amount that gives the card a tactile finish.
04 / TWO RESPONSES, ONE INPUT
Move the card and the reflection together.
Normalise a pointer position across the card into a range from −1 to +1. That same position drives a bounded tilt and the reflection’s centre. A broad, soft band and a narrower highlight make the material look glossy.
A restrained tilt supports the material effect. The light does most of the visual work.
CSS perspective gives the preview its depth. The material shader moves the sheen inside the card. Tilt eases toward its target using elapsed time and returns to rest when the pointer leaves. There is no automatic spin. With reduced motion requested, the light responds while the card stays still.
Try: select Light. Move across the card, drag on touch, or focus it and use the arrow keys. Compare Gloss at zero and 100%. For a deliberate pose, use Tilt X and Tilt Y in Layout; these switch off Follow pointer.
05 / A FINISH NEEDS SOMETHING TO FINISH
Keep the copy readable. Export the face.
The foil is decorative; the title and member details carry the card’s meaning. The ink layer sits above the material, so changing grain does not soften the letters. Auto ink chooses a light or dark colour for each palette, and long titles fit to the available width.
Use Copy to make the card yours. The preview’s 3D pose is a presentation effect. Export saves the flat face at a 1600-pixel long edge, preserving the current palette, texture, light, layout and copy. Corners and ticket cuts remain transparent.
The preview
A tilted card in a dark scene, with pointer feedback and a shadow.
The PNG
The flat card face with transparency, ready to place in a layout.
The starter
A self-contained HTML exercise with editable model, shader and controls.
Try: change the title and member details in Copy. Choose an ink colour that stays readable, then save the card face.
YOUR TURN / ONE CARD, TWO FINISHES
Make it quiet. Then let it shine.
Keep the same title, proportions and ticket cuts. Start with Pearl, Stipple, 25% Grain and 30% Gloss. Save one card face.
Switch to Midnight and Prism. Increase the gloss, move the light, and save another. Compare their mood and readability. Can both finishes belong to the same card family?
WebGL draws the foil material; Canvas 2D draws the ink. A shared path clips the preview and export. CSS provides the preview’s perspective. No drawing libraries are required.
const p = {
x: clamp((clientX - bounds.left) / bounds.width * 2 - 1, -1, 1),
y: clamp((clientY - bounds.top) / bounds.height * 2 - 1, -1, 1)
};
const tilt = { x: -p.y * 12, y: p.x * 16 };
// Move the material highlight from the same input.
const light = { x: p.x, y: p.y };
// Clip the exported face using the preview's path.
context.clip(new Path2D(cardPath), 'evenodd');
Save the HTML starter, open it in a browser and edit it in a text editor. Its styles, cover, geometry, material shader and controls are embedded. A simpler colour preview remains available when WebGL cannot run.
