REFERENCE
- Gallery page: https://magpui.com/en/i/wobbling-glass-potion-vial-4052c4
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/wobbling-glass-potion-vial-4052c4/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/wobbling-glass-potion-vial-4052c4/clip.mp4
- Original post: https://x.com/_pwd_/status/2116135360379916414 by @_pwd_
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a full-screen interactive 3D hero piece: a single faceted glass vial (a slightly rounded dodecahedron-like bottle, about 40% of viewport height, centered) that wobbles like jelly and is half filled with a pale, creamy liquid that sloshes inside. The glass is clear and refractive with soft rainbow-tinted edges, floating over a blurred real-world street backdrop (an HDR environment shown as a background, out of focus). It should feel tactile, a little odd and playful.
DESIGN SYSTEM: Full-bleed canvas behind everything. Backdrop: blurred street HDRI with desaturated asphalt gray (#5b5a60), warm brick accents (#c9553d) and soft daylight; slight darkening vignette at the corners (about 25% black). Glass: physical transmission 1, thickness about 0.6, IOR about 1.45-1.5, faint dispersion that gives violet (#6f5bd6) on the upper facets and teal (#5fc4b5) near the rims, thin bright rim highlights from the environment. Liquid: opaque-ish pale yellow-cream (#e8e2a0) with a slightly translucent top surface and a soft internal glow, filling roughly 45-55% of the vial height. Overlay UI: a small serif title at top-left (about 22px, off-white), two short caption lines in a 11px uppercase sans, tiny social icons bottom-right at 60% opacity, a small credit caption bottom-left.
MOTION: (1) Idle wobble: the whole mesh is deformed in the vertex stage by a damped spring (stiffness about 120, damping about 8, mass 1) driven by a slow noise offset so the shape squashes and stretches 4-8% every 2-3 s, easing between states with cubic-bezier(0.34, 1.56, 0.64, 1) feel. (2) Liquid slosh: the liquid surface is a plane clipped to the glass interior whose normal follows the vial's acceleration through a second damped spring (period about 600-900 ms) so the surface tilts opposite to movement and ripples with a low-amplitude sine (about 0.03 units). (3) Pointer: hovering pushes the vial away from the cursor with a spring; dragging rotates it (inertia, 0.92 friction per frame) and throws the liquid harder. (4) Slow environment drift: the backdrop rotates about 3 degrees per second so reflections slide across the facets. (5) Entrance: fade from black over 900 ms, vial scales from 0.9 to 1 with a spring.
SECTIONS: One canvas scene plus a thin HTML overlay (title, caption, links). States: idle (gentle wobble), hover (pushed, faster slosh), dragging (rotates and shakes), settling (spring returns to rest within about 1.5 s).
IMPLEMENTATION: Three.js with the WebGPU renderer and TSL node materials (MeshPhysicalNodeMaterial for the glass, a node material for the liquid), with a WebGL2 fallback when WebGPU is not available. Load a street-like HDR environment with PMREM for reflections and use it as a blurred background. Drive springs in JS per frame and pass them as uniforms; keep triangle count under 60k. devicePixelRatio capped at 2, 60fps, pause rendering when the tab or canvas is hidden. prefers-reduced-motion: freeze the wobble, keep a very slow liquid shimmer only. Keyboard: the canvas is focusable, arrow keys nudge the vial, Enter shakes it; provide a visible focus ring and an aria-label describing the scene.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map the overlay colors to the closest existing tokens; never copy logos, brand names, photos or illustrations from the original; use a placeholder or a free HDRI for the backdrop.
SUCCESS CHECK:
- The vial visibly squashes and stretches after a drag and settles within about 1.5 s without jitter.
- The liquid surface tilts against the motion and keeps a flat line when the vial is at rest.
- Glass shows refraction and tinted rims over the backdrop, holds 60fps on a laptop GPU, and falls back gracefully without WebGPU.
