Animated React Panels: Accordion

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)

Row of panels with one open
Pills with a vertical label
Swap with anticipation and bounce
Content that enters with direction

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

What you can customize

Titles, labels, copy and images for each panel (`src/content.js`, `public/assets/`)
Panel tones: ivory, soft green, green and ink (`src/accordion.css`)
Initial panel (`initial` prop)

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/Accordion.jsx`, `src/accordion.css` and `src/fonts/`; install `gsap` and mount `<Accordion panels={[…]} initial={0} />`. `src/demo.css` only centers the demo.

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