README.SYS
The Dream Machine, Explained
How this site was designed & built — every gradient, tilt and sparkle.
← Back to the Machine01
Concept & Inspiration
CHROME imagines Nomadic Owls in the internet's most optimistic era: the early-2000s chrome-and-glass web of Winamp skins, Mac OS 9 bubble windows, holographic Pokémon foil and cursor-trail JavaScript copy-pasted between GeoCities pages. It is nostalgic without being ironic — the liquid-metal owl statue is genuinely the hero, the disciplines really are "apps," and the six live projects really are worth collecting like trading cards.
The brief called for deep violet, chrome silver, hot pink and cyber lime, and for the signature technique to be holographic pointer-tilt cards. Everything else in the page — orbit rings, sticker badges, the Winamp Now Playing widget, the marquee of beliefs — exists to keep that world dense and playful rather than a single hero gimmick surrounded by generic sections.
02
Palette & Type Specimen
Deep Violet
#14001f
the ground — every section floats on this
Violet Panel
#2a1240
bubble-window bodies and holo-card interiors
Chrome Silver
#e8e8f0 → #9a9ab0
the metal gradient driving .chrome-text
Hot Pink
#ff2d95
primary accent — CTAs, glows, foil
Cyber Lime
#c6ff00
secondary accent — links, eyes, foil
Display — headings, chrome text, card titles
NOMADIC OWLS
Body — paragraphs at comfortable reading sizes
We send beautiful things to the Internet.
Pixel — stat labels, stickers, marquee, window titles
SPEED IS UX
03
Techniques Used
.chrome-text — liquid chrome typography
A tall vertical gradient (white → dark → white → dark silver) is clipped to the glyphs with background-clip: text, then background-size: 100% 240% lets the metal bands read as reflective streaks rather than a flat fill. Bevel comes from stacked text-shadow layers — a bright highlight above, a dark shadow below, plus soft pink/lime glow — which still work on transparent gradient-clipped text because text-shadow ignores fill color. A ::after ghost, masked to the same glyph shape, sweeps a pink-to-lime highlight across on a slow loop (.shine) or on hover (.shine-hover) for the "wet metal catching light" effect.
Holographic foil cards — one shared rAF loop
Every .holo-card exposes --rx/--ry (tilt), --angle (conic-gradient rotation) and --mx/--my (highlight position) as CSS custom properties. A single requestAnimationFrame loop in holo.js tracks whichever card is currently hovered, lerps its target values 16% per frame for a springy-but-controlled feel, and writes the five properties straight onto that element — no per-card rAF instances, no layout thrashing. Cards left un-hovered ease their tilt back to flat in the same loop. Touch devices skip the JS entirely and fall back to an ambient CSS-only shimmer (.holo-inner::before) so the foil still lives without a pointer.
Sparkle cursor trail — pooled, not spawned
sparkles.js creates exactly 24 star nodes once, then round-robins through them on pointermove (throttled to ~22fps) instead of creating/destroying DOM nodes per event. Each reuse resets the transform with no transition, forces a reflow (void el.offsetWidth), then re-applies a transition so the browser animates from the reset state — the classic "restart a CSS transition from JS" trick. Disabled outright behind matchMedia for pointer:coarse and prefers-reduced-motion.
Orbit rings — real 3D, not an ellipse-shaped div
Three rings sit inside a container with perspective set; each ring is rotateX(~70–90°) with transform-style: preserve-3d, and its satellite dot lives in a nested .orbit-spin child that also carries preserve-3d. Animating the child's rotate(360deg) composes with the parent's tilt in true 3D space, so the dot appears to travel the visible ellipse rather than sliding along a flat circle that was squashed with scaleY.
Bubble windows — Mac OS 9 × Winamp chrome
Every panel (pillars, disciplines, contact) is a .bwin: a title bar with three inset-shadowed traffic dots and a pixel-font filename, sitting on a body with a subtle inset frame. The raised/pressed illusion throughout the site — including the 3D buttons — comes from pairing two inset box-shadows (light top-left, dark bottom-right) with a real drop shadow; on :active the light/dark pair swaps sides and the element drops 5px, reading as a physical button being pressed rather than just a color change.
Accessible marquee duplication
MarqueeTicker.astro renders the belief/stat list twice back-to-back inside one flex track, then animates translateX(-50%) linearly — at the halfway point the second copy is pixel-aligned with where the first started, so the loop has no visible seam. The whole ticker carries aria-hidden="true" because every belief it repeats is already presented as normal readable text elsewhere on the page (the manifesto's BELIEFS.TXT window) — the ticker is a decorative reprise, not the only copy.
Reduced motion, twice over
A CSS @media (prefers-reduced-motion: reduce) block strips every keyframe animation, hides the hero video/toggle, and freezes .rv/.hl reveals visible — and the inline scripts independently check matchMedia('(prefers-reduced-motion: reduce)') before ever attaching a pointermove listener or calling video.play(). Belt and suspenders: a reduced-motion visitor gets the finished page, just never in motion.
04
Higgsfield Prompts
The two generated assets that anchor the hero, verbatim from the generation scripts.
Higgsfield — image
Liquid chrome metallic sculpture of a stylized owl, highly reflective mirror surface with pink and lime green studio light reflections, floating against deep dark violet background, Y2K aesthetic, 3D render, iridescent highlights, hyperreal, no text
Higgsfield — video (from chrome-owl-statue.png)
The liquid chrome owl statue rotates slowly in place, pink and green studio reflections gliding across the mirror surface, deep violet background, smooth continuous motion, seamless loop
05
Three Iteration Passes
Pass One
First complete build reviewed at five scroll depths, full mobile and the guide route (re-screenshotted after discovering a scroll-reveal artefact in a first, badly-staged capture — a reminder that .rv elements need real scroll to trigger, not just a fullPage grab). The build itself came back clean: hero, orbit rings, bubble windows, holo cards, marquee, Now Playing widget and contact all rendered as intended with zero console errors on both routes.
Pass Two
Real fix: holo cards used fixed min-heights on the name/description so short project blurbs (e.g. "My Wind Turbine Jobs") left an awkward gap before the stat rows. Rebuilt .holo-inner as a flex column with the description as the flexible region and the stats row pinned via margin-top: auto — every card in a row now aligns its Visit Site link to the same baseline regardless of copy length. Complexified: pillar and discipline names now turn liquid chrome (reusing .chrome-text's gradient) on card hover, and their icons scale and glow, so the bubble windows have a reward for interaction beyond the static state.
Pass Three
Nitpick sweep: verified the holo-card fix across all six cards and both grid rows, confirmed :focus-visible outlines are present on nav links, buttons and card links via the shared lime outline rule, re-checked mobile hero and full-page renders for overflow, and ran a final build + screenshot pass confirming zero console errors on / and /guide/.
Designed & built end-to-end by Claude (Fable 5) for Nomadic Owls.
Return to the machine