Oneiro

A Surreal design template for a perfume launch.

A launch page for a single scent, in a calm, uncanny Surreal style: one impossible object per section, thin spaced didone capitals, mono captions, long dark space. The sample house, Oneiro, and its first scent, Low Cloud, are fictional; prices and the launch date are samples.

For: Perfume launch
Built with: HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
Pages: 3 designed pages
Themes: Light and dark, following the system, with a switch

Draft listing: this template is finished but still in review before it goes on sale.

At a glance

3 pages: Home, The notes, 404.
Light and dark themes, following the system, with a switch.
Laid out for phones from 390 pixels wide, and for tablet and desktop.
Signature moment: A photographed glass perfume bottle floats in the air with a small cloud on the amber perfume inside and a pale stone moon for a stopper; soft drawn wisps rise out of its neck, and the bottle and words part in depth as the hero scrolls away.
Built with HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step).
Some images are AI-generated (Google Flow), listed with their source in the template.
Use it for client work. Build as many websites and web apps with it as you like, for yourself or for clients. The licence
If it is broken, we fix it within 14 days of your report, or refund you. Sales and refunds

Screens from the template

Oneiro home page, light theme, at 1440 pixels wide — Home

Oneiro home page, dark theme, at 1440 pixels wide — Home, dark theme

Oneiro on a phone, 390 pixels wide — Home on a phone

Oneiro: notes page, dark theme — Notes page, dark theme

Oneiro: 404 page, dark theme — 404 page, dark theme

The 3D moment

A photographed glass perfume bottle floats in the air with a small cloud on the amber perfume inside and a pale stone moon for a stopper; soft drawn wisps rise out of its neck, and the bottle and words part in depth as the hero scrolls away.

What you get

Straight from the template's README, the same file you will find in the repository.

Home (index.html): the floating bottle hero, a one-paragraph statement, three notes in arched windows that step down the page, a full-bleed cloud film with one line, three sizes drawn at true relative scale (pick one), a live countdown to the launch and a launch-list field with error and thank-you states.
The notes (notes.html): each note at length, with a bar showing roughly when in the day it shows.
404 (404.html): "This page evaporated".
Light (bone) and dark (umber night) themes, phone to wide desktop, keyboard friendly, reduced motion respected.

Pages and stack

Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.

Stack

HTML
CSS
ES modules
Motion 14.6.0
anime.js 4.5.0 (no build step)

The licence, in short

One purchase covers every site you build. Read the whole licence

You can

Build as many websites and web apps with it as you like, for yourself or for clients.
Change anything: code, design, copy, colours and layout.
Charge clients for the work and hand them the finished site with its source code.

You cannot

Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.