How PHAROS - Light & Fog Service Renders SIGNATURE TECHNIQUE With Zero Image Assets

PHAROS - Light & Fog Service — Procedural Optical Rendering — Room 33 of 175: “PHAROS – Light & Fog Service” — visit the live site.

Discover how a completely asset-free, AI-built exhibition captures the essence of maritime vigilance through a dynamic, code-driven lighthouse environment. ‘PHAROS – Light & Fog Service’ stands out for its signature approach: creating a vivid, moving optical scene solely with HTML, CSS, and JavaScript—no external images needed. This innovative showcase demonstrates that even the most complex atmospheric visuals can be achieved through clever procedural coding, making it a masterclass in digital craftsmanship for web design enthusiasts.

The site’s visual language is anchored in a restrained palette of slate, fog greys, warm whites, and hull reds, meticulously balanced to evoke the maritime setting without overstatement. Typography pairs a sturdy serif with a slab font, establishing a hierarchy rooted in weight and case rather than decoration. The signature technique shines in the animated beam, rendered through CSS’s conic-gradients layered with radial bloom effects, all animated via JavaScript for continuous movement. Meanwhile, the fog is procedurally generated on a canvas element, filled with layered noise patterns that drift and evolve, simulating atmospheric haze. Interaction between the beam and content cards is managed through CSS variables that respond to real-time calculations, making each signal change visibly tangible—cards brighten, flares mark updates, and the entire scene feels alive. The lighthouse’s operational signals and patterns are composed within an inline editor, enabling real-time pattern crafting such as flashing or repeating sequences, which the site immediately enacts visually. Everything is built to be self-contained, relying solely on self-hosted fonts and scripts, ensuring performance and privacy. This approach exemplifies how a thoughtful combination of stylized CSS, procedural rendering, and meticulous typographic choices can produce an immersive, asset-free experience that is as functional as it is evocative.

Live view of PHAROS - Light & Fog Service — The room as it renders live — open it in your browser.

The development workflow comprised three stages: first, a focused build that translated maritime signals into code-driven visuals; second, a rigorous critique emphasizing clarity, accessibility, and animation smoothness; and third, a certification step with an art director to ensure the scene’s authenticity and visual harmony, guided by the detailed design manual. This iterative process ensures the final site not only meets technical standards but also resonates with the maritime theme’s integrity.

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

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 33 of 175, “pharos”):
PHAROS — the Light & Fog Service, keepers of a lonely lighthouse. Aesthetic: storm-coast nocturne, official maritime signage. Palette: slate #1d232b, fog grey layers, beam warm white #ffe9b8, hull red accents. Fonts: archivo (signage bold), zilla-slab (keeper’s log). SIGNATURE: full-viewport scene — the Fresnel beam sweeps as a rotating conic gradient through DRIFTING canvas fog (perlin layers); content cards brighten as the beam passes over them. A light-characteristic editor: compose your own pattern (e.g. Fl(3) W 15s) with buttons and the lighthouse OBEYS it live. Shipping forecast in poetic meteorological shorthand; keeper’s log entries. Unforgettable: writing the rhythm of a real light.

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

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.

Experience the complete lighthouse simulation firsthand by visiting the live exhibit. To explore more innovative digital showcases, browse through the full collection of 175 projects at the central hub—each built with a similar commitment to creative coding and storytelling, all without relying on external assets.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

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.