REFERENCE
- Gallery page: https://magpui.com/en/i/disintegrating-edge-image-gallery-0c7ebd
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/disintegrating-edge-image-gallery-0c7ebd/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/disintegrating-edge-image-gallery-0c7ebd/clip.mp4
- Original post: https://ui.aceternity.com/interactions/disintegrating-gallery by Manu Arora (@mannupaaji)
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.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- gallery-portraits: Set of five vertical 3:4 editorial landscape photographs for a WebGL gallery: (1) hazy blue mountain ridges fading into fog, (2) turquoise ocean wave breaking into white foam from above, (3) warm sunset over a meadow with scattered trees, (4) sunlit dirt path through a dense green forest, (5) aerial view of turquoise surf meeting beige sand. Natural light, no text, no logos, photoreal, consistent color grade.
BUILD: Build a full-width interactive image gallery: an endless horizontal strip of tall portrait photos. As each photo crosses the left or right edge of the viewport it breaks apart into a grid of small squares that drift outward and fade; as the same photo scrolls back toward center the squares fly in and lock into a sharp image again. Drag (or wheel) to scroll. It should feel like the pictures are dissolving into dust at the margins of the screen.
DESIGN SYSTEM: Preview stage on a white page (#ffffff), gallery frame about 920×420px (or full-bleed hero). Three to five visible portrait cards ~240×360px with 28px gaps, soft radius 4px, no heavy shadow. Sample subjects (placeholders): misty blue mountain ridges, turquoise wave foam, sunset meadow, sunlit forest path, aerial surf meeting sand. Outside the frame keep a clean white void so the flying squares read clearly.
MOTION: (1) Idle: strip slowly auto-drifts ~12px/s; pause on pointer down. (2) Drag: 1:1 horizontal scrub with light momentum (friction ~0.92 per frame) after release. (3) Edge disintegration: when a card's outer 18% overlaps the frame edge, that region is a grid of ~14×22 tiles (~16px). Tiles outside the safe center get a per-tile offset (outward ±20–80px), rotation ±8°, and opacity 0.15–0.9 driven by how far past the edge they are; ease cubic-bezier(0.22,1,0.36,1). (4) Reassembly: as the card returns, tile offsets spring back to 0 over ~420ms with 12ms stagger from the intact side. (5) Depth: slightly scale the center-most card to 1.02 and side cards to 0.96. prefers-reduced-motion: no tile breakup — plain horizontal scroll with opacity fade at edges.
SECTIONS: Gallery viewport; image cards (intact / edge-breaking / reassembling); drag cursor affordance; optional replay control. States: idle drift, dragging, coasting, reduced-motion.
IMPLEMENTATION: Prefer three.js / React Three Fiber: each photo as a textured plane; fragment shader samples the image through a UV grid and displaces cells by an edge-proximity factor (smoothstep on NDC x). Or Canvas 2D with drawImage per tile if WebGL is unavailable. Cap DPR at 2, recycle textures, pause offscreen. Keyboard: left/right arrows nudge one card width. Cards are a listbox or scroll region with aria-label per image; flying tiles are aria-hidden decoration.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; never copy logos, brand names, photos or illustrations from the original — use the project's own images or neutral stock placeholders.
SUCCESS CHECK:
- Dragging the strip moves photos horizontally with light momentum.
- Photos visibly break into squares at both viewport edges and reassemble when centered.
- prefers-reduced-motion disables tile breakup and keeps a simple scroll.
