REFERENCE
- Gallery page: https://magpui.com/en/i/gummy-candies-that-stick-and-stretch-f33b93
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/gummy-candies-that-stick-and-stretch-f33b93/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/gummy-candies-that-stick-and-stretch-f33b93/clip.mp4
- Original post: https://x.com/me____likex/status/2116151986454204900 by @me____likex
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 playful interactive hero where a wordmark is spelled with glossy translucent 3D gummy candies (a bat, a skull, a crescent moon, a candy corn, a pumpkin, a ghost, a witch hat, a little monster) sitting between two plain words. A small pill toggle offers two choices, TRICK or TREAT. Choosing one switches the page to a dark scene: the gummies rain down from the top, bounce and settle into one sticky cluster in the center. The user can grab any gummy and pull it away: a stretchy, semi-transparent sugar string connects it to the cluster, thins as it stretches, and when released the gummy springs back and re-sticks. It should feel tactile, sweet and a bit silly.
DESIGN SYSTEM: Light state: warm off-white page #EEEDE6, wordmark words in a large olive-green grotesk around 120-160px, tight tracking, gummies sized to the cap height and inline with the text. Small 11px uppercase meta text in the corners (name, role, location, short bio bottom-left). Toggle: two outlined pills with 999px radius, 1px #1A1A1A at 30% opacity, 12px uppercase labels, 'OR' between them. Dark state: background #111111, the wordmark repeated huge and faint (#FFFFFF at 6%) behind the cluster. Gummies: saturated candy colors (red #D9262E, lime #8CC63F, yellow #F2B705, purple #7A3BC4, orange #F26B1D, lavender #B49BE8, green #3FA34D) with subsurface glow, soft specular highlights, slight sugar-coated roughness and a contact shadow.
MOTION: Hover on a gummy in the light state: scale 1 to 1.08 with a squash, 220ms cubic-bezier(0.34,1.56,0.64,1). Choosing TRICK or TREAT: the light page fades to dark over 400ms cubic-bezier(0.4,0,0.2,1); gummies spawn above the viewport with 40ms stagger and fall under gravity with restitution about 0.3. Each gummy is attracted toward the center by a soft spring so they clump; neighbors that touch are held by breakable sticky constraints. Drag: the grabbed gummy follows the pointer through a spring (stiffness ~300, damping ~20); the string between it and its nearest neighbor is a tapered tube whose radius goes from ~40% of the gummy width to ~8% as distance grows; past a max length it stays attached (no break). Release: the gummy is pulled back by the string with an overshoot and re-sticks, with a jelly wobble (scale X/Y oscillating ±6% for ~500ms).
SECTIONS: Light state (wordmark with inline gummies, toggle, corner meta); transition; dark state (falling gummies, cluster, drag and stretch, return). States per gummy: idle (slow breathing wobble), hover, grabbed, stretched, released/settling.
IMPLEMENTATION: Three.js (or React Three Fiber) for the gummies with MeshPhysicalMaterial (transmission ~0.6, thickness, roughness 0.25, clearcoat 1) and an HDR environment; a 2D physics engine (Matter.js or Rapier 2D) on the XY plane drives positions, with constraints for stickiness. Render the sugar string as a TubeGeometry along a quadratic curve rebuilt each frame, same material as the gummy. Gummy shapes can be simple extruded rounded SVG silhouettes with bevel. prefers-reduced-motion: skip the fall, place gummies directly in the cluster and disable wobble. Toggle is real buttons with focus rings; gummies are decorative (aria-hidden). Cap at ~12 bodies, devicePixelRatio max 2, pause rendering when off-screen.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map every color to the closest existing token. Never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- Clicking TRICK or TREAT turns the page dark and the gummies fall and settle into one sticky cluster.
- Dragging a gummy away draws a stretching, thinning gooey string, and releasing it snaps it back with a jelly wobble.
- With reduced motion enabled the cluster appears without falling or wobbling and the toggle is keyboard accessible.
