REFERENCE
- Gallery page: https://magpui.com/en/i/carousel-slides-as-flowing-fabric-2e9f25
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/carousel-slides-as-flowing-fabric-2e9f25/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/carousel-slides-as-flowing-fabric-2e9f25/clip.mp4
- Original post: https://x.com/AmirMushich/status/2116899039341928619 by @AmirMushich
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 an interactive 3D mockup tool that presents a social media carousel (a set of 4:5 slides) as one long ribbon of fabric. A modern phone floats slightly tilted in the middle of a soft, seamless studio backdrop; the current slide sits flat inside the phone's post area, and the rest of the carousel spills out of the screen's left edge as a continuous printed cloth strip that drapes, folds and ripples onto the floor in front of the phone with real-time cloth physics. Moving to the next slide pulls the ribbon through the screen, so slides feel like frames of one physical material. It should feel tactile, premium and playful, like a fashion still life for social posts.
DESIGN SYSTEM: Full-viewport canvas, background a warm light grey studio sweep (#ecebe7 to #dcdbd6 radial falloff) with a soft contact shadow under the phone. Phone: rounded rectangle body with thin black bezel, dynamic-island notch, a feed-post UI inside (avatar + handle row, the slide area at 4:5, action icons row, pagination dots, like count and caption in 11-13px sans, bottom tab bar). Top-left a small logo mark + product name and a grey subtitle (13px). Top-right a frosted pill button "Controls" (white 80% with backdrop blur, radius 10px, soft shadow). Bottom center a floating toolbar pill (white, radius 14px, shadow 0 8px 24px rgba(0,0,0,0.08)) with prev/next arrows, a slide counter "8 / 8", and icon buttons (upload images, demo slides, download, fit, play). Controls panel: right-side sheet about 360px wide, white, radius 20px, sections with 11px uppercase grey labels: a dark preview card (#1c1c1c, orange #ff6a2b wireframe lines) showing a top-down diagram of the cloth and phone with the preset name like "13.FOIL" and prev/next arrows; LOOK chips (Studio, Noir, Pastel, Latex) with color swatches, the active one with an orange 1.5px outline; four skeuomorphic knobs (Bend, Soft, Light, Coat) as white domed circles with an orange progress arc and value below (e.g. 74%, 25%, 23 deg, 85%); segmented controls for FORMAT (4:5, 1:1, 9:16), LEFT EDGE (Clip, Through) and PHYSICS (Float, Gravity); a full-width orange primary button "Randomize all" (#ff6a2b, radius 12px) next to an outlined "Undo".
MOTION: (1) Idle: the cloth ribbon breathes with a slow wind field, ripples travel along it with a period of about 3-4 s; the phone bobs 6px and rotates 1-2 deg over 5 s, cubic-bezier(0.45, 0, 0.55, 1). (2) Next or previous slide: the ribbon is pulled through the screen edge by one slide width over 900ms, cubic-bezier(0.65, 0, 0.35, 1), the cloth behind lags and overshoots, then settles over about 1.2 s; the incoming slide snaps perfectly flat inside the screen. (3) Gravity mode: the strip falls and piles on the floor with folds; Float mode: it hovers in loose S-curves. (4) Coat changes the material from matte cotton to glossy holographic foil, with iridescent highlights sweeping across folds as the cloth moves. (5) Controls sheet slides in from the right 24px + fade over 280ms, cubic-bezier(0.22, 1, 0.36, 1); knobs rotate with pointer drag and the scene updates live. (6) Randomize all re-rolls look, knobs and physics and lerps the scene to the new values over 600ms.
SECTIONS: Parts and states: stage (backdrop, phone, cloth ribbon, shadow); top bar (logo, Controls button); bottom toolbar; controls sheet (preset preview, Look, knobs, Format, Left edge, Physics, Randomize, Undo). States: idle breathing, transitioning between slides, dragging a knob, sheet open/closed, export in progress, reduced motion.
IMPLEMENTATION: Three.js (or React Three Fiber) with a GPU or verlet cloth: a plane of about 120x24 particles with distance and bending constraints, pinned along the edge that enters the phone screen, gravity and a noise wind field, solved 8-12 iterations per frame. Map all slides side by side on one texture atlas (CanvasTexture from uploaded images) and scroll the UV offset so the in-screen part always shows the current slide undistorted; render the in-screen slide as a separate flat plane for crispness. Material: MeshPhysicalMaterial with sheen for cotton, clearcoat plus iridescence for foil, driven by the Soft and Coat knobs; Light rotates a key light around the scene; studio HDR environment and a soft contact shadow. Phone and feed UI can be an HTML texture or a simple modeled body with a screen plane. Export a PNG of the canvas at 2x. prefers-reduced-motion: freeze the wind, cross-fade between slides instead of pulling the cloth. All controls keyboard reachable (knobs as role=slider with arrow keys), visible focus rings. Cap devicePixelRatio at 2 and pause simulation when the tab is hidden.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts, map the orange accent and greys to the closest existing tokens, and never copy logos, brand names, photos or illustrations from the original; use placeholder slides and a placeholder handle.
SUCCESS CHECK:
- The current slide always appears flat and fully inside the phone screen while the other slides drape outside as one continuous cloth.
- Next/previous pulls the ribbon through the screen edge with visible lag and settling, and Gravity vs Float clearly changes how it falls.
- Moving the Coat knob changes the cloth from matte to iridescent foil in real time at a stable 60fps on a laptop.
