Nocturne — App

Nocturne is an AI sleep-coach app landing page: night-sky blue-black, moon-cream text, one ember accent and a moon-coloured footer. Instrument Serif sets the headings and numerals, Hanken Grotesk everything you read.

The hero is a canvas moon and starfield you can breathe with: hold the button for a 4-7-8 timer and the moon swells, the stars brighten and the page dims. Below it, one night in three acts is a pinned scroll story from dusk to dawn: the moon crosses the sky, the scene clock runs and the widgets fill as you scroll, while the act text stays put and changes with the sky.

Features

• A sleep-score phone mock-up with four callouts and orbiting dots

• Science bento: stats that count up, bars that grow, a hundred dots and a method note

• A manifesto whose words brighten as you scroll

• Dream journal: a CMS list of paper notes, tilted, taped and scribbled

• FAQ: a CMS list of questions, the first one open

• Monthly or Annual switch on two plan cards

• First-light signup with an email form and a Sent state

• Live local time, moon phase and wind-down countdown

• Desktop, tablet and phone layouts, 404 and privacy

• Four code components and three small overrides, the rest native

• Every colour and font is a shared style

Framer Skills

Five ready-made instructions for Framer's AI agent, plus a page showing every colour, font and block:

• /design-system: add pages and sections that match

• /rebrand: your name, colours and copy

• /content: add a journal note or a question

• /effects: edit the sky, the breathing button and the story

• /before-publish: check every page at three widths