Ghost Division — The Complete Motion Picture Archive

Discover the AI-Crafted Archive of a Fictional Franchise

Welcome to a digitally fabricated film archive, designed entirely by an AI, that immerses viewers into a clandestine world of classified files and cinematic myth. Its signature move is a cinematic cold open that transitions seamlessly into a detailed, document-style dossier, creating an engaging blend of theatricality and institutional gravitas. This approach transforms a simple web page into a layered storytelling device, simulating a secretive archive that feels both cinematic and authentic.

Design Breakdown: Palette, Typography, and Signature Techniques

The site employs a restrained color palette rooted in black, bone, amber, and red tones, establishing a stark, cinematic mood. Headings mimic stamped steel, rendered with bold, metallic textures, while narrative text uses a compact, legible monospaced font that echoes official documents. The visual hierarchy is reinforced through oversized headlines and small evidence labels, creating a tension reminiscent of classified dossiers. The signature technique lies in blending cinematic effects—such as film gate overlays, grain, and parallax animations—with document-like interactions, including scroll-triggered redactions and reveal effects. These are achieved through a combination of pure CSS animations, SVG overlays, and JavaScript-driven scroll triggers, all without relying on external image assets. Instead, the site leverages code-generated visuals, ensuring a seamless, asset-free experience that feels both tangible and immersive.

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 101 of 175, “ghostdivision”):
GHOST DIVISION — the franchise site for a fictional action-thriller saga (three films, one code name). Aesthetic: blockbuster one-sheet meets classified dossier. Palette: gunmetal black #0a0b0d, redacted-bar black on bone, hazard amber #ffb000, one blood red. Fonts: anton (title cards), archivo (body), space-mono (dossier). SIGNATURE: the hero film (/assets/gen/ghostdivision/hero.jpg + loop.mp4) plays behind a title sequence that assembles like a cold open — letters slam in with camera-shake impacts (CSS keyframes + tiny viewport shake), lens flares sweep, a REDACTED dossier unredacts line by line on scroll (black bars slide off). Film cards for the trilogy (taglines, runtimes, fictional festival laurels), character dossiers with clearance stamps, a “declassified” production-notes drawer. Sound: synthesized sub-boom on section transitions behind a master switch. Unforgettable: the cold-open title slam.

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/ghostdivision/

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.

Streamlined 3-Step Development Pipeline

The site was developed through a three-phase process: initial construction based on a design guide emphasizing signature techniques, followed by rigorous critique to refine cinematic effects and interaction fidelity, culminating in an art director’s certification to ensure it embodies the desired aesthetic and technical standards. This iterative approach is rooted in a comprehensive field manual designed for AI-driven builds, emphasizing minimal assets, code-generated visuals, and accessible interactions, ensuring the final product is both immersive and performant.

The full build notes live in the room’s design guide.

Explore the Archive in Full

Visit the live version of this AI-built fictional archive and browse all 175 entries within its mysterious hub. Experience firsthand how a purely code-driven site can evoke cinematic grandeur and institutional authenticity in equal measure.

Visit the live room → · Browse all 175 rooms

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.

Powered by Thorsten Meyer AI