PRISM. One input, full spectrum.
The Concept
PRISM stages Nomadic Owls as a white optics laboratory. The metaphor is one sentence long: a single beam — your idea — enters a prism — the agency — and disperses into six spectral services. Everything on the page is built to protect that sentence. The site is lab white and graphite everywhere; the only color permitted is light that has visibly passed through glass. That restraint is the design: when a spectrum does appear (a service underline, a grain tile, the scroll progress bar), it reads as an event, not decoration.
The page is framed like a scientific poster: a hairline border around the viewport, bench-grid rules between sections, and wavelength readouts (λ in nanometres) pinned to the gridlines as annotations. Each of the six services owns a wavelength band from 680 nm red down to 410 nm violet — read in order, their underlines reassemble the full spectrum.
Honestly stated intent: this is a demonstration piece. The spectacle is pre-rendered (AI stills and one video loop) and animated with cheap CSS — the economics of looking expensive while shipping a static page with a few kilobytes of script.
Cited References
-
Wembi
Poster hero inside a visible page border with a frosted 3D glass centerpiece — adapted as the bordered poster hero: a 1px graphite frame around the viewport and around the hero panel, with the dispersion render as the glass centerpiece, plus spec-sheet micro-captions (fig. 1, Specimen NO‑06, n = 1.517).
-
Daylight
Hairline grid with one cell swapped for a gradient tile and sensor readouts pinned to gridlines — adapted as the lab-bench grid strip whose cells occasionally swap for grain-gradient spectrum tiles, and the λ (nm) readouts sitting on every section rule.
-
Hildén & Kaira
Pre-rendered spectacle instead of runtime 3D — adapted wholesale: the hero dispersion is a generated image, animated with a CSS soft-light sweep; the contact caustics are a 316 KB muted video loop instead of a WebGL shader.
Design System
Two neutrals carry the whole interface; six band colors are reserved for dispersed light. Bands are named by wavelength, and each is owned by exactly one service.
- Lab white #F7F7F5 ground
- Graphite #1A1A1C ink
- 680 nm #D92B2B Affiliate Marketing
- 610 nm #E0731F Automation
- 570 nm #B18A00 Search Engine Marketing
- 530 nm #2E9E4F Concepting
- 470 nm #2662D9 Copywriting
- 410 nm #7A3FF2 Lead generation
Unbounded
Display — contemporary wide. Weights 500 / 700. Headlines, wordmark, buttons.
Manrope
Body / UI — weights 400–700. Copy, readouts (tabular numerals for nm values).
Spacing: a 14px viewport frame; sections on a shared 1440px bench with clamp()-fluid gutters; hairlines at rgba(26,26,28,.16) divide everything. Readout labels sit exactly on the rules, knocked out on lab white.
Tech & Motion
Astro v5, fully static, zero client frameworks — one inline script per page. The signature effects, concretely:
- Cursor as light source. A fixed 460px radial gradient of six faint
spectral rings, blurred 14px, blend-mode multiply, lerped toward the pointer at 0.12
per frame in a self-stopping requestAnimationFrame loop. Per-card, a
pointermovehandler writes--mx/--mycustom properties so a band-colored radial highlight refracts through each “glass” cell. - Pre-rendered spectacle. The hero image is static; a soft-light linear-gradient bar translates across it every 7.5s (CSS only) to read as a live light sweep.
- Beam-split transitions. Navigation between / and /guide splits the viewport into six horizontal band-tinted strips that scaleX in with 40ms stagger, then reverse on the next page load. Hash links stay native.
- Spectrum scroll progress. A 3px red→violet gradient bar pinned to the top frame, scaled by scrollY / scrollHeight inside a rAF-throttled listener.
- Discipline. prefers-reduced-motion disables the sweep, cursor light, transitions, reveals and pauses the caustics video; the video also pauses off-screen (IntersectionObserver) and on hidden tabs.
AI Assets
Generated centrally, copied (never regenerated) into the site. Verbatim prompts:
-
dispersion-hero.png
GPT Image 2 (via Higgsfield CLI)
“A crystal glass triangular prism on a seamless white studio background, a beam of white light entering and dispersing into a vivid rainbow spectrum, physically accurate caustics on the white surface, minimal scientific elegance, bright high-key lighting, product photography, no text”
-
caustics-texture.png
GPT Image 2 (via Higgsfield CLI)
“Soft rainbow caustic light patterns cast on a clean white wall, refracted through unseen glass, delicate overlapping spectra in red orange yellow green blue violet, airy bright minimalism, abstract light photography, no objects, no text”
-
glass-elements.png
GPT Image 2 (via Higgsfield CLI)
“Arrangement of laboratory optical glass elements on white: lenses, a prism, a beam splitter cube, each catching thin lines of spectral color at their edges, high-key minimal scientific still life, crisp shadows, no text”
-
caustics-loop.mp4
Kling (kling2_6, via Higgsfield CLI)
“Rainbow caustic light patterns slowly shifting across a clean white wall, refracted through unseen moving glass, delicate spectra sliding and breathing, bright airy minimalism, abstract slow motion light footage, static camera”
How to Reproduce
- Scaffold Astro v5 static (
output: 'static'), no client framework. npm install @fontsource/unbounded @fontsource/manrope; import only used weights.- Copy shared AI assets into
public/assets/; convert stills to WebP (cwebp, q≈80) and re-encode the loop withffmpeg -an -crf 26to ≈316 KB. - Build the identity in one global stylesheet: two neutrals, six band variables, one
--spectrumgradient, hairline rules. - Add the four scripts above (progress, cursor light, reveals, beam transitions) — each a few lines, all guarded by prefers-reduced-motion.
npm run build; verify zero console errors, keyboard walk and both viewports with Playwright.
Designed & built by Claude (Anthropic) for Nomadic Owls. One of ten directions — index at owls-index.pages.dev.