Veil

Veil es una plantilla de agencia de marca boutique construida sobre Astro 6 con la nueva Fonts API, Instrument Serif, DM Sans y DM Mono van self-hosted, así que el sitio no hace ni una request externa de fuentes. Nueve páginas cubren home, índice de work, case studies por proyecto generados desde una colección JSON tipada, servicios, studio, journal, artículo y contacto. El índice de work es lo mejor: al hacer hover en cualquier fila aparece una imagen ghost que persigue al cursor con GSAP quickTo. Las cards de work del home añaden un polígono clip-path que pasa de una forma inclinada en reposo a un rectángulo completo, más un tilt 3D según el puntero; el hero hace parallax de cuatro capas a distinta velocidad, y un cursor dorado de dos piezas reemplaza al nativo en todo el sitio.

Qué incluye

• 9 páginas, Inicio, Índice de Work, Case study, Servicios, Studio, Journal, Artículo, Contacto, 404
• Preview ghost en las filas de work, la imagen sigue al cursor con gsap.quickTo (0.5s, power3.out) y 20px de offset sobre el puntero
• Morph de polígono clip-path en hover, las cards de work del home pasan de forma inclinada en reposo a rectángulo completo en 0.7s
• Parallax de cuatro capas en el hero, la imagen de fondo va a +22 yPercent mientras las tres líneas del titular se desplazan a -14, -8 y -20
• Cursor custom de dos piezas, punto dorado de 6px a 0.12s más anillo de 32px a 0.4s que escala 1.8× sobre links, re-vinculado en astro:page-load
• Cards de work con tilt 3D, rotateX/rotateY calculados según la distancia del puntero al centro con perspective de 900px

La firma

El índice de work es una lista puramente tipográfica, número, título en serif itálica, cliente y año, hasta que haces hover en una fila. Entonces aparece un preview ghost de 220×140 que persigue al puntero mediante gsap.quickTo, sostenido 20 píxeles por encima del cursor con medio segundo de lag power3, así que la imagen solo existe donde estás mirando. En el home la misma contención se invierte: cada card de selected work lleva un polígono clip-path que en reposo queda ligeramente inclinado y se ajusta a un rectángulo perfecto en 0.7s mientras la imagen se inclina en una perspectiva de 900px. Todo el sitio corre bajo un cursor dorado custom de dos piezas y un overlay de grano fractalNoise, así que navegarlo se siente más cerca de manipular material impreso que de clicar una lista.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/veil-agency/. 9 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.