Luxury smartwatch Three.js landing page with animated sections

Der Skill Kopieren

![Language-EN](https://img.shields.io/badge/Language-EN-blue)
![Raycast](https://img.shields.io/badge/🚀-Raycast_Friendly-purple)

#### 📖 Description

A detailed multi-step prompt sequence for Gemini 3 Pro to build a luxury smartwatch landing page using Three.js, Anime.js, and Tailwind, then refine it into a multi-section scrolling site with advanced animations and interactions.

#### 📝 Prompt

```
Create one HTML file for a {argument name="product_type_en" default="luxury smartwatch"} page using Three.js, Anime.js, and Tailwind. Make a 3D {argument name="main_object_en" default="watch"} model, a dark textured overlay with a round hole showing the {argument name="main_object_background_en" default="watch on beige"}, and animate the header and big numbers to slide in when the page loads.

Make the page more professional. Replace the static hole with an iris that opens on load. Add a glass dome over the {argument name="focus_area_en" default="watch face"} with reflections, improve metal materials, add mouse parallax so the {argument name="parallax_target_en" default="watch"} rotates with the cursor, and draw time and fitness rings on the {argument name="dial_area_en" default="watch face"}.

Turn the single screen into a multi-section scroll site. When the user scrolls, animate the 3D {argument name="scroll_object_en" default="watch"} to move and rotate to match each section. Keep the 3D canvas and background fixed while text scrolls over them; only the {argument name="moving_element_en" default="watch"} moves.

- fixed canvas: position the canvas
```

#### 🖼️ Example Images

##### Image 1

<div align="center">
<img src="https://cms-assets.youmind.com/media/1764209174368_jdx5gi_6A51eMDR7nvxQOPd.jpg" width="600" alt="Luxury smartwatch Three.js landing page with animated sections - Image 1">
</div>

#### 📌 Details

- **Author:** [Harshith](https://x.com/HarshithLucky3)
- **Source:** [Twitter Post](https://x.com/HarshithLucky3/status/1991474311916580881)
- **Published:** November 20, 2025
- **Languages:** en

**[👉 Try it now →](https://youmind.com/gemini-3-prompts?prompt=Create%20one%20HTML%20file%20for%20a%20%7Bargument%20name%3D%22product_type_en%22%20default%3D%22luxury%20smartwatch%22%7D%20page%20using%20Three.js%2C%20Anime.js%2C%20and%20Tailwind.%20Make%20a%203D%20%7Bargument%20name%3D%22main_object_en%22%20default%3D%22watch%22%7D%20model%2C%20a%20dark%20textured%20overlay%20with%20a%20round%20hole%20showing%20the%20%7Bargument%20name%3D%22main_object_background_en%22%20default%3D%22watch%20on%20beige%22%7D%2C%20and%20animate%20the%20header%20and%20big%20numbers%20to%20slide%20in%20when%20the%20page%20loads.%0A%0AMake%20the%20page%20more%20professional.%20Replace%20the%20static%20hole%20with%20an%20iris%20that%20opens%20on%20load.%20Add%20a%20glass%20dome%20over%20the%20%7Bargument%20name%3D%22focus_area_en%22%20default%3D%22watch%20face%22%7D%20with%20reflections%2C%20improve%20metal%20materials%2C%20add%20mouse%20parallax%20so%20the%20%7Bargument%20name%3D%22parallax_target_en%22%20default%3D%22watch%22%7D%20rotates%20with%20the%20cursor%2C%20and%20draw%20time%20and%20fitness%20rings%20on%20the%20%7Bargument%20name%3D%22dial_area_en%22%20default%3D%22watch%20face%22%7D.%0A%0ATurn%20the%20single%20screen%20into%20a%20multi-section%20scroll%20site.%20When%20the%20user%20scrolls%2C%20animate%20the%203D%20%7Bargument%20name%3D%22scroll_object_en%22%20default%3D%22watch%22%7D%20to%20move%20and%20rotate%20to%20match%20each%20section.%20Keep%20the%203D%20canvas%20and%20background%20fixed%20while%20text%20scrolls%20over%20them%3B%20only%20the%20%7Bargument%20name%3D%22moving_element_en%22%20default%3D%22watch%22%7D%20moves.%0A%0A-%20fixed%20canvas%3A%20position%20the%20canvas)**

---

So wird es eingerichtet Kopieren

Gemini

1. Open Gems → New Gem.
2. Paste the text below into the instructions field.
3. Save. The Gem appears in the sidebar and keeps the instructions
   across conversations.

In Google AI Studio the same text goes in System instructions.

Hat es bei Ihnen geklappt?

Woher es stammt

2025 YouMind OpenLab