Components

Disintegrating Edge Image Gallery

An endless horizontal strip of portrait photos that shatter into drifting squares at the viewport edges and reassemble as they scroll back in: worth stealing for the WebGL edge-disintegration scroll.

Industries
Colors
Styles
Category

View original

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.

1
Install the skill
Run these commands once in Claude Code. The skill gives the agent know-how for this kind of piece. With other agents, follow the instructions on the skill page.
threejs-animation
```
npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-animation
```
threejs-animation
```
npx skills add https://github.com/iart-ai/webgl-animation-skills --skill threejs-animation
```
2
Create the images
Code cannot draw these well. Generate them with any image generator (hover the button to see a few), or with your agent's image tool if it has one, and save them in the project.

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.

Paste the prompt in your agent

Hit Copy prompt above, open your project in the agent and paste it. The prompt links the original frames, so the agent can look at them before building.

Uses

Compare with the original

Put the two side by side. If something is off, tell the agent exactly what: timing, size, color or spacing.

Install the skill

Create the images

Paste the prompt in your agent

Compare with the original