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.1.02026-11-11
   • Framer edition (new): Nocturne as a remixable Framer project, with every page of the other editions: Home, 404 and privacy. Layout, text, buttons, cards, the pricing switch and the form are native Framer layers, so you can edit them without code. The pinned three-act night story, with the sky, the clock and the widgets changing as you scroll, uses Framer's own scroll effects and a small override for the scene clock and widgets.
   • Code components (Framer edition): Night Sky (the canvas moon and starfield: hero, moon only or stars only), Breathing Button (hold to breathe, the 4-7-8 timer that dims the page), Breathing Phase (the caption and the 4 · 7 · 8 row) and Live Time (local clock, moon phase and the wind-down countdown), each with properties. Two override files drive the count-up numbers, the growing bars and the story scrub.
   • Styles and components (Framer edition): 38 colour styles and 45 text styles named by purpose, plus reusable components (Button, Store Badge, Section Label, Nav, Footer, Callout, Widget, Journal Note, Plan Card, FAQ Item, Billing Switch, Email Button and others). A /design-system page shows every style, component and code component.
   • CMS (Framer edition): the dream journal and the FAQ are collections, so a sixth note or an eighth question is a new item. Every field has a description under its name in the item editor, and Framer's agent reads them too.
   • Framer Skills: five skills for Framer's agent (/design-system, /rebrand, /content, /effects, /before-publish) and an always-on brief.
   • Framer edition differences: the nav glass is a constant tint with no scrolled state, buttons have no label roll and store badges no hover lift, the footer wordmark is solid instead of fading, and a few small texts differ by up to 1 px from the other editions.
2. 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

Nocturne on the blog

• Oct 3, 2026

  How I built 15 website templates with an AI coding agent in a week

  How I built 15 AI-ready website templates with Claude Code in a week: the workflow, the quality bar, and why a template is only the starting point.

  10 min read

Related

• 

  Ashlar

  Real estate

  • HTML
  • React
  • Framer

  Ashlar is a website for a boutique real-estate office that sells a few exceptional houses by introduction. It has five material slabs that open into exterior photographs, a register with an index of houses beside one house sheet (photo switch, facts, and buttons to the house page and the introduction form), a page per house (facts, photographs in a lightbox, a longer story and the advisor who shows it), a draggable terrace view with bearing marks and a dial, a three-step method with a timeline, advisor cards with live local times, and an introduction form that writes a letter as you type.

  Libre Caslon Display / FigtreeFrom $19
• 

  Aurel

  Brand

  • HTML
  • React

  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 $19
• 

  Cistern

  Product

  • HTML
  • React

  Cistern is a launch site for a residential energy-storage product, with a drawn graphite slab and its seam of light, a draggable 24-hour instrument that reads roof, house, battery and grid, a self-sufficiency calculator that suggests a model, three model cards, a FAQ and a free-survey request form.

  Jost / Inter TightFrom $19