Component

An infinite gallery you drag horizontally: each photo moves along a depth curve, rising toward the camera as it nears the center and sinking as it moves away. When you let go, it snaps to the nearest photo. For collections and products.

Resource type: Component. Not a full website.

Interaction: Drag

Make it yours

US$6One-time payment · No subscription

Customize this design for your business or your next client.

Buy now

More designs. More possibilities.

Create for yourself and your clients with access to the Pro catalogue.

From US$19/month

See Pro plan

Already have access? Sign in

The video is a preview. The interactive demo comes with the purchase or with Pro.

What makes it special

Drag

What's included

Prompt to recreate and customize the design with AI.
Site code and files: images, fonts and licences.
Interactive demo and instructions.
Use on your own sites and final client projects.

Demo sections and screens (3)

Infinite gallery with drag
Depth curve
Snap to the nearest photo on release

Package contents (10)

Ready-to-run project (React + Vite): component, styles, instructions and licence notices. If the effect uses its own images or fonts, they are included and listed in its notices. No node_modules.

index.html · 508 B
LICENCIAS-Y-AVISOS.md · 3 KB
manifest.json · 3 KB
package-lock.json · 37 KB
package.json · 325 B
prompt.md · 4 KB
public/ · 242 KB
README.md · 3 KB
src/ · 7 KB
vite.config.js · 208 B

What you can customize

Photos (nine or more) and alt text (`src/content.js`, `public/assets/`)
Spacing, scale and depth (`src/depth-wave.css`, `src/DepthWave.jsx`)

How to start

Copy the prompt and download the files.
Take them to your AI tool and ask for the changes: brand, copy and images.
Review the result and publish it on your domain.

Download the package and copy the prompt: it specifies the root folder, every file to copy (including the sample content and `public/assets/`), installation with `npm ci` and the same setup as the demo. Summary: Copy `src/DepthWave.jsx` and `src/depth-wave.css`; install `gsap` and mount `<DepthWave images={[…]} />` with nine or more images.

The result depends on your AI tool and the changes you make. The demo shows the visual direction.

Technical details & requirements

Requirements

Node.js 20.19+ or 22.12+ and npm to run the demo and build (Vite).
A React 19 project (or a new one with Vite) to mount the component in; GSAP is installed from npm.
Your own images and copy to replace the sample content.
Not included: AI tool (and its credits), domain and hosting.

Technologies

React
Vite
GSAP

Implemented in the package you download.

React 19 · GSAP 3 · Vite

Suggested AI tools

ClaudeCodexv0Cursor

Compatible with the design instructions; not a recorded test.

Tested compatibility: No recorded test yet.

Palette and typography

#000000#FFFFFF

Fuente del sistema

Layout: Full-screen scene (100svh); measured at 1434 px and 390 px wide

Licence & versions

Use it on your own sites and in final client projects, including commercial use. Do not resell or redistribute the prompt, the files or the site as a template. Read the licence

Provenance: Code written for Arrmma (React + GSAP). AI-generated images made for Arrmma; Inter Tight typeface (OFL) when included.

Version: v1.0.1 · Published Nov 1, 2026
Versions: v1.0.1 · 2026-11-03 — Component: package 1.0.1 with package-lock.json, corrected prompt and integration instructions (10 entries).
v1.0.0 · 2026-11-02 — Component 08: runnable React + GSAP project, styles, its own assets, instructions and licenses (9 entries). Prompt aligned with the package.