Skip to content
GetUrUI

Studio Nine Agency

NewTemplateProduct site5 screens

A five-page site for Studio Nine, a fictional design & engineering studio: a kinetic oversized-type hero, case studies with hover reveals and a filterable index, long-form case pages with a before/after slider, fixed-price packages and a project brief form.

Get this template

A self-contained Next.js project. One-time purchase, lifetime updates for this template, source yours to deploy.

$39

One-time payment in USD, plus tax where applicable.

Or get every template with Lifetime

By continuing you agree to the Terms and the License. You ask for access to the digital content straight away and acknowledge that you lose your 14-day right of withdrawal once you download or install a paid item; our Refund policy still applies.

Included with Lifetime ($149) — compare plans.

Open

What is this?

Studio Nine is a complete agency website in one template: home, work, case study, services and contact, connected by a small in-page router so every screen is one click (or one ?screen= link) away. It leans on type rather than photography — giant kinetic headlines, generative shape art for each project and a single ember accent — so it looks finished the moment you drop it in, and stays sharp in light and dark.

Who is it for?

Design studios, product consultancies, freelance collectives and engineering shops that sell outcomes rather than mood boards. If your pitch is “we moved this number”, the case-study pages, metric tickers and before/after slider are built to tell exactly that story.

What you get

Everything needed to make it yours.

Kinetic type hero

Oversized lines rise in letter by letter, drift against each other as you scroll and flip through disciplines — all calm under reduced motion.

Work that reveals itself

Project tiles animate their cover art, slide up a summary with the headline metric and trail a “View case” pill that follows the pointer.

Filterable case-study index

Filter by discipline with live counts, then switch between a reflowing grid and a typographic index that floats a cover preview by the cursor.

Long-form case studies

Reading progress, sticky chapter labels, a drop cap, rolling result metrics, credits and next/previous — eight cases ready to rewrite.

Before/after slider

A legacy-versus-shipped comparison drawn entirely from shapes, draggable by pointer and fully operable with arrow keys, Home and End.

Brief form that converts

Project-type and budget chips, start timeline, inline validation that focuses the first issue, a sending state and a reference-numbered success view.

Screens & sections

  • Home — kinetic hero
  • Selected work with hover reveals
  • Services and process
  • Client wordmarks
  • Work — filterable grid and index
  • Case study — long-form with metrics
  • Before/after slider
  • Services — packages, add-ons, FAQ
  • Contact — project brief form
  • Brief sent confirmation

Stack

Next.jsReact 19Tailwind CSS 4Motion

12 source files · GetUrUI components bundled

motion, lucide-react, clsx, tailwind-merge

More templates