# Free perfumery website template
> Free HTML perfumery website template for blind-tasting sessions and a sample set, with a booking form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
This perfumery website template is one free HTML file for an independent perfumer who sells by appointment and by post. It has a blind-tasting opening, six harvest origins, four signature extraits with notes and prices, a six-vial sample set and a booking form, on a near-black ground with cream type. AGENTS.md lets an AI agent adapt it.
- Page: https://8b.com/templates/resin-cabinet/
- Live demo: https://8b.com/templates/resin-cabinet/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/resin-cabinet/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/perfumery-website-template
- Download ZIP: https://8b.com/templates/resin-cabinet/perfumery-website-template.zip
- Template name in the repository: The Resin Cabinet
- At a glance: One 100 KB index.html with its CSS and JavaScript inside, 12 sections, 24 Unsplash photos credited in CREDITS.md, Host Grotesk and Kalnia from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.
## Use it with an AI coding agent
Download the files into the project (Windows PowerShell: `curl.exe`):
```bash
curl -LO https://raw.githubusercontent.com/8bsite/perfumery-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/perfumery-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/perfumery-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/perfumery-website-template/main/CREDITS.md
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. Make this the site for . Replace first the name, the six origins, the four extrait cards and the three people. Keep the section ids, the classes AGENTS.md lists, six origin tiles, four cabinet cards and six vials. Ask for missing facts; never invent prices, hours, addresses or contacts.
```
Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/perfumery-website-template my-site`.
### Perfumery website design prompt for any AI tool
Use this to build an independent perfumery site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design down as decisions, like prompts for other businesses; with the template files themselves, the short prompt above is enough.
```text
Build a one-page website for an independent perfumery that sells by appointment and by post. Audience: people who buy scent by nose and want a quiet, editorial page, not a shop front. Sections in order: opening with an arch photo, six harvest origins, a shelf of the scents, a cabinet of four extraits with three note rows each, an accord photo, resting batches, the noses, questions, a six-vial blind sample set, a booking form, footer. Type: Kalnia, a serif, light 300 for large display lines stepped to the right, 400 for smaller lines; Host Grotesk for body and uppercase buttons. Colours: #141213 near-black ground, #f1eade cream type and light sections, #573726 deep brown for the sample set, #8c5f43 for the opening gradient, #ffffff for the cabinet and footer card, #b48a5a amber used only as thin thread lines. Layout: alternate dark and cream sections, portraits in arches, 4px corners, no drop shadows on flat sections, no purple gradient, no three icon cards, no centered hero with two buttons. Motion: one idea, parting and dealing; things start together, then part or are dealt out as you scroll, and thread lines draw. Respect prefers-reduced-motion by showing a plain stack. Copy: short and concrete. Ask me for extrait names, notes, sizes, prices, origins, session terms, shipping, address and hours; never invent them; leave marked placeholders. One primary action, Book a session, repeated in the bar and the footer. Mobile: check 390px, tap targets 44px, full-screen menu. Done when: no console errors, keyboard focus visible, every placeholder listed.
```
## About
People who search for a perfume website template usually sell scent by nose, so this one shows scent by nose: strips shown unnamed, four extraits with a three-row note list each, and the places the materials come from. As a fragrance website template it suits a niche perfumer, a scent studio with a bench at the back, or a candle and incense maker who takes appointments. The booking request form closes the scroll.
A perfumery website template for Claude Code, Cursor or Codex needs you to hand the agent the facts only the perfumer has: extrait names, notes, sizes and prices, origins and seasons, session terms, batch status, shipping and returns. The demo invents all of them, along with the three people and the address. Update the Noses heading's --len whenever its text changes. Keep the section ids and the six, four and six counts of tiles, cards and vials.
This is a good base for a small shop with a few signature products and a dark, quiet page that tells a story. A jeweller or other maker working to commission may prefer the [goldsmith](https://8b.com/templates/oriel/) template. Two limits matter: the Order the Blind Set button only opens an email, so it is not a perfume store website template with a cart, and the form sends nothing until you connect a service. Without code, 8B's builder is an alternative.
## Design
- Palette: #141213 (near-black: page ground, nav bar once it turns solid, opening second screen, origins, noses and footer grounds, and the text colour on cream and white sections), #f1eade (warm cream: type on the dark sections, ground of shelf, accord, resting, questions and visit, the four tasting strips, the numbered vial discs and the hover fill of dark buttons), #573726 (dark brown: top of the first screen's gradient, ground of the sample set section and backing of the portrait arches), #8c5f43 (mid brown: lower end of the first screen's gradient), #ffffff (white: ground of the cabinet section, the footer card, white buttons and the menu button, the disc behind the number on the shelf, and the thread line on the visit section), #675a50 (muted brown-grey: small print, batch numbers, notes labels, FAQ answers and form placeholders on the light sections), #a99d91 (muted warm grey: secondary text on the dark sections, such as the origin places, the second heading half and the portrait bios), #b48a5a (amber: the thread lines on the cream sections and footer card, and the ring around the number of scents on the shelf)
- Fonts: Kalnia (serif for headings, tag lines, extrait names, the sample set price and form fields; weight 300 for the large display type, 400 for the smaller serif lines), Host Grotesk (sans for body text, small labels, captions and the extrait prices at 400 and 500, and uppercase 500 for the buttons and the status badges)
Display type is Kalnia, set large and light, with lines stepped to the right so each heading reads like a staircase. Dark sections (opening, origins, noses, footer, and the sample set on deep brown) alternate with cream or white ones (shelf, cabinet, accord, resting, questions, visit). Photos sit in arched windows, soft rectangles and a six-tile grid. Hairline amber thread lines wander behind the cream sections, and the footer is a white card on the dark ground.
The first screen is a brown gradient with three split heading lines, two floating photo cards and an arch window, and a dome of near-black ink rises over it. Amber thread lines [draw themselves on scroll](https://8b.com/templates/animated/) across the light sections. Buttons fill from a dot on hover.
## Sections and motion
- **Navigation** (navigation): the name at the left, Origins, Cabinet and Book a session links and a menu button; a full-screen menu with five links, address and hours
- **Nose Before Name** (opening): a dark first screen with a split three-line heading, two floating photo cards, an arch window and a button; then a dome of ink rises over it with four numbered strips. Motion: On load the heading lines rise and the arch and two cards slide in, then the cards float and the arch photo pans slowly; on scroll the first screen stays pinned for about one screen while the heading parts, the cards fly up, an ink dome rises over it and four strips slide in from the centre.
- **Origins Before the Bottle** (origins): six harvest photos in a grid; the stage opens on one filling the screen, which shrinks into its slot while the others fly in. Motion: Pinned for about 1.4 screens: the rose photo fills the stage, then shrinks into the middle slot while the other five tiles fly in from the edges of the stage, turning as they land.
- **No Window, No Sign** (shelf): a text about a room with no window or sign, a booking button and a photo of a curved bench of bottles. Motion: The heading lines rise from a mask and the tag lines settle in from the left on scroll; the amber thread line draws as the section passes.
- **The Cabinet** (cabinet): four extraits dealt one by one out of a stack while the two title words part to the edges. Motion: Pinned for about 2.3 screens: the two title words start together and part to the edges while the four extrait cards are dealt one by one out of a stack, each turning flat as it lands.
- **The Accord** (accord): one photo of resin on bark that splits down the middle and slides apart to frame a finished bottle. Motion: As the frame scrolls in, the resin photo splits down the middle and its two halves slide apart to frame the bottle photo, which settles from a zoomed-in size.
- **Now Resting** (resting): three batches aging in the dark with their status and a thread line. Motion: The heading rises on scroll and a thread line draws behind the three batch rows.
- **Noses** (noses): a giant word Noses, a lead and three portraits in arched windows. Motion: The huge word slides in from the right as you scroll, and each of the three portraits opens from a narrow arch to its full window while its photo zooms out.
- **Questions** (questions): five questions as native with a thread line. Motion: The heading rises, the tag line settles and a thread line draws; the five answers open as native details elements.
- **The Blind Set** (blind-set): the sample set: six numbered vials seen through six round openings that widen into the whole photo. Motion: On scroll six round openings in the photo widen until the whole picture shows, while the numbered discs scale and turn into place.
- **Request a Blind Session** (visit): a booking request form beside address, hours, phone and email, with a thread line. Motion: The two-line heading rises and the tag line settles in on scroll, and a white thread line draws behind the form.
- **Footer** (footer): a one-line description, five links, copyright, address and email, with a thread line. Motion: Only the thread line draws, tied to scroll.
## Good for
- independent perfumery or fragrance studio
- candle, incense or apothecary brand that sells by appointment
- small luxury maker with a few signature products and a sample set
- any business that wants a dark, quiet, editorial look
## Questions
**Is this a free perfume website template I can use for client sites?** Yes. Among perfume website templates free to use, it is a single index.html under the MIT license, so a freelancer can ship it for clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and CREDITS.md lists the 24 Unsplash photos and the two fonts.
**Does the perfume website with notes show a full note pyramid?** Each of the four extrait cards lists notes in three rows, from the first impression to the base, with a number, a name and a 50 ml price. On phones the rows run together, separated by slashes. The scents, notes and prices are invented demo content that you replace with your own.
**Can it sell perfume online as a perfume ecommerce website template?** Not as shipped. There is no cart or payment. The Order the Blind Set button opens an email, and the booking form sends nothing. Point the button to your shop or checkout link, or connect a form service such as Formspree or Netlify Forms.
**How do I give the template to Claude Code, Cursor or Codex?** Download index.html and AGENTS.md into one folder and paste the prompt from this page. If you vibe code the site, the agent should ask for extrait prices, origins, session terms and the address, never invent them. No files? Paste the perfumery website design prompt into Lovable or Bolt, or [hand the files to v0](https://8b.com/templates/for-v0/) in one click.
**What must I keep when I change the text and photos?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes, and the classes AGENTS.md lists. The grid and the scenes are built for six origin tiles, four cabinet cards and six sample vials. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.
**Can I get a site like this without editing code?** Yes, in a different way. [8B's AI website builder](https://8b.com/) designs a new site from a sentence, in its own design rather than this one. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.
## Before publishing
Replace: social preview image, favicon, email address, contact form (sends nothing yet) and phone number, plus the invented demo facts (prices, dates, addresses).
- Book a session link in the header lead to #visit now; point them to your booking page URL if you take bookings elsewhere, or keep it on the request form.
- Book a blind session button in the first screen lead to #visit now; point them to your booking page URL, or keep it on the request form.
- How a blind session works link in the second screen lead to #questions now; point them to keep it, or point it to a page that explains your tasting.
- See if a seat is free button in the shelf section lead to #visit now; point them to your availability or booking page, or keep it on the request form.
- Smell all four at home first: the Blind Set link under the cabinet lead to #blind-set now; point them to keep it, or point it to your sample set product page.
- Order the Blind Set button lead to a mailto: link with the subject "The Blind Set" now; point them to your shop or checkout link for the sample set.
- Send request button of the booking form lead to a script checks name, email and the consent box and shows a thank-you line; nothing is sent (the form has action="#visit") now; point them to a form service (Formspree, Netlify Forms) or your booking system, or remove the form and keep the email and phone.
- The origins and cabinet sections sit in tall scroll tracks with held stages, so on short screens the photos and cards are cramped.
- The two small notes beside the heading are 13 px cream text over the brown gradient and photos; check their contrast again when you change the photos or colours.
- The scenes move large parts (the ink dome, the origins stage, the dealt deck), which can feel heavy on slow phones.
- gsap, ScrollTrigger, SplitText and Lenis load from jsDelivr at the end of the body without defer; if the CDN fails, the scroll scenes and smooth scrolling are missing but every section still shows.
## License
Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).