Freeframe
App9 pages · 0 downloads · Free

Drift

A dark, starlit launch site for a sleep app, with a bedtime calculator and sound previews.

Stack: HTML + Tailwindv1.0.0 changelog

DocsLive demo Download .zip591 KB

About this template

Drift is a night-sky website for Nightjar, a fictional sleep and wind-down app. A tabbed feature tour swaps the HTML phone screen, a bedtime calculator suggests times from 90-minute sleep cycles, the sound library plays generated previews and remembers favourites, and a routine builder counts back to lights out. It also has pricing with a monthly/annual switch, filterable reviews, sleep guides, a searchable help centre with a contact form and press kit, and a light theme.

Features

  • Dark-first night sky design with SVG star fields, a glowing moon and soft aurora gradients
  • Five app screens built in HTML, swapped by an accessible tabbed feature tour
  • Bedtime calculator based on 90-minute cycles, with shareable links and saved settings
  • Sound library with filters, search, saved favourites and Web Audio previews generated in the browser
  • Wind-down routine builder that counts back from lights out and remembers your steps
  • Pricing with a monthly / annual switch, correct savings maths and a plan comparison table
  • Reviews filtered by rating and topic with sorting, and sleep guides filtered by topic
  • Searchable help centre, validated contact form and a press kit with copy buttons
  • Light theme toggle that remembers the choice, with no flash on load
  • Scroll reveals, back-to-top button and reduced-motion support throughout

Pages included

Quick start

unzip drift.zip && cd driftopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Drift documentation →

Changelog

  1. v1.0.0

    Added

    • Nine pages: home, features, sound library, bedtime calculator, pricing, reviews, sleep guides, support and press kit, and 404.
    • Dark-first night sky design with SVG star fields, moon artwork, aurora gradients and a light ("dawn") theme toggle.
    • Phone mockups with five app screens (tonight, sounds, smart alarm, wind-down, sleep diary) built in HTML and SVG.
    • Tabbed feature tour on the home page that swaps the phone screen, with arrow-key support.
    • Bedtime calculator with wake-up and bedtime modes, a fall-asleep allowance, shareable links and saved settings.
    • Sound library with category filters, search, saved favourites and 30-second Web Audio previews.
    • Wind-down routine builder that works out when to start and remembers your steps.
    • Pricing with a monthly / annual switch, comparison table and FAQ.
    • Reviews with rating and topic filters and sorting; sleep guides with a topic filter.
    • Searchable help centre, validated contact form, press kit with copy buttons and a privacy summary.
    • Scroll reveals, a back-to-top button and reduced-motion support.

More templates