feat: rebuild the landing page on the T3 Code motion system

[whoisaldo]

What changed and why

The landing page read as a copy of the T3 Code marketing site without the parts that make that page work: the product icons were pinned to the edges with no entrance, drift, or parallax, nothing sequenced on load, and the hero spent its space on an interactive terminal instead of showing the products. This PR rebuilds the page around the same principles the T3 Code marketing app uses (apps/marketing in pingdotgg/t3code), with Sideband's content and real screenshots.

Hero. A page-load rise sequence ([data-rise] with staggered --d delays), six product marks that fly in, drift on their own periods, and lean toward the pointer by depth, and a tilted browser-window preview with one tab per product and a real screenshot behind each. The tabs page themselves every six seconds while the window is on screen and yield to the visitor: hover or focus pauses, a click or arrow key stops the pager for good. The terminal is gone.

Sections. Bordered section rhythm with eyebrow, headline, and lead. A six-cell product grid with icon, status, tagline, and stack. A two-column studio row with the founder list on the left and the copy plus a checklist on the right. An open-source row with a repo list (six public repos, each row links out) and a pitch tile. The final call to action gets the accent glow. No scroll-triggered fades below the hero.

Chrome. The navbar is blurred, gets its border on scroll, and uses plain sans links with a GitHub pill instead of mono uppercase and brackets. The footer is a single compact row. The custom cursor and the live SVG noise filter are removed (grain is now a tiled body::after texture), which also removes two constant GPU costs on scroll.

Motion rules. Infinite animations only run while their element is on screen and the tab is visible (HeroMarks.tsx toggles --home-motion-state). Parallax only on fine pointers. Everything is off under prefers-reduced-motion with content fully visible. The landing no longer loads Framer Motion (first load JS for / is 109 kB).

Data: each product in lib/products.ts now has an icon and a preview screenshot. The old 3D cardHero renders are no longer used on the landing.

Proof It Works

Hero before (1440)	Hero after (1440)

Hero before (390)	Hero after (390)

Preview tab switched	Products

Studio	Open source

CTA and footer	Full page after (390)

Full page before and after (1440)

Before	After

Behavior verified with a Playwright script against the production build: all six marks report running while on screen and paused after scrolling past the hero, --px/--py follow the pointer, tabs advance from EternalMonitor to EternalRichPresence after six seconds, stay put while hovered, stay put after a click, and move with the arrow keys. With reducedMotion: reduce every [data-rise] element has animation: none at opacity 1, marks are static, and the pager never advances. No horizontal overflow at 1440 or 390. No console errors.

What I tested

• npm run build, npm run lint, npx tsc --noEmit, npm run check:consistency, npm run check:copy, npx prettier --check app components lib styles tests
• CI=1 npx playwright test: 8 passed, including a new test that the preview tabs switch the visible screenshot
• node scripts/capture-screenshots.mjs against the build produces the new six-shot set, and the pr-screenshots sticky comment layout is updated to match
• Clicked through the landing at 1440 and 390, the mobile menu, and the preview tabs by mouse and keyboard

Out of scope

Other pages still use FadeUp, GlowButton, and SectionLabel, so those components stay. The fadeUp and orbFloat keyframes in globals.css look unused but predate this change and were left alone.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
sideband	Ready	Preview	Sep 5, 2026 9:37pm UTC

[github-actions]

This PR changes files that affect what visitors see, but the description has no screenshot.

Run npm run dev, open the affected page, and drag a screenshot of the result into the Proof It Works section (before/after for edits to existing UI). It lets the review happen from the description without checking out the branch.

Not a blocker. If nothing rendered actually changed, say so in the description and ignore this.

Files that triggered this

app/layout.tsx
app/page.tsx
components/home/EngineeringNotes.tsx
components/home/FinalCta.tsx
components/home/Hero.tsx
components/home/HeroMarks.tsx
components/home/OpenSource.tsx
components/home/ProductGrid.tsx
components/home/ProductPreview.tsx
components/home/ProductShowcase.tsx
components/home/StudioSection.tsx
components/home/TeamSection.tsx
components/home/Terminal.tsx
components/layout/CustomCursor.tsx
components/layout/Footer.tsx
components/layout/Navbar.tsx
components/ui/Button.tsx
components/ui/Icons.tsx
components/ui/NoiseOverlay.tsx
styles/globals.css

[github-actions]

Screenshots

Auto-captured from this PR's production build (commit 405ecca).

Hero	Preview tab

Products	Studio

Open source	CTA and footer