Vaultt
Quiet-luxury commerce template, editorial product rows, gold on black, journal included
- Template
- Vaultt
- Sector
- Luxury E-commerce
- Year
- 2025
- Built with
- Astro 5, React 19, Tailwind CSS v4
- Pages
- 7
Vaultt is a quiet-luxury storefront for heritage goods, artisan objects, and single-collection brands. Seven routes cover the homepage, a shop index with sticky category filtering, product detail pages, a journal index, journal articles, about, and contact. The homepage refuses the card grid: featured objects are laid out as full-width editorial rows that alternate sides, each with a 4:3 image, an italic Cormorant tagline, origin and material metadata, and a price in antique gold. The hero fills 100svh with a single product photograph that eases from 1.06 scale while the wordmark rises underneath. Product pages carry a scroll-parallaxed cover, a quantity stepper, and an Add to Bag state, all backed by typed content collections and build-time WebP optimization.
What’s inside
- 7 routes, Home, Shop, Product Detail, Journal, Journal Article, About, Contact
- Editorial product rows instead of a card grid, full-width, alternating sides, with a 700ms image scale on hover
- 100svh hero, GSAP eases the photograph from scale 1.06 to 1 over 1.8s while the wordmark fades up, and honors prefers-reduced-motion
- Shop page with a sticky, blurred filter bar, All, Writing, Objects, Textiles, Instruments, plus a live object count
- Product detail with scroll parallax on the cover image, a quantity stepper, and an Add to Bag confirmation state
- 2 content collections, 6 products as typed JSON data entries and 3 Markdown journal essays
The signature
The homepage collection is built as alternating editorial rows, not a grid: each featured object gets a full-width band with a 4:3 photograph on one side and generous negative space on the other, flipping sides every row via lg:order. Hovering scales the photograph to 1.03 over 700ms with an ease-out curve, and the price sits in antique gold beside a hairline ‘View object’ link. It reads like the spread of a printed catalogue, which is exactly why it doesn’t look like a Shopify theme.
See it live
The demo is public: https://fpsjago.github.io/vaultt/. 7 pages, built with Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP.