Discover the Digital Time Capsule of NEON DYNASTY
Imagine a clandestine Tokyo VHS label from 1986, unearthed and meticulously reconstructed by an AI. This site captures that essence through a signature layered visual technique: a chrome-embossed logotype combined with animated horizon and CRT overlays, creating an immersive retro-futuristic atmosphere. The standout feature is the site’s dynamic horizon canvas, which employs real-time procedural rendering to evoke a rain-soaked Shibuya street and a neon-lit skyline, all synchronized with subtle signal glitches. This approach transforms a static archive into a living homage to vintage media, achieved through precise layering and interactive effects.
From Concept to Certification
The site’s creation followed a three-stage pipeline: initial build leveraging layered CSS, canvas rendering, and SVG manipulations; a rigorous critique phase to refine visual authenticity and performance; and a final review by an art director to ensure the nostalgic yet precise tone was maintained. This process was guided by a dedicated design guide that emphasizes subtlety over parody, ensuring each retro element aligns accurately with the fictional Tokyo VHS scene. The result is a nuanced digital artifact that balances technical sophistication with aesthetic restraint, all built solely with HTML, CSS, and JavaScript.
The full build notes live in the room’s design guide.
Decoding the Visual Technique
The design hinges on a meticulous palette and layered typographic effects to evoke nostalgia without parody. The logotype uses a chrome gradient achieved via layered CSS background-clip:text, with a mirrored vertical metal gradient that simulates a reflective sheen. Overlaid pseudo-elements animate a diagonal sheen sweep, reinforcing the chrome aesthetic. The horizon is rendered on an HTML5 canvas, where procedural code draws starfields, mountain ridges, and vanishing perspective grids, all responsive to user input. The site’s glitch effects—like SVG clone layers with color matrices—simulate analog distortion, adding authenticity. The palette’s strict use of black, magenta, cyan, and chrome silver ensures cohesion, with typefaces like Michroma for headlines and IBM Plex Mono for data, mirroring the 1986 tech aesthetic. The entire interaction is optimized for reduced motion, pausing animations gracefully when the tab is hidden.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 10 of 175, “dynasty”):
NEON DYNASTY — Tokyo 1986 video label. Fiction: a lost VHS label re-issuing synth films. Aesthetic: refined retro-future — NOT cheesy: deep black #060409, hot magenta #ff2e88 and cyan #29e0ff used surgically, chrome. Fonts: michroma (display), ibm-plex-mono (catalog data). SIGNATURE: chrome logotype via layered CSS background-clip:text gradients with animated sheen sweep; full-bleed canvas wireframe horizon (perspective grid scrolling toward mountains, classic outrun but drawn thin and elegant, parallax on mouse); CRT treatment: scanline overlay + subtle barrel vignette + occasional single-frame “tracking” glitch (clip-path slice) every ~7s; VHS timestamp corner (REC dot, counter running). Tape catalog: 6 films with katakana subtitles, runtime, cat number; hover = cover glitch-shuffles RGB channels. Unforgettable: nostalgia executed with couture precision.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/dynasty/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
Explore the Retro Futurescape
Visit the live site to immerse yourself in the reconstructed world of NEON DYNASTY. While you’re there, browse through the entire collection of 175 curated sites at the project hub, each crafted with a similar dedication to authentic digital nostalgia.
Visit the live room → · Browse all 175 rooms
Previously in Wing I
- Room 6: Abyssal Station — a 3,800 m descent
- Room 8: CHROMA — Laboratory of Colour Perception
- Room 4: FOLIUM — A Living Herbarium
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
300 Label Outfitters Printable White VHS Spine Labels for Laser or Inkjet – 20 Sheets
- Compatible with Laser and InkJet printers: VHS spine labels for laser or inkjet
- Template available upon request: Email us for a label template
- High sheet count: 20 sheets produce 300 labels
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
UFO Neon Sign for Wall Decor Alien Spaceship Mountain Neon Sign Dimmable Moon LED Neon Light Signs Light Up Sign for Bedroom Kids Space Game Room Decor Beer Bar Nightclub Shop Gift
- Unique UFO Design: Features a spaceship, mountain, and moon shape
- Bright and Eye-Catching: Adds brightness and interesting atmosphere to rooms
- Safe and Durable Materials: Made of acrylic and LED with long lifespan
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
layered CSS animation tools for web design
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
