Gemini 3Web design

Luxury 3D watch product experience page (Next.js + Three.js)

A long, detailed Japanese prompt for designing a luxury 3D product experience web page for high-end watches, using Next.js, Three.js, React Three Fiber, GLSL, and specific scroll sections and shader requirements.

Prompt

Design a 3D product experience page for a luxury wristwatch.
**Target users:** wealthy customers, watch enthusiasts, and business people aged 30–50.
**Brand tone:** Luxury × Tech (a modern, sophisticated high-end feel).
Scroll experience (5 sections):
Hero section – the wristwatch slowly appears from darkness into light while rotating. Implement holographic effects and Fresnel reflections with custom shaders.
Detail zoom – close-up of the dial. Use GLSL to achieve metallic reflections, parallax mapping, and real-time glossiness.
Mechanism breakdown – the watch disassembles and the internal movement floats in space. Use a displacement shader for an energy-field effect and add glow effects to each part.
Material experience – switch between different material variations. Express metalness, glass refraction, and the matte texture of titanium with PBR shaders in a physically based way.
Ending – the watch reassembles, with an abstract gradient mesh background made with a custom shader. Apply post-processing such as bloom and depth of field.
**Tech stack:** Next.js 15 + Three.js + React Three Fiber + GLSL (custom shaders) + react-postprocessing + Lenis.
Shader requirements:
Fresnel reflection shader (rim-light effect)
PBR material shader (roughness, metallic, AO)
Holographic shader (iridescent interference effect)
Displacement shader (waving and distortion effects)
Custom background shader (gradient noise)
Post-process: Bloom, ChromaticAberration, DepthOfField, Vignette.
Please propose specific numerical values for:
Scroll range of each section (in % or vh units)
Animation parameters (start/end values for position, rotation, scale, etc.)
Easing functions (ease type)
Camera FOV, position, and target values
Lighting settings (intensity, color, position)
Uniform values for each shader (time progression, scroll progress, hue, intensity, etc.).

Author: @Shin@プログラミングチュートリアル View original post
Published: Feb 5, 2026

More prompts like this

Gemini 3

Interactive SVG demo of Tesla FSD road recognition

Use SVG to draw a dynamic, interactive demonstration of how Tesla FSD recognizes roads.

@余温

Gemini 3

Enterprise landing page with interactive responsive design

Generate an enterprise-grade professional landing page for {argument name="business_description_en" default="[DESCRIBE YOUR BUSINESS]"}. Add interactive elements, animations, and make it fully responsive. Surprise me, be creative, and do this step by step.

@God of Prompt

$Raymarched Mandelbulb fractal with audio-reactive particles in Three.js$

Gemini 3

Raymarched Mandelbulb fractal with audio-reactive particles in Three.js

Create a raymarching Mandelbulb fractal in GLSL, surround it with {argument name="particle_count_en" default="12,000"} instanced particles, make it audio-reactive to my microphone, and add Unreal Bloom.

@SRKDAN

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.

@老白（每日干货分享✊）

Gemini 3

Single-file HTML billiards game

Please create a fully functional {argument name="game_type_en" default="billiards game"} in a single HTML file.

@余温

Gemini 3

Douyin recommendation algorithm demo animation

Create a demo animation of the recommendation algorithm for {argument name="platform_name_en" default="Douyin"}.

@松果先森

Gemini 3

Maximalist digital hot dog startup website

Design a maximalist website for a fictional startup that sells {argument name="product_en" default="digital hot dogs"}. I want beautifully animated hero text with shaders that react to mouse hover, with lots of dithering and wavy, groovy gradients.

@ben

Gemini 3

Single-file SVG of an Xbox controller

Create an SVG of an {argument name="controller_type_en" default="Xbox controller"}.

@Singularity

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