Nocturne - App Framer Template

About this template

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