Veil

About This Template

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.

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.

Features

• 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
• 2 typed content collections via the glob loader — 6 JSON case studies and 4 Markdown journal articles
• Astro 6 Fonts API — Instrument Serif, DM Sans and DM Mono self-hosted (display and body preloaded), zero external requests
• Atmospheric layer — SVG fractalNoise grain, blurred gold ambient glows, floating line/cross/ring decorators and shimmer borders
• Animated studio stat counters (84+ brands, 12 years, 23 countries, 96% retention) fired once on scroll
• Infinite client ticker alternating serif client names and mono discipline labels
• Four-step process strip — Diagnose, Position, Build, Embed — with staggered scroll reveals
• Philosophy block with oversized background wordmark drifting -8 xPercent on a scrub of 2
• Wordmark preloader and page-transition overlay wired into Astro View Transitions (ClientRouter)
• Lenis smooth scroll + GSAP ScrollTrigger, with contact form (name, email, company, project type, message) and success state
• SEO ready — canonical URLs, Open Graph, Twitter cards, @astrojs/sitemap, tuned Sharp WebP/AVIF codec defaults, TypeScript strict

Deployment