Obsidian

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.

What’s inside

• 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

The 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.

See it live

The demo is public: https://fpsjago.github.io/obsidian/. 10 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.