Obsidian

About This Template

Obsidian is a dark, gold-leaf template for a luxury jewellery maison or a high-end atelier. Ten routes cover the home, a collections index and per-collection pages, individual piece pages with a sticky spec panel (metal, stone, weight, dimensions, price), a four-step craftsmanship page, a heritage timeline, a journal with a featured lead post, an appointment-only contact page and a 404. Four typed content collections — collections, pieces, journal and testimonials — drive everything from JSON, so a new piece is just a new file. The hero runs 200vh: the macro photograph clips inward like a vault door closing while a giant outlined OBSIDIAN wordmark emerges behind it. Gold counters tick up on scroll, an asymmetric bento grid breaks the card-grid habit, and a conic-gradient shimmer border animates the primary CTA.

Signature

The hero is a 200vh sticky stage. As you scroll, the macro jewellery photograph clips inward from inset(0%) to inset(40%) on a scrub of 1.5 — a vault door closing — while the image inside counter-scales to 1.3 so the crop tightens instead of shrinking. Behind it, a colossal OBSIDIAN wordmark drawn only in a 1px gold stroke fades up from 0.8 scale, so closing the photograph is what reveals the house name.

Features

• 10 routes — Home, Collections, Collection detail, Piece detail, Craftsmanship, Heritage, Journal, Journal post, Contact, 404
• Vault-door hero — 200vh sticky section where the photo clips to inset(40%) on a scrub of 1.5 while its image counter-scales to 1.3
• Giant outlined OBSIDIAN wordmark fades and scales in behind the hero photo as an inverse reveal
• 4 typed content collections — 5 collections, 8 pieces, 4 journal posts, 4 testimonials, all JSON with Zod schemas
• Asymmetric bento collections grid — 7 / 5 / 12 column spans with hover-scaled images and corner marks, never a symmetric card row
• GSAP counter bar — founded year, hours per piece, generation and artisan count animate from zero on ScrollTrigger, once each
• Piece detail with sticky spec table — metal, stone, weight, dimensions and price formatted as GBP via Intl.NumberFormat
• Conic-gradient shimmer border on the Book Appointment CTA, animated with a registered @property --shimmer-angle
• Alternating vertical heritage timeline — six dated milestones from 1947 to 2024 on a gradient spine
• Four-step craftsmanship process (design, cast, set, polish) with a full photograph per step
• Infinite CSS marquee of house materials and hallmarks — diamonds, gold, platinum, bespoke — and a journal index with a featured lead card plus a three-column grid
• 3 tokenised skins — Obsidian Noir, Ivory Atelier and Midnight Sapphire, applied from a single data-skin attribute
• Atmosphere layer — blur(120px) gold and champagne glows, 3% fractalNoise film grain, floating rings, crosses and corner rules
• Appointment enquiry form with a submitted success state, plus address, opening hours and direct atelier contact block
• Lenis smooth scroll + ScrollTrigger torn down on astro:before-preparation and rebuilt on astro:page-load, with reveals that skip astro-island subtrees
• 28 jewellery, atelier and client-portrait photographs optimised to WebP via getImage(), sitemap, canonical and Open Graph, TypeScript strict

Deployment