Frame

Sobre Este Template

Frame es una plantilla de portfolio editorial para fotógrafos, directores de motion y estudios visuales. Siete páginas cubren un catálogo de proyectos con alternancia grilla/lista y filtros por categoría, páginas de detalle con galerías masonry asimétricas, sección de journal, información del estudio y contacto. Al pasar sobre cualquier fila de proyecto en vista lista, aparece una imagen fantasma que sigue el cursor con lag elástico vía GSAP QuickTo, creando una previsualización táctil sin salir de la página. Un contador de scroll fijo (00–99%) avanza en la esquina superior derecha. Las páginas de detalle abren con una imagen cover a sangre completa y revelan galerías asimétricas mediante clip-path con scroll triggers. Fondo blanco cálido con acento terracota, overlay de grano SVG, smooth scroll con Lenis y Astro View Transitions en todo el sitio.

Firma

Pasa el cursor sobre cualquier fila de proyecto en vista lista y aparece una imagen fantasma — siguiendo tu cursor con lag elástico vía GSAP QuickTo. La imagen sigue con un delay de spring de 0.35s, creando una previsualización táctil sin salir de la página. Combinado con un contador de scroll fijo (00–99%) y revelados de galería con clip-path que limpian las imágenes en vista al hacer scroll, Frame se siente como una galería digital, no un sitio web.

Características

• 7 páginas completas — Inicio, Detalle de Proyecto, Journal, Artículo de Journal, Información, Contacto, 404
• Preview de cursor fantasma — tracking elástico de imagen con GSAP QuickTo al hover en filas de lista
• Alternancia de vista grilla/lista con filtros por categoría (stills, motion, culture)
• Contador de scroll (00–99%) fijo en la esquina superior derecha, impulsado por ScrollTrigger
• Galería masonry asimétrica con animaciones de revelado clip-path en scroll en páginas de detalle
• 2 colecciones de contenido — Proyectos (8 entradas) y Journal (4 artículos) en Markdown
• Navegación proyecto anterior/siguiente en páginas de detalle
• Overlay de grano SVG (fractalNoise al 4% de opacidad) para sensación editorial
• Formulario de contacto con integración Formspree — cambia el endpoint para activar
• Journal/blog con estimación de tiempo de lectura y preview de imagen en hover
• Smooth scroll con Lenis + View Transitions de Astro con ClientRouter
• 27 imágenes con licencia Unsplash incluidas — optimizadas a WebP, listas para publicar
• SEO optimizado — JSON-LD, Open Graph, URLs canónicas, sitemap, robots.txt, llms.txt
• Google Analytics condicional (GA4) — se carga solo cuando la variable de entorno está configurada
• Totalmente responsive en breakpoints de 375px, 768px y 1440px
• TypeScript en modo estricto — cero any, cero warnings de build

Despliegue