Three material languages
Spectrum, oil film, and restrained chrome each use a distinct color and blend treatment.
Surface & interaction
Holographic Surface
Direct foil, light, grain, and dimensional response across a polished material. Pointer and keyboard input move the highlight through one bounded update.
A surface that follows attention
Responsive foil without WebGL or an idle pointer loop.
Use the material for premium cards, product artwork, badges, album covers, and interactive hero objects. It reacts only while input changes and resets cleanly.
Bounded interaction
Pointer events are batched into requestAnimationFrame only while input moves; leave, blur, pause, and reduced motion all reset the surface.
Keyboard-accessible light
Focus produces a clear response, arrow keys direct the highlight, and a visible focus ring preserves orientation.
Three-step workflow
How to use the Holographic Surface studio
- Choose the foil
Begin with one of six surfaces covering spectral, dark petrol, chrome, paper, orchid, and copper directions.
- Shape the material
Tune base, accent, highlight, spectrum angle, grain, border, and shadow depth.
- Set the response
Control the maximum tilt and idle drift, then export a reusable interactive fragment.
Questions, answered.
Does it run requestAnimationFrame continuously?
No. A frame is requested only when pointer input arrives, then the handle returns to zero.
Can keyboard users interact with it?
Yes. The exported surface is focusable and arrow keys move the highlight in bounded steps.
What happens when motion is reduced?
Tilt, transition, and foil drift stop, and all input offsets reset to the neutral state.
Does it use WebGL?
No. The material is layered CSS with a small dependency-free input script.