Holographic Foil Shader Design

A Foil Surface Without Image Textures

Holographic Foil Shader Design is an official OpenDesign example built around a full-viewport WebGL composition. The visible surface combines magenta, teal, green, violet and yellow regions with thin contour-like highlights, producing the appearance of crushed foil rather than a flat color field.

The composition is explicitly introduced as “Thin-film interference over a crushed-foil surface,” while the palette shifts with the viewing angle. That wording describes the intended visual model; the captures verify the rendered appearance and the accompanying interaction prompt, not optical accuracy or GPU performance.

Where This Design Fits

The artifact is most useful as a visual reference for interactive landing-page heroes, generative art studies and creative-coding demonstrations. Its strongest lesson is compositional: a richly animated background can carry atmosphere while a restrained overlay supplies orientation.

The visible label “OPENDESIGN · WEBGL PREVIEW” identifies the example context, and “REAL-TIME · GPU” signals the intended rendering approach. Those labels help frame the work for viewers, but they should not be read as a benchmark or as evidence of a production deployment.

How The Composition Moves

The reading order stays consistent across the three supplied states: the small OpenDesign preview label sits at the upper left, the GPU status sits at the upper right, the large “HOLOGRAPHIC FOIL” title occupies the lower-left area, and “TILT THE FILM ↗” appears near the lower right. This stable overlay lets the background change without making the interface feel like a different screen.

The title uses a heavy uppercase first line and a lighter second line. That contrast gives “HOLOGRAPHIC” immediate weight while leaving “FOIL” visually open against the moving surface. The tradeoff is that the background can compete with the thinner letterforms, so contrast and text placement need checking whenever the shader palette changes.

The shader builds a warped thickness field from six layers of noise, estimates its gradient, and maps a thickness-and-tilt phase into a cosine color palette. Separate ridge and sparkle terms add foil-like glints. Pointer position on both axes supplies the tilt proxy, while elapsed time changes the field. These calculations create the contour-like color islands without an image texture or scene mesh; they are a visual material approximation rather than measured thin-film optics.

Capability Boundaries

The source creates a local WebGL2 canvas and listens for pointer movement, easing both coordinates toward their targets on each frame. It uses those coordinates as a viewing-angle proxy, not physical device orientation or a 3D camera control. “TILT THE FILM” is a static instruction, not a button. The captures show temporal states of one hero and do not establish connected services, stored data, optical accuracy, measured performance, or a historical generation process.