3D Website Prompt For Claude

Create one complete, self-contained index.html for ORBIT, a fictional watch brand. Return only the HTML, with CSS and JavaScript inline. It must work when opened directly in a browser, with no build step, server, API keys, external assets or dependencies. Art direction: a precision instrument photographed in an architectural gallery. Use warm ivory #f4f0e8, near-black #181818, brushed silver gradients and electric orange #ff5a24. Use system sans-serif for headings and system monospace for specifications. The desktop hero has oversized ORBIT lettering, the headline “Time, taken apart.”, the sentence “A mechanical point of view. Built for everyday motion.” and a large procedural watch made entirely from HTML, CSS and inline SVG. Construct recognizable separate layers: strap, case, dial with twelve hour markers, hands and translucent crystal. Give them convincing depth with perspective, gradients and shadows. Build four complete sections: hero; a scroll-controlled exploded anatomy; specifications; and a reservation panel. In the anatomy section, use a sticky stage and normalized scroll progress to separate the layers, reveal short labels, then reassemble them. Scrolling backward must reverse the sequence smoothly. Avoid scroll hijacking. Use requestAnimationFrame and transform-based animation. Specifications: 40 mm case, sapphire crystal, 5 ATM water resistance, 38-hour power reserve and a fictional launch price of $240. Provide Graphite and Silver finish buttons that visibly change the watch, plus 38 mm and 40 mm size choices. Keep selected states accessible. “Reserve ORBIT” opens a native dialog showing the selected finish, size and price. The form asks for an email, validates it locally and produces the confirmation “Demo reservation saved on this device. No order was placed.” Store only the chosen configuration locally; do not store the email or send requests. Include a close button and restore focus on close. On mobile, keep all content readable and make the watch fit without horizontal overflow. With prefers-reduced-motion, show a static, clearly labeled anatomy and retain every control. Include visible keyboard focus, semantic sections, accessible button names and a footer reading “ORBIT is a fictional product concept.”