Prism

About This Template

Prism is a creative-studio template for motion designers, brand shops, and art directors. Fourteen routes cover two complete homepage variants (magnetic and editorial), a filterable work catalog with case-study pages, a journal, services, studio, team profiles, pricing, careers, and contact. The hero spells PRISM in five letters that each track the cursor with their own gsap.quickTo inertia — P snaps back in 0.25s, M trails at 0.65s — over a 2,000-particle canvas that drifts with scroll velocity. Project covers open with a split-panel reveal that retracts from the center, buttons pull magnetically toward the pointer, and cards tilt in 3D. Olive-black surfaces with an electric chartreuse accent, plus an Ember variant and a full Chalk light mode. Astro 5, React 19, Tailwind v4, GSAP, Lenis, TypeScript strict.

Signature

The hero renders PRISM as five independent letters, each wired to its own pair of gsap.quickTo tweens. Every letter pulls toward the pointer relative to its own center, but with a different duration — P snaps back in 0.25s while M trails at 0.65s — so the wordmark ripples like a wave instead of moving as a block. Scroll past it and a scrubbed ScrollTrigger drifts the outer letters away from center while a 2,000-particle canvas behind them accelerates with your scroll velocity.

Features

• 14 routes — Home, Home (editorial variant), Work, Work Detail, Journal, Journal Post, Services, Studio, About, Team Detail, Pricing, Careers, Contact, 404
• Magnetic wordmark hero — five letters, each with its own gsap.quickTo inertia from 0.25s (P) to 0.65s (M) for a trailing-wave pull toward the cursor
• 2,000-particle canvas field behind the hero that accelerates and decays with scroll velocity (desktop only)
• Scroll exit — the five letters drift outward from center and fade on a scrubbed ScrollTrigger
• Preloader where the letters scatter, assemble, and dissolve — sessionStorage guard so it plays once per session
• Cover-split reveal — two panels retract from the center of each project image on IntersectionObserver entry
• Second complete homepage (index-v2) — an editorial, non-magnetic variant you can swap in without touching the rest of the site
• Work grid with 4 live category filters — Motion, Identity, Digital, Art Direction
• 4 content collections — work (10 projects), journal (5 posts), team (5 members), testimonials (4)
• 3 color skins driven by a data-skin attribute — Void (default), Ember (orange accent), and Chalk (full light mode)
• Global magnetic buttons and 3D tilt cards via data-magnetic / data-tilt attributes, re-bound after every view transition
• Marquee that speeds up with scroll velocity and eases back to its base 30s cycle
• Journal with drop-cap article prose, category tags, and cover-split image reveals on every card
• Pricing page with 3 engagement tiers plus an FAQ block, and a careers page with an expandable roles accordion
• Film grain (SVG feTurbulence at 4%) plus an 80px crosshatch grid overlay for texture on flat surfaces
• SEO ready — JSON-LD, Open Graph, canonical URLs, sitemap, robots.txt, llms.txt, and speculation-rules prefetch

Deployment