Veil

Sobre Este Template

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.

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.

Características

• 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
• 2 colecciones tipadas vía glob loader — 6 case studies en JSON y 4 artículos de journal en Markdown
• Fonts API de Astro 6 — Instrument Serif, DM Sans y DM Mono self-hosted (display y body precargadas), cero requests externas
• Capa atmosférica — grano SVG fractalNoise, glows dorados difuminados, decoradores flotantes de línea/cruz/anillo y bordes shimmer
• Contadores de stats animados (84+ marcas, 12 años, 23 países, 96% de retención) disparados una vez al hacer scroll
• Ticker infinito de clientes alternando nombres en serif y etiquetas de disciplina en mono
• Strip de proceso en cuatro pasos — Diagnose, Position, Build, Embed — con reveals escalonados en scroll
• Bloque de filosofía con wordmark de fondo sobredimensionado desplazándose -8 xPercent con scrub de 2
• Preloader con wordmark y overlay de transición de página integrados con Astro View Transitions (ClientRouter)
• Smooth scroll con Lenis + GSAP ScrollTrigger, con formulario de contacto (nombre, email, empresa, tipo de proyecto, mensaje) y estado de éxito
• Listo para SEO — URLs canónicas, Open Graph, Twitter cards, @astrojs/sitemap, defaults de códec Sharp WebP/AVIF afinados, TypeScript estricto

Despliegue