Concept
CHROMATIC.SYS is a Y2K liquid-chrome revival for a fictional graphics driver that renders your dreams. The mood target: a 1999 rave flyer that somehow shipped inside Apple's 2001 packaging. Everything is glossy, curved and wet — and every pixel is generated by code. There are no images on this site, only gradients, filters and math.
Liquid chrome
The hero blobs are the classic gooey trick: eleven SVG circles pass through feGaussianBlur (stdDeviation 20), then feColorMatrix multiplies alpha by 22 and subtracts 11, re-sharpening the blurred union into a single wet metaball surface. Each circle is filled with a vertical chrome gradient — bright silver, a hard dark horizon at 50%, silver again — plus a few solid pink/cyan/lime satellites and two pure-white speculars that the blur melts into iridescent hotspots. A requestAnimationFrame loop drifts every ball on two incommensurate sine frequencies (a hand-rolled poor-man's noise), so the mass never repeats and never rests.
Chrome type
The wordmark is real text with background-clip: text over three stacked gradients: a metallic vertical ramp, a translucent holographic sweep, and a near-white specular stripe whose background-position is animated across 360% of the element every 8 seconds — the moving highlight that makes chrome read as chrome. Selectable, accessible, zero images.
Foil, bevels, flares
The Dream Pass tilts with rotateX/rotateY fed by pointer position through CSS custom properties; the sheen is a radial-gradient in overlay blend mode parked at var(--mx) var(--my), with a color-dodge diffraction layer sliding underneath. Values are lerped in JS so the foil feels heavy, and it sways on its own when nobody is touching it. The Win98 windows and the mega-button get their aggressive bevels from stacked inset box-shadows — white lip on top, smoked shadow below, an 9px hard shadow for the button's chin that collapses on :active. The background is a 170vmax conic-gradient rotating once every 150 seconds, plus starburst lens flares built from 1px linear-gradient crossbars, plus feTurbulence grain as a data-URI.
Iteration passes
Pass one built structure and the metaball rig; a screenshot review then tuned blob placement so the chrome never swallows the headline. Pass two made the liquid answer back: pointer coordinates are mapped into SVG space with getScreenCTM().inverse() so the metaballs repel from your cursor on a spring, clicking the hero spits fresh droplets that swell (ease-out-back) and melt back into the mass, and a chrome bead trails the pointer, stretching along its velocity vector. Scroll is choreographed too — lerped parallax on the goo field, a holographic vsync scanline tracking progress, and finishing the download fires a full-viewport mix-blend-mode: screen holo flash. Motion pauses on document.hidden, and prefers-reduced-motion swaps every loop for a composed static pose — the flyer still works stapled to the wall.