Introducing SINGULARITY: The Final Meta-Site in a Digital Universe
Created entirely through code by an AI, SINGULARITY serves as the ultimate culmination of a sprawling web project—an immersive, cinematic experience that visualizes complex particle states without a single image asset. Instead, it leverages advanced WebGL, SVG sampling, and mathematical geometries to craft a dynamic, black-room finale that feels like a cosmic telescope capturing the universe’s last image.
The Three-Step Creative Pipeline
The site’s development follows a rigorous three-phase process: initially, an AI-driven build stage generates the complex particle formations and visual effects; next, a merciless critique ensures each technical and aesthetic element aligns with the intended cinematic and conceptual goals; finally, an art director certifies the execution, ensuring the experience is both immersive and polished, guided by the detailed principles outlined in the project’s comprehensive guide.
The full build notes live in the room’s design guide.
Decoding the Visual and Technical Interplay
This site’s visual impact hinges on a carefully curated palette of spectral hues—teal, violet, and gold—set against a deep black backdrop, establishing an otherworldly atmosphere. The typefaces are intentionally chosen: a monospace display, Major Mono Display, for a ceremonial tone, paired with Epilogue for readability. The core signature effect resides in main.js, which precomputes five distinct particle formations: from torus knots to globe grids and spiral galaxies. These formations are generated by offscreen glyph sampling via sampleGlyph(), which reads alpha pixels from SVG-rendered text and maps them into 3D space. The render loop employs THREE.Points, blending per-particle attributes such as depth-based sizing, swirl transitions, and color ramps that mimic oil-slick iridescence. Every scroll movement maps to morph targets using formationScalar(), creating fluid transformations between mathematically defined geometries. The CSS layers add atmospheric effects—spectral gradients, noise, vignette—heightening the cinematic feel, all within a responsive design that audits well across various viewports.
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 25 of 175, "singularity"):
FABLE / 25 — the finale. Fiction: the meta-site about this very project: one AI, twenty-five websites. Aesthetic: iridescent particles on black #050507; spectral gradient accents (oil-slick: teal->violet->gold) used through background-clip text. Fonts: major-mono-display (display), epilogue (body). SIGNATURE: Three.js particle field (~40k points, additive blending, custom vertex sizes) that MORPHS between five formations as you scroll: (1) the numeral 25, (2) a torus knot, (3) a sphere-grid globe, (4) the word FABLE, (5) a spiral galaxy — targets precomputed (text formations by sampling an offscreen 2D canvas; geometric ones mathematically), positions eased with staggered per-particle delays, hue drifting along the spectral ramp; mouse adds a soft repulsion field. Between formations, manifesto text about the project (25 sites, 3 passes each, everything generated by code). Ends with an index: all 25 slugs as links (/sites/<slug>/) in a clean mono grid: helios terrane lumen folium kinetika abyssal ukiyo chroma vellum dynasty cartograph resonance noire verse apothecarium bruta stratus reliquary hexadome meridian terminal9 essence kanton paperfox singularity. Unforgettable: the closing shot of the demo video.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/singularity/
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.
WebGL 3D particle visualization kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Experience the Final Cosmic Stage
Visit the live SINGULARITY to witness this AI-crafted universe in action. While there, explore all 175 sites in the hub, each pushing the boundaries of generative web art and code-driven design. Dive into the cosmos of digital experimentation—powered by AI, built with code, and free from stock media.
Visit the live room → · Browse all 175 rooms
Previously in Wing I
- Room 6: Abyssal Station — a 3,800 m descent
- Room 15: Apothecarium — Bitters & Botanical Remedies, est. 1783
- Room 16: BRUTA — Raw Concrete Architecture Collective
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.
spectral typography fonts for web design
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Three.js particle effects software
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
SVG sampling tools for web graphics
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
