Work / Plate 01 of 06
Halcyon One
A product that sells quiet should be quiet: one photograph, one high-contrast serif, and sound that only starts when you ask.
- Year
- 2026
- Status
- Concept
- Brief
- Launch page for a fictional generative-audio instrument
- Medium
- Static HTML, CSS, vanilla JS
- Mobile speed
- Lighthouse 97, 221 KB
- Shown at
- hc-halcyon-v2.pages.dev
- Palette
#0A0908#ECE6DA#5FA8D3
Open the live preview Preview, noindex. A concept for a fictional product: nothing for sale, nothing stored. Sound starts only after you press Enter the room.
Plate 01. Halcyon One, first screen at 1440 pixelsWall painted in the work's own #0A0908
What was built
Art direction and sign-off: Angel. Concept, copy, build, audio engine and QA: AI-agent pipeline, reviewed page by page.
A dark editorial direction: a Didone display serif at high contrast, a single sea photograph, mono labels borrowed from hardware makers, and a generative audio engine that only starts on a deliberate click.
- Cinematic single-page launch site, static HTML/CSS/JS
- WebAudio generative engine: four moods, muted until the first press
- Audio analyser drives a light ribbon on the horizon, with a static fallback
- Product object (dial and slab) drawn in CSS, plus three Codex-generated stills (the slab, a dial close-up, a room)
- Specs table and a demo form that is deliberately non-submitting
Stack Static HTML, CSS, vanilla JS, WebAudio, canvas, self-hosted fonts, Cloudflare
Decisions, with the reasons.
Type
A Didone for the headline, a mono for the specs
Bodoni Moda (optical-size variable, roman and italic) carries the display lines, with the italic used for one word per heading. Instrument Sans handles body copy and Sometype Mono the small spec labels, which is how hardware brands tend to label things. Display tracking sits at -0.022 to -0.025em, as measured on the references.
Rejecteda video hero. It would have cost most of the weight budget for a loop nobody needs.
Weather for the ear
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &?!
Bodoni Moda (opsz, roman and italic) / Instrument Sans / Sometype Mono. Rendered live with the project's own self-hosted font files.
Colour
Never pure black, one warm accent
Backgrounds sit at #0A0908 rather than #000, as on the dark references measured (#08090a, #151515). Text is a warm off-white. Amber and brass appear only on labels, the sun line and the dial.
Rejecteda pure-black ground. It made the photograph look pasted on.
- bg
#0A0908 - bg 2
#100E0C - ink
#ECE6DA - dim
#A39C90 - amber
#E0A458 - brass
#C9A24F - sea blue
#5FA8D3
Interaction
Signature interaction: sound only on request
The page is silent until the visitor presses Enter the room. A WebAudio engine then plays one of four moods (dusk, fog, rain, tide), and an analyser on the output drives the light ribbon on the horizon, so what you see is what you hear. A headless test taps the audio output to assert it is silent before the press and audible after.
How it was started Eight reference sites were measured first (hardware, audio and editorial brands). Takeaways that shaped it: dark grounds near #08090a, display tracking -0.022 to -0.025em, section padding up to 160px, a single easing curve at 0.7s, reveals at 0.3-0.5s.
Figures, captured live.
Screenshots I took from the running preview at 1440 and 390 pixels wide. They are not mock-ups.
Measured, not claimed.
- Largest contentful paint
- 2.5 s
- Layout shift
- 0
- Blocking time
- 0 ms
- Page weight
- 221 KB
- Fonts
- bodoni-italic.woff2 53 KB
bodoni-roman.woff2 46 KB
sometype-400.woff2 10 KB
instrument.woff2 30 KB
Lighthouse 12.8.2, simulated mobile, one run against hc-halcyon-v2.pages.dev/ on 2026-10-02. Lab data, not field data. SEO 66: the failing audit is is-crawlable, because this preview is deliberately served noindex. Re-run before quoting these elsewhere.
Honest limits.
- The hero sea and three more stills (the slab, a dial macro, a room) are AI-generated; the interactive dial and slab are drawn in CSS.
- The audio was verified by an automated output tap (29 checks) and by ear on a laptop, not on a physical phone. The iOS silent switch mutes WebAudio, and the sound layer is procedural: a sampled one was blocked by an API permission.
- A concept: nothing for sale, nothing stored. Kerning on the hero headline and the horizon line were fixed after review; check the live preview for the current state.
Next plate
PebbleLanding page for a fictional freelancer money app
Want a redesign demo of your own site?
Free and private. You only pay if you want the full build.
Try the Redesign Lab- RequestYour site and consent
- AuditBy email, straight away
- Private demoAbout five days
- Optional buildOnly on payment
- Case studyOnly with your yes