Component

A grid of photos: when you click one, it grows to fill the scene and the others are pushed out in its direction; the caption appears and a second click brings the grid back with a slight bounce. For archives and galleries.

Resource type: Component. Not a full website.

Interaction: Click

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

Click

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 (4)

Photo grid with a cover
Opening on click with a directional push
Caption
Closing with bounce (click or Escape)

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 · 500 B
LICENCIAS-Y-AVISOS.md · 4 KB
manifest.json · 5 KB
package-lock.json · 37 KB
package.json · 324 B
prompt.md · 4 KB
public/ · 801 KB
README.md · 3 KB
src/ · 72 KB
vite.config.js · 208 B

What you can customize

Photos, aspect ratios and captions (`src/content.js`, `public/assets/`)
Cover lines
Columns, gaps and timing (`src/push-away.css`, `src/PushAway.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/PushAway.jsx`, `src/push-away.css` and `src/fonts/`; install `gsap` and mount `<PushAway items={[…]} />`. Images can have any aspect ratio.

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#F3F0E8#E3EEE8#29634A#202321

Inter Tight 500 (OFL, incluida)

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 04: runnable React + GSAP project, styles, its own assets, instructions and licenses (9 entries). Prompt aligned with the package.