{/* phone bezel */}

{/* status bar */}

9:41

{/* notch */}

{/* dynamic feed */}

Discover

Agentic workflows

12 artifacts ranked for you

{/* card stack */}

{[0, 1, 2].map((i) => { const s = slot(i); const styles = [ { transform: "translateY(0) scale(1)", opacity: 1, zIndex: 30, filter: "none", }, { transform: "translateY(14px) scale(0.96)", opacity: 0.85, zIndex: 20, filter: "blur(0.4px)", }, { transform: "translateY(28px) scale(0.92)", opacity: 0.6, zIndex: 10, filter: "blur(1px)", }, ]; return (

); })}

{/* tab bar — floating pill chrome matching app screenshots */}

{[ { l: "Discover", active: true, render: (color) => ( ), }, { l: "Workstreams", render: (color) => ( ), }, { l: "Saved", render: (color) => ( ), }, { l: "Profile", render: (color) => ( ), }, ].map((t) => { const color = t.active ? L.ink : L.fg3; return (

{t.render(color)} {t.l}

); })}

{/* swipe arrow callout */}

swipe →

); } function MiniCard({ variant }) { const cards = [ { type: "REPO", name: "browserbase/stagehand", match: "92%", sub: "The SDK For Browser Agents", hook: "AI-powered browser automation framework combining natural language and code", why: 'For your goal "Automation": Choose code or natural language for browser actions', points: [ "Choose code or natural language for browser actions", "AI actions can be previewed and cached", ], tags: ["#browser-automation", "#ai", "#web-scraping", "#testing"], lang: "TypeScript", stars: "22K", updated: "updated 3 days ago", }, { type: "TOOL", name: "Cursor · Background Agents", match: "88%", sub: "Async coding workflows", hook: "Cursor agents now run asynchronously in the background", why: 'For your goal "Codegen": Queue long-running tasks without blocking your work', points: [ "Git-aware context per task", "Webhook → Slack pings on completion", ], tags: ["#agents", "#dev-tools", "#ide", "#async"], lang: "Product", stars: "—", updated: "launched 1 week ago", }, { type: "CONCEPT", name: 'The "workstream" pattern', match: "76%", sub: "Essay · 8 min read", hook: "Why more teams are scoping LLM agents to a single workstream", why: 'For your goal "Positioning": Constraining context to one goal sharpens recommendations', points: [ "Goal-scoped beats user-scoped", "Reduces prompt sprawl and hallucinations", ], tags: ["#agents", "#product", "#evals"], lang: "Essay", stars: "—", updated: "published 2 days ago", }, ]; const c = cards[variant]; const ActionBtn = ({ filled, children }) => (

{children}

); return (

{/* Type pill + match */}

{c.type} {c.match} match

{/* Mono subtitle */}

{c.sub}

{/* Serif hook */}

{c.hook}

{/* Summary line */}

{c.name} — distilled signal for your active workstream.

{/* Why it matters */}

✦ WHY IT MATTERS FOR YOU

{c.why}

{/* Bullets */}

{c.points.map((p, i) => (

▪ {p}

))}

{/* Meta row */}

{c.stars} · {c.lang} · {c.updated}

{/* Tag chips */}

{c.tags.map((t) => ( {t} ))}

{/* Action row — 4 circles + external on right */}

); } // ---------- Problem Section ---------- function Problem() { const lines = [ { stat: "23 min", label: "Average HackerNews session, builders 25–40", text: "You open HackerNews every morning and close it 20 minutes later having learned nothing useful.", }, { stat: "5 weeks", label: "Median lag between launch and discovery", text: "The tool that would've saved you three weeks shipped last month. You never saw it.", }, { stat: "Daily", label: "Cadence of meaningful releases in your space", text: "The ecosystem moves daily. You're catching up weekly.", }, ]; return (

§ 02 — Status Quo

Three quiet failures, every morning.

{lines.map((row, i) => (

{/* stat column */}

{row.stat}

{row.label}

{/* main quote */}

{row.text}

))}

); } // ---------- Agitation ---------- function Agitation() { return (

§ 03 — The Diagnosis

{/* hatched horizontal rule above title */}

You're not behind because you're not trying. You're behind because the feed wasn't built for you.

{[ { source: "HackerNews", flaw: "is for everyone." }, { source: "GitHub Trending", flaw: "is chronological." }, { source: "Newsletters", flaw: "are late." }, { source: "Search", flaw: "only works if you know what to look for.", }, ].map((x, i) => (

{x.source}

{x.flaw}

))}

The signal layer for builders doesn't exist.

Until now.

); } // ---------- Solution ---------- function Solution() { return (

