Prism

Sobre Este Template

Prism es una plantilla de estudio creativo para diseñadores de motion, agencias de branding y directores de arte. Catorce rutas cubren dos variantes completas de homepage (magnética y editorial), un catálogo de trabajos filtrable con páginas de caso, un journal, servicios, estudio, perfiles de equipo, precios, carreras y contacto. El hero escribe PRISM con cinco letras que siguen el cursor cada una con su propia inercia vía gsap.quickTo — la P vuelve en 0.25s, la M arrastra en 0.65s — sobre un canvas de 2.000 partículas que deriva según la velocidad del scroll. Las portadas de proyecto se abren con un split-panel que se retrae desde el centro, los botones se imantan hacia el puntero y las cards hacen tilt en 3D. Superficies negro oliva con acento chartreuse eléctrico, más una variante Ember y un light mode Chalk completo. Astro 5, React 19, Tailwind v4, GSAP, Lenis y TypeScript strict.

Firma

El hero renderiza PRISM como cinco letras independientes, cada una conectada a su propio par de tweens gsap.quickTo. Cada letra tira hacia el puntero respecto a su propio centro, pero con una duración distinta — la P vuelve en 0.25s y la M arrastra en 0.65s — así que el wordmark ondula como una ola en vez de moverse como un bloque. Al hacer scroll, un ScrollTrigger scrubbed aleja las letras exteriores del centro mientras el canvas de 2.000 partículas detrás acelera con tu velocidad de scroll.

Características

• 14 rutas — Inicio, Inicio (variante editorial), Work, Detalle de Proyecto, Journal, Post, Servicios, Studio, About, Detalle de Equipo, Precios, Carreras, Contacto, 404
• Hero de wordmark magnético — cinco letras, cada una con su propia inercia gsap.quickTo de 0.25s (P) a 0.65s (M) para un efecto de ola que sigue al cursor
• Campo de 2.000 partículas en canvas detrás del hero que acelera y decae con la velocidad del scroll (solo desktop)
• Salida en scroll — las cinco letras derivan hacia afuera desde el centro y se desvanecen con un ScrollTrigger scrubbed
• Preloader donde las letras se dispersan, se ensamblan y se disuelven — guard con sessionStorage para que se reproduzca una vez por sesión
• Cover-split reveal — dos paneles se retraen desde el centro de cada imagen de proyecto al entrar por IntersectionObserver
• Segunda homepage completa (index-v2) — variante editorial sin efecto magnético que puedes intercambiar sin tocar el resto del sitio
• Grilla de trabajos con 4 filtros de categoría en vivo — Motion, Identity, Digital, Art Direction
• 4 colecciones de contenido — work (10 proyectos), journal (5 posts), team (5 miembros), testimonials (4)
• 3 skins de color mediante el atributo data-skin — Void (por defecto), Ember (acento naranja) y Chalk (light mode completo)
• Botones magnéticos y cards con tilt 3D globales vía atributos data-magnetic / data-tilt, re-vinculados tras cada view transition
• Marquee que acelera con la velocidad del scroll y vuelve suavemente a su ciclo base de 30s
• Journal con prosa de artículo con capitular, tags de categoría y cover-split reveal en la imagen de cada card
• Página de precios con 3 niveles de colaboración más un bloque de FAQ, y página de carreras con acordeón de vacantes expandible
• Grano de película (feTurbulence SVG al 4%) más un overlay de grilla crosshatch de 80px para dar textura a las superficies planas
• SEO listo — JSON-LD, Open Graph, URLs canónicas, sitemap, robots.txt, llms.txt y prefetch con speculation rules

Despliegue