Prisma — Next.js Portfolio Template
A dark, motion-rich portfolio for brand designers and creative studios.
About this template
Prisma is a portfolio template for brand designers, art directors and small creative studios. It is dark and quiet, the motion is careful, and the work is what people see first.
Pages
- Home
- Projects, with category filters
- Project details: one per case study, written in Markdown
- About
- Journal, with pagination and sort
- Article pages: one per post
- Contact, with a form and FAQ
- Privacy policy
- 404
Motion
- A preloader whose counter opens into the hero from the centre
- A WebGL hero: the photo ripples and blurs under the cursor
- Page transitions that slide each new page up over the last
- A push menu that drops the page into a card to reveal page previews
- Headings that reveal word by word and line by line, with inline photo pills
- Project cards whose corners lock onto the cursor like a camera reticle
- A draggable testimonial carousel that ripples when you scroll it
- Live local clocks, counters that roll up, and an elastic divider line
Everything respects the visitor's reduced-motion setting.
Built with
- Next.js 16 (App Router), React 19, Tailwind CSS v4, GSAP and Lenis
- Reusable animation wrappers: wrap any element in
<Reveal>,<LineReveal>or<ClipReveal>to animate it - Projects and articles are Markdown files; each
##heading becomes the "On this page" contents - All page text lives in typed data files
- Images served through
next/image - Per-page SEO metadata and share images
- Every page is pre-rendered at build time
- Deploys to Vercel, Netlify or your own Node server
In the zip
The full source with placeholder images at the exact sizes the design uses, plus a README covering setup, content, images, colours and deployment.