§ 04 — The Remedy

Private
Beta
— ’26

The signal layer

Scrolledge.

Swipe through what matters — repos, tools, launches, articles — distilled into one card, personalized to exactly what you're building.
Save something and the feed gets smarter.{" "} No setup. No configuration. Just signal.

{[ { n: "01", t: "One card at a time", d: "One swipe, one high-signal artifact.", }, { n: "02", t: "Tied to your goal", d: "Workstreams for any project.", }, { n: "03", t: "Saves teach it", d: "Bookmark anything; the rank shifts.", }, ].map((f) => (

{f.n}

{f.t}

{f.d}

))}

Early access is limited. Be first.

); } // ---------- Screenshot trio (real product images) ---------- function ScreenshotTrio() { return (

{[ { src: "assets/screen-workstreams.png", x: -40, y: 70, rot: -6, z: 1, w: 230, }, { src: "assets/screen-discover-2.png", x: 145, y: 0, rot: 0, z: 3, w: 250, }, { src: "assets/screen-readme.png", x: 320, y: 80, rot: 7, z: 2, w: 230, }, ].map((s, i) => (

))}

); } // ---------- Who It's For ---------- function WhoItsFor() { return (

§ 05 — Audience

Scrolledge is for you, if

You're building, making, or thinking — and you're tired of doing archaeology on the internet to stay current.

Engineers, founders, researchers, designers, visionaries.

—

Not for you, if

You're not making anything.

Stick to Instagram.

); } // ---------- Social proof ---------- function SocialProof() { const quotes = [ { q: "I closed three other tabs. Scrolledge is the only place I check now.", a: "Maya R.", role: "Founder, browser-agents startup", }, { q: "Found two repos that mattered before they hit my Twitter feed.", a: "Devon K.", role: "AI research engineer", }, { q: "It's the first feed that respects what I'm actually working on.", a: "Priya S.", role: "Solo founder", }, ]; return (

{[ { n: "1,420", l: "builders on the list" }, { n: "14×", l: "faster than your inbox" }, { n: "4.8", l: "average rating, TestFlight" }, { n: "00:00", l: "time spent on configuration" }, ].map((s) => (

{s.n}

{s.l}

))}

{quotes.map((q, i) => (

{q.q}

{q.a}

{q.role}

))}

Join 1,420 builders already on the list.

Spots open weekly. We notify in waves.

); } // ---------- Final CTA ---------- function FinalCTA() { return (

§ 06 — The Close

Your mornings are worth more than this.

No spam. No newsletter. Just a ping when your spot opens.

); } // ---------- Footer ---------- function Footer() { return ( ); } // ---------- App ---------- function useScrollReveal() { React.useEffect(() => { const reduced = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; const sections = Array.from(document.querySelectorAll("section")); sections.forEach((sec) => { Array.from(sec.children).forEach((el, i) => { if (el.classList.contains("no-reveal")) return; el.classList.add("reveal"); el.style.setProperty( "--reveal-delay", `${Math.min(i * 70, 300)}ms` ); }); }); if (reduced) { document .querySelectorAll(".reveal") .forEach((el) => el.classList.add("in")); return; } // Sections already in viewport: mark .in synchronously so no transition runs. const vh = window.innerHeight; const initial = []; const deferred = []; sections.forEach((sec) => { const top = sec.getBoundingClientRect().top; (top < vh * 0.85 ? initial : deferred).push(sec); }); initial.forEach((sec) => Array.from(sec.children).forEach((el) => el.classList.add("in")) ); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { Array.from(e.target.children).forEach((el) => el.classList.add("in") ); io.unobserve(e.target); } }); }, { rootMargin: "0px 0px -8% 0px", threshold: 0.05 } ); deferred.forEach((sec) => io.observe(sec)); return () => io.disconnect(); }, []); } function useHeroParallax() { React.useEffect(() => { const reduced = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; if (reduced) return; const targets = document.querySelectorAll(".parallax-soft"); if (!targets.length) return; let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { const y = window.scrollY; targets.forEach((el) => { const speed = parseFloat(el.dataset.speed || "0.06"); el.style.transform = `translate3d(0, ${(-y * speed).toFixed(2)}px, 0)`; }); raf = 0; }); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); } function App() { useScrollReveal(); useHeroParallax(); return ( {/* — VAULTED until we have real test data (per Z). Bring back when quotes/numbers are real. */}

Doomscrolling for builders.

{c.hook}

Three quiet failures, every morning.

You're not behind because you're not trying. You're behind because the feed wasn't built for you.

Your mornings are worth more than this.

Doomscrolling
for builders.