Praxis

Sobre Este Template

Praxis es una plantilla de agencia creativa oscura y de tonos cálidos para estudios de diseño, marcas y colectivos freelance. Catorce plantillas de ruta cubren la portada, el índice de proyectos, una plantilla de detalle de proyecto que trae seis casos de estudio de ejemplo, servicios, la página de presentación del estudio, un equipo de cinco personas, un blog de cuatro artículos con su plantilla de entrada, precios en tres niveles, un acordeón de preguntas frecuentes con ocho preguntas, tres vacantes, contacto, una guía de estilo documentada y un 404. El hero ejecuta dos mesh gradients de Paper Shaders apilados sobre WebGL — un campo sólido en tonos tierra más una capa wireframe — detrás de un reveal con desenfoque palabra por palabra, con un orbe shader pulsante en la esquina. Más abajo en la portada, una galería zoom-parallax de siete imágenes lleva cada panel con scrub a una escala de entre 4x y 9x a lo largo de una sección sticky de 300vh, y la banda marquee lee la velocidad de ScrollTrigger para acelerarse hasta 4x mientras haces scroll. Incluye tres skins de color diseñados, conmutables por página.

Firma

El hero no es una imagen — son dos mesh gradients WebGL en vivo renderizados por Paper Shaders, un campo sólido en tonos tierra con una capa wireframe derivando encima a otra velocidad, así que el fondo nunca se repite. Sigue el scroll y toma el relevo el ZoomParallax: siete imágenes dispersas fijadas a lo largo de una sección de 300vh, cada una con scrub hasta su propia escala de entre 4x y 9x, de modo que la galería se abre y pasa de largo por el viewport en vez de simplemente hacer fade in.

Características

• 14 plantillas de página — Inicio, Proyectos, Detalle de Proyecto, Servicios, Sobre el estudio, Equipo, Blog, Artículo, Precios, Preguntas frecuentes, Empleo, Contacto, Guía de estilo, 404
• Hero con shaders WebGL — dos capas MeshGradient de @paper-design/shaders-react apiladas, un campo sólido en tonos tierra a velocidad 0.25 y un overlay wireframe a 0.15 y 40% de opacidad
• Orbe shader PulsingBorder anclado en la esquina del hero — un anillo de spots de cinco colores con parámetros de smoke, softness y pulse configurados
• Reveal del titular palabra por palabra — cada palabra anima desde y:30, opacity 0 y blur(10px) con stagger de 60ms y power3.out
• ZoomParallax — galería dispersa de siete imágenes fijada a lo largo de una sección de 300vh; cada panel hace scrub hasta su escala de la secuencia [4, 5, 6, 5, 6, 8, 9] para que las imágenes pasen volando por el viewport
• Marquee reactivo a la velocidad — loop infinito de xPercent cuyo timeScale se impulsa con la velocidad de scroll de ScrollTrigger hasta un tope de 4x, y luego vuelve suavemente
• 3 skins de color diseñados — Gallery Dark, Studio Light y Midnight Obsidian — conmutables por página mediante el prop skin de BaseLayout, que escribe data-skin en el elemento html; todas las páginas salen con Gallery Dark, el skin por defecto
• Página de guía de estilo que documenta los seis tokens de color como muestras, especímenes tipográficos de titular y cuerpo, las dos variantes de botón y los tres skins uno al lado del otro
• Cada componente GSAP importa gsap y ScrollTrigger de forma dinámica dentro de useEffect, así el bundle de animación nunca bloquea el first paint
• Seis páginas de caso de proyecto con estructura challenge/solution/results, tags de servicios y galerías de imágenes
• Acordeón de preguntas frecuentes accesible construido sobre useId, con aria-expanded y aria-controls y ocho preguntas, más una página de precios de tres niveles y tres vacantes publicadas
• 4 Content Collections de Astro definidas con esquemas Zod y el loader glob (work, blog, team, services), cada una con una entrada markdown de ejemplo — los datos de página van hoy como arrays inline tipados que puedes cambiar por llamadas a getCollection()
• Design tokens en custom properties de CSS — escala tipográfica fluida con clamp() de xs a 7xl, grid de espaciado de 8px, escala de radios, curvas de easing y una escala de z-index con nombres
• Head de SEO en cada página — Open Graph, Twitter summary_large_image, URL canónica, @astrojs/sitemap y un prop opcional noindex
• Smooth scroll con Lenis + Astro View Transitions (ClientRouter), fallback noscript que desoculta todos los elementos de reveal, skip link y botón back-to-top
• prefers-reduced-motion comprobado al inicio de cada componente animado — el hero, la galería zoom y el marquee hacen early-return a sus layouts estáticos

Despliegue