concept
SINGULARITY is the meta-site for the full FABLE run: one AI, twenty-five websites, and three judgement passes per site. The page behaves like a final telescope exposure rather than a portfolio recap. The viewer walks through five states of one particle field: the numeral 25, a torus knot, a sphere-grid globe, the word FABLE, and a spiral galaxy. The copy names the premise directly: every world was made with HTML, CSS, SVG, canvas, and WebGL instead of stock media.
The emotional target is black-room finale. Major Mono Display makes the voice ceremonial and slightly uncanny; Epilogue keeps the manifesto readable. The catalogue at the end is intentionally clean, but it sits inside the same galaxy field so the final image reads as an index becoming a constellation.
visual technique
The signature effect lives in main.js. buildFormations() precomputes five target arrays. sampleGlyph() draws text into an offscreen canvas, reads alpha pixels, and turns filled samples into world coordinates. The torus knot uses THREE.TorusKnotGeometry; buildGlobe() constructs latitude and meridian rings; buildGalaxy() scatters three logarithmic arms around a soft core.
The renderer uses one THREE.Points mesh with aFrom, aTo, and aSeed attributes. The vertex shader eases between source and target with per-particle stagger, adds a transit swirl, sizes points by depth, and samples an oil-slick color ramp. formationScalar() maps scroll to a held morph value; frame() updates hue drift, pointer repulsion, and whole-field sway. The loop cancels on document.hidden, and reduced-motion mode lowers particle count and removes heavy drift. The local local-three.js renderer also includes a canvas fallback so audit screenshots show the same formations without WebGL readback warnings.
The surrounding atmosphere is CSS in styles.css: .field-aura lays in spectral pressure, .grain adds procedural SVG noise, .vignette darkens the edges, .spectral clips the ramp into type, and reveal classes choreograph the load.
palette + type tokens
The site sits on #050507, with body text in #b9bcc9 and high text in #edeef6. Accents are spectral rather than balanced: teal #35e0c8, violet #9d6bff, and gold #ffc86b. Display type is Major Mono Display; body copy is Epilogue, both self-hosted from /assets/fonts/.
reproduce this
Prompt an AI agent to build a black, cinematic meta-site with a Three.js additive particle field. Require five scroll-driven morph targets, offscreen-canvas glyph sampling, mathematical geometry targets, spectral background-clip typography, manifesto copy with specific production details, a final mono index grid, self-hosted fonts only, responsive audits at 390, 834, and 1440 pixels, screenshot review, and a written critique pass that lists every problem and fix.