Turnout: Motion-led experiential agency and events studio template for Next.js.

$39one-time payment

Buy TurnoutLive demo

Checkout opens soon.

Next.js 15
CSS
TypeScript
15 sections
Light
No API keys
Updated Oct 10, 2026

Live demo

The Turnout landing page template on desktop, from the hero to the footer

Overview

A complete studio site with original positioning: Turnout designs, builds and films brand experiences (pop-ups, launch nights, run clubs, supper clubs and creator trips) and turns each one into a season of content. Photography carries the page, a lime ribbon ties it together, and every label, figure and card that changes moves instead of swapping.

Made for: Event, experiential and brand activation agencies, Creative studios, hospitality and community brands that sell in-person work, Any agency that wants a photo-led, motion-first site with real case study pages
Highlights: Ribbon of words that drifts on its own and speeds up with your scroll
Self-shuffling photo deck, a pinned problem scene and folder-stacked services
Five case studies, a filterable work index, journal and a working contact form
Rolling prices, morphing labels and full reduced-motion support
The look: Bricolage Grotesque headings at tight optical sizes with Geist for reading. A neutral paper page, near-black ink and one acid-lime accent, with periwinkle, stone and blush colouring the service, process and result cards. Rounded photo frames, pill controls and 1px rings, no drop shadows. Twenty-six original photographs, all generated for the template.

Sections

01
Hero
A three-line headline with a lime marker that draws in, a photo deck that shuffles itself on a CSS timer (tap, swipe or the arrow to advance, hover or focus to hold), a lime ribbon of words that drifts behind it and speeds up with scroll, a latest-project card and the main call to action.
02
Navigation
A dark pill bar that narrows as you scroll, a highlight that glides between links and rests on the section you're reading, and a phone menu that grows out of the bar.
03
Client strip
An endless strip of fictional client wordmarks that pauses on hover.
04
Problem scene
The headline stays pinned while the page turns dark and five problems drift past. Each is crossed out as it passes the middle, then the headline morphs into the answer and the page turns light again.
05
Mission and proof
A statement that lights up word by word, threads that draw themselves as you scroll, and two photo rows with figures that roll up.
06
Featured work
A wide card and four squares; each metric morphs into "Read the case study" on hover and links to a full case study page.
07
Orbit
Photos from every project circle one link and turn as you scroll; the ring opens when you point at the link.
08
Services
Four colour cards stack like folders as you scroll, with tabs that stay visible as an index you can jump from; the covered card dims and its photo settles back.
09
Comparison
Two askew cards, the usual way and yours, that swing into place; the checks on yours draw in sequence and hovering straightens a card.
10
Process
Four steps in a row; pointing at one widens it to show when it happens and what you get, and its icon draws itself.
11
Client notes and team
A featured quote with a portrait beside four shorter notes, then six portraits pinned along a thread whose name tags slide out on hover.
12
Pricing
Two retainers with a quarterly/yearly switch, rolling prices, a billing note that slides in from the side you chose, and a custom option; plan buttons open the contact form with the plan filled in.
13
Journal, FAQ and closing
Three articles, an accordion beside a sticky title and a dark closing panel with a line that draws itself.
14
Footer
The page lifts away to reveal a lime footer: links, contact details, a newsletter form whose button morphs through each state and a wordmark that rises letter by letter.
15
Pages
A filterable /work index, five case studies with facts, results, story, gallery and quote, three journal articles, a contact page, privacy and terms placeholders and a custom 404.

Remove a section by deleting its line in app/page.tsx, or move the line to reorder.

Make it yours

Every heading, paragraph, plan and destination lives in site.config.ts, and the case studies and articles are plain data files. Replace the photos in public/images with your own at similar proportions.

Where to change each part of Turnout
To change	Edit
Brand, copy, ribbon words, services, team, plans, FAQ and links	site.config.ts
Case studies (cards, /work and each case study page)	data/work.ts
Journal articles	data/articles.ts
Booking link, contact and newsletter endpoints	site.config.ts → links
Palette and type	styles/base.css, app/layout.tsx
Photos (shapes in the README)	public/images/
Section order	app/page.tsx

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace the fictional studio, clients, people, figures and case studies. Set links.booking, links.contactEndpoint and links.newsletterEndpoint (or keep the email fallbacks), plan links and site.url in site.config.ts, and swap in your own photography.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Fonts: Bricolage Grotesque, Geist, self-hosted with next/font
Dependencies: next, react, react-dom
Images: Twenty-six original photographs generated for the template and shipped as WebP, about 1.8 MB in all. The mark, client wordmarks and icons are SVG.
API keys and environment variables: None
Node.js: 20.9 or newer
Colour scheme: Light
Responsive: Desktop, tablet and phone
Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 95 source files, about 5,200 lines
Last updated: Oct 10, 2026

License

One license, no tiers. The full text ships as LICENSE.md in the download.

You can

Use it for your own products
Use it for any number of client projects
Change the code and design however you like
Deploy the result commercially

You can’t

Resell or share the files as a template, theme or UI kit
Publish the source as a template in a public repository

Questions

What do I get when I buy Turnout?

The complete Turnout project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. The download link arrives right after checkout.

Can I use Turnout for client projects?

Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.

Do I need API keys, a database or a backend?

No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.

What should I change before I launch?

Do I need to know Next.js?

Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.

How do updates work?

Updates to Turnout are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Turnout isn’t right for you, reply to your receipt within 14 days and you get your money back.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $99 for all 31 templates, including Turnout and every template added later. Three single templates would cost $117.