Vaultt

About This Template

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.

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.

Features

• 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
• Product schema models material, origin, currency, tags, and featured/new flags — not just name and price
• Journal index with a featured lead article, reading time, and category badges
• Full-bleed journal article hero (up to 760px tall) over rendered Markdown prose
• Philosophy section — four numbered tenets revealed with per-child stagger delays
• Newsletter capture and contact form, both React-controlled with inline success states
• IntersectionObserver reveal system — [data-reveal], [data-reveal-fade] and [data-reveal-stagger] with a --reveal-delay custom property
• Every photo optimized to WebP at build via getImage() resolved through import.meta.glob, with a public/_assets fallback
• Astro View Transitions with ClientRouter and a persistent nav mounted client:only
• Optional 'parchment' light skin — a full paper-and-forest-green token set defined in CSS under [data-skin="parchment"], ready to wire to your own toggle (no switcher UI ships by default)
• SVG fractalNoise grain at 2.5% opacity, a 3px custom scrollbar, and TypeScript strict mode throughout

Deployment