Tessel — Next.js SaaS Website with an Interactive Product Demo
Akram Adjab
Concept project. Tessel is a fictional AI agent for finance teams. It reconciles bank and card lines against the ledger, flags what doesn't add up, and prepares the month-end close for a controller to approve. I designed the brand and every page in Figma, then built it with the Next.js App Router, MDX and Motion.
The brief was a SaaS site that wins over sceptical controllers with evidence, not adjectives: a real, interactive product demo instead of screenshots, and no fake logos or metrics.
The idea: the ledger sheet
The site is drawn from an accountant's ledger: ruled lines, column letters, ticks, and a highlighter for matched lines.
Drag to reconcile: the hero ledger is the pitch. Drag across rows and the difference runs down to 0.00
Scroll-morph: the close workspace shrinks from full screen into a card
The loop: a pinned Observe, Match, Flag, Close story over a Canvas 2D grid
Built for the marketing team
Content lives in the repo as typed files, so the team edits copy without touching components.
MDX: changelog entries, blog posts and open roles, with frontmatter checked by zod
Typed data: plans, the comparison table, use cases and the demo ledger in TypeScript
Generated: an OG image for every route and post, a sitemap and an RSS feed
Demo form: a server action with shared zod validation and real error, pending and success states
Features at a glance
Interactive hero: drag, use the keyboard or press Run Tessel. It plays by itself on touch, and the table is server-rendered
Pricing: a monthly/annual toggle with rolling figures, a 20-row comparison, and an FAQ with FAQPage JSON-LD
Use cases: four pages generated from one template
Changelog and blog: area filters kept in the URL, a table of contents and RSS
Accessibility: WCAG 2.2 AA, visible focus, live regions and reduced-motion end states
Deliverables and stack
Brand: guidelines in 10 frames (logo, colour, type, spacing, components, imagery, motion, voice)
Design system: Figma variables with desktop, tablet and mobile modes, plus 22 components
Pages: 12 pages and 15 states at 1440, 834 and 390 px
Build: Next.js App Router, MDX, server actions, Motion and Canvas 2D, live on Vercel
Tools: Figma · Next.js · React · TypeScript · CSS
Live site: tessel-close.vercel.app
Like this project
Posted Oct 31, 2026
Concept project: a Next.js marketing site for a finance AI SaaS. Brand, UX/UI and a build with a drag-to-reconcile demo, MDX and Motion. Lighthouse 100.
