pager

PG-48 ยท Online course

Aubade

A landing page for an online course: sand on a vibrating metal plate gathers into a new pattern for each week of the syllabus as you scroll, and visitors can tap the plate to scatter it. Then the teacher, how it runs, student work, two prices and questions.

$49 one-time, for one website. Or every template with a pager membership.

Buy AubadeOpen the live preview Screenshot of the Aubade online course website template. The Aubade template on a phone.

Sections

  • Opening: course line and start date, headline, intro, two actions and the plate
  • Four facts
  • Syllabus: six weeks, pinned, with a new sand pattern for each week
  • Teacher: drawn placeholder, bio and credentials
  • How it runs: four cards
  • Student work: three sample projects with drawn charts
  • Prices: self-paced and cohort
  • Questions: five, as native details and summary
  • Last call and footer

In the ZIP

  • index.html, with css/, js/ and fonts/ folders
  • The sand plate, syllabus pin and scroll code, written for this template
  • Syne, Inter and Space Mono font files with their licences
  • Still pictures of the plate, used when 3D is unavailable
  • LICENSES-THIRD-PARTY.md
  • AI-INSTRUCTIONS.md for Claude or ChatGPT
  • README.md for you

The plate, the sand and every chart are drawn in code, so no photos or model files are needed. The enrol buttons are plain links to your checkout or course platform. Opens best on a web server (every host in the instructions is one). The sand plate needs WebGL2; without it, or with reduced motion on, visitors see a still picture of the plate and the syllabus becomes a plain list.

Design

Comes set up as Aubade with clean sans headings, on a #e7e4db background with #141512 text and a #ff3d1f accent. Your AI assistant swaps the name, colours and fonts for yours.

How it works

Buy the template and download the ZIP. Drag it into a chat with Claude or ChatGPT and tell it about your business. It follows the included AI-INSTRUCTIONS.md to change the words, colours, fonts and pictures, then walks you through putting the site online on Netlify or Vercel, both free for small sites. Prefer not to do it yourself? We can set it up and put it online for you.

Similar templates