SaviaEditorial store
- Scroll animation
- Product filters
New
What makes it special
- Cart
- Carousel
- Modal details
- Circular runway with depth: drag with inertia and snap to the look, arrows and keyboard (GSAP Draggable + InertiaPlugin)
- Editorial intro once per session, interruptible
- When you choose a look, the same model moves aside and the garments panel comes in
- Transition from thumbnail to garment photo (GSAP Flip) and zoom
- Model clips with transparency (VP9 and HEVC) over a fallback poster
- Videos pause when off screen, when the tab is hidden or with the pause control
- prefers-reduced-motion respected
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 (8)
- Top bar: brand, Runway / Concept and bag
- Editorial headline and short text
- Circular runway of six looks with controls, counter and look name
- Look panel: three garments, interactive hotspots, prices, total and favorite
- Garment detail with photo, zoom and size selection
- Size guide
- Shopping bag with quantities, remove and undo
- Concept (window with the idea behind the collection)
What you can customize
- Name and logo
- Copy for the runway, the panel and the bag
- Catalog: looks, garments, sample prices and sizes
- Garment images, model clips and posters
- Hotspot positions on each look
- Color tokens and typefaces
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: your AI tool works on sitio/ (README with installation and where to customize). `npm ci`, `npm run dev` and `npm run build` run the original site with its videos, photos and typefaces. Change the brand, catalog, copy and media without touching the runway. The bag does not charge or process orders until you connect your payment gateway.
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 later and npm to run the project (TanStack Start + Vite); hosting with Node or Vercel to publish it.
- A modern browser: Safari plays the HEVC clips with alpha and Chrome, Edge and Firefox play the VP9 ones; otherwise the poster is shown.
- It does not include payments, stock, shipping or try-on over the visitor’s photo: USD prices and sizes are examples and checkout is disabled.
- The look 06 clip has a lower resolution and the clips play forward and backward (they are not perfect loops).
- Not included: AI tool (and its credits), domain and hosting.
Technologies
- React
- Vite
- TypeScript
- GSAP
Implemented in the package you download.
React 19 · TanStack Start / Router · Vite 8 · TypeScript · GSAP 3 (Draggable, InertiaPlugin, Flip) · Radix UI · Nitro (renderizado en servidor) · Vídeo con alfa: WebM VP9 y MOV HEVC
Suggested AI tools
ClaudeCodexCursor
Compatible with the design instructions; not a recorded test.
Tested compatibility: No recorded test yet.
Palette and typography
#ffffff#181715#3b3936#6e6a64#e8e5e0#f6f5f2
- Bodoni Moda Variable (titulares)
- Geist Variable (interfaz)
Layout: Desktop 1440 · mobile below 820 px with a bottom panel · clips and posters 720 × 1274
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: Package v1.0.0: code and assets from the approved original site (commit 0ecc60d): React, TanStack Start, GSAP, clips with transparency (WebM VP9 and MOV HEVC), posters, product photos, logo and icons; Bodoni Moda and Geist typefaces (OFL) via npm. Notices in LICENCIAS-Y-AVISOS.md.
- Version
- v1.0.0 · Published Nov 4, 2026