2026 Startup Landing Page Trend Report

When you're curious how the first screen (landing page) of today's hot startups is actually built, this is a report that derives trends from directly measured data rather than gut feel. We opened the pages of 10 hot startups with an automation tool, dissected fonts·colors·animation methods etc., and organized the common patterns.

First, some terms to know: a landing page is the first page you see when you first arrive at a site, the hero is the big area at the very top of that first screen, a CTA (Call To Action) is a key action-prompting button like "Sign up," and YC W26 refers to the Winter 2026 batch of the famous startup accelerator Y Combinator.

Research method

• Targets: 10 globally hot startups as of July 2026 (2 YC W26 newcomers + 8 2025–26 breakout dev tool/AI companies)
• Tool: measured each site at 1440px/375px viewports with Playwright (a tool that automates the browser via code to capture·measure, using the Chromium engine) — hero·scroll 25/50/75%·CTA hover·mobile screenshots + extracting computed style (the final CSS values the browser actually applied)·fonts·@keyframes count (the number of CSS animation definitions)·animation libraries·canvas·video counts
• Limits: normal captures on all sites with no bot walls. Hover captures on 2 sites (granola, heypocket) had modal interference

8 key findings (by frequency)

1. JS animation libraries wiped out — 10/10

GSAP, Framer Motion, Lenis, Three.js detected in 0 sites. Motion has been reorganized along three lines.

• CSS @keyframes (all sites, 6–76 each)
• CSS Scroll-Driven Animations (animation-timeline: scroll()/view()) — granola, resend, browserbase, heypocket, 4/10 in real production use. Implementing scroll reveal·step transitions·counters with no polyfill·library
• React state-based transitions (tabs·carousels·accordions)

The 2024–25 formula of "GSAP + ScrollTrigger installed by default" is over. 0kb-bundle motion is the new default.

2. Pre-rendered video replaces WebGL — 7/10

three.js is 0 sites, yet 3D visuals are everywhere. The trick is looping video.

• modal: glowing 3D cubes = 8 videos
• resend: rotating Rubik's cube = 5 videos
• heypocket: product 360° = 10 videos
• cardboard: demos·gallery = 56 videos

Real-time canvas is used only for decorative layers with cheap render cost (mintlify contour line-art 15, granola 6, elevenlabs grain orbs 3). A "bake the heavy stuff, real-time only the light stuff" division of labor.

3. The return of serif display headlines — 5/10

granola (quadrant 86px), resend (domaine 96px), mintlify (arizonaFlare 50px), cardboard (Denton 60px weight 100), heypocket (serif logo). The common formula:

Three-family role separation is the standard pairing. Mono is used only for semantic purposes (timecodes, numeric badges, labels), not decoration.

4. Dark cliché in decline, warm off-white dominates — 7/10 light

"dev tool = dark" broke. The 7 light sites are not pure white but warm off-white (#f7f7f4, #fdfcfc, paper), with ink text that isn't pure black (#262521, rgba(18,18,18,0.75)). All 3 dark sites (modal·resend·cardboard) differentiate with a "luxury" staging — dark is not the default but a chosen stage.

5. Single accent + semantic-color discipline — 8/10

Accent color is only one, and only where it's meaningful: cursor (orange=links), browserbase (orange=hover·highlight), cardboard (blue=underline·cursor), heypocket (blue=CTA), granola (olive=CTA), modal (neon green=keywords). resend uses color only on status badges (Delivered/Bounced). Saturation is carried by content (product renders·video·orbs) and the UI retreats to achromatic.

6. Texture is mandatory, the means vary — 9/10

Only lovable is a flat pure background. The rest all laid down texture in some form:

A reaction against "AI-generated-looking sterile flat" — traces of a human hand (hand-drawn underlines, painting, dithering) are a premium signal.

7. Hero = an experience, not a screenshot — 6/10

• lovable: the hero CTA is not a button but an actually working prompt input
• cursor: an HTML-rebuilt mockup — hovering shows element labels
• granola: a live notepad typing·transcribing in real time (content differs per capture)
• elevenlabs: a playable audio widget + resident Voice chat
• cardboard: a real editor UI inside the fold
• mintlify: an "Agent traffic" counter badge updating in real time

The product demo is reconstructed as DOM rather than an image/video → crisp text, interactive, scroll-syncable.

8. Conventional wisdom vs. measurement — bento is overrated

Trend articles say "bento grids are standardizing (67% of SaaS)," but measurement is only 2/10 (mintlify, elevenlabs) with clear bento. The mainstream is rather:

• Editorial two-column split (left text / right visual) — 6 sites
• Sticky step scrollytelling (left list active-switching / right fixed visual) — granola, cardboard, lovable
• Section background-inversion rhythm (dark↔light chapters) — modal

h1 size is also polarized: 96px serif (resend) vs 26px (cursor)·20px (lovable). The latter builds hierarchy with whitespace and sentence-form copy instead of size — "the size race is over."

Appendix A — frequently used micro-patterns

Appendix B — mobile-adaptation observations

All 10 sites had no overflow/collapse. The standout top strategies:

• Content-priority redesign: cardboard swaps the desktop editor mockup for an AI chat card — a re-edit, not a shrink
• Preserving core interaction: lovable's input box, elevenlabs' audio demo aren't removed even on mobile
• Crop > shrink: cursor keeps density by left-cropping the demo instead of shrinking it whole

Appendix C — bblog adoption candidates (by low cost)

1. Serif title + mono metadata pairing — serif post title, mono date·tags·read time. Escape the template with CSS only (mintlify/resend formula)
2. Ink text + single-accent discipline — rgba(18,18,18,0.75) body + single-accent-color links (heypocket/cursor)
3. CSS Scroll-Driven Animations — TOC progress indicator, post-list entry reveal. @supports (animation-timeline: view()) fallback. It's itself material for a tech post
4. 1px hairline-rule division + cross markers — density via borders instead of shadows·cards (browserbase/mintlify/elevenlabs)
5. Highlighter-pen heading — box-decoration-break in two lines (browserbase)
6. DOM typing demo instead of video — a CSS animation where the code block actually types out. Crisp·lightweight vs GIF (granola/cursor)
7. Sticky accordion scroll narrative — position: sticky + low-contrast treatment of the active item on series/project intro pages (cardboard/granola)

Measurement data: 60 Playwright captures + 10 signals.json (measured 2026-07-11). Per-site detailed analysis is a separate document.