Kenerate AI
Back to library
Luxury smartwatch Three.js landing page with animated sections 1
Gemini 3Web design

Luxury smartwatch Three.js landing page with animated sections

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
Author
@HarshithView original post
Published
Sep 5, 2026

More prompts like this

Generate 40 simple SVG icons with download buttons
Gemini 3

Generate 40 simple SVG icons with download buttons

Generate {argument name="icon_count_en" default="40"} simple and highly versatile icons in SVG format. Be sure to draw them on a canvas. The color should be {argument name="icon_color_en" default="light blue"}. The background should be {argument name="background_color_en" default="white"}. Use line-style icons with a Material Design feel. Add a button that lets users download each SVG icon as SVG data.

@KAWAI
Chinese traditional colors daily web app
Gemini 3

Chinese traditional colors daily web app

Generate a web application that introduces one {argument name="color_system_en" default="traditional Chinese color"} each day (for example: {argument name="example_color_1_en" default="Sky Blue (Tianqing)"}, {argument name="example_color_2_en" default="Crimson (Yanzhi)"}, {argument name="example_color_3_en" default="Dark Green (Dailuo)"}), accompanied by related classical poetry, artifact illustrations, or natural landscapes.

@松果先森
Retro Motorola Fix Beeper typewriter web app
Gemini 3

Retro Motorola Fix Beeper typewriter web app

Please help me create a retro typewriter web application themed around {argument name="device_name_en" default="Motorola Fix Beeper"}. In the center of the page, display a typewriter that can take text entered by the user and generate it as a card, with an effect similar to the slow typing of a typewriter, and allow the card to be dragged to empty areas.

@被减数
AI Hanfu wardrobe virtual try-on app
Gemini 3

AI Hanfu wardrobe virtual try-on app

Generate a Chinese-language AI Hanfu wardrobe application. Use AI face-swapping or 3D body-shape technology. Users upload a photo and can, with one click, "try on" Hanfu from various dynasties ({argument name="dynasty_1_en" default="Tang"}, {argument name="dynasty_2_en" default="Song"}, {argument name="dynasty_3_en" default="Ming"}), or customize hairpins and makeup themselves.

@松果先森
Chinese Twitter KOL leaderboard landing page
Gemini 3

Chinese Twitter KOL leaderboard landing page

As a frontend engineer with a strong sense of aesthetics, create a website landing page for "{argument name="leaderboard_name_en" default="Chinese Twitter KOL Leaderboard"}". The design should be highly polished, with a minimal color palette, dark mode, and high contrast. Fetch the data source from the web. Use Tailwind CSS + HTML5, add animations, and output only the HTML code directly.

@katon
Retro Polaroid-style camera web app
Gemini 3

Retro Polaroid-style camera web app

Please help me create a retro Polaroid-style camera web application. In the lower-left corner of the page, display a camera that can connect to the webcam and show a real-time preview. When the shutter button is clicked, a photo paper slowly pops out from the top of the camera, and the photo develops from blurry to clear. Users can drag the developed photo from above the camera to areas of the page outside the camera, creating a photo-wall-like effect.

@饼干哥哥AGI(2.0)
Keep-inspired Chinese workout course website
Gemini 3

Keep-inspired Chinese workout course website

Build a Chinese “workout course” webpage inspired by {argument name="reference_brand_en" default="Keep"}: include a full-screen athlete hero image, transparent sticky navigation, Chinese capsule-tag categories, and a grid of Chinese course cards. Each course card corresponds to a training program; use the course styles of creators such as {argument name="instructor_examples_en" default="Pamela, Zhou Liuye, Han Xiaosi, Jojie, Liu Genghong"} as references to design Chinese titles and labels for difficulty and duration. When clicking a card, open a course preview video player within the page that strictly matches the card information. Overall, keep the design minimal yet detailed, using smooth scrolling and hover animations, soft gradients, and refined typography to create a high-end Chinese experience. Use Tailwind CSS to implement a fully responsive layout.

@老白(每日干货分享✊)

Some prompts are collected from creators on X. Copyright belongs to the original authors.