Iridescent Foil Sweep

About this text effect

Almost every holographic or foil treatment on the web is a hue-rotate sweep or an evenly spaced spectral gradient, and both read as a rainbow rather than as metal. Real foil gets its colour from thin-film interference, which produces Newton's series — silver, champagne, magenta, cyan, green, gold, violet, back to silver — and three properties of that series are what sell it: the stops are unevenly spaced, none of the colours is saturated to the corner of the gamut, and the sequence returns to a neutral at both ends. Reproducing those turns a gradient into a material. The second decision is how the colour moves. Foil shifts hue with the angle between the surface and the eye, which on screen maps to where the pointer is, and that is a translation along a fixed gradient rather than a rotation of it: an oversized background whose position slides. Rotating the gradient instead swings the entire sheet like a compass needle, which no physical surface does, and it is the giveaway in most implementations that animate an angle. The pointer position is written as custom properties directly on the element rather than through state, because routing a value that changes on every pointer move through React re-renders the subtree sixty times a second to alter one number. The treatment is clipped to the glyphs, and it only reads as foil against a matte dark ground — on a light or busy background it is just a gradient.