Veil

Veil is a boutique brand-agency template built on Astro 6 with the new Fonts API, Instrument Serif, DM Sans and DM Mono are self-hosted, so the site makes zero external font requests. Nine pages cover a home reel, a work index, per-project case studies generated from a typed JSON collection, services, studio, journal, article and contact. The work index is the centrepiece: hovering any row fades in a ghost preview image that chases the cursor with GSAP quickTo. The home work cards add a clip-path polygon that snaps from a skewed rest shape to a full rectangle plus a pointer-driven 3D tilt, the hero parallaxes four layers at different rates, and a two-part gold cursor replaces the native one across the whole site.

What’s inside

• 9 pages, Home, Work index, Case study, Services, Studio, Journal, Journal article, Contact, 404
• Ghost preview on work rows, image tracks the cursor via gsap.quickTo (0.5s, power3.out) with a 20px offset above the pointer
• Clip-path polygon morph on hover, home work cards go from a skewed rest shape to a full rectangle in 0.7s
• Four-layer hero parallax, background image scrubs to +22 yPercent while the three headline lines drift at -14, -8 and -20
• Two-part custom cursor, 6px gold dot at 0.12s plus a 32px parchment ring at 0.4s that scales 1.8× over links, rebound on astro:page-load
• 3D tilt work cards, rotateX/rotateY computed from pointer distance to card centre with 900px perspective

The signature

The work index is a bare typographic list, index number, italic serif title, client and year, until you hover a row. Then a 220×140 ghost preview fades in and chases the pointer through gsap.quickTo, held 20 pixels above the cursor with a half-second power3 lag, so the imagery only ever exists where you are looking. On the home page the same restraint inverts: the selected-work cards each carry a clip-path polygon that sits slightly skewed at rest and snaps to a perfect rectangle over 0.7s while the image tilts in 900px perspective. The whole site runs under a custom two-part gold cursor and a fractalNoise grain overlay, so browsing feels closer to handling printed material than clicking a list.

See it live

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