Holographic Stickers
A sheet of foil logo stickers in three.js, peeled and gathered on a timeline, with a shader that shifts the foil as the light moves across it.
Why I built it
Foil is hard to fake on a screen. It only reads as foil when the colour shifts with the angle, and most attempts are a gradient that sits still. I wanted to see how close a shader could get, using the laptop-lid stickers of products I admire as the test.
What it is
A sheet of foil stickers on paper, peeled corner by corner and gathered into a cluster on a timeline. On the home page it is a tile that loops.
How it works
three.js, with each logo traced from its SVG and given a foil margin and a paper border. A custom GLSL shader shifts the foil with the viewing angle and adds a fine glitter grain. A seeded timeline peels and gathers the sheet identically every run, and a script renders it headlessly to a 1080p, 60fps clip, so a change is a re-render rather than a re-shoot.
What I learned
Shaders are a design tool, not an engineering one: the whole effect is a few lines about how light should behave. And a seeded, scripted render turns a demo into a build artefact, which is the difference between a thing you made once and a thing you can keep changing.