Одно фото — 3D-модель: UI-моушн с AI-сферой

Ask me for: (1) the product and its real interface copy (default: Wandy3D, wandy3d.com, an AI that turns one photo into a textured 3D model; use only strings that exist in its UI: "Upload a photo", "Drop to upload", "Textures" 1K / 2K / 4K, "Polygons" 10K–1M, "Generate", the progress rail "Start · Shape · Texture · Finish" with its step lines, "Model ready", "Drag to turn it", "GLB · FBX · OBJ · USDZ · STL", "Download GLB", "GLB is ready"); (2) one input photo and the GLB the product really made from it (default: the sneaker photo and sneaker.glb in ./assets; never show a model the product did not make, never invent numbers, speeds or user counts); (3) the palette (default: warm off-white canvas #F2EDE6, white cards, pure black/white UI; the orb is the only coloured thing: molten amber #E8A33D → coral → violet); (4) the music (default: compose an original 8-bar loop at 120 BPM in numpy, plus synthesized UI sounds; nothing downloaded). Use AskUserQuestion, at most 4 questions per round, recommended option first. If I answer "defaults", stop asking.

Make a Dribbble-grade UI-motion film, 16 s, 1440×1440, 60 fps, a seamless loop, for an AI that turns one photo into a 3D model. A single white card carries the whole story and never cuts: every state is the same element changing size, corner radius and content. The hero is a GLSL "AI orb", a fluid, breathing, iridescent blob that lives outside the card's content as the continuity element and changes job: idle hero → shrinks into the upload pill → sits beside "Generate" → swirls faster while the model is being made → becomes the knob of the download swipe → blooms when the file is ready → grows back into the idle hero. A cursor causes every change with real clicks and drags. The photo and the 3D model are real: the photo is dropped in by hand, dissolves into points that rise into 3D, and the real GLB, rendered live with Three.js, turns in the card. Type: Hanken Grotesk for UI, JetBrains Mono for numbers and file formats. Springs everywhere, at most a hint of overshoot; a virtual camera zooms so every state fills about 70 % of the frame; the orb pulses lightly on every beat; the last frame is the first frame. Banned: bouncy easing, particle bursts, glows or gradients on UI chrome (the orb, the photo and the model are content, not chrome), mismatched icon strokes, dead time, stock-template looks.

120 BPM, 8 bars = 32 beats = 16 s; beat n lands at (n−1)·0.5 s and something happens on every beat:

| Bar | Beat 1 | Beat 2 | Beat 3 | Beat 4 |
|---|---|---|---|---|
| 1 | Orb idle at hero size with a soft floor shadow, cursor resting lower right | Cursor glides in; hover, the orb leans toward it | Click: the white shape stretches out of the orb into a pill, the orb shrinks into its left end | "Upload a photo" (with an upload icon) fades in |
| 2 | Cursor leaves the frame to the right | It comes back carrying the real photo as a tilted file card | Over the pill: copy swaps to "Drop to upload", the pill swells and shows a dashed drop outline, the orb wobbles | Release: the photo flies into the shape, which becomes a photo card with the orb and a black "Generate" button under the photo |
| 3 | Settings slide in between photo and button: "Textures" 1K 2K 4K (2K selected) and "Polygons" (250K, ends labelled 10K and 1M) | Click 4K: the black indicator slides over | Grab the polygon knob and drag right, the readout rolls through the real rungs | Past 1M the knob rubber-bands; release, it springs back to 1M |
| 4 | Click "Generate": settings leave, the rail Start · Shape · Texture · Finish arrives, "Starting the engine", the orb starts to swirl | Shape, "Sculpting the shape": the photo dissolves into grey points that lift off the picture plane into 3D and turn | Texture, "Painting from your photo": a sweep paints the points in the model's own colours | Finish, "Finishing touches": the points condense into the solid textured model |
| 5 | "Model ready" with a check; the real GLB turns; the orb blooms a little | The status row leaves, the viewer grows, the camera pushes in | "Drag to turn it" hint | The cursor moves onto the model |
| 6 | Grab: the model turns with the cursor | A fast drag the other way | Release: it spins on with the release speed | It settles on its hero angle |
| 7 | Format chips GLB FBX OBJ USDZ STL pop in on 32nd notes | Click GLB: a black swipe track "Download GLB" slides in, the orb drops into it as the knob | Grab the orb-knob, drag right | Past the end the orb stretches (rubber band); release, it snaps to the end and swirls |
| 8 | The card folds into the toast "GLB is ready" with the turning model as its thumbnail; the orb blooms | The check draws in | The toast folds into the orb, which grows back to hero size at the centre | The orb settles and breathes; the cursor is back at rest = frame 0 |

Technical rules
1. One index.html (DOM + CSS) and two ES modules: orb.js (the orb shader) and film.js (everything else). Everything is local: three.js r182 vendored as ES modules, fonts as woff2, the photo and the GLB in ./assets. No network, no CSS transitions or animations, no timers, no Date.now/Math.random, no state carried from one frame to the next, no DOM nodes created after init. window.seek(t) sets every pixel from t alone and returns when the frame is drawn; window.__ready = true after init.
2. Springs are closed-form step responses S(τ) (S = 0 for τ < 0), damping ratio ≥ 0.75. A channel that changes target many times is v_last + Σ_i Δ_i·[S(t − t_i) + S(t − t_i + L) + S(t − t_i + 2L)] with Δ_i = v_i − v_(i−1) taken around the loop (L = 16 s). That makes every channel periodic, position and velocity, with no special seam code. Card ω ≈ 18 rad/s ζ 0.8; followers (orb, photo) ω ≈ 13 ζ 0.85, a little slower so the card's edge never clips them; camera ω ≈ 9 ζ 0.92; cursor ω ≈ 10 ζ 0.9; presses ω ≈ 40–46.
3. Anything that runs in time inside a shader uses (cos, sin)(2π·k·t/L) with integer k, never raw t. A rate that changes (the orb swirling faster while thinking) is a phase 2π·N·F(t)/F(L), where F is the cumulative integral of the rate computed once at init on a fine grid and N an integer: speed can vary, the loop stays exact. One-shot impulses (the bloom) are functions of the time since their event modulo L, so the tail of the previous loop is the same number at t = 0 and t = L.
4. Text and icons have their own windows: in a copy swap the old exit ends exactly on the beat (opacity + 8 px blur) and the new enter starts 80 ms after it (opacity, 12 px → 0 blur, scale 0.965 → 1), so copy never overlaps; a reaction to a click starts on the click.
5. Drags are direct manipulation. While held, the dragged value = value at press + (cursor − cursor at press) × gain. Past a limit apply rubber(over) = R·(1 − e^(−over/R)). On release, a free spring starts from the release position and the release velocity (the derivative of the held value at release) and runs to the snap target; add it as a residual on top of the channel's own spring so the hand-over is exact. Four drags: the photo (follows the cursor on a slower spring, then flies to its slot), the polygon knob (slider rungs 10K–50K step 1K, –100K step 2K, –250K step 5K, –500K step 10K, –1M step 25K, positioned by rung index so the scale reads logarithmic; labels "250K", "1M"), the model's yaw (0.42° per px, release spin, settles on a chosen hero angle) and the orb-knob of the swipe (the orb stretches along the track by the rubber-band overshoot).
6. Cursor waypoints are [departure time, x, y] in world units on the cursor spring; the last waypoint is the resting point of frame 0, so the loop seam is continuous. The cursor is drawn in screen space at constant size, a black arrow with a white outline that shrinks to 88 % on press.
7. Camera: world elements live in a container with translate + scale; each state names a box and the camera springs to fit it into 70 % × 74 % of the frame (a tighter box is a push-in). The orb canvas, the Three.js canvas and the cursor are positioned in screen space from the same camera, so nothing is upscaled; the Three.js canvas is a fixed square that travels with the model in integer pixels (software GL cost grows with canvas pixels), is clipped to the card's rounded rect every frame (clip-path from the same springs, so the blob shadow and stray points never spill onto the canvas background) and is skipped entirely when no model is on screen. Never put will-change on anything the camera scales. Layer order: card, its content and the photo → Three.js canvas → orb canvas → cursor.
8. The orb: a fragment shader on an OFFSCREEN WebGL canvas (640², preserveDrawingBuffer), rendered every seek into a square viewport sized to the orb's on-screen box, then drawImage'd synchronously into a full-frame 2D canvas (a non-uniform destination size gives the stretch). Silhouette radius 0.74·(1 + amp·noise(dir·0.85 + T)) sampled on the unit direction (no seam at the centre). Inside the sphere a mesh gradient: three soft light blobs (amber #E8A33D, coral, violet) plus a little cream, their centres on periodic paths, blended in OKLab, the lookup direction bent by low-frequency domain-warped noise so the colours flow like a liquid. Glass on top: soft key light, a darker lower half, an inner glow, a deeper rim with a thin bright edge, a small sharp specular (pow 110) with a soft sheen, warm light through the bottom. A soft elliptical floor shadow only at hero size, a warm halo only while blooming. Uniforms: amp (idle 0.035, up while the photo hovers and while thinking), think (stronger, faster warp), bloom (brighter, more saturated, slightly larger), hover. At most 5 noise calls per pixel. Pulse: scale × (1 + 0.022·x/a·e^(1−x/a)) with x = time since the beat, a = 60 ms.
9. The model: Three.js r182, the real GLB with its own PBR textures, RoomEnvironment + one key light, NeutralToneMapping at an exposure low enough that white parts still read on the white card, transparent canvas with antialias and preserveDrawingBuffer, a soft blob shadow under the model. If the GLB comes in the photo camera's frame (tilted by the camera's elevation), first set it down the way it would rest on a table: rotate the largest convex-hull facet within 40° of "down" onto the floor, so it turns level. At init, find the camera direction under which the model's silhouette best matches the photo's subject mask (flood-fill the photo's white backdrop; grid search yaw 15° × pitch 10°, then refine at 2.5°, score = IoU × aspect match). Keep that camera fixed and turn the model instead; each frame map the model's projected box at yaw 0 onto the photo subject's box inside the card with camera.zoom + setViewOffset only (a pure 2D zoom, perspective unchanged), so the points start exactly on the photo's pixels. Points: 60k area-weighted surface samples, drawn without tone mapping; start = where each camera ray meets the plane through the model centre, colour = the photo pixel there, so at the hand-off they are the photo; they dither in over 0.14 s while the photo fades, go grey, lift onto the surface, get painted by a sweep with the texture colour at their UV, then a dithered cross-fade hands over to the solid mesh.
10. Audio, numpy at 48 kHz: everything is written into a circular buffer of exactly 16 s (tails and reverb wrap to the start), so the loop is seamless by construction. Kick on every beat (bar 1 lighter: only beats 1 and 3, a pad and one long bass note), clap on 2 and 4, off-beat bass, one chord per bar, a bell arpeggio in bars 3–7. UI sounds are synthesized (tock, swoosh, paper pick-up, drop thump, click, slider ticks, rubber stretch, snap, progress blips, chimes with the first note loudest, collapse), the pitched ones on chord tones of the bar they sit in, and each is placed by its MEASURED PEAK on its event time. Normalise to −14 LUFS integrated, true peak ≤ −1 dBTP (limit on three concatenated loops, keep the middle one).
11. Render with Playwright Chromium headless, launched with --use-gl=angle --use-angle=swiftshader --enable-unsafe-swiftshader --ignore-gpu-blocklist --disable-gpu-watchdog --force-color-profile=srgb. After each seek await two requestAnimationFrames, then Page.captureScreenshot (never screenshot(animations='disabled')). Frames are PNG files in _frames; up to 3 browser workers inside one memory- and CPU-capped scope. Decide motion blur with a timing probe: 2 subframes 1/240 s apart averaged with tmix only if the render budget allows, otherwise none.
12. Encode with ffmpeg: frames + audio → libx264 -preset slow -crf 12, yuv420p BT.709, -r 60, -t 16 exactly, AAC 256k, +faststart (master); a crf 20-ish share copy under 30 MB; a 1080×1920 vertical re-layout from the same seek(t) (camera fits each state into the safe zone x 120–960, y 240–1260, caption "One photo → 3D model · wandy3d.com" low in that zone); a poster PNG from the best frame. Delete the frame folders after encoding.

Gotchas
- smoothstep(e0, e1, x) with e0 > e1 is undefined in GLSL; SwiftShader returns 0 and the orb disappears. Write 1.0 − smoothstep(lo, hi, x).
- A heavy shader or a huge MSAA canvas on software GL can trip the GPU watchdog (CONTEXT_LOST_WEBGL): keep the orb viewport ≤ 640², ≤ 5 noise calls, listen for webglcontextlost and console errors in every test.
- Never draw from the WebGL canvas in a later task without preserveDrawingBuffer; render and drawImage in the same seek.
- A child with visibility: visible shows even when its parent is hidden, and it keeps whatever an earlier frame set: inside containers animate opacity, never visibility.
- Text inside the camera container stays crisp only without will-change; blur filters inside it are in world pixels.
- The orb and the photo are followers on a slower spring than the card; otherwise the card's edge clips them mid-morph.
- A centring translate() and an animated transform on the same element fight: wrap the element instead.
- GLB textures are sRGB; the Three.js renderer must output sRGB; point colours sampled from the textures are converted to linear.
- ffmpeg -shortest can drop the last frame and AAC adds priming: set -t 16 and check that the decoded audio is 768000 samples.
- The last frame must equal the first, cursor position and speed included, or the loop hiccups.

Verify before you call it done: prototype the orb alone first (t = 0, 4, 8 and 16; t = 0 and t = 16 pixel-identical; 8 fresh page loads, no context loss). Show me the state list on the beat grid as a table. Before the full render, render one frame on every beat and one 0.3 s after it, tile them into per-bar contact sheets, look at them yourself and fix anything cramped, clipped, off the grid or unreadable; spot-check transitions at full size. After the render: t = 0 and t = 16 screenshots pixel-identical; exactly 960 frames and 16.000 s; audio and video the same length; the seam frame difference in the same range as its neighbours; beat offsets of the final audio < 10 ms; no WebGL context loss in any log; the orb present in every frame.