\n
\n I’ve been building Next.js templates as a side project and selling them on Gumroad. This weekend I shipped the fourth one: Orbit, a startup launch and waitlist landing page.<\/p>\n
Here’s a breakdown of every technical decision I made.<\/p>\n
Why Next.js 15 with CSS Modules (no Tailwind)<\/p>\n
Most templates use Tailwind. That’s fine for customization, but it adds a compilation step and a learning curve for buyers who just want clean CSS they can read and edit.<\/p>\n
CSS Modules give you:<\/p>\n
Locally scoped class names (no conflicts)
\nStandard CSS syntax (no utility memorization)
\nZero runtime cost
\nWorks with Next.js out of the box<\/p>\n
The tradeoff is more verbose than Tailwind for repetitive utilities. Worth it for a product you’re selling.<\/p>\n
The bento grid \u2014 1px gap trick<\/p>\n
The features section uses CSS Grid with grid-template-columns: repeat(3, 1fr). The first card spans 2 columns via grid-column: span 2.<\/p>\n
.bento {
\n display: grid;
\n grid-template-columns: repeat(3, 1fr);
\n gap: 1px;
\n background: var(–color-border-subtle); \/* gap IS the border *\/
\n border-radius: var(–radius-lg);
\n overflow: hidden;
\n}<\/p>\n
.bento .card:first-child {
\n grid-column: span 2;
\n}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Instead of adding borders to each card, I set the grid’s background to the border color and use 1px gaps. The cards themselves have no borders. This gives perfectly consistent grid lines with zero extra markup.<\/p>\n
Count-up animation with IntersectionObserver<\/p>\n
The metrics section triggers a count-up when the section enters the viewport:<\/p>\n
const observer = new IntersectionObserver(((entry)) => {
\n if (entry.isIntersecting && !started.current) {
\n started.current = true
\n const startTime = performance.now()<\/p>\n
const tick = (now: number) => {
\n const progress = Math.min((now – startTime) \/ duration, 1)
\n const eased = 1 – Math.pow(1 – progress, 3) \/\/ cubic ease-out
\n setCount(Math.round(eased * end))
\n if (progress 1) requestAnimationFrame(tick)
\n }<\/p>\n
requestAnimationFrame(tick)
\n }
\n}, { threshold: 0.4 })<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
The started ref prevents re-triggering if the user scrolls away and back. Cubic ease-out feels much more natural than linear. No library \u2014 30 lines of TypeScript.<\/p>\n
Infinite logo marquee (CSS-only)<\/p>\n
.row {
\n display: flex;
\n gap: 64px;
\n width: max-content;
\n animation: marquee 24s linear infinite;
\n}<\/p>\n
@keyframes marquee {
\n from { transform: translateX(0); }
\n to { transform: translateX(-50%); }
\n}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
The key: duplicate the logos array in the component and animate exactly -50% (half the total width). Seamless loop. Edge fade via mask-image on the parent:<\/p>\n
.track {
\n mask-image: linear-gradient(
\n to right,
\n transparent 0%, black 12%, black 88%, transparent 100%
\n );
\n}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Single content file<\/p>\n
All editable content \u2014 name, copy, nav links, logos, features, metrics, testimonials, FAQ \u2014 lives in src\/lib\/constants.ts. The buyer touches one file and the whole page updates. No hunting through components.<\/p>\n
Design tokens in globals.css<\/p>\n
8 variables to rebrand the entire template:<\/p>\n
:root {
\n –color-accent: #f59e0b; \/* change this \u2192 full rebrand *\/
\n –color-bg: #09090b;
\n –font-display: ‘Sora’, sans-serif;
\n –font-body: ‘IBM Plex Sans’, sans-serif;
\n –radius-lg: 16px;
\n}<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Connecting the waitlist form<\/p>\n
The form ships with a simulated delay. Replace it with your stack:<\/p>\n
\/* ConvertKit *\/
\nawait fetch(`https:\/\/api.convertkit.com\/v3\/forms\/${FORM_ID}\/subscribe`, {
\n method: ‘POST’,
\n headers: { ‘Content-Type’: ‘application\/json’ },
\n body: JSON.stringify({ api_key: KEY, email }),
\n})<\/p>\n
\/* Loops *\/
\nawait fetch(‘https:\/\/app.loops.so\/api\/v1\/contacts\/create’, {
\n method: ‘POST’,
\n headers: { Authorization: `Bearer ${KEY}`, ‘Content-Type’: ‘application\/json’ },
\n body: JSON.stringify({ email }),
\n})<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Live demo: https:\/\/orbit-landing-iota.vercel.app\/<\/p>\n
The template is available on Gumroad for $29: https:\/\/devmaya.gumroad.com\/l\/orbit<\/p>\n