THE GUIDE

The concept

Neon Dynasty imagines a Shibuya basement label that pressed synth films between 1983 and 1989, vanished, then resurfaced in a Nakano storage locker. The site treats that fiction like a recovered object: deep black lacquer, exact catalog data, and hot magenta/cyan accents used only when the signal needs to flare. The goal is nostalgia with couture precision, so every retro cue is drawn thin, aligned hard, and held back from parody.

The visual techniques

• Chrome logotype: .cl in styles.css uses layered background-clip:text. A mirrored vertical metal gradient carries the letterforms; the ::before layer repeats content:attr(data-text) and runs the sheen keyframes for a diagonal light sweep.
• Wireframe horizon: initHorizon() in main.js paints stars, seeded mulberry32 mountain ridges, a slatted sun, and a perspective grid on the #horizon canvas. The horizontal lines advance with Math.pow(p, 2.7); pointer input nudges the vanishing point. The rAF loop stops when hidden or off-screen.
• Street signal: .capture-section stages the local street.jpg poster and a compressed drive-loop.mp4 proxy of the generated loop as a full-bleed transfer. initAmbientVideos() pauses it off-screen/hidden, while initSignalCapture() moves the diagnostic scan gate.
• CRT and tracking: .crt stacks scanlines, SVG turbulence grain, and a radial vignette. scheduleTracking() toggles .tracking, sets --glitch-y, and lets .tracking-band perform a clipped one-frame slice.
• Catalog glitch: cloneChannelLayers() duplicates each sleeve SVG into red and cyan feColorMatrix layers. Hover or keyboard focus jitters those clones with stepped transforms.

Generated film material

The cinematic insert begins as a GPT Image 2 still made through Higgsfield: /assets/gen/dynasty/street.jpg, a rain-wet 1986 Tokyo VHS frame with the car and signage baked into the fiction. That still became a five-second Kling 3.0 dolly-forward loop, saved locally as /assets/gen/dynasty/drive.mp4; the shipped page uses drive-loop.mp4, a lighter in-site derivative, so playback and audits stay clean. The video is full-bleed, color-graded with CSS filters, framed by transfer marks, and replaced by the poster for reduced-motion visitors. All other major visuals — horizon, sleeves, cassette, CRT damage — remain code-generated.

Palette & type

Display type is Michroma: wide, mechanical, and credible as 1986 imagining 2086. Catalog data, timestamps, and restoration specs use IBM Plex Mono with tabular numerals. Katakana is set in the local Japanese stack and often turned vertical with writing-mode:vertical-rl, matching tape-sleeve spines.

Reproduce this