Serein: Brand agency and creative studio landing page template for Next.js.

$39one-time payment

Buy SereinLive demo

Checkout opens soon.

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

Live demo

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

Overview

A complete independent studio website with original positioning and campaign imagery. Large monochrome type, a softly moving silk study and stacked projects create a considered introduction to brand strategy, digital design and creative partnerships.

Made for: Independent brand and digital studios, Creative agencies and art direction practices, Designers with a carefully curated portfolio
Highlights: Oversized Manrope wordmark and a locally shipped silk backdrop with WebGL material motion
A rotating project reel, three stacked portfolio cards and complete case study routes
Expanding service surfaces, four process steps, an orbit study and two engagement options
Configurable booking and form endpoints, complete email briefs, a journal and accessible disclosures
The look: Manrope typography, near-black and neutral paper, a soft citron accent and fine structural rules. An oversized lowercase wordmark sits over original silk; a project reel leads into a framed studio statement, stacked project cards, dark service surfaces, a four-step process, a dimensional orbit, two engagement cards and a large closing wordmark.

Sections

01
Navigation and hero
A sticky black header, accessible expanding navigation, wordmark entrance, original silk with slow WebGL displacement and a controllable featured project reel.
02
Studio and work
A framed studio statement, three principles and three project cards that stack and subtly shrink on desktop. Phones use normal document flow.
03
Services
Four numbered service surfaces expand in place with coordinated imagery, deliverables and contact links that preselect the relevant service.
04
Process and partnership
Four original process icons and steps, a CSS orbit study and a focused statement of the studio's working principles.
05
Engagements and FAQ
Two clearly scoped engagement options, preselected contact destinations and native keyboard-accessible disclosures.
06
Closing and footer
A second silk study, useful contact and resource destinations, an oversized brand signature.
07
Portfolio
A filterable project directory, three full case studies, editable brand specimens and linked next projects.
08
Contact and journal
Validated project briefs with configured JSON submission or complete email drafts and text downloads. Three original journal articles, editable policies and a missing-page state.

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

Make it yours

Start with site.config.ts for the brand, copy, services, fees, FAQs and destinations. Projects and articles live in their own small typed files.

Where to change each part of Serein
To change	Edit
Brand, metadata, services, process, plans and destinations	site.config.ts
Portfolio images, case studies and deliverables	data/projects.ts
Journal articles	data/journal.ts
Palette, shared type and spacing	styles/base.css
Section order and typography	app/page.tsx and app/layout.tsx
Contact submission and email briefs	components/ContactForm.tsx and lib/contact.ts
Silk motion and local original imagery	lib/ribbon-shaders.ts, public/images/ and ASSETS.md

Run it

$ npm install$ npm run dev

Node.js 20.9 or newer. No environment variables.

Before you go live

Replace the fictional studio, projects, stories and fees. Set the email address, booking URL and optional contact endpoint; update your policies. The default contact flow prepares an email draft or downloads the visitor's complete brief, without claiming it was sent. Direct submission displays success only after the configured endpoint accepts the request.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Fonts: Manrope, self-hosted with next/font
Dependencies: next, react, react-dom
Images: Four original AI-generated studies: silver audio hardware, an olive-glass fragrance campaign, sculptural architecture and translucent charcoal silk. All optimized WebP assets ship locally; marks, icons and the orbit are editable SVG and CSS.
API keys and environment variables: None
Node.js: 20.9 or newer
Colour scheme: Dark
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: 67 source files, about 4,800 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 Serein?

The complete Serein 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 Serein 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 Serein are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Serein 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 Serein and every template added later. Three single templates would cost $117.