Step into the immersive darkness of Atelier Lumen’s virtual space, where the visitor’s cursor transforms into a guiding torch. This digital room uniquely balances light and shadow, inviting interaction through proximity and movement. Its signature technique is a dynamic, AI-generated lighting simulation that responds to user input, creating an intimate and physical reading experience that mimics a real-world light installation.
Design Palette and Material Interplay
The visual environment employs a restrained color scheme dominated by deep charcoals and warm ambers, evoking a contemplative atmosphere reminiscent of a curated art space. The interface layers subtle gradients and textured overlays to simulate the tactile quality of glass, metal, and light, all crafted through code-driven visual effects. Typography combines the elegance of Italianana for display headings with the clarity of Manrope for body text, ensuring readability amid the atmospheric visuals. Interaction is centered around a radial gradient veil that acts as a darkness layer, pierced by a simulated torch beam—implemented via CSS masks and gradients—creating an interplay of revealed and concealed elements. The site’s signature interaction relies on a simple yet effective animation loop, easing the user’s pointer position towards a virtual torch point, which then influences the opacity and glow of various visual layers, including floating motes and glass-like cards with reflective glints. This careful orchestration of palette, typography, and motion defines the site’s atmospheric aesthetic and interaction signature.
The project followed a straightforward three-step pipeline: initial build inspired by the guide’s prompt to create a dark, torch-responsive environment; iterative critique focusing on visual clarity, interaction smoothness, and atmospheric coherence; and final certification by an art director ensuring the experience’s immersive integrity. The guide provided explicit instructions for the technical setup, including CSS variables for pointer movement, layered visual effects, and fallback behaviors for reduced motion modes, ensuring a balanced blend of artistic intent and technical robustness.
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 03 of 175, “lumen”):
ATELIER LUMEN — a light installation studio. Fiction: studio portfolio of five light works. Aesthetic: chiaroscuro; darkness as material. Palette: near-black warm charcoal #0d0b09, candle amber #e8a34c, cold white #eef2f5 sparingly. Fonts: italiana (display), manrope (body). SIGNATURE: the cursor is a light source — a large radial-gradient “torch” that follows the pointer (smooth lerp) and REVEALS content via mix-blend-mode / masked layers; text near the light warms in color. Canvas layer of dust motes drifting through the beam. Each installation card is glass (backdrop-filter) that catches the light. On touch devices the light auto-wanders on a slow path. Sections: manifesto hero (mostly dark, light reveals words); five works with specs; process; contact. Unforgettable: you explore the page by carrying light through it.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/lumen/
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.
undefined
Visit the live room → · Browse all 175 rooms
Previously in Wing I
- Room 1: HELIOS — Live Solar Observatory · Station HLX-1
- Room 2: TERRANE — Ridgeline National Reserve Field Guide
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.
Kyglaring Light Kit for LEGO 31212 Milky Way Galaxy Set, Lights Only
Lights Only, 31212 Model Sold Separately: Kyglaring LED light kit is compatible with LEGO 31212 Milky Way Galaxy…
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
OIYN Smart RGBICW LED Corner Floor Lamp – 16 Million DIY Colors, 68+ Scenes, Music Sync, App & Remote Control, Color-Changing Ambient Lighting for Living Rooms, Bedrooms, and Gaming Rooms
Dynamic RGBICW Color Technology：Unleash your creativity with our RGBICW LED floor lamp, offering customizable colors for each segment…
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Seealle 16.1" Touch Table Lamps for Nightstand, 3-Way Dimmable Small Bedroom Lamps for Night Stands, Black Bedside Lamps for Living Room, Kids Room, End Table
【Gently Touch to Adjust the Brightness】Just gently touch on anywhere of the bedroom lamp's body to adjust the…
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
3 Way Touch Sensor dimmer, Touch lamp Repair kit Control Module, Replacement Sensor, Touch Switch, 150Watt.
SAVE TIME AND MONEY: Tired of replacing an entire lamp or over paying for a quick touch sensor…
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
