Praxis

About This Template

Praxis is a dark, warm-toned creative agency template for design studios, branding shops and freelance collectives. Fourteen route templates cover the home page, a work index, a project-detail template that ships six seeded case studies, services, about, a five-person team page, a four-post blog with a post template, three-tier pricing, an eight-question FAQ accordion, three open roles, contact, a documented style guide and a 404. The hero runs two stacked Paper Shaders mesh gradients on WebGL — a solid earth-tone field plus a wireframe overlay — behind a word-by-word blur reveal, with a pulsing shader orb in the corner. Further down the home page, a seven-image zoom-parallax gallery scrubs each panel to a scale target between 4x and 9x across a 300vh sticky section, and the marquee band reads ScrollTrigger velocity to speed itself up to 4x while you scroll. Three designed color skins ship, switchable per page.

Signature

The hero is not an image — it is two live WebGL mesh gradients rendered by Paper Shaders, a solid earth-tone field with a wireframe layer drifting over it at a different speed, so the background never repeats. Scroll past it and the ZoomParallax takes over: seven scattered images pinned across a 300vh section, each scrubbed to its own scale target between 4x and 9x, so the gallery opens up and rushes past the viewport instead of simply fading in.

Features

• 14 page templates — Home, Work, Project Detail, Services, About, Team, Blog, Post, Pricing, FAQ, Careers, Contact, Style Guide, 404
• WebGL shader hero — two stacked @paper-design/shaders-react MeshGradient layers, a solid earth-tone field at 0.25 speed and a wireframe overlay at 0.15 speed and 40% opacity
• PulsingBorder shader orb anchored in the hero corner — a five-color spot ring with configured smoke, softness and pulse parameters
• Word-by-word headline reveal — each word animates from y:30, opacity 0 and blur(10px) on a 60ms stagger with power3.out
• ZoomParallax — a seven-image scattered gallery pinned across a 300vh section, each panel scrubbed to its own scale target from the [4, 5, 6, 5, 6, 8, 9] ramp so the images fly past the viewport
• Velocity-reactive marquee — an infinite xPercent loop whose timeScale is driven by ScrollTrigger scroll velocity up to a 4x cap, then eased back
• 3 designed color skins — Gallery Dark, Studio Light and Midnight Obsidian — switchable per page through the skin prop on BaseLayout, which writes data-skin on the html element; every page ships on Gallery Dark, the default
• Style guide page documenting the six color tokens as swatches, heading and body type specimens, both button variants and all three skins side by side
• Every GSAP component dynamic-imports gsap and ScrollTrigger inside useEffect, so the animation bundle never blocks first paint
• Six project case-study pages with challenge/solution/results structure, service tags and image galleries
• Accessible FAQ accordion built on useId with aria-expanded and aria-controls wiring and eight questions, plus a three-tier pricing page and three open-role listings
• 4 Astro Content Collections defined with Zod schemas and the glob loader (work, blog, team, services), each with one seed markdown entry — page data currently ships as typed inline arrays you can swap for getCollection() calls
• Design tokens in CSS custom properties — fluid clamp() type scale from xs to 7xl, 8px spacing grid, radius scale, easing curves and a named z-index scale
• SEO head on every page — Open Graph, Twitter summary_large_image, canonical URL, @astrojs/sitemap and an optional noindex prop
• Lenis smooth scroll + Astro View Transitions (ClientRouter), a noscript fallback that un-hides every reveal element, skip link and back-to-top button
• prefers-reduced-motion checked at the top of every animated component — the hero, zoom gallery and marquee all early-return to their static layouts

Deployment