Guides / Adapt a template / Watches
How to adapt an animated website template for a watch brand
To adapt an animated website template for a watch brand, start from Sandmere Hourglass of Gold Grains, Maison Aurelune: Tourbillon Over Emerald Water, Nocta Dive Watch Take-Apart or the closest fit, keep the hero object, hide chapters that repeat the hero, add condition and provenance details for pre-owned pieces, and apply the watches style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit watchmakers and watch sellers 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
Sandmere Hourglass of Gold Grains
An hourglass of gold grains turns time into the story, a natural fit for restoration and heritage work.
Pick 2 · Pro
Maison Aurelune: Tourbillon Over Emerald Water
A rose-gold movement over water suits a launch page for a fine watch.
Pick 3 · Pro
Nocta Dive Watch Take-Apart
A watch that comes apart on the scrollbar shows craftsmanship layer by layer.
What to change for a watch brand
Keep
- The hero object
- The movement or detail chapter
- The collection grid
- The appointment or inquiry form
Hide
- Chapters that repeat the hero
- Playful effects on a heritage brand
Add
- Condition and provenance details for pre-owned pieces
- Warranty terms
- Service and repair pricing
- A boutique or appointment page
Copy angles
- Sell the movement and the maker before the price.
- Be specific about case size, material and reference.
- Show the service story, because it is why owners return.
Trust elements
- Authentication or inspection process
- Warranty length in plain words
- Named watchmakers
- Return terms
Compliance notes to check
- Do not imply you are an authorized dealer for a brand unless you are.
- Describe pre-owned condition accurately, including any replaced parts.
- Precious metal marking rules can apply to gold cases.
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 Sandmere Hourglass of Gold Grains and works for the other two picks if you change the name and slug. The example client is Brass & Balance, a watch repair and resale shop in Charleston, South Carolina.
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 "sandmere-watch-restoration", 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 "Sandmere Hourglass of Gold Grains" (slug: sandmere-watch-restoration) into a website for a watch brand.
Example client: Brass & Balance, a watch repair and resale shop in Charleston, South Carolina. Replace it with my real business details, which I will give you.
Keep:
- The hero object
- The movement or detail chapter
- The collection grid
- The appointment or inquiry form
Hide:
- Chapters that repeat the hero
- Playful effects on a heritage brand
Add:
- Condition and provenance details for pre-owned pieces
- Warranty terms
- Service and repair pricing
- A boutique or appointment page
Copy angles:
- Sell the movement and the maker before the price.
- Be specific about case size, material and reference.
- Show the service story, because it is why owners return.
Trust elements to include only if I can supply them:
- Authentication or inspection process
- Warranty length in plain words
- Named watchmakers
- Return terms
Style: use the CSS variables and fonts from the Watches style pack. Motion intensity: Medium. Slow, weighty motion reads as quality. Avoid fast spins that make the product hard to inspect.
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.Watches style pack
Dark, warm and precise, like a display case. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Citrine
#d8b47a
Accent
Deep Ember
#1e1710
Surface
Void
#0c0907
Background
Pale Citrine
#f4ece0
Text
Type pairing (Google Fonts)
- Display Cormorant GaramondSpecimen ↗
- Body Work SansSpecimen ↗
Motion intensity: Medium
Slow, weighty motion reads as quality. Avoid fast spins that make the product hard to inspect.
The CSS export includes the Google Fonts import and motion variables.
# Watches style pack, Style Reference > Dark, warm and precise, like a display case **Theme:** dark · **Template:** Watches style pack (https://animatedwebs.com/guides/adapt/watches) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Citrine | `#d8b47a` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Deep Ember | `#1e1710` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Void | `#0c0907` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Pale Citrine | `#f4ece0` | `--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, weighty motion reads as quality. Avoid fast spins that make the product hard to inspect. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Citrine (`#d8b47a`) 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 watch brand?+
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 watch brand site keep, hide and add?+
Keep the hero object and the movement or detail chapter. Hide chapters that repeat the hero. Add condition and provenance details for pre-owned pieces and warranty terms.
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.