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.
200 Label Outfitters® VHS Video Tape Face Labels, 20 Sheets
VHS Video Tape Laser – InkJet – Copier Face Labels
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
CRT monitor overlay effects
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
JIARODEY Alien Neon Sign,Dimmable Green Alien Led Neon Lights for Wall Decor Game Room Home Bar Party Bedroom Man Cave Decor,USB Powered Alien Light up Sign Gifts for Kids Teen Boy Room Decor
Unique Alien Design: Illuminate your space with an air of mystery and futuristic charm. Our Alien Neon Sign…
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.
