# Luxury watch that comes apart on scroll

> A dark site for VALÈRE, a made-up Geneva watchmaker, where one 3D watch comes apart layer by layer as you scroll, then gives way to photo sections. Fable 5.1 built it in Claude Code from a short freestyle prompt, with the watch modeled and textured in code.

- Kind: Website
- Live website: https://fable51.kaschnai.ch/
- Page: https://meetreference.com/v/scroll-built-luxury-watch-site-three-js/
- Ready-to-use agent handoff: https://meetreference.com/v/scroll-built-luxury-watch-site-three-js/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/scroll-built-luxury-watch-site-three-js/prompt.txt
- Authorship: Not stated
- Made with: Claude Code
- Model: Claude Fable 5.1
- Built with: Three.js, GSAP, Lenis
- Style: 3D sites; three.js, luxury, watch, exploded view, scroll animation, dark, serif, product page
- Shared by u/Commercial_Yam_4712 in r/claude (Reddit), Sep 2, 2026: https://www.reddit.com/r/claude/comments/1w5iru7/fable_51_did_this_with_1_prompt/
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: Tailscale, if you keep the line asking the agent to serve the result over it.

## Recreating this website

These are the creator's published instructions, unedited.

To adapt it: Replace "Fable 5.1" with the model you're testing and "a realistic $1 million website mockup" with a brief of your own, such as a product launch. Drop "Serve the result via Tailscale" unless you use it.

## Prompt

```text
Show off the full potential of Fable 5.1 in web UI design by creating a realistic $1 million website mockup. Feel free to use all the typical modern techniques that YouTube tutorials and Reddit power users love to flex when demonstrating an AI model's web design chops—Three.js, real stock photos, videos, authentic logos, etc. Surprise me: make something truly high-end, not generic AI slop. Serve the result via Tailscale, and make sure it's fully mobile-optimized since I'll be viewing it on my phone.
```

## What it looks like

Written by Reference from the recording frames, not by the creator.

A black page where a silver watch with a blue sunburst dial turns and separates into its bezel, crystal, dial, and movement, followed by photo sections on watchmaking and a closing VALÈRE wordmark.

- Color: Black, polished silver, and steel blue for the watch; pale blue-grey panels; brass and red jewels in the movement photos.
- Type: A classical serif for headlines ("Time, kept at altitude.", "Twelve hands, one calibre."), italic serif for a quote, and small sans-serif for labels and specs.
- Framing: 16:10. The watch sits right of a left-aligned headline, then moves to the center as it comes apart, with thin leader lines to labels such as Polished bezel and Calibre VL-01. Later sections are a full-bleed photo, a three-photo grid, and a spec table.
- Structure: Hero, the watch turning, the exploded view labeling each layer, a move into a cloudy sky, the movement close-up, a craft gallery with the quote "We do not finish a movement because someone will see it", the spec sheet, "Three references.", and a footer with the wordmark, boutique times, and an email field.

Storyboard, nine frames spread across the recording: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/storyboard.webp

- Frame 1 at 1.7s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f1.webp
- Frame 2 at 5.2s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f2.webp
- Frame 3 at 8.6s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f3.webp
- Frame 4 at 12.0s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f4.webp
- Frame 5 at 15.5s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f5.webp
- Frame 6 at 18.9s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f6.webp
- Frame 7 at 22.4s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f7.webp
- Frame 8 at 25.8s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f8.webp
- Frame 9 at 29.2s: https://meetreference.com/media/scroll-built-luxury-watch-site-three-js/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Reported spend: Under 1% of the weekly limit on a Max 20 plan, according to the creator
- Notes: The creator says the prompt was freestyle, written without much thought, that they didn't let the model plan first, and that they spent under five minutes on it themselves. Their build notes: the watch is fully procedural (25 geometries in 7 layers, every texture drawn on a canvas at runtime, no 3D model or image files), on three.js 0.185 with GSAP ScrollTrigger and SplitText and Lenis, set in EB Garamond and Hanken Grotesk. Commenters said it resembles a YouTuber's 3D watch-site test, and the creator agreed the prompt's line about YouTube tutorials likely pulled that in.

> the prompt was fully freestyle and far from "rocket science"
> (u/Commercial_Yam_4712)

## Links

- Visit site: https://fable51.kaschnai.ch/
- Original post: https://www.reddit.com/r/claude/comments/1w5iru7/fable_51_did_this_with_1_prompt/
- Creator's build notes: https://www.reddit.com/r/claude/comments/1w5iru7/fable_51_did_this_with_1_prompt/p7g6vhe/