Relay — Workflow Automation SaaS
A Next.js template for B2B automation products, built around a scroll animation system that demonstrates the product.
About this template
Relay solves that with motion. Integration logos orbit a central hub so you can see what connects. A scroll-driven timeline draws connecting lines between process steps as you move down the page. Metrics count up when they come into view. By the time a visitor reaches pricing, they've watched the product work rather than read a description of it.
The animations aren't decoration bolted onto sections — each one is a self-contained system with its own context and controller, so you can reorder, reuse, or remove sections without breaking anything. GSAP drives the timelines, Lenis handles smooth scroll, and it holds 60fps.
Thirteen routes, 119 typed components, built on Next.js 16, React 19, TypeScript, and Tailwind CSS v4 with Radix UI primitives.
What's Inside
- Modular animation systems — orbiting integration hub, scroll-driven process timeline with connecting lines, split-slide showcase, typewriter headlines, text and border reveals, NumberFlow counters, logos carousel
- Custom interaction hooks — magnetic hover, button hover choreography, centre-out width expansion
- 13 pages — home, features, services (index + detail), pricing, about, blog (index + article), team (index + profiles), contact, auth, custom 404
- 119 components — typed, with Radix Slot-based polymorphic primitives
- Markdown content layer — blog posts, service pages, and team profiles with typed front matter
- Tokenised design system — Tailwind CSS v4 theme layer for colour, type, and spacing
- SEO setup — per-page metadata, OpenGraph, and Twitter cards
- Full documentation — install, edit content, configure animations, retheme, deploy
Good For
- Workflow automation and no-code platforms
- Integration and iPaaS products
- Internal tools and ops software
- B2B SaaS with an abstract or invisible product
- Any site where motion has to carry the explanation
File Info
- Format: Next.js 16 / React 19 / TypeScript source code
- Styling: Tailwind CSS v4
- Animation: GSAP, Lenis, NumberFlow
- Requires: Node.js 20+