Halcyon Ring

Sleep-science wearable — breathing ring + flowing dusk gradients.

Live demo  ·  Build notes  ·  More templates

Use this template — copy the source into a new project:

npx degit bswxyz/halcyon-ring my-app

A sleep-science wearable landing site — a titanium smart ring that reads sleep stages, HRV and temperature, and coaches you toward better sleep — part of the Parable 25 design showcase.

---

The concept

Halcyon is a screenless titanium ring that measures your night the way a sleep lab would and then says very little about it — one honest score in the morning, one gentle suggestion at night. The site had to feel like the product: an ambient dusk that drifts like weather, a hero ring that doubles as a 4-7-8 breath guide, and a morning report built on the patterns shipped sleep apps (Oura, Fitbit, Eight Sleep, WHOOP) have already taught people to read — a score dial with its contributing factors, and a hypnogram of the night. Voice: gentle, unhurried, science-grounded. ("Wake with the light you were promised.")

Design system

• Palette (dusk): --bg:#141026 indigo base · --ink:#efe9f4 · --dim:#b4a9c4 · --faint:#6f6683 · --rose:#e5a9b0 · --indigo:#6d6ae0 (+ #8f8cec soft) · --gold:#e8c68a · --line:rgba(239,233,244,.10). The background flows indigo → rose → gold like the last minutes of a sunset; stage colors in the hypnogram reuse the same four hues so the chart is the brand.
• Type: Instrument Serif (display and quotes — soft, humane, italic for emphasis) · DM Sans (rounded body) · DM Mono (every metric, kicker and axis label). Google Fonts.
• Signature motion: one long, soft in-out curve — cubic-bezier(.5,.05,.15,1) — at 1.3s and slower, everywhere. The breathing ring runs a 19-second 4-7-8 cycle on an easeInOutSine; reveals, the dial fill and the counters all move at the tempo of a slow exhale. Nothing snaps.
• Soft geometry: 20px radii, translucent blurred panels, generous whitespace, a one-shot starfield fading out below the fold.

Stack

• Plain HTML / CSS / vanilla JS. No framework, no build step, no three.js, no GSAP.
• Canvas 2D for the flowing dusk gradient (rendered at 14% scale and stretched — the upscale is the blur) and the static starfield.
• Inline SVG for the hypnogram, the 270° score dial and the titanium ring render, so the whole site ships zero image files.
• Native requestAnimationFrame + IntersectionObserver + CSS transitions carry all motion.

Running locally

No install. Any static server works because all paths are relative:

git clone https://github.com/bswxyz/halcyon-ring
cd halcyon-ring
python3 -m http.server 8000      # or: npx serve .
# open http://localhost:8000

There is nothing to build. Edit index.html / styles.css / main.js and refresh.

Structure

index.html          the page — hero (breathing ring), sleep score (dial + contributors +
                    hypnogram + coach card), the ring (SVG render + spec cards), science
                    (counters + quote), pre-order CTA, footer
styles.css          all styling — design tokens live in :root at the very top
main.js             dusk canvas, starfield, 4-7-8 breath clock, dial/counter animation, reveals
guide/index.html    the "how it was built" write-up (self-contained, styled to match)
.nojekyll           tells GitHub Pages to serve files as-is

The hypnogram's twenty <rect> bands were generated from a hand-built 473-minute night; the legend numbers (7h 18m asleep · 93% efficiency · REM 26% · deep 23%) are the true totals of that geometry, so chart and caption always agree.

Demo vs. real — what a production version would need

This is an intentionally-scoped design showcase. What's mocked/static today:

• There is no ring. No hardware exists — the titanium ring is an SVG render, and the specs (4 g, 7-day battery, ±0.01 °C thermistor, 10 ATM) are plausible fiction, not measurements.
• "Last night" is authored, not sensed. The hypnogram, score (87), HRV-adjacent contributors and coach recommendation are one hand-built realistic night. A real product needs on-ring PPG + temperature + accelerometer capture, a validated staging model, and a companion app.
• The beta claims are invented. "1.4M nights", "94.2% agreement with PSG" and Dr. Mara Ellison are fictional. Shipping those numbers for real requires an actual polysomnography validation study — and shipping any health claims requires regulatory review (FDA wellness guidance, CE marking, etc.).
• Pre-order is a styled link. A real flow needs commerce, sizing-kit logistics, and accounts.
• The coach is one static card. Real guidance = a recommendation engine over longitudinal data, with the restraint the copy promises.

What's real and reusable as-is: the flowing-dusk canvas technique, the 4-7-8 breath-guide component (with its pause control and reduced-motion/screen-reader behavior), the staggered-SVG hypnogram pattern, the score-dial + contributors layout, and the full responsive / reduced-motion / keyboard / no-JS layer.

License

MIT. Design & build by Parable. All visuals are procedural — no image assets were used.