Aurelis

Fragrance / beauty brand with a live WebGL aurora hero.

Live demo  ·  Build notes  ·  More templates

Use this template — copy the source into a new project:

npx degit bswxyz/formwork-aurelis my-app

Live demo → https://bswxyz.github.io/formwork-aurelis/ · How it was built

A house of scent, rendered as living light: a full-screen fluid-noise aurora that never repeats.

A free, MIT-licensed website template. Good for: perfume & beauty brands, candle makers, boutique cosmetics, any sensory product. The demo brand ("AURELIS") is fictional — every word and colour is meant to be replaced with yours.

The signature technique

• Hand-written WebGL fragment shader — domain-warped fractal noise (fBm) flowing through a three-colour palette
• Masked headline reveal, scroll reveals (GSAP), custom cursor, animated film grain
• Product cards with per-card gradient glows and a 'scent spectrum' hover strip

Use this as your own site

This repo is a template — everything is plain HTML/CSS/JS with relative paths, so it works under any repo name with zero configuration.

1. Click Use this template → Create a new repository (top of this page). Name it whatever you like — my-site, portfolio, anything.
2. In your new repo: Settings → Pages → Build and deployment → Deploy from a branch, then pick main / / (root) and save. (CLI: see below.)
3. Wait ~1 minute. Your site is live at https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/.

Prefer the command line?

gh repo create my-site --template bswxyz/formwork-aurelis --public --clone
cd my-site
gh api --method POST /repos/YOUR-USERNAME/my-site/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

No build step, no dependencies to install — edit the files, push, done. The only external requests are Google Fonts and (where used) pinned CDN copies of GSAP/three.js.

Customize it

• Aurora colours: edit the three vec3 palette stops (A, B, C) inside the shader in main.js
• Brand palette & type: everything lives in the :root variables at the top of styles.css
• Products: duplicate a .card in index.html and set its --a/--b/--c glow colours inline

The /guide/ page documents the signature technique in depth (with code) — keep it, rewrite it, or delete the folder entirely.

Files

index.html        the page
styles.css        all styling (design tokens in :root at the top)
main.js           the signature effect + motion
guide/index.html  how-it-works write-up (optional — yours to keep or delete)

Built-in quality

• Works with JS disabled or a CDN failure (content is never permanently hidden)
• Respects prefers-reduced-motion; keyboard focus styles throughout
• Canvas/WebGL feature-detected with graceful fallbacks; devicePixelRatio capped for performance
• Responsive at phone / tablet / desktop widths

License & credit

MIT — free for personal and commercial use, no attribution required (a link back is always appreciated). Part of FORMWORK — a collection of 25 free website templates: the full gallery →