Tessera: Motion-led AI systems and automation studio template for Next.js.

$39one-time payment

Buy TesseraLive demo

Checkout opens soon.

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

Live demo

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

Overview

A complete independent studio site positioned around practical operations and human judgment. A kinetic isometric sculpture introduces the brand, an in-place explorer makes the services concrete, and original example architectures explain the work without fabricated client results.

Made for: AI implementation and automation studios, Operations consultancies and integration partners, Technical agencies that value clear explanations and a strong motion identity
Highlights: Original isometric geometry, breathing tiles and scroll-linked details
Keyboard-accessible capability tabs and connected workflow diagrams
Three full system studies, two journal articles and a validated contact brief
Rolling offer prices, animated FAQ and system reduced-motion support
The look: Deep navy and cool white with mint, lilac and pale blue. Locally served Geist and Geist Mono, large asymmetric typography, square surfaces and fine borders. Original SVG sculptures, workflow diagrams and CSS article artwork form one visual system. No remote imagery or animation library.

Sections

01
Hero and navigation
An asymmetric two-line headline reveals through drawing blocks beside a 49-tile isometric sculpture. Individual tiles breathe on CSS timelines, the sculpture shifts with scroll, and the fixed header contracts into a compact bar. On phones the menu grows from that same header.
02
Studio statement
Three editorial lines reveal independently, followed by the studio’s principles and positioning.
03
Capability explorer
Four keyboard-accessible tabs change the background, workflow nodes, description and deliverables inside one panel. Animated signals move between the diagram’s steps.
04
System studies
Three distinct isometric objects introduce example architectures. Each card opens a full story with a workflow map, scope, friction and intended change, three narrative sections and a next-study link.
05
Approach and foundations
A sticky narrative and scroll-rotating modular mark sit beside four process steps. A dark chapter explains visible decisions, handover and evaluation, followed by a connected-tool strip.
06
Engagements
Two offers with project and ongoing modes, a sliding selector and rolling digit prices. Offer buttons prefill the contact page’s engagement field.
07
FAQ and field notes
A smoothly resizing accordion and two original journal notes, each with a full article page and geometric artwork.
08
Closing and footer
A large mint-accented invitation, useful contact and section links, and a wordmark that rises slightly with scroll.
09
Contact and legal pages
A validated brief that prepares a reviewable email draft by default or submits JSON to a configured HTTPS endpoint. Clear pending, received and retry states, plus editable privacy and terms pages and a custom 404.

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

Make it yours

Brand, copy, offers, capabilities, links and form integration live in one config. System studies and notes are plain content files. The geometry is code-native and every section has its own component.

Where to change each part of Tessera
To change	Edit
Brand, page copy, offers, FAQ and links	site.config.ts
System study cards and full story pages	data/systems.ts
Journal notes and article pages	data/notes.ts
Booking destination, email and JSON form endpoint	site.config.ts → links and email
Palette, spacing and typography	styles/base.css and app/layout.tsx
Isometric forms and workflow diagrams	components/art/
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 identity, example URL and email, illustrative offers and system stories. Set the booking destination or HTTPS form endpoint, replace the legal starter copy and test delivery with your own service.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: CSS with design tokens and component styles
Fonts: Geist, Geist Mono, self-hosted with next/font
Dependencies: next, react, react-dom
Images: Original SVG geometry and CSS compositions, including four isometric formations, a workflow diagram system, article art, brand mark and favicon. All artwork is local code; no stock images or external media accounts are required. Font licenses are bundled.
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: 57 source files, about 4,500 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 Tessera?

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

Can I get a refund?

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