Nocturne

Screenshots

Signature effect

A canvas moon and starfield you can breathe with (a 4-7-8 hold-to-breathe timer), and a pinned scroll story that runs one night from dusk to dawn in three acts

Changelog

1. v1.0.02026-09-29
   • HTML edition: a dependency-free landing page that opens straight from disk, with a settings block for every effect (the canvas moon and starfield with its 4-7-8 breathing timer, the phone mock-up, the pinned three-act night story, the dawn call-to-action).
   • React edition: the same page as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with copy and demo data in content/site.ts, one CSS Module per section and each effect's settings as typed props.
   • Pages: home, 404, privacy.
   • Contrast. --ember-d is #AD471F (4.57:1 on --moon, was 4.34:1) and the sleep chart's axis labels use --m50 instead of a literal 50% moon. --m50 (tertiary text on dark) is now the moon colour at 54%, not 50%. Small captions now measure 4.84:1 on --indigo (the old value was 4.36:1). The nav glass once you scroll is 84% night, not 72%, so the links stay readable when the bar passes over the light footer.
   • The focus outline is a token. --focus is ember on the dark page and violet inside the footer, instead of a fixed ember outline. The breathing button and the dawn call-to-action controls add a dark halo (--focus-halo) so the ring stays at 3:1 or better over the lit sky and the sunrise gradient.
   • The page is complete without JavaScript. The FAQ collapses only when the script is running (.js), so every answer is open with JS off. The pinned story falls back to three stacked acts with every widget in its finished state, and the manifesto reads at full brightness. The pricing toggle and the email form need script, so they are hidden without it.
   Show all notes

   • Fallbacks for the canvas. The breathing timer runs without the canvas too. If canvas is unavailable or enabled: false, CSS discs and dots stand in for the hero moon, the hero stars, the story moon and the pricing moon. Canvas colours read the tokens (--moon, --haze, --haze-2, --haze-3, --ember) instead of hard-coded values.
   • The breathing button is announced properly. It has a fixed aria-label ("Hold to breathe"). A separate role="status" line (#breatheStatus) announces the phases, so the label can change every second without noise.
   • Intro veil and reduced motion. The dark intro veil is skipped when the visitor prefers reduced motion. The story becomes three stacked acts, the sky draws one still frame, the marquee becomes a wrapped static list, and the breathing timer still works because the visitor drives it.
   • Story times agree. The scene clock now ends at 06:45, matching the Act III heading (the concept ran it to 06:48). The static alarm marker rests at 06:41, where the note says the alarm woke you, instead of at the end of the window.
   • Brand tints follow the tokens. Translucent brand colours are color-mix() of --moon, --night, --haze and friends instead of raw rgba(). The sky gradients, the sun, the phone frame and the paper of the journal notes keep their own literal colours.
   • Self-hosted fonts. Instrument Serif and Hanken Grotesk ship in assets/fonts/ under the SIL Open Font License, with licences. No request goes to Google Fonts.
   • New pages and delivery details. Added 404.html and privacy.html, a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD MobileApplication), a favicon and a web manifest.
   • The hero sky is the only continuous canvas loop. It stops when the hero is off-screen or the tab is hidden. The moon texture is painted once from seeded noise, so there is no image file.
   • The scroll story, the phone and the dawn all ship in their finished state in the HTML. The scripts reset them and replay the entrance.

Questions

Related

• 

  Aurel

  Brand

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $29
• 

  Ferro Type

  Studio

  A loud, orange-and-black type foundry site built around one variable font: a hero word that bends its weight and width under your cursor, a live type tester that writes its own CSS, an axis-by-axis tour, a keyboard-driven glyph inspector and a licence configurator with a working cart.

  Roboto Flex / Roboto MonoFrom $29
• 

  Hearth

  Hospitality

  Hearth is a restaurant site cooked over open fire: an ember canvas and heat-haze hero, a nine-course menu drawn plate by plate, a night-long fire timeline and a seat-map booking flow with gift vouchers.

  Gloock / Work SansFrom $29