luxury-watch

bySfweth .f

Build a complete, premium, cinematic 3D luxury watch website for Beck Watch Co., inspired by high-end luxury watch brands and immersive interactive product websites. Official brand reference: https://beckwatchco.com/ IMPORTANT: Do not create just a static design or a generic template. Build a fully functional, responsive website with real interactive 3D elements, cinematic animations, premium visuals, and working buttons. 1. Design and Visual Identity - Ultra-premium luxury aesthetic. - Deep black background, charcoal surfaces, silver metal, and subtle champagne-gold accents. - Elegant editorial typography and spacious layouts. - Dramatic studio lighting, realistic metallic reflections, glass highlights, and soft shadows. - Sophisticated transitions inspired by luxury automotive and watch campaigns. - Minimal, clean, expensive-looking design. 2. Hero Section Create a full-screen cinematic hero with a large mechanical luxury wristwatch in the center. Headline: “PRECISION, SCULPTED IN TIME.” Subtitle: “Independent watchmaking. Distinctive design. Crafted to be experienced.” Buttons: - EXPLORE THE WATCH - DISCOVER THE CRAFT Add a subtle animated scroll indicator, cinematic lighting, and a smooth entrance animation. The watch must be a genuine 3D object whenever possible, not merely a flat image. 3. Real Interactive 3D Watch Use React Three Fiber, Three.js, and Drei if compatible with the project. Create a detailed 3D wristwatch with: - Round metallic case and bezel. - Sculpted mechanical-style dial. - Realistic hour markers and watch hands. - Reflective glass. - Detailed crown and side buttons. - Metallic bracelet with individual links. - Physically based metallic materials and studio lighting. Implement: - Drag to rotate the watch. - Touch rotation on mobile. - Smooth automatic rotation when idle. - Zoom in and out. - Front, side, and back viewing angles. - Smooth camera movement. - Interactive hotspots for the dial, bezel, case, and bracelet. - Functional lighting controls for cool silver and warm gold lighting. If no external 3D model is available, construct the watch from individual Three.js geometries. Do not substitute a static image while claiming the object is fully interactive. 4. Cinematic Scroll Animation Create a premium scrolling experience using GSAP ScrollTrigger or an equivalent compatible animation library. As the visitor scrolls: - The watch slowly rotates. - The camera moves closer to the dial. - Macro details of the case and bracelet appear. - Text reveals smoothly. - Background lighting transitions subtly. - The watch moves between carefully designed sections. Keep scrolling smooth and avoid excessive animations that reduce performance. 5. Craftsmanship Section Headline: “EVERY SURFACE HAS A STORY.” Create three visual storytelling panels: - Sculpted Dial Architecture - Refined Metal Finishing - Independent Watchmaking Use close-up visuals, elegant text reveals, and subtle parallax effects. Avoid unsupported claims about the brand's actual manufacturing processes. 6. Watch Collection Build a premium product gallery with elegant cards and hover animations. Each card should contain: - Watch image or interactive 3D preview. - Verified model name and available specifications. - A “DISCOVER TIMEPIECE” button. - Smooth transitions and metallic highlights. Use verified product information from the official website. For fictional concept models, clearly label them as concepts rather than actual products. Do not invent prices or stock availability. 7. Brand Story Create a cinematic editorial section about independent design, attention to detail, and the relationship between engineering and artistry. Use large typography, alternating image and text layouts, dark backgrounds, and refined scroll transitions. 8. Contact Section Headline: “DISCOVER YOUR NEXT TIMEPIECE.” Subtitle: “Explore the collection or contact the team to learn more about availability.” Button: “CONTACT US” Link the button to the verified official contact page. Do not invent email addresses or phone numbers. 9. Technical Requirements - React and TypeScript. - Tailwind CSS for styling, if supported. - Three.js and React Three Fiber for the 3D scene. - GSAP or Framer Motion for animations. - Responsive desktop, tablet, and mobile layouts. - Functional navigation and CTA buttons. - Optimized 3D rendering, textures, and loading. - Loading screen with a premium progress indicator. - Mobile touch controls. - Accessible controls and reduced-motion support. - Graceful fallback for devices without WebGL support. - Clean, reusable components and maintainable code. 10. Final Quality Check Before finishing: 1. Run the website and fix compilation errors. 2. Test that the watch rotates when dragged. 3. Test zoom, camera views, lighting controls, and hotspots. 4. Verify every navigation link and button. 5. Check the mobile layout and touch interactions. 6. Fix broken assets and runtime errors. 7. Ensure the design looks premium rather than like a generic AI-generated website. Build the actual working website now. Do not stop at a plan, explanation, or static mockup. Implement the complete experience in the project and verify the main interactions work.