Studiox — Creative Agency Next.js Template

Studiox is a calm, editorial Next.js template for independent agencies, design studios and freelancers who want a site that feels considered, not loud. Large Geist type, one cobalt accent and plenty of white space keep the focus on the work. A real-time liquid-chrome hero and a kinetic wordmark give it character from the first scroll.

It is built with Next.js 16 (App Router, every route prerendered), React 19, TypeScript, Tailwind CSS v4, GSAP and Lenis.

Pages

• Home: 16 sections, including the chrome hero with an expanding video, a scroll-driven image zoom, a services list with a hover preview, selected work, client logos, a four-step process, animated stats, a draggable team track, awards, a testimonial deck, pricing, journal, FAQ and a contact form
• About: the studio's story, values and team
• Services: four disciplines and the working process
• Work: all projects in one view
• Project page: one detail page per Markdown file (four included), with the challenge, approach, results and gallery
• Journal: all articles
• Article: one page per Markdown file (three included)
• Team member: one page per Markdown file (ten included), with a bio and focus areas
• Pricing: two plans and what is always included
• Contact: an enquiry form with service and budget choices
• Privacy Policy
• 404

Built in

• Liquid-chrome hero: a WebGL shape that follows the cursor.
• Kinetic wordmark: the letters of the name swell as the cursor passes over them.
• Crosshair cursor: thin lines and a label that changes per section, on mouse devices.
• Intro loader and page transitions: the logo mark builds itself once per visit, and a curtain carries the page label between routes.
• Scroll motion: GSAP ScrollTrigger drives the image zoom, line-by-line headline reveals, image reveals and pixel edges that dissolve between sections.
• Testimonial deck and team track: drag the quotes to shuffle them, and drag the team sideways.
• Counters and pixel stats: numbers roll with NumberFlow while a grid of cells fills in.
• Smooth scrolling with Lenis, and a menu with a clip reveal and staggered links.
• Reduced motion: the site respects the visitor's reduced-motion setting and shows every section in place.

Easy to edit

• Email, navigation, footer and social links live in src/data/site.ts. Home text is in src/data/home.ts, and the other pages are in src/data/pages.ts.
• Adding one Markdown file to src/data/projects/, src/data/blog/ or src/data/team/ creates its page and adds it to the lists. Services work the same way in src/data/services/, without a page of their own.
• Colours and the font token are in one file, src/styles/variable.css, and the type styles are in src/styles/typography.css. Geist loads from src/utils/font.ts through next/font and is served from your own site.
• Server components render the content; client code runs only where something moves or responds.
• SEO is set up: per-page titles and descriptions, canonical URLs, Open Graph tags, a generated sitemap.xml and robots.txt, and images through next/image.

Good to know

• Images: the photos and hero video in the download are placeholders at the exact size the design uses, labelled with their size. Swap in your own.
• Forms: the contact form checks its fields in the browser, then opens the visitor's email app with the message filled in. There is no backend.
• Hosting: every route is prerendered. Deploy to Vercel with no settings, any Node host (bun run build && bun run start), or Cloudflare Workers with the included OpenNext setup.
• Requirements: Node.js 20.9 or newer. npm and Bun both work.

The included documentation walks through setup, content, colours, images, animations and deploying.