Guides / Adapt a template / Perfume
How to adapt an animated website template for a perfume house
To adapt an animated website template for a perfume house, start from Azur Perfume Bottle That Floats, Pours and Dives, Ambrette Perfume House, Lunelle Glass Magnolia Perfume or the closest fit, keep the hero bottle, hide chapters without a product, add notes pyramid for each scent, and apply the perfume style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit perfume houses and fragrance brands best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Azur Perfume Bottle That Floats, Pours and Dives
A flacon that tilts to pour and swims a tunnel of light suits a bold launch.
Pick 2 · Pro
Ambrette Perfume House
A bottle turning in golden dust tells a scent story for a heritage house.
Pick 3 · Pro
Lunelle Glass Magnolia Perfume
A glass flower opening on black suits a floral or niche fragrance.
What to change for a perfume house
Keep
- The hero bottle
- The scent notes chapter
- The shop grid
- The sample set button
Hide
- Chapters without a product
- Effects that hide the bottle label
Add
- Notes pyramid for each scent
- Sample or discovery set
- Shipping and returns
- Ingredient list
Copy angles
- Describe a scent with notes and a place, such as cedar and rain on a Vermont porch.
- Offer a sample first.
- Show the bottle at real size.
Trust elements
- Ingredient and allergen information
- Real reviews
- Return terms on opened bottles
- Maker details
Compliance notes to check
- Cosmetic and fragrance labeling rules apply to ingredient lists.
- Perfume can be restricted in shipping because it is flammable.
- Avoid comparing to brand names in ways that imply affiliation.
- Avoid health claims for scents.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Azur Perfume Bottle That Floats, Pours and Dives and works for the other two picks if you change the name and slug. The example client is Cedar & Salt, a small-batch perfumer in Portland, Maine.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "azur-perfumerie", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Azur Perfume Bottle That Floats, Pours and Dives" (slug: azur-perfumerie) into a website for a perfume house.
Example client: Cedar & Salt, a small-batch perfumer in Portland, Maine. Replace it with my real business details, which I will give you.
Keep:
- The hero bottle
- The scent notes chapter
- The shop grid
- The sample set button
Hide:
- Chapters without a product
- Effects that hide the bottle label
Add:
- Notes pyramid for each scent
- Sample or discovery set
- Shipping and returns
- Ingredient list
Copy angles:
- Describe a scent with notes and a place, such as cedar and rain on a Vermont porch.
- Offer a sample first.
- Show the bottle at real size.
Trust elements to include only if I can supply them:
- Ingredient and allergen information
- Real reviews
- Return terms on opened bottles
- Maker details
Style: use the CSS variables and fonts from the Perfume style pack. Motion intensity: Medium. Slow glass and dust motion only. Keep purchase controls static.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Perfume style pack
Dark, velvety and golden. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Citrine
#d6a95a
Accent
Void
#1b1410
Surface
Void
#070504
Background
Pale Citrine
#f5ebdc
Text
Type pairing (Google Fonts)
- Display Cormorant GaramondSpecimen ↗
- Body Work SansSpecimen ↗
Motion intensity: Medium
Slow glass and dust motion only. Keep purchase controls static.
The CSS export includes the Google Fonts import and motion variables.
# Perfume style pack, Style Reference > Dark, velvety and golden **Theme:** dark · **Template:** Perfume style pack (https://animatedwebs.com/guides/adapt/perfume) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Citrine | `#d6a95a` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Void | `#1b1410` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#070504` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Pale Citrine | `#f5ebdc` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** Cormorant Garamond, Cormorant Garamond 600 - **Body:** Work Sans, Work Sans 400 ## Motion - Intensity: Medium. One scroll-driven hero effect, simple reveals below it. - Slow glass and dust motion only. Keep purchase controls static. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Citrine (`#d6a95a`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond Cormorant Garamond + Work Sans
Questions
Which template is best for a perfume house?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should a perfume house site keep, hide and add?+
Keep the hero bottle and the scent notes chapter. Hide chapters without a product. Add notes pyramid for each scent and sample or discovery set.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.