Component

Fanned-out cards with real perspective: the stage is divided into strips and, as you move the pointer, the card in the strip underneath comes to the front while the others spread apart and turn with a slight bounce. For products and catalog covers.

Resource type: Component. Not a full website.

Interaction: Reacts to cursor movement

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

Cursor

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)

Fan of cards with perspective
Front card based on the cursor’s strip
Spread and turn with bounce

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

What you can customize

Photos and alt text (`src/content.js`, `public/assets/`)
Initial card (`initial` prop)
Spread, turn and perspective (`src/cover-flow.css`, `src/CoverFlow.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/CoverFlow.jsx` and `src/cover-flow.css`; install `gsap` and mount `<CoverFlow images={[…]} />`. Without `initial`, the front card is the center one.

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