-
-
-
- {metadata.title}
- {metadata.subtitle ?{metadata.subtitle}
: null} -
-
- Post not found
-
- return (
-
-
- )
-}
diff --git a/src/app/(rest)/blog/[slug]/social-image.tsx b/src/app/(rest)/blog/[slug]/social-image.tsx
deleted file mode 100644
index bdeaa1d6..00000000
--- a/src/app/(rest)/blog/[slug]/social-image.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { readFile } from 'node:fs/promises'
-import path from 'node:path'
-import { ImageResponse } from 'next/og'
-import { toJpegImageResponse } from '~/lib/utils/og-image'
-import { getPost } from '~/lib/utils/posts'
-import { Rubric } from '~/ui/logos/rubric'
-
-export const BLOG_SOCIAL_IMAGE_ALT =
- 'Applied AI lab helping companies build intelligent applications'
-export const BLOG_SOCIAL_IMAGE_SIZE = {
- height: 630,
- width: 1200
-}
-
-const fontDataPromise = readFile(path.join(process.cwd(), 'src/app/fonts/matter-regular.woff'))
-const bannerSrcCache = new Map
-
-
-
-
-
-
-
- {formatDate(metadata.date)}
-- by{' '} - - {metadata.author.name} - -
-{metadata.category}
-
- {backgroundImageUrl ? (
-
- )
-}
-
-// Builds a cached data URI for banner images; input '/images/primitives.png' -> output 'data:image/png;base64,...'.
-const getBannerSrc = async (bannerImageUrl: string) => {
- const cached = bannerSrcCache.get(bannerImageUrl)
- if (cached) return cached
-
- const bannerPath = bannerImageUrl.replace(/^\//, '')
- const extension = path.extname(bannerPath).toLowerCase()
- const mimeType =
- extension === '.png'
- ? 'image/png'
- : extension === '.jpg' || extension === '.jpeg'
- ? 'image/jpeg'
- : extension === '.webp'
- ? 'image/webp'
- : 'image/png'
- const bannerData = await readFile(path.join(process.cwd(), 'public', bannerPath), 'base64')
- const bannerSrc = `data:${mimeType};base64,${bannerData}`
- bannerSrcCache.set(bannerImageUrl, bannerSrc)
- return bannerSrc
-}
-
-export const getBlogSocialImageResponse = async (slug: string) => {
- const [{ metadata }, localFont] = await Promise.all([getPost(slug), fontDataPromise])
- const bannerSrc = await getBannerSrc(metadata.bannerImageUrl)
- const pngResponse = new ImageResponse(
-
- {/** biome-ignore lint/performance/noImgElement: techdebt */}
- 
-
- ) : null}
-
-
- Rubric Labs Blog
-
-
- {title}
-
-
- )
-}
diff --git a/src/app/(rest)/contact/contact-form.tsx b/src/app/(rest)/contact/contact-form.tsx
deleted file mode 100644
index 86ef3507..00000000
--- a/src/app/(rest)/contact/contact-form.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-import { createContactRequest } from '~/lib/actions/create-contact-request'
-import { useShortcut } from '~/lib/hooks/use-shortcut'
-import { Button } from '~/ui/button'
-import { Form } from '~/ui/form'
-
-export const ContactForm = () => {
- const formRef = useRef
-
- Blog
-The latest from our team
-
- {posts.map((post, index) => (
-
-
-
- )
-}
diff --git a/src/app/(rest)/layout.tsx b/src/app/(rest)/layout.tsx
deleted file mode 100644
index 1bcb1abd..00000000
--- a/src/app/(rest)/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Footer } from '~/ui/footer'
-
-export default function Layout({ children }: { children: React.ReactNode }) {
- return (
- <>
- {children}
-
-
- )
-}
diff --git a/src/app/(rest)/newsletter/[slug]/external-links.tsx b/src/app/(rest)/newsletter/[slug]/external-links.tsx
deleted file mode 100644
index e9fcbbb0..00000000
--- a/src/app/(rest)/newsletter/[slug]/external-links.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-
-export function ExternalLinks({ children }: { children: React.ReactNode }) {
- useEffect(() => {
- const links = document.querySelectorAll('article a')
- for (const link of Array.from(links)) {
- link.setAttribute('target', '_blank')
- link.setAttribute('rel', 'noopener noreferrer')
- }
- }, [])
-
- return <>{children}
-}
diff --git a/src/app/(rest)/newsletter/[slug]/page.tsx b/src/app/(rest)/newsletter/[slug]/page.tsx
deleted file mode 100644
index a4606e67..00000000
--- a/src/app/(rest)/newsletter/[slug]/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { evaluate } from '@mdx-js/mdx'
-import * as runtime from 'react/jsx-runtime'
-import { getNewsletter, getNewsletterSlugs } from '~/lib/utils/newsletters'
-import { ExternalLinks } from './external-links'
-
-export async function generateStaticParams() {
- const slugs = await getNewsletterSlugs()
- return slugs.map((slug: string) => ({ slug }))
-}
-
-export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
- const { slug } = await params
- const newsletter = await getNewsletter(slug)
-
- if (!newsletter) return
-
-
-
- Contact
-Get in touch with us
-Newsletter not found
-
- const { default: MDXContent } = await evaluate(newsletter.body, runtime)
-
- return (
-
-
- )
-}
diff --git a/src/app/(rest)/newsletter/newsletter-form.tsx b/src/app/(rest)/newsletter/newsletter-form.tsx
deleted file mode 100644
index 6b22b178..00000000
--- a/src/app/(rest)/newsletter/newsletter-form.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import { createNewsletterSubscriber } from '~/lib/actions/create-newsletter-subscriber'
-import { cn } from '~/lib/utils/cn'
-import { Button } from '~/ui/button'
-import { Form } from '~/ui/form'
-import { Arrow } from '~/ui/icons/arrow'
-
-export const NewsletterForm = ({ className }: { className?: string }) => {
- return (
-
- )
-}
diff --git a/src/app/(rest)/newsletter/newsletter-list.tsx b/src/app/(rest)/newsletter/newsletter-list.tsx
deleted file mode 100644
index 8ee15b54..00000000
--- a/src/app/(rest)/newsletter/newsletter-list.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useMemo, useState } from 'react'
-import type { Newsletter } from '~/lib/utils/newsletters'
-
-export const NewsletterList = ({ newsletters }: { newsletters: Newsletter[] }) => {
- const [query, setQuery] = useState('')
-
- const filtered = useMemo(
- () =>
- newsletters.filter(
- newsletter => !query || newsletter.description.toLowerCase().includes(query.toLowerCase())
- ),
- [newsletters, query]
- )
-
- return (
-
-
-
-
-
-
- {newsletter.title}
-- Welcome back to the Grid. You are 1 of {newsletter.subscriberCount} builders receiving this. -
-
-
- )
-}
diff --git a/src/app/(rest)/newsletter/page.tsx b/src/app/(rest)/newsletter/page.tsx
deleted file mode 100644
index 7dc1b084..00000000
--- a/src/app/(rest)/newsletter/page.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NewsletterForm } from '~/app/(rest)/newsletter/newsletter-form'
-import { META } from '~/lib/constants/metadata'
-import { createMetadata } from '~/lib/utils/create-metadata'
-import { getNewsletterMetadata } from '~/lib/utils/newsletters'
-import { NewsletterList } from './newsletter-list'
-
-export const metadata = createMetadata({
- description: `The Grid is a newsletter by Rubric Labs with three actionable insights on building, shipping, and scaling intelligent products. ${META.description}`,
- pathname: '/newsletter',
- title: `The Grid | ${META.title}`
-})
-
-export default async function Page() {
- const newsletters = await getNewsletterMetadata()
-
- return (
-
-
- {filtered.length > 0 ? (
- filtered.map(newsletter => (
-
- Past newsletters
- setQuery(e.target.value)} /> -
-
-
- ))
- ) : (
- {newsletter.title}
-{newsletter.description}
-Keep searching...
- )} -
-
- )
-}
diff --git a/src/app/(rest)/privacy/layout.tsx b/src/app/(rest)/privacy/layout.tsx
deleted file mode 100644
index b28c0bf5..00000000
--- a/src/app/(rest)/privacy/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Layout({ children }: { children: React.ReactNode }) {
- return (
-
-
- The Grid
-3 actionable insights. Once a week. Straight to your inbox.
-
- {children}
-
- )
-}
diff --git a/src/app/(rest)/privacy/page.mdx b/src/app/(rest)/privacy/page.mdx
deleted file mode 100644
index 24cc2957..00000000
--- a/src/app/(rest)/privacy/page.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { formatDate } from '~/lib/utils/date'
-import { Copiable } from '~/ui/copiable'
-
-# Privacy Policy
-
-Last Updated: {formatDate(new Date('2025-03-27').toISOString())}
- -## Introduction - -This Privacy Policy explains how we collect, use, and protect your personal information. We -take your privacy seriously and are committed to being transparent about our data practices. - -## Information We Collect - -We collect information that you voluntarily provide to us through: - -- Our newsletter signup form -- Contact forms -- Account registration (if applicable) -- Website usage data - -## How We Use Your Information - -We use your information to: - -- Provide and improve our services -- Send you important updates about our products and services -- Respond to your inquiries and support requests -- Send our newsletter (only if you've explicitly signed up) - -## Data Protection - -We implement appropriate security measures to protect your personal information. Your data is -stored securely and is only accessible to authorized personnel who need it to perform their -duties. - -## Email Communications - -We respect your inbox. If you subscribe to our newsletter: - -- We will never sell your email address to third parties -- We only send relevant content related to our services -- You can unsubscribe at any time using the link in our emails -- We limit our email frequency to avoid overwhelming you - -## Third-Party Services - -We may use third-party services for: - -- Analytics (e.g., Google Analytics) -- Email newsletter management -- Customer support tools - -These services may collect basic usage data to help us improve our services. They are bound by -their own privacy policies and our data processing agreements. - -## Your Rights - -You have the right to: - -- Access your personal data -- Correct inaccurate data -- Request deletion of your data - -## Contact Us - -If you have any questions about this Privacy Policy or how we handle your data, please contact -us through our contact form or email us at
-
- )
-}
diff --git a/src/app/apple-icon.tsx b/src/app/apple-icon.tsx
deleted file mode 100644
index ba2b1728..00000000
--- a/src/app/apple-icon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ImageResponse } from 'next/og'
-
-export const runtime = 'edge'
-
-export const contentType = 'image/png'
-export const size = {
- height: 32,
- width: 32
-}
-
-export default async function Icon() {
- return new ImageResponse(
- // biome-ignore lint/a11y/noSvgWithoutTitle: renders visually
- ,
- { ...size }
- )
-}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 00000000..145c2756
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next'
+import { ContactForm } from '~/components/contact-form'
+
+export const metadata: Metadata = {
+ description: "Tell us what you're building. We take on a small number of engagements.",
+ title: 'Contact'
+}
+
+export default function ContactPage() {
+ return (
+
-
-
-
- Work
-Our past projects and technical writing
-
+
+ )
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 98eefe72..3ed886fb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -26,6 +26,32 @@
}
}
+[data-theme="light"] {
+ --primary: black;
+ --secondary: #666;
+ --background: #f5f0ec;
+ --negative: #222;
+ --subtle: #0000001a;
+ --accent: #dedad7;
+ --accent-foreground: black;
+ --tint: #8a9a9a;
+ --danger: red;
+ color-scheme: light;
+}
+
+[data-theme="dark"] {
+ --primary: white;
+ --secondary: #999;
+ --background: black;
+ --negative: #ddd;
+ --subtle: #ffffff1a;
+ --accent: #1d1d1d;
+ --accent-foreground: white;
+ --tint: #7a9090;
+ --danger: red;
+ color-scheme: dark;
+}
+
@theme inline {
--color-primary: var(--primary);
--color-background: var(--background);
@@ -37,6 +63,8 @@
--color-tint: var(--tint);
--color-danger: var(--danger);
--radius-custom: 1.625rem;
+ --font-sans: var(--font-matter);
+ --font-mono: var(--font-mono);
}
@layer base {
@@ -51,6 +79,13 @@
html {
@apply bg-background text-primary;
scroll-behavior: smooth;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ overflow-x: clip;
+ }
+
+ body {
+ overflow-x: clip;
}
h1 {
@@ -79,381 +114,381 @@
}
article {
- @apply space-y-4;
+ @apply space-y-5;
}
+}
- article h1 {
- @apply text-4xl;
- }
+/* Scrollbar */
+::-webkit-scrollbar {
+ width: 6px;
+}
+::-webkit-scrollbar-track {
+ background: var(--background);
+}
+::-webkit-scrollbar-thumb {
+ background: var(--accent);
+ border-radius: 3px;
+}
- article h2 {
- @apply text-2xl;
- }
+/* Article typography */
+article h2 {
+ @apply text-2xl font-normal mt-14 mb-2;
+ scroll-margin-top: 2rem;
+}
- article h3 {
- @apply text-xl;
- }
+article h3 {
+ @apply text-xl font-normal mt-10 mb-1;
+ scroll-margin-top: 2rem;
+}
- article :is(h1, h2, h3) {
- @apply mt-8;
- scroll-margin-top: 2rem;
- }
+article :is(h2, h3) {
+ @apply text-primary;
+}
- article a:not(:has(button)) {
- @apply underline underline-offset-3 decoration-1 hover:decoration-4;
- }
+article a:not(:has(button)) {
+ @apply text-secondary hover:text-primary underline underline-offset-3 decoration-1 transition-colors;
+}
- article p,
- article li {
- @apply text-secondary;
- }
+article p,
+article li {
+ @apply text-secondary text-[15px] leading-[1.75];
+}
- article :is(strong, b) {
- @apply text-primary font-semibold;
- }
+article :is(strong, b) {
+ @apply text-primary font-semibold;
+}
- article blockquote {
- @apply border-l-4 border-secondary/20 pl-4 font-light text-lg italic;
- }
+article blockquote {
+ @apply border-l border-subtle pl-6 text-[15px] text-secondary/70 leading-[1.75];
+}
- article aside {
- @apply w-full rounded-custom border border-subtle bg-subtle/20 dark:bg-subtle/70 p-6;
- }
+article figure {
+ @apply my-10;
+}
- article aside > :first-child {
- @apply mt-0;
- }
+article figcaption {
+ @apply mt-2 text-[9px] text-secondary/40 text-center font-mono;
+}
- article aside > :last-child {
- @apply mb-0;
- }
+article hr {
+ @apply border-t border-subtle my-12;
+}
- article ul,
- article ol {
- @apply pl-6;
- }
+article aside {
+ @apply w-full rounded-xl border border-subtle bg-accent p-6;
+}
- article ul > li {
- @apply list-disc list-outside;
- }
+article aside > :first-child {
+ @apply mt-0;
+}
- article ol {
- list-style: none;
- counter-reset: list-counter;
- }
+article aside > :last-child {
+ @apply mb-0;
+}
- article ol > li {
- counter-increment: list-counter;
- position: relative;
- }
+article ul,
+article ol {
+ @apply pl-6;
+}
- article ol > li::before {
- content: counter(list-counter) ".";
- position: absolute;
- right: 100%;
- margin-right: 0.35rem;
- @apply text-secondary;
- }
+article ul > li {
+ @apply list-disc list-outside;
+}
- img,
- video {
- @apply rounded-custom;
- }
+article ol {
+ list-style: none;
+ counter-reset: list-counter;
+}
- kbd {
- @apply bg-background text-secondary leading-4 rounded px-1.5 pt-0.5 text-sm;
- }
+article ol > li {
+ counter-increment: list-counter;
+ position: relative;
+}
- section {
- @apply space-y-4;
- }
+article ol > li::before {
+ content: counter(list-counter) ".";
+ position: absolute;
+ right: 100%;
+ margin-right: 0.35rem;
+ @apply text-secondary;
+}
- button svg {
- @apply size-4;
- }
+/* Codeblocks */
+code {
+ @apply bg-accent rounded-md py-0.5 px-1.5 text-[13px];
}
-@layer components {
- .dev {
- @apply border border-danger bg-danger/10;
+code[data-theme] {
+ @apply overflow-x-auto rounded-xl border border-subtle p-4;
+ &,
+ & span {
+ @apply text-[var(--shiki-dark)];
}
- .wordmark > #cover path {
- @apply dark:fill-black fill-white hover:opacity-0 transition-opacity duration-500 stroke-subtle;
- }
+ & span[data-highlighted-line] {
+ @apply bg-neutral-800;
- .wordmark > defs > mask#mask > g > path {
- @apply stroke-subtle fill-white;
+ &::before {
+ @apply text-primary;
+ }
}
+}
- .scrollbar-none {
- -ms-overflow-style: none;
- scrollbar-width: none;
- }
+code {
+ counter-reset: line;
+}
- .scrollbar-none::-webkit-scrollbar {
- @apply hidden;
- }
+code > [data-line]::before {
+ counter-increment: line;
+ content: counter(line);
+ @apply inline-block w-4 mr-6 text-right text-secondary;
+}
- .content-container {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
+/* Video player styles */
+.video-outer-container {
+ position: relative;
+ width: auto;
+ max-height: 65vh;
+ aspect-ratio: 16 / 9;
+ overflow: hidden;
+ border-radius: 12px;
+ margin: 0 auto;
+}
- /* Video player styles */
- .video-outer-container {
- position: relative;
- width: auto;
- max-height: 65vh;
- aspect-ratio: 16 / 9;
- overflow: hidden;
- border-radius: var(--radius-custom);
- margin: 0 auto;
- }
+.video-inner-container {
+ @apply rounded-xl w-full h-full;
+}
- .video-inner-container {
- @apply rounded-custom w-full h-full;
- }
+.video-player {
+ @apply w-full h-full object-cover object-center rounded-xl;
+}
- .video-player {
- @apply w-full h-full object-cover object-center rounded-custom;
- }
+.video-inner-container.grayscale video {
+ @apply grayscale;
+}
- .video-inner-container.grayscale video {
- @apply grayscale;
- }
+video::cue {
+ font-size: 1rem;
+ line-height: 1.4;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+ white-space: pre-line;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
- /* Caption styling */
- video::cue {
- font-size: 1rem;
- line-height: 1.4;
- background-color: rgba(0, 0, 0, 0.7);
- color: white;
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
- text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
- white-space: pre-line;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- }
+video::-webkit-media-text-track-container {
+ transform: translateY(-1rem);
+ padding-bottom: 0.5rem;
+}
- /* Position captions above controls */
- video::-webkit-media-text-track-container {
- transform: translateY(-1rem);
- padding-bottom: 0.5rem;
- }
+.video-controls-container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ border-bottom-left-radius: 12px;
+ border-bottom-right-radius: 12px;
+ overflow: hidden;
+ z-index: 30;
+}
- .video-controls-container {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- border-bottom-left-radius: var(--radius-custom);
- border-bottom-right-radius: var(--radius-custom);
- overflow: hidden;
- z-index: 30;
- }
+.video-controls {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ z-index: 20;
+ background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
+ padding-top: 3rem;
+ padding-bottom: 0.75rem;
+}
- /* Progress bar and control styles */
- .video-controls {
- opacity: 0;
- transition: opacity 0.3s ease;
- z-index: 20;
- background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
- padding-top: 3rem;
- padding-bottom: 0.75rem;
- }
+.video-inner-container:hover .video-controls,
+.video-controls.always-show {
+ opacity: 1;
+}
- .video-inner-container:hover .video-controls,
- .video-controls.always-show {
- opacity: 1;
- }
+.progress-bar {
+ position: relative;
+ height: 3px;
+ background: rgba(255, 255, 255, 0.2);
+ cursor: pointer;
+ transition:
+ height 0.15s ease,
+ transform 0.15s ease;
+ margin: 0 16px;
+ border-radius: 3px;
+}
- .progress-bar {
- position: relative;
- height: 3px;
- background: rgba(255, 255, 255, 0.2);
- cursor: pointer;
- transition:
- height 0.15s ease,
- transform 0.15s ease;
- margin: 0 16px;
- border-radius: 3px;
- }
+.video-inner-container:hover .progress-bar {
+ height: 5px;
+ transform: translateY(-1px);
+}
- .video-inner-container:hover .progress-bar {
- height: 5px;
- transform: translateY(-1px);
- }
+.progress-buffer {
+ position: absolute;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 3px;
+}
- .progress-buffer {
- position: absolute;
- height: 100%;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 3px;
- }
+.progress-current {
+ position: absolute;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 3px;
+}
- .progress-current {
- position: absolute;
- height: 100%;
- background: rgba(255, 255, 255, 0.9);
- border-radius: 3px;
- }
+.video-inner-container.is-floating {
+ animation: pip-transition 0.25s ease-out forwards;
+ transform-origin: bottom right;
+ z-index: 999;
+}
- /* Fade out before starting transform */
- .video-inner-container.is-floating {
- animation: pip-transition 0.25s ease-out forwards;
- transform-origin: bottom right;
- z-index: 999;
- }
+.video-inner-container.is-floating video {
+ border-radius: 0.75rem !important;
+ outline: none;
+ border: none;
+ display: block;
+}
- .video-inner-container.is-floating video {
- border-radius: 0.5rem !important;
- outline: none;
- border: none;
- display: block;
- }
+.video-inner-container.is-floating .video-controls-container {
+ border-bottom-left-radius: 0.75rem;
+ border-bottom-right-radius: 0.75rem;
+}
- .video-inner-container.is-floating .video-controls-container {
- border-bottom-left-radius: 0.5rem;
- border-bottom-right-radius: 0.5rem;
- }
+.video-inner-container.is-floating video::-webkit-media-text-track-container {
+ transform: translateY(-3.5rem);
+ padding-bottom: 2.5rem;
+}
- .video-inner-container.is-floating video::-webkit-media-text-track-container {
- transform: translateY(-3.5rem);
- padding-bottom: 2.5rem;
- }
+.video-inner-container.is-floating video::cue {
+ font-size: 0.8rem;
+}
- .video-inner-container.is-floating video::cue {
- font-size: 0.8rem;
+@keyframes pip-transition {
+ 0% {
+ opacity: 0;
+ position: relative;
}
-
- @keyframes pip-transition {
- 0% {
- opacity: 0;
- position: relative;
- }
- 10% {
- opacity: 0;
- position: fixed;
- bottom: 1rem;
- right: 1rem;
- width: 18rem;
- height: 10rem;
- z-index: 999;
- border-radius: 0.5rem;
- box-shadow:
- 0 10px 15px -3px rgba(0, 0, 0, 0.1),
- 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- background-color: transparent;
- padding: 0;
- }
- 100% {
- opacity: 1;
- position: fixed;
- bottom: 1rem;
- right: 1rem;
- width: 18rem;
- height: 10rem;
- z-index: 999;
- border-radius: 0.5rem;
- box-shadow:
- 0 10px 15px -3px rgba(0, 0, 0, 0.1),
- 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- background-color: transparent;
- padding: 0;
- }
+ 10% {
+ opacity: 0;
+ position: fixed;
+ bottom: 1rem;
+ right: 1rem;
+ width: 18rem;
+ height: 10rem;
+ z-index: 999;
+ border-radius: 0.75rem;
+ box-shadow:
+ 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ background-color: transparent;
+ padding: 0;
+ }
+ 100% {
+ opacity: 1;
+ position: fixed;
+ bottom: 1rem;
+ right: 1rem;
+ width: 18rem;
+ height: 10rem;
+ z-index: 999;
+ border-radius: 0.75rem;
+ box-shadow:
+ 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ background-color: transparent;
+ padding: 0;
}
+}
- /* Ensure transition back from PiP to fullscreen is also smooth */
- .video-inner-container:not(.is-floating) {
- animation: fullscreen-transition 0.25s ease-out forwards;
- }
+.video-inner-container:not(.is-floating) {
+ animation: fullscreen-transition 0.25s ease-out forwards;
+}
- @keyframes fullscreen-transition {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
+@keyframes fullscreen-transition {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
}
+}
- /* Codeblocks */
+.video-player.grayscale {
+ filter: grayscale(100%);
+}
- code {
- @apply bg-subtle rounded py-0.5 px-1.5 text-[13px];
- }
+/* Animations */
+@keyframes blink {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0; }
+}
- code[data-theme] {
- @apply overflow-x-auto rounded-md p-2 px-3.5;
- &,
- & span {
- @apply text-[var(--shiki-light)] dark:text-[var(--shiki-dark)];
- }
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(4px); }
+ to { opacity: 1; transform: translateY(0); }
+}
- & span[data-highlighted-line] {
- @apply dark:bg-neutral-800 bg-neutral-200;
+@keyframes bounce-gentle {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(4px); }
+}
- &::before {
- @apply text-primary;
- }
- }
- }
+.animate-blink {
+ animation: blink 1.06s step-end infinite;
+}
- code {
- counter-reset: line;
- }
+.animate-fadeIn {
+ animation: fadeIn 300ms ease-out forwards;
+}
- code > [data-line]::before {
- counter-increment: line;
- content: counter(line);
- @apply inline-block w-4 mr-6 text-right text-secondary;
- }
+.animate-bounce-gentle {
+ animation: bounce-gentle 1.5s ease-in-out infinite;
+}
- .video-player.grayscale {
- filter: grayscale(100%);
- }
+@keyframes scroll-trace {
+ 0% { transform: translateY(0); }
+ 100% { transform: translateY(-33.33%); }
+}
- .hide-on-small-height {
- display: block;
- }
+@keyframes scroll-logos {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(-50%); }
+}
- @keyframes slide-in {
- from {
- opacity: 0;
- transform: translateY(-8px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
+@keyframes shimmer {
+ 0% { background-position: -200% 0; }
+ 100% { background-position: 200% 0; }
+}
- .animate-slide-in {
- animation: slide-in 0.3s ease-out;
- }
+.animate-shimmer {
+ background: linear-gradient(90deg, var(--accent) 25%, var(--subtle) 50%, var(--accent) 75%);
+ background-size: 200% 100%;
+ animation: shimmer 1.5s ease-in-out infinite;
+}
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(4px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
+@keyframes pulse-dot {
+ 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
+ 40% { opacity: 1; transform: scale(1.2); }
+}
- .animate-fadeIn {
- animation: fadeIn 300ms ease-out forwards;
- }
+.visual-placeholder {
+ background: linear-gradient(135deg, var(--background) 0%, var(--accent) 50%, var(--background) 100%);
+ position: relative;
+ overflow: hidden;
}
-/* Small viewport height media query - outside any layers */
-@media screen and (max-height: 500px) {
- .hide-on-small-height {
- display: none !important;
- }
+.visual-placeholder::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+ 135deg,
+ transparent 0%,
+ rgba(128, 128, 128, 0.03) 50%,
+ transparent 100%
+ );
}
diff --git a/src/app/icon.tsx b/src/app/icon.tsx
index ba2b1728..08e9a88b 100644
--- a/src/app/icon.tsx
+++ b/src/app/icon.tsx
@@ -10,15 +10,23 @@ export const size = {
export default async function Icon() {
return new ImageResponse(
- // biome-ignore lint/a11y/noSvgWithoutTitle: renders visually
- ,
+
+ R
+
,
{ ...size }
)
}
diff --git a/src/app/lab/[slug]/page.tsx b/src/app/lab/[slug]/page.tsx
new file mode 100644
index 00000000..2c783e82
--- /dev/null
+++ b/src/app/lab/[slug]/page.tsx
@@ -0,0 +1,130 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { Langchain } from '~/components/logos/langchain'
+import { Neon } from '~/components/logos/neon'
+import { TableOfContents } from '~/components/table-of-contents'
+import { getPost, getPostSlugs } from '~/lib/posts'
+
+export const dynamicParams = false
+
+type Props = {
+ params: Promise<{ slug: string }>
+}
+
+const coPostLogos: RecordPost not found
+
+ const logo = metadata.coPost ? coPostLogos[metadata.coPost.partner] : null
+
+ return (
+
+ {/* Post header — intentionally outside to avoid article p/h overrides */}
+
+
+
+ ←
+
+ Lab
+
+
+
+ {toc.length > 0 && (
+
+
+
+ )
+}
diff --git a/src/app/lab/page.tsx b/src/app/lab/page.tsx
new file mode 100644
index 00000000..b1b5adbf
--- /dev/null
+++ b/src/app/lab/page.tsx
@@ -0,0 +1,211 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { FadeIn } from '~/components/fade-in'
+import { Langchain } from '~/components/logos/langchain'
+import { Neon } from '~/components/logos/neon'
+import { openSourceProjects, tools } from '~/lib/open-source'
+import { getArchivedPosts, getMainFeedPosts } from '~/lib/posts'
+
+export const metadata: Metadata = {
+ description: 'Research, writing, and open source from Rubric.',
+ title: 'Lab'
+}
+
+const pullSentences: Record
+
+ {metadata.subtitle && (
+ + {metadata.title} +
+ {metadata.isNew && ( + + New + + )} ++ {metadata.subtitle} +
+ )} +
+ {formatDate(metadata.date)}
+ ·
+ {metadata.author.name}
+ ·
+ {metadata.category}
+
+ {logo && metadata.coPost && (
+
+
+ Also published on
+
+
+
+ )}
+
+
+
+
+ ←
+
+ Back to Lab
+
+
+
+
+
+
+
+
+
+ {/* Writing */}
+
+ )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7b3176dc..1566ba19 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,33 +1,55 @@
import localFont from 'next/font/local'
+import { JetBrains_Mono } from 'next/font/google'
import type { Metadata } from 'next/types'
import Providers from '~/app/providers'
-import { META } from '~/lib/constants/metadata'
+import { Footer } from '~/components/footer'
+import { Nav } from '~/components/nav'
import './globals.css'
-import { getBaseUrl } from '~/lib/utils'
-import { Nav } from '~/ui/nav'
-const matter = localFont({ src: './fonts/matter-regular.woff' })
+const matter = localFont({
+ src: './fonts/matter-regular.woff',
+ variable: '--font-matter'
+})
+
+const mono = JetBrains_Mono({
+ subsets: ['latin'],
+ variable: '--font-mono',
+ weight: ['400', '500']
+})
export const metadata: Metadata = {
- alternates: {
- canonical: '/',
- languages: {
- 'en-US': '/en-US'
- }
+ description:
+ 'AI systems research and production engineering. We study how agents should be built, then we build them.',
+ metadataBase: new URL('https://rubriclabs.com'),
+ openGraph: {
+ description: 'AI systems research and production engineering.',
+ siteName: 'Rubric',
+ title: 'Rubric — A lab that ships.',
+ type: 'website',
+ url: 'https://rubriclabs.com'
+ },
+ robots: {
+ follow: true,
+ index: true
+ },
+ title: {
+ default: 'Rubric — A lab that ships.',
+ template: '%s — Rubric'
},
- metadataBase: new URL(getBaseUrl()),
- ...META
+ twitter: {
+ card: 'summary_large_image',
+ site: '@rubriclabs'
+ }
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
-
-
+
+
+ Research & Writing +
++ Lab +
++ Research, writing, and open source from Rubric. +
+
+
+ Looking for case studies? See our work
+
+ →
+
+
+
+
+
+
+
+
+ {/* Archive */}
+ {archivedPosts.length > 0 && (
+ + Writing +
+
+ {posts.map((post, i) => {
+ const logo = post.coPost ? coPostLogos[post.coPost.partner] : null
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+
+ + {post.title} +
+ {post.isNew && ( + + New + + )} ++ {pullSentences[post.slug] || post.pullSentence || post.description} +
+ {logo && post.coPost && ( +
+
+ Also published on
+
+
+ )}
+
+
+ {post.category}
+
+ ·
+
+ {formatDate(post.date)}
+
+
+
+
+
+
+
+ )}
+
+ {/* Open Source */}
+
+
+ + Archive +
+
+ {archivedPosts.map((post, i) => (
+
+
+
+ ))}
+
+ + {post.title} +
+ + {formatDate(post.date)} + + +
+
+
+
+
+ {/* Tools */}
+ + Open Source +
+
+ {openSourceProjects.map((project, i) => (
+
+
+
+ ))}
+
+ + {project.name} +
++ {project.description} +
++ {project.metric} +
+ +
+
+
+
+ + Tools +
+
+ {tools.map((tool, i) => (
+
+
+
+ ))}
+
+ + {tool.name} +
++ {tool.description} +
+ +{children}
+
-
+ RUBRIC
+ ,
+ { ...size }
)
}
-
-export default async function Image() {
- const [localFont, rootImageData] = await Promise.all([fontDataPromise, rootImageDataPromise])
- const rootImageSrc = `data:image/png;base64,${rootImageData}`
- const pngResponse = new ImageResponse(
- {/** biome-ignore lint/performance/noImgElement: techdebt */}
- 
-
- Applied AI
-
- {children}
-
-)
-
-const Hero = () => {
- const { isBelowFold } = useFold()
+export default function Home() {
return (
-
-
-
-
- - We're an applied AI Lab helping companies build intelligent applications. -
- -
-
-
-
-
+
+
+
+
+ ←
+
+ Work
+
+
+
+ {Logo && (
+
+
+
+ {content ? (
+
+
+
+
+ {study.quote && (
+
+ ) : (
+
+
+ )}
+
+
+ )
+}
diff --git a/src/app/work/page.tsx b/src/app/work/page.tsx
new file mode 100644
index 00000000..c4bbf8e2
--- /dev/null
+++ b/src/app/work/page.tsx
@@ -0,0 +1,223 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import type { ComponentType } from 'react'
+import { FadeIn } from '~/components/fade-in'
+import { Albertsons } from '~/components/logos/albertsons'
+import { Cal } from '~/components/logos/cal'
+import { DRisk } from '~/components/logos/drisk'
+import { Graphite } from '~/components/logos/graphite'
+import { Greptile } from '~/components/logos/greptile'
+import { Gumloop } from '~/components/logos/gumloop'
+import { Langchain } from '~/components/logos/langchain'
+import { Maige } from '~/components/logos/maige'
+import { Trigger } from '~/components/logos/trigger'
+import { Section } from '~/components/section'
+import { caseStudies } from '~/lib/case-studies'
+
+export const metadata: Metadata = {
+ description:
+ 'Systems we\u2019ve built. Problems we\u2019ve solved. Each one taught us something about how AI should work in production.',
+ title: 'Work'
+}
+
+const studyLogos: Record
+
+ )}
+ + {study.category} +
++ {study.title} +
++ {study.subtitle} +
+ +
+ {study.client}
+ ·
+ {study.context}
+
+
+ {coPostLogo && study.coPost && (
+
+
+ Also published on
+
+
+ {study.tags.map(tag => (
+
+ {tag}
+
+ ))}
+
+
+
+
+ + {study.scope} +
+
+
+ )}
+ + “{study.quote.text}” ++
+ — {study.quote.attribution} +
+
+
+ + {study.description} +
+
+
+
+ ←
+
+ All work
+
+
+ + Work +
++ Systems we've built. Problems we've solved. Each one taught us something + about how AI should work in production. +
+
+
+ Read {hero.title} case study
+
+
+
+
+
+
+ {HeroLogo && (
+ + {hero.category} +
++ {hero.title} +
++ {hero.description} +
+
+
+ Read case study
+
+ →
+
+
+
+
+
+ )}
+
+ {rest.map((study, i) => {
+ const Logo = studyLogos[study.slug]
+ return (
+
+
+ )
+ })}
+
+
+ {/* Secondary Projects */}
+
+
+
+ Read {study.title} case study
+
+
+ {Logo && (
+
+
+
+ )}
+ + {study.category} +
++ {study.title} +
++ {study.description} +
+ {study.coPost && ( + + Also published on + {coPostLogos[study.coPost.label] ?? ( + {study.coPost.label} + )} + + )} +
+
+ Read case study
+
+ →
+
+
+
+
+
+
+
+ + Other Projects +
+
+ {secondaryProjects.map((project, i) => (
+
+
+ ))}
+
+
+ {project.Logo && (
+
+ + {project.title} +
++ {project.description} +
+ + {project.linkText} + → + +
+
+ )
+}
+
+function PrimitiveNode({
+ primitive,
+ delay
+}: {
+ primitive: (typeof primitives)[number]
+ delay: number
+}) {
+ return (
+
+
+ {primitive.detail}
+
+ )}
+
+
+ {primitive.label}
+ {primitive.id === 'reasoning' && (
+
+ 12ms
+
+ )}
+ {primitive.id === 'composition' && (
+
+ 23ms
+
+ )}
+
+ {primitive.description}
+ + {primitive.tools && ( +
+ {primitive.tools.map((tool, i) => (
+
+
+ {tool.name}
+
+
+ ✓ {tool.time}
+
+
+ ))}
+
+ )}
+
+ {primitive.components && (
+
+ {primitive.components.map((comp, i) => (
+
+ <{comp} />
+
+ ))}
+
+ )}
+
+ {primitive.detail && !primitive.tools && !primitive.components && (
+
+
+ Architecture
+
+
+ {isInView && (
+
+ Primitives, not pipelines
+
+
+
+ {primitives.map((primitive, i) => (
+
+ )}
+
+
+ {i > 0 &&
+ ))}
+
+
+ )
+}
diff --git a/src/ui/blog/claude-code/agent-loop-cards.tsx b/src/components/blog/claude-code/agent-loop-cards.tsx
similarity index 100%
rename from src/ui/blog/claude-code/agent-loop-cards.tsx
rename to src/components/blog/claude-code/agent-loop-cards.tsx
diff --git a/src/ui/blog/claude-code/system-architecture.tsx b/src/components/blog/claude-code/system-architecture.tsx
similarity index 97%
rename from src/ui/blog/claude-code/system-architecture.tsx
rename to src/components/blog/claude-code/system-architecture.tsx
index bb66c77d..fb954705 100644
--- a/src/ui/blog/claude-code/system-architecture.tsx
+++ b/src/components/blog/claude-code/system-architecture.tsx
@@ -1,13 +1,13 @@
'use client'
import { useCallback, useEffect, useRef, useState } from 'react'
+import { CORE_TOOL_NAMES } from '~/components/blog/claude-code/tools-table'
+import { Button } from '~/components/button'
+import { Figure } from '~/components/figure'
+import { PauseIcon } from '~/components/icons/pause'
+import { PlayIcon } from '~/components/icons/play'
+import { RestartIcon } from '~/components/icons/restart'
import { cn } from '~/lib/utils/cn'
-import { CORE_TOOL_NAMES } from '~/ui/blog/claude-code/tools-table'
-import { Button } from '~/ui/button'
-import { Figure } from '~/ui/figure'
-import { PauseIcon } from '~/ui/icons/pause'
-import { PlayIcon } from '~/ui/icons/play'
-import { RestartIcon } from '~/ui/icons/restart'
const COMPONENT_ID = 'system-architecture'
diff --git a/src/ui/blog/claude-code/tools-table.tsx b/src/components/blog/claude-code/tools-table.tsx
similarity index 100%
rename from src/ui/blog/claude-code/tools-table.tsx
rename to src/components/blog/claude-code/tools-table.tsx
diff --git a/src/ui/blog/copy-block.tsx b/src/components/blog/copy-block.tsx
similarity index 100%
rename from src/ui/blog/copy-block.tsx
rename to src/components/blog/copy-block.tsx
diff --git a/src/ui/blog/primitives-over-pipelines/index.ts b/src/components/blog/primitives-over-pipelines/index.ts
similarity index 100%
rename from src/ui/blog/primitives-over-pipelines/index.ts
rename to src/components/blog/primitives-over-pipelines/index.ts
diff --git a/src/ui/blog/primitives-over-pipelines/list-inspect-figure.tsx b/src/components/blog/primitives-over-pipelines/list-inspect-figure.tsx
similarity index 92%
rename from src/ui/blog/primitives-over-pipelines/list-inspect-figure.tsx
rename to src/components/blog/primitives-over-pipelines/list-inspect-figure.tsx
index 4f09a364..ec3dd145 100644
--- a/src/ui/blog/primitives-over-pipelines/list-inspect-figure.tsx
+++ b/src/components/blog/primitives-over-pipelines/list-inspect-figure.tsx
@@ -1,12 +1,12 @@
'use client'
import { useCallback, useEffect, useState } from 'react'
+import { Button } from '~/components/button'
+import { Figure } from '~/components/figure'
+import { PauseIcon } from '~/components/icons/pause'
+import { PlayIcon } from '~/components/icons/play'
+import { RestartIcon } from '~/components/icons/restart'
import { cn } from '~/lib/utils/cn'
-import { Button } from '~/ui/button'
-import { Figure } from '~/ui/figure'
-import { PauseIcon } from '~/ui/icons/pause'
-import { PlayIcon } from '~/ui/icons/play'
-import { RestartIcon } from '~/ui/icons/restart'
const ITEMS = [
{
@@ -153,10 +153,10 @@ export const ListInspectFigure = () => {
style={{ bottom: CONTROLS_BOTTOM, left: CONTROLS_LEFT }}
>
+
+ {ANNOUNCEMENT.text} →
+
+
+ {scenario.intent}
+ {capabilities.map((cap, i) => (
+
+
+ ))}
+
+
+
+ + {cap.title} +
++ {cap.body} +
+{children}
+}
diff --git a/src/components/case-study-diagrams/cal-agent-loop.tsx b/src/components/case-study-diagrams/cal-agent-loop.tsx
new file mode 100644
index 00000000..d4aa34c4
--- /dev/null
+++ b/src/components/case-study-diagrams/cal-agent-loop.tsx
@@ -0,0 +1,101 @@
+const tools = [
+ 'createBooking',
+ 'deleteBooking',
+ 'getAvailability',
+ 'getBookings',
+ 'sendBookingLink',
+ 'updateBooking'
+]
+
+export function CalAgentLoop() {
+ return (
+
+ {/* Main flow */}
+
+
+ {/* Email In */}
+
+
+ {/* Key annotations */}
+
+ Email In
+
+ parse + DKIM verify
+
+
+
+
+ →
+
+
+ {/* Agent Loop - the centerpiece */}
+
+
+
+
+ →
+
+
+ {/* Email Out */}
+
+
+ Agent Loop
+
+
+ GPT-4 · temperature 0
+
+
+
+ {/* Inner cycle */}
+
+ understand
+ →
+ select tool
+ →
+ execute
+ →
+ evaluate
+ →
+ iterate or respond
+
+
+ {/* Tools */}
+
+ {tools.map(tool => (
+
+ {tool}
+
+ ))}
+
+
+ each tool: Zod schema → validated input → Cal.com API
+
+
+
+ Email Out
+
+
+ confirmation or error
+
+
+
+
+ API keys injected into tools, never
+ visible to agent
+
+
+ No UI — the agent must get it right on the
+ first try
+
+
+
+ {/* Timeline */}
+
+
+ {phases.map((phase, i) => (
+
+
+ {/* Callout */}
+
+
+ ))}
+
+ {phase.week && (
+
+ {phase.week}
+
+ )}
+
+ {phase.label}
+
+
+ {i < phases.length - 1 && (
+
+ →
+
+ )}
+
+ {phase.items.map(item => (
+
+ {item}
+
+ ))}
+
+
+
+ + The week in-person transferred more context than a month of Slack threads would + have. +
++ Total time from first meeting to production: one month. +
+
+ {/* Session Memory */}
+
+
+
+
+ {/* Classification arrow */}
+
+
+ Session Memory
+
+ ephemeral
+
+
+ {['retrievals', 'recommendations', 'rejections', 'refined queries'].map(
+ item => (
+
+ {item}
+
+ )
+ )}
+
+ + “not that one, something cheaper” → filters its own history, doesn't + re-retrieve +
+
+ ↓ classify & promote
+
+ durable preference? → persist
+
+
+
+ {/* Cross-Session Memory */}
+
+
+
+ {/* Annotation */}
+
+
+ Cross-Session Memory
+
+ durable
+
+
+ {[
+ 'nut allergy',
+ 'prefers organic',
+ 'household: 4',
+ 'brand: Safeway Select'
+ ].map(item => (
+
+ {item}
+
+ ))}
+
+ + Next session starts with context already loaded. The agent doesn't ask + questions it's already answered. +
+
+
+ + Not an append-only log — structured, scoped, selective. The classification + layer decides what to store and at what scope. +
+
+ {/* Loop steps */}
+
+
+ {loopSteps.map((step, i) => (
+
+
+ {/* Refine loop arrow */}
+
+
+ ))}
+
+
+ {step.label}
+
+
+ {step.sub}
+
+
+ {i < loopSteps.length - 1 && (
+
+ →
+
+ )}
+
+
+
+ {/* Termination condition */}
+
+ ↩ refine
+ |
+ ↓ respond
+
+
+ Termination:
+
+ 3 passes without improvement → respond with best results + explain limitation
+
+
+
+ {/* Annotation row */}
+
+
+ AI decides what
+ Code decides how
+
+
+ {/* Pipeline */}
+
+ {steps.map((step, i) => (
+
+
+ {/* Bracket annotations */}
+
+
+ ))}
+
+
+ {step.label}
+
+
+ {step.sub}
+
+
+ {i < steps.length - 1 && (
+
+ →
+
+ )}
+
+
+
+
+
+
+
+ editorial decisions
+
+
+
+
+
+
+
+ deterministic rendering
+
+
+
+
+ )
+ }
+
+ return (
+ Thanks. We'll be in touch.
++ We typically respond within a day. +
+
+
+ )
+}
diff --git a/src/ui/copiable-heading.tsx b/src/components/copiable-heading.tsx
similarity index 100%
rename from src/ui/copiable-heading.tsx
rename to src/components/copiable-heading.tsx
diff --git a/src/ui/copiable.tsx b/src/components/copiable.tsx
similarity index 100%
rename from src/ui/copiable.tsx
rename to src/components/copiable.tsx
diff --git a/src/components/cta.tsx b/src/components/cta.tsx
new file mode 100644
index 00000000..16e11b9c
--- /dev/null
+++ b/src/components/cta.tsx
@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export function CTA() {
+ return (
+ + Contact +
++ Tell us what you're building. +
++ We take on a small number of engagements per quarter. +
+ +
+
+ + Working on something hard? +
++ We take on a small number of engagements. + Tell us what you're building. +
+ + Start a conversation → + +
+ {PIECES.map((piece) => (
+
+
+
+ ))}
+ {piece.label}
+{piece.body}
+
+ {/* Chat ghost */}
+
+
+
+
+ {/* Guide lines */}
+ {guideOpacity > 0 && (
+
+ )}
+
+ {/* Exploding pieces */}
+ {PIECES.map((piece) => {
+ const off = EXPLODE_OFFSETS[piece.id]
+ if (!off) return null
+ const grid = getGridPos(piece.gridCol, piece.gridRow)
+ const ex = off.x * easedSep
+ const ey = off.y * easedSep
+ const cx = ex + (grid.x - ex) * easedSettle
+ const cy = ey + (grid.y - ey) * easedSettle
+ const rotY = off.rY * easedSep * (1 - easedSettle)
+ const rotX = off.rX * easedSep * (1 - easedSettle)
+ const w = 140 + (cardW - 140) * easedSettle
+ const h = 70 + (cardH - 70) * easedSettle
+ const opacity = outlineIn * (1 - cardReveal)
+ const isDashed = easedSettle < 0.4
+ const bgAlpha = isDashed ? 0.15 : easedSettle * 0.9
+
+ return (
+
+
+ Rubric Assistant
+
+
+
+
+
+
+ 0.3 ? '8px' : '3px',
+ backgroundColor: `color-mix(in srgb, var(--accent) ${Math.round(bgAlpha * 100)}%, transparent)`,
+ zIndex: 2,
+ pointerEvents: 'none'
+ }}
+ >
+ {/* Label */}
+
+ )
+ })}
+
+ {/* Final cards */}
+ {cardReveal > 0 && (
+
+ {piece.label}
+
+
+ {/* Body text */}
+ {easedSettle > 0.4 && (
+ + {piece.body} +
+ )} + + {/* Corner markers */} + {isDashed && ( + <> + + + + + + )} +
+
+ )}
+
+ {/* Progress bar */}
+ {progress > 0.02 && progress < 0.98 && (
+
+ {PIECES.map((piece) => (
+
+
+
+ ))}
+ + {piece.label} +
++ {piece.body} +
+
+
+ )}
+
+
+
+
+
+ Work
+
+
+ See all
+
+ →
+
+
+
+
+ {featured.map((study, i) => {
+ const Logo = studyLogos[study.slug]
+ return (
+
+
+ )
+ })}
+
+
+
+
+ Read {study.title} case study
+
+
+
+
+ {Logo && (
+
+
+
+ )}
+ + {study.category} +
++ {study.title} +
++ {study.description} +
+
+
+ Read case study
+
+ →
+
+
+
+
+ {displayText ? (
+
+ {displayText}
+ {fill < 1 && }
+
+ ) : (
+
+ {submitted ? '' : 'Ask Rubric something...'}
+
+ )}
+
+
+ )
+}
diff --git a/src/components/hero/chat/generative-output.tsx b/src/components/hero/chat/generative-output.tsx
new file mode 100644
index 00000000..dab9906d
--- /dev/null
+++ b/src/components/hero/chat/generative-output.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+export interface CaseRef {
+ client: string
+ href: string
+}
+
+export function GenerativeOutput({ cases, progress }: { cases: CaseRef[]; progress: number }) {
+ if (progress <= 0) return null
+
+ return (
+
+ {cases.map((c, i) => {
+ const p = Math.max(0, (progress - i * 0.25) / 0.5)
+ if (p <= 0) return null
+ return (
+
+ {c.client}
+ →
+
+ )
+ })}
+
+ )
+}
diff --git a/src/components/hero/chat/reasoning-trace.tsx b/src/components/hero/chat/reasoning-trace.tsx
new file mode 100644
index 00000000..55bb2d3b
--- /dev/null
+++ b/src/components/hero/chat/reasoning-trace.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+export function ReasoningTrace({ progress }: { summary: string; steps: number; progress: number }) {
+ if (progress <= 0) return null
+ const done = progress > 0.6
+
+ return (
+
+
+ {done ? 'Thought for 4 steps' : (
+ <>
+ Thinking
+
+ {[0, 1, 2].map(i => (
+
+ ))}
+
+
+ )}
+
+
+ )
+}
diff --git a/src/components/hero/chat/system-response.tsx b/src/components/hero/chat/system-response.tsx
new file mode 100644
index 00000000..a11a30fe
--- /dev/null
+++ b/src/components/hero/chat/system-response.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+export function SystemResponse({ text, progress }: { text: string; progress: number }) {
+ if (progress <= 0) return null
+ const words = text.split(' ')
+ const count = Math.floor(progress * words.length)
+ const isTyping = progress < 1
+
+ return (
+ + {words.slice(0, count).join(' ')} + {isTyping && } +
+ ) +} diff --git a/src/components/hero/chat/user-message.tsx b/src/components/hero/chat/user-message.tsx new file mode 100644 index 00000000..ad2e0521 --- /dev/null +++ b/src/components/hero/chat/user-message.tsx @@ -0,0 +1,18 @@ +'use client' + +export function UserMessage({ text, progress }: { text: string; progress: number }) { + if (progress <= 0) return null + const chars = Math.floor(progress * text.length) + const isTyping = progress < 1 + + return ( +
+
+ )
+}
diff --git a/src/components/hero/diagrams.tsx b/src/components/hero/diagrams.tsx
new file mode 100644
index 00000000..157597d2
--- /dev/null
+++ b/src/components/hero/diagrams.tsx
@@ -0,0 +1,348 @@
+'use client'
+
+import { clamp01, easeOutCubic } from './scroll-phases'
+
+// ── Shared styles ───────────────────────────────────────────────────────
+
+const S = 'var(--primary)' // stroke
+const T = 'var(--primary)' // text fill
+const TS = 'var(--secondary)' // text secondary
+const SW = 0.75
+
+function Rect({
+ x, y, w, h, label, dimmed, progress, dashed,
+}: {
+ x: number; y: number; w: number; h: number; label: string
+ dimmed?: boolean; progress: number; dashed?: boolean
+}) {
+ const op = clamp01(progress * 3) * (dimmed ? 0.25 : 1)
+ return (
+
+
+ + {text.slice(0, chars)} + {isTyping && } +
+
+
+ {label}
+
+
+ )
+}
+
+function FallbackNode({ x, y, progress }: { x: number; y: number; progress: number }) {
+ const op = clamp01(progress * 3)
+ return (
+
+
+ fallback: use cache
+
+
+ )
+}
+
+export function ArchitectureExpansion({ bounds, progress }: {
+ bounds: ComponentBounds
+ progress: number
+}) {
+ const connectors = CONNECTOR_NODES[1]!
+ if (!bounds || bounds.width === 0 || connectors.length === 0) return null
+
+ // Origin: right edge center of the reasoning component
+ const origin = getNodePosition(bounds, connectors[1]!) // right-center
+ const startX = origin.x + 20
+ const centerY = origin.y
+
+ // Node positions
+ const inputX = startX
+ const parallelX = inputX + NODE_W + H_GAP + 16
+ const mergeX = parallelX + NODE_W + H_GAP + 16
+ const seqX = [mergeX, mergeX + NODE_W / 2 + H_GAP, mergeX + NODE_W + H_GAP * 2]
+
+ const parallelNodes = [
+ { label: 'retrieve docs', y: centerY - V_SPREAD },
+ { label: 'memory lookup', y: centerY },
+ { label: 'validate schema', y: centerY + V_SPREAD },
+ ]
+
+ const seqNodes = [
+ { label: 'merge', x: seqX[0]! },
+ { label: 'inference', x: seqX[1]! },
+ { label: 'output', x: seqX[2]! },
+ ]
+
+ // Timing bar position
+ const barY = centerY + V_SPREAD + 50
+ const barW = 70
+
+ return (
+ <>
+
+
+ {/* HTML DAG nodes */}
+
+
+ )
+}
+
+export function ContextExpansion({ bounds, progress }: {
+ bounds: ComponentBounds
+ progress: number
+}) {
+ const connectors = CONNECTOR_NODES[0]!
+ if (!bounds || bounds.width === 0) return null
+
+ // Source block positions (centered under each connector node)
+ const nodePositions = connectors.map(n => getNodePosition(bounds, n))
+ const blockY = bounds.top + bounds.height + DROP_Y
+
+ // Schema below first source
+ const schemaY = blockY + BLOCK_H + BLOCK_GAP
+ const schemaX = nodePositions[0]!.x - BLOCK_W / 2
+
+ // Discarded below schema
+ const discardedY = schemaY + BLOCK_H + BLOCK_GAP
+
+ return (
+ <>
+ {/* SVG connector lines (rendered in the expansion SVG layer) */}
+
+
+ {/* HTML source blocks */}
+ {SOURCES.map((src, i) => (
+
+
+ + {label} +
++ {detail} +
+ {detail2 && ( ++ {detail2} +
+ )} + 0.8 ? 0.08 : 1), // ghost opacity when compressed
+ transition: 'none',
+ overflow: 'hidden',
+ }}
+ >
+
+ )
+}
+
+export function EvaluationExpansion({ bounds, progress }: {
+ bounds: ComponentBounds
+ progress: number
+}) {
+ const connectors = CONNECTOR_NODES[2]!
+ if (!bounds || bounds.width === 0 || connectors.length === 0) return null
+
+ const origin = getNodePosition(bounds, connectors[0]!) // right-center
+ const startX = origin.x + 24
+ const centerY = origin.y - CARD_H / 2
+
+ // Phase within evaluation: show iterations sequentially, tiling right
+ // 0.0-0.25: iter 1 appears at startX
+ // 0.25-0.50: iter 2 appears next to iter 1
+ // 0.50-0.75: iter 3 appears next to iter 2
+ // 0.75-0.90: scores settle, winner highlighted
+ // 0.90-1.0: iters 1&2 compress to ghost lines, iter 3 stays
+
+ const iter1Appear = clamp01(progress * 4)
+ const iter2Appear = clamp01((progress - 0.25) * 4)
+ const iter3Appear = clamp01((progress - 0.50) * 4)
+ const compressP = clamp01((progress - 0.88) * 8)
+
+ // Tile left-to-right from startX
+ const iter1X = startX
+ const iter2X = startX + CARD_W + CARD_GAP
+ const iter3X = startX + (CARD_W + CARD_GAP) * 2
+
+ return (
+ <>
+
+
+ {/* Iteration cards */}
+
+ {textOp > 0.01 && (
+
+
+ {/* Label */}
+
+ )}
+ + {iter.label}{iter.winner ? ' ✓' : ''} +
+ + {/* Score */} ++ {iter.score} +
+ + {/* Score bar */} +
+
+
+
+ {/* Separator */}
+
+
+ {/* Metrics */}
+ {Object.entries(iter.metrics).map(([key, val]) => (
+
+
+ {key}
+
+
+ {val}/10
+
+
+ ))}
+
+ {/* Mini metric bars */}
+ {Object.entries(iter.metrics).map(([key, val]) => (
+
+
+
+ ))}
+
+
+
+ {/* Expansion content (positioned within/around the chat container) */}
+ {expansion === 'context' && (
+
+
+ {label}
+
+
+ )
+}
diff --git a/src/components/hero/index.tsx b/src/components/hero/index.tsx
new file mode 100644
index 00000000..015c9d59
--- /dev/null
+++ b/src/components/hero/index.tsx
@@ -0,0 +1,289 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { LogoBar } from '~/components/logo-bar'
+import { useScrollProgress } from './use-scroll-progress'
+import { PHASES, phaseProgress, easeOut, clamp01, deriveHeroState } from './scroll-phases'
+import { useLayout } from './use-layout'
+import { ScaffoldOverlay } from './scaffold'
+import { Expansions } from './expansions'
+import { UserMessage } from './chat/user-message'
+import { ReasoningTrace } from './chat/reasoning-trace'
+import { SystemResponse } from './chat/system-response'
+import { type CaseRef } from './chat/generative-output'
+import { ChatInput } from './chat/chat-input'
+
+// ── Content ──────────────────────────────────────────────────────────────
+
+const USER_MSG = 'What makes Rubric different from a typical AI dev shop?'
+const RESPONSE =
+ "We're a research lab and a product studio. We publish research on agent architectures, then ship those patterns as production systems. Same team does both — no handoff, no translation layer."
+const CASES: CaseRef[] = [
+ { client: 'Safeway AI', href: '/work/safeway' },
+ { client: 'Year in Code', href: '/work/year-in-code' },
+]
+
+const HIGHLIGHT_CONTENT = [
+ { mono: '01 — Context', heading: 'Every token is deliberate.' },
+ { mono: '02 — Architecture', heading: 'Four steps, three in parallel.' },
+ { mono: '03 — Evaluation', heading: 'Every output is scored.' },
+]
+
+const W = 520
+const PAD = 16
+
+// ── Auto-play chat ───────────────────────────────────────────────────────
+
+function useAutoChat(scrollProgress: number): number {
+ const [auto, setAuto] = useState(0)
+ const raf = useRef(0)
+ const start = useRef(0)
+ useEffect(() => {
+ start.current = performance.now()
+ const tick = () => {
+ const t = Math.min(1, (performance.now() - start.current) / 3800)
+ setAuto(t)
+ if (t < 1) raf.current = requestAnimationFrame(tick)
+ }
+ raf.current = requestAnimationFrame(tick)
+ return () => cancelAnimationFrame(raf.current)
+ }, [])
+ const introP = scrollProgress > 0 ? phaseProgress(scrollProgress, PHASES.INTRO) : 0
+ return Math.max(auto, introP)
+}
+
+// ── Main ─────────────────────────────────────────────────────────────────
+
+export function HeroEngine() {
+ const sectionRef = useRef+ {heading} +
++ {body} +
+
+
+ A lab that ships.
++ We study how AI agents should be built — then we build them. +
+
+ {HIGHLIGHT_CONTENT.map((item, _i) => (
+
+
+
+ {item.mono}
+
+
+ ))}
+ + {item.heading} +
+
+
+ {/* Intro text (left side, visible before scrolling) */}
+
+ {/* Ghost dashed guide lines (visible when component is in ghost state) */}
+ {ghostProgress > 0.01 && (
+ <>
+
+ /{String(index + 1).padStart(2, '0')}
+
+
+ {/* Connector nodes */}
+ {connectors!.map(node => {
+ const nx = bounds.left + bounds.width * node.xRatio
+ const ny = bounds.top + bounds.height * node.yRatio
+ const nodeOp = mainOp * (isFocused ? 0.7 : 0.35)
+ return (
+
+
+ )
+ })}
+
+ )}
+
+ )
+}
+
+// ── Main scaffold overlay ────────────────────────────────────────────────
+
+export function ScaffoldOverlay({
+ layoutRef, heroState, containerWidth, containerHeight,
+}: {
+ layoutRef: LayoutRef
+ heroState: HeroState
+ containerWidth: number
+ containerHeight: number
+}) {
+ const layout = layoutRef.current
+ if (!layout || layout.length < 4) return null
+
+ // Check if any scaffold is visible
+ const hasVisibleScaffold = heroState.scaffoldDraw.some(d => d > 0.01) ||
+ heroState.ghostGuides.some(g => g > 0.01)
+ if (!hasVisibleScaffold) return null
+
+ return (
+
+ )
+}
diff --git a/src/components/hero/scroll-phases.ts b/src/components/hero/scroll-phases.ts
new file mode 100644
index 00000000..596b4b01
--- /dev/null
+++ b/src/components/hero/scroll-phases.ts
@@ -0,0 +1,180 @@
+// ── Phase definitions ────────────────────────────────────────────────────
+
+export const PHASES = {
+ INTRO: { start: 0.00, end: 0.05 },
+ ANNOTATE: { start: 0.05, end: 0.15 },
+ CLEAR_STAGE: { start: 0.15, end: 0.20 },
+ CONTEXT: { start: 0.20, end: 0.38 },
+ COLLAPSE_CTX: { start: 0.38, end: 0.43 },
+ ARCHITECTURE: { start: 0.43, end: 0.61 },
+ COLLAPSE_ARCH: { start: 0.61, end: 0.66 },
+ EVALUATION: { start: 0.66, end: 0.86 },
+ REASSEMBLE: { start: 0.86, end: 1.00 },
+} as const
+
+// ── Easing ───────────────────────────────────────────────────────────────
+
+export const clamp01 = (v: number) => Math.max(0, Math.min(1, v))
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t
+export const easeOut = (t: number) => 1 - (1 - t) * (1 - t)
+export const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3)
+export const easeInOut = (t: number) =>
+ t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+export const easeInOutQuart = (t: number) =>
+ t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2
+
+// ── Phase progress ───────────────────────────────────────────────────────
+
+export function phaseProgress(
+ progress: number,
+ phase: { start: number; end: number }
+): number {
+ if (progress <= phase.start) return 0
+ if (progress >= phase.end) return 1
+ return (progress - phase.start) / (phase.end - phase.start)
+}
+
+// ── Component state machine ──────────────────────────────────────────────
+
+export type ComponentState = 'hidden' | 'active' | 'focused' | 'ghost'
+export type ExpansionType = 'context' | 'architecture' | 'evaluation' | null
+
+export interface HeroState {
+ /** State for each of the 4 chat components: /01 question, /02 reasoning, /03 response, /04 citations */
+ components: [ComponentState, ComponentState, ComponentState, ComponentState]
+ /** Which expansion is currently active */
+ activeExpansion: ExpansionType
+ /** Draw progress per component (0 = erased, 1 = fully drawn) */
+ scaffoldDraw: [number, number, number, number]
+ /** Ghost guide line opacity per component (0 = invisible, 1 = fully visible at 6% base opacity) */
+ ghostGuides: [number, number, number, number]
+ /** Progress within the active expansion (0-1) */
+ expansionProgress: number
+}
+
+export function deriveHeroState(progress: number): HeroState {
+ const state: HeroState = {
+ components: ['active', 'active', 'active', 'active'],
+ activeExpansion: null,
+ scaffoldDraw: [0, 0, 0, 0],
+ ghostGuides: [0, 0, 0, 0],
+ expansionProgress: 0,
+ }
+
+ // ── INTRO (0.00–0.05): no scaffold yet
+ if (progress < PHASES.ANNOTATE.start) {
+ return state
+ }
+
+ // ── ANNOTATE (0.05–0.15): scaffold draws on all components
+ const annotateP = easeInOutQuart(phaseProgress(progress, PHASES.ANNOTATE))
+ state.scaffoldDraw = [annotateP, annotateP, annotateP, annotateP]
+
+ if (progress < PHASES.CLEAR_STAGE.start) {
+ return state
+ }
+
+ // ── CLEAR_STAGE (0.15–0.20): /02,/03,/04 erase → ghost. /01 stays active → focused
+ const clearP = easeOutCubic(phaseProgress(progress, PHASES.CLEAR_STAGE))
+ state.scaffoldDraw[1] = 1 - clearP
+ state.scaffoldDraw[2] = 1 - clearP
+ state.scaffoldDraw[3] = 1 - clearP
+ state.ghostGuides[1] = clearP
+ state.ghostGuides[2] = clearP
+ state.ghostGuides[3] = clearP
+ state.components[1] = clearP > 0.5 ? 'ghost' : 'active'
+ state.components[2] = clearP > 0.5 ? 'ghost' : 'active'
+ state.components[3] = clearP > 0.5 ? 'ghost' : 'active'
+ state.components[0] = clearP > 0.3 ? 'focused' : 'active'
+
+ if (progress < PHASES.CONTEXT.start) {
+ return state
+ }
+
+ // ── CONTEXT (0.20–0.38): /01 focused, expansion active
+ state.components = ['focused', 'ghost', 'ghost', 'ghost']
+ state.scaffoldDraw = [1, 0, 0, 0]
+ state.ghostGuides = [0, 1, 1, 1]
+ state.activeExpansion = 'context'
+ state.expansionProgress = phaseProgress(progress, PHASES.CONTEXT)
+
+ if (progress < PHASES.COLLAPSE_CTX.start) {
+ return state
+ }
+
+ // ── COLLAPSE_CTX (0.38–0.43): context collapses, /01→ghost, /02 restores→focused
+ const colCtxP = easeOutCubic(phaseProgress(progress, PHASES.COLLAPSE_CTX))
+ state.activeExpansion = 'context'
+ state.expansionProgress = 1 - colCtxP
+ state.scaffoldDraw[0] = 1 - colCtxP
+ state.ghostGuides[0] = colCtxP
+ state.components[0] = colCtxP > 0.5 ? 'ghost' : 'focused'
+ state.scaffoldDraw[1] = colCtxP
+ state.ghostGuides[1] = 1 - colCtxP
+ state.components[1] = colCtxP > 0.5 ? 'focused' : 'ghost'
+
+ if (colCtxP > 0.7) {
+ state.activeExpansion = null
+ state.expansionProgress = 0
+ }
+
+ if (progress < PHASES.ARCHITECTURE.start) {
+ return state
+ }
+
+ // ── ARCHITECTURE (0.43–0.61): /02 focused, DAG expansion
+ state.components = ['ghost', 'focused', 'ghost', 'ghost']
+ state.scaffoldDraw = [0, 1, 0, 0]
+ state.ghostGuides = [1, 0, 1, 1]
+ state.activeExpansion = 'architecture'
+ state.expansionProgress = phaseProgress(progress, PHASES.ARCHITECTURE)
+
+ if (progress < PHASES.COLLAPSE_ARCH.start) {
+ return state
+ }
+
+ // ── COLLAPSE_ARCH (0.61–0.66): arch collapses, /02→ghost, /03 restores→focused
+ const colArchP = easeOutCubic(phaseProgress(progress, PHASES.COLLAPSE_ARCH))
+ state.activeExpansion = 'architecture'
+ state.expansionProgress = 1 - colArchP
+ state.scaffoldDraw[1] = 1 - colArchP
+ state.ghostGuides[1] = colArchP
+ state.components[1] = colArchP > 0.5 ? 'ghost' : 'focused'
+ state.scaffoldDraw[2] = colArchP
+ state.ghostGuides[2] = 1 - colArchP
+ state.components[2] = colArchP > 0.5 ? 'focused' : 'ghost'
+
+ if (colArchP > 0.7) {
+ state.activeExpansion = null
+ state.expansionProgress = 0
+ }
+
+ if (progress < PHASES.EVALUATION.start) {
+ return state
+ }
+
+ // ── EVALUATION (0.66–0.86): /03 focused, flywheel expansion
+ state.components = ['ghost', 'ghost', 'focused', 'ghost']
+ state.scaffoldDraw = [0, 0, 1, 0]
+ state.ghostGuides = [1, 1, 0, 1]
+ state.activeExpansion = 'evaluation'
+ state.expansionProgress = phaseProgress(progress, PHASES.EVALUATION)
+
+ if (progress < PHASES.REASSEMBLE.start) {
+ return state
+ }
+
+ // ── REASSEMBLE (0.86–1.00): all restore, scaffold redraws then erases
+ const reassP = phaseProgress(progress, PHASES.REASSEMBLE)
+ const redraw = easeOutCubic(clamp01(reassP * 3)) // 0–0.33: scaffold redraws
+ const eraseAll = easeOutCubic(clamp01((reassP - 0.5) * 2)) // 0.5–1.0: scaffold erases
+ const drawVal = redraw * (1 - eraseAll)
+
+ state.components = ['active', 'active', 'active', 'active']
+ state.scaffoldDraw = [drawVal, drawVal, drawVal, drawVal]
+ state.ghostGuides = [0, 0, 0, 0]
+ state.activeExpansion = null
+ state.expansionProgress = 0
+
+ return state
+}
diff --git a/src/components/hero/use-layout.ts b/src/components/hero/use-layout.ts
new file mode 100644
index 00000000..8382d7e9
--- /dev/null
+++ b/src/components/hero/use-layout.ts
@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useRef, type RefObject } from 'react'
+
+export interface ComponentBounds {
+ top: number
+ left: number
+ width: number
+ height: number
+}
+
+export type LayoutRef = RefObject
+
+/**
+ * Measures the position of chat component wrappers relative to the container.
+ * Stores in a ref (not state) so scroll handlers can read without re-renders.
+ */
+export function useLayout(
+ containerRef: RefObject,
+ componentRefs: RefObject<(HTMLDivElement | null)[]>
+): LayoutRef {
+ const layoutRef = useRef(null)
+
+ useEffect(() => {
+ const container = containerRef.current
+ if (!container) return
+
+ const measure = () => {
+ const containerRect = container.getBoundingClientRect()
+ const refs = componentRefs.current
+ if (!refs) return
+
+ layoutRef.current = refs.map(el => {
+ if (!el) return { top: 0, left: 0, width: 0, height: 0 }
+ const rect = el.getBoundingClientRect()
+ return {
+ top: rect.top - containerRect.top,
+ left: rect.left - containerRect.left,
+ width: rect.width,
+ height: rect.height,
+ }
+ })
+ }
+
+ measure()
+
+ const ro = new ResizeObserver(measure)
+ ro.observe(container)
+
+ return () => ro.disconnect()
+ }, [containerRef, componentRefs])
+
+ return layoutRef
+}
diff --git a/src/components/hero/use-scroll-progress.ts b/src/components/hero/use-scroll-progress.ts
new file mode 100644
index 00000000..5124fd21
--- /dev/null
+++ b/src/components/hero/use-scroll-progress.ts
@@ -0,0 +1,59 @@
+'use client'
+
+import { useEffect, useRef, useState, type RefObject } from 'react'
+import { clamp01 } from './scroll-phases'
+
+/**
+ * Maps scroll position within a section element to normalized 0–1 progress.
+ * Uses passive scroll listener for performance.
+ * Returns -1 when the section hasn't started scrolling yet.
+ */
+export function useScrollProgress(sectionRef: RefObject) {
+ const [progress, setProgress] = useState(-1)
+ const prevProgress = useRef(-1)
+
+ // Debug override via URL param: ?progress=0.45
+ const debugOverride = useRef(null)
+ useEffect(() => {
+ const params = new URLSearchParams(window.location.search)
+ const dbg = params.get('progress')
+ if (dbg !== null) debugOverride.current = parseFloat(dbg)
+ }, [])
+
+ useEffect(() => {
+ if (debugOverride.current !== null) {
+ setProgress(debugOverride.current)
+ return
+ }
+
+ const section = sectionRef.current
+ if (!section) return
+
+ const handleScroll = () => {
+ const rect = section.getBoundingClientRect()
+ const vh = window.innerHeight
+ const scrolled = -rect.top
+ const runway = section.offsetHeight - vh
+
+ if (runway <= 0) return
+
+ let p: number
+ if (scrolled < 0) {
+ p = -1
+ } else {
+ p = clamp01(scrolled / runway)
+ }
+
+ if (Math.abs(p - prevProgress.current) > 0.001) {
+ prevProgress.current = p
+ setProgress(p)
+ }
+ }
+
+ window.addEventListener('scroll', handleScroll, { passive: true })
+ handleScroll()
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [sectionRef])
+
+ return progress
+}
diff --git a/src/ui/icons/arrow.tsx b/src/components/icons/arrow.tsx
similarity index 100%
rename from src/ui/icons/arrow.tsx
rename to src/components/icons/arrow.tsx
diff --git a/src/ui/icons/captions.tsx b/src/components/icons/captions.tsx
similarity index 100%
rename from src/ui/icons/captions.tsx
rename to src/components/icons/captions.tsx
diff --git a/src/ui/icons/checkmark.tsx b/src/components/icons/checkmark.tsx
similarity index 100%
rename from src/ui/icons/checkmark.tsx
rename to src/components/icons/checkmark.tsx
diff --git a/src/ui/icons/chevron.tsx b/src/components/icons/chevron.tsx
similarity index 100%
rename from src/ui/icons/chevron.tsx
rename to src/components/icons/chevron.tsx
diff --git a/src/ui/icons/copy.tsx b/src/components/icons/copy.tsx
similarity index 100%
rename from src/ui/icons/copy.tsx
rename to src/components/icons/copy.tsx
diff --git a/src/ui/icons/cross.tsx b/src/components/icons/cross.tsx
similarity index 100%
rename from src/ui/icons/cross.tsx
rename to src/components/icons/cross.tsx
diff --git a/src/ui/icons/demaximize.tsx b/src/components/icons/demaximize.tsx
similarity index 100%
rename from src/ui/icons/demaximize.tsx
rename to src/components/icons/demaximize.tsx
diff --git a/src/ui/icons/github.tsx b/src/components/icons/github.tsx
similarity index 100%
rename from src/ui/icons/github.tsx
rename to src/components/icons/github.tsx
diff --git a/src/ui/icons/link.tsx b/src/components/icons/link.tsx
similarity index 100%
rename from src/ui/icons/link.tsx
rename to src/components/icons/link.tsx
diff --git a/src/ui/icons/linkedin.tsx b/src/components/icons/linkedin.tsx
similarity index 100%
rename from src/ui/icons/linkedin.tsx
rename to src/components/icons/linkedin.tsx
diff --git a/src/ui/icons/maximize.tsx b/src/components/icons/maximize.tsx
similarity index 100%
rename from src/ui/icons/maximize.tsx
rename to src/components/icons/maximize.tsx
diff --git a/src/ui/icons/pause.tsx b/src/components/icons/pause.tsx
similarity index 100%
rename from src/ui/icons/pause.tsx
rename to src/components/icons/pause.tsx
diff --git a/src/ui/icons/play.tsx b/src/components/icons/play.tsx
similarity index 100%
rename from src/ui/icons/play.tsx
rename to src/components/icons/play.tsx
diff --git a/src/ui/icons/restart.tsx b/src/components/icons/restart.tsx
similarity index 100%
rename from src/ui/icons/restart.tsx
rename to src/components/icons/restart.tsx
diff --git a/src/ui/icons/share.tsx b/src/components/icons/share.tsx
similarity index 100%
rename from src/ui/icons/share.tsx
rename to src/components/icons/share.tsx
diff --git a/src/ui/icons/x.tsx b/src/components/icons/x.tsx
similarity index 100%
rename from src/ui/icons/x.tsx
rename to src/components/icons/x.tsx
diff --git a/src/components/intelligence-flow.tsx b/src/components/intelligence-flow.tsx
new file mode 100644
index 00000000..fabe302a
--- /dev/null
+++ b/src/components/intelligence-flow.tsx
@@ -0,0 +1,410 @@
+'use client'
+
+import { useEffect, useRef, useCallback } from 'react'
+
+// ——————————————————————————————————————————
+// Topology — an agent reasoning pipeline
+// ——————————————————————————————————————————
+
+interface Node {
+ label: string
+ x: number // 0–1 normalized
+ y: number
+}
+
+interface Edge {
+ from: number
+ to: number
+}
+
+const NODES: Node[] = [
+ { label: 'Input', x: 0.48, y: 0.5 },
+ { label: 'Reason', x: 0.57, y: 0.5 },
+ { label: 'Memory', x: 0.69, y: 0.15 },
+ { label: 'Execute', x: 0.69, y: 0.5 },
+ { label: 'Context', x: 0.69, y: 0.85 },
+ { label: 'Synthesize', x: 0.81, y: 0.5 },
+ { label: 'Render', x: 0.93, y: 0.3 },
+ { label: 'Stream', x: 0.93, y: 0.7 },
+]
+
+const EDGES: Edge[] = [
+ { from: 0, to: 1 },
+ { from: 1, to: 2 },
+ { from: 1, to: 3 },
+ { from: 1, to: 4 },
+ { from: 2, to: 5 },
+ { from: 3, to: 5 },
+ { from: 4, to: 5 },
+ { from: 5, to: 6 },
+ { from: 5, to: 7 },
+]
+
+// Cross-links (fainter, showing inter-node communication)
+const CROSS_LINKS: Edge[] = [
+ { from: 2, to: 3 },
+ { from: 3, to: 4 },
+]
+
+// Annotations that cycle through
+const ANNOTATIONS = [
+ { nodeIdx: 1, text: 'decompose → 3 subtasks', offsetY: 1 },
+ { nodeIdx: 2, text: 'retrieved 847 tokens', offsetY: 1 },
+ { nodeIdx: 3, text: 'tool_call: db.query', offsetY: 1 },
+ { nodeIdx: 4, text: 'k=8 chunks retrieved', offsetY: 1 },
+ { nodeIdx: 5, text: 'merge & rank results', offsetY: 1 },
+ { nodeIdx: 7, text: '42 tok/s', offsetY: 1 },
+]
+
+// ——————————————————————————————————————————
+// Math helpers
+// ——————————————————————————————————————————
+
+interface Vec2 {
+ x: number
+ y: number
+}
+
+function bezier(p0: Vec2, p1: Vec2, p2: Vec2, p3: Vec2, t: number): Vec2 {
+ const mt = 1 - t
+ return {
+ x: mt * mt * mt * p0.x + 3 * mt * mt * t * p1.x + 3 * mt * t * t * p2.x + t * t * t * p3.x,
+ y: mt * mt * mt * p0.y + 3 * mt * mt * t * p1.y + 3 * mt * t * t * p2.y + t * t * t * p3.y,
+ }
+}
+
+function edgeControlPoints(from: Vec2, to: Vec2): [Vec2, Vec2, Vec2, Vec2] {
+ const dx = to.x - from.x
+ return [from, { x: from.x + dx * 0.42, y: from.y }, { x: to.x - dx * 0.42, y: to.y }, to]
+}
+
+// ——————————————————————————————————————————
+// Particle state
+// ——————————————————————————————————————————
+
+interface Particle {
+ edge: number
+ t: number
+ speed: number
+ radius: number
+ brightness: number
+}
+
+function createParticles(): Particle[] {
+ const particles: Particle[] = []
+ EDGES.forEach((_, i) => {
+ const count = 2 + Math.floor(Math.random() * 2)
+ for (let j = 0; j < count; j++) {
+ particles.push({
+ edge: i,
+ t: Math.random(),
+ speed: 0.12 + Math.random() * 0.1,
+ radius: 1.2 + Math.random() * 0.8,
+ brightness: 0.5 + Math.random() * 0.5,
+ })
+ }
+ })
+ return particles
+}
+
+// ——————————————————————————————————————————
+// Canvas renderer
+// ——————————————————————————————————————————
+
+export function IntelligenceFlow() {
+ const canvasRef = useRef(null)
+ const mouseRef = useRef(null)
+ const particlesRef = useRef(createParticles())
+ const prevTimeRef = useRef(0)
+ const entranceRef = useRef(0)
+ const annotationRef = useRef({ index: 0, timer: 0 })
+ const colorsRef = useRef({ green: '#4ade80', muted: '#a8a29e', bg: '#0c0a09' })
+ const sizeRef = useRef({ w: 0, h: 0 })
+
+ // Read CSS variables once and when theme changes
+ const syncColors = useCallback(() => {
+ const canvas = canvasRef.current
+ if (!canvas) return
+ const s = getComputedStyle(canvas)
+ colorsRef.current = {
+ green: s.getPropertyValue('--primary').trim() || '#4ade80',
+ muted: s.getPropertyValue('--secondary').trim() || '#a8a29e',
+ bg: s.getPropertyValue('--background').trim() || '#0c0a09',
+ }
+ }, [])
+
+ // Resize canvas via ResizeObserver (not in render loop)
+ useEffect(() => {
+ const canvas = canvasRef.current
+ if (!canvas) return
+ const ro = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const { width, height } = entry.contentRect
+ if (width > 0 && height > 0) {
+ const dpr = Math.min(window.devicePixelRatio || 1, 2)
+ canvas.width = Math.round(width * dpr)
+ canvas.height = Math.round(height * dpr)
+ sizeRef.current = { w: width, h: height }
+ syncColors()
+ }
+ }
+ })
+ ro.observe(canvas)
+ return () => ro.disconnect()
+ }, [syncColors])
+
+ const render = useCallback((now: number) => {
+ const canvas = canvasRef.current
+ if (!canvas) return
+ const ctx = canvas.getContext('2d')
+ if (!ctx) return
+
+ // Timing
+ if (!prevTimeRef.current) prevTimeRef.current = now
+ const dt = Math.min((now - prevTimeRef.current) / 1000, 0.05)
+ prevTimeRef.current = now
+
+ // Entrance easing (3s total)
+ entranceRef.current = Math.min(1, entranceRef.current + dt / 3)
+ const entrance = entranceRef.current
+
+ // Annotation cycling (every 2.8s)
+ annotationRef.current.timer += dt
+ if (annotationRef.current.timer > 2.8) {
+ annotationRef.current.timer = 0
+ annotationRef.current.index = (annotationRef.current.index + 1) % ANNOTATIONS.length
+ }
+
+ // Canvas sizing — handled by ResizeObserver, just read current size
+ const { w, h } = sizeRef.current
+ if (w === 0 || h === 0) return
+ const dpr = Math.min(window.devicePixelRatio || 1, 2)
+ ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+ ctx.clearRect(0, 0, w, h)
+
+ const { green, muted } = colorsRef.current
+
+ // On mobile, shift the flow left and center it
+ const isMobile = w < 768
+ const xShift = isMobile ? -0.38 : 0
+ const p = (n: Node): Vec2 => ({ x: (n.x + xShift) * w, y: n.y * h })
+
+ // ——— Mouse glow ———
+ const mouse = mouseRef.current
+ if (mouse) {
+ const mx = mouse.x * w
+ const my = mouse.y * h
+ const radius = Math.min(w, h) * 0.25
+ const grad = ctx.createRadialGradient(mx, my, 0, mx, my, radius)
+ grad.addColorStop(0, green)
+ grad.addColorStop(1, 'transparent')
+ ctx.globalAlpha = 0.035
+ ctx.fillStyle = grad
+ ctx.beginPath()
+ ctx.arc(mx, my, radius, 0, Math.PI * 2)
+ ctx.fill()
+ ctx.globalAlpha = 1
+ }
+
+ // ——— Cross-links (very faint) ———
+ CROSS_LINKS.forEach((edge) => {
+ const fadeIn = Math.max(0, Math.min(1, (entrance - 0.5) * 3))
+ if (fadeIn <= 0) return
+ const a = p(NODES[edge.from]!)
+ const b = p(NODES[edge.to]!)
+ ctx.beginPath()
+ ctx.moveTo(a.x, a.y)
+ ctx.lineTo(b.x, b.y)
+ ctx.strokeStyle = muted
+ ctx.globalAlpha = 0.04 * fadeIn
+ ctx.lineWidth = 0.5
+ ctx.setLineDash([4, 6])
+ ctx.stroke()
+ ctx.setLineDash([])
+ ctx.globalAlpha = 1
+ })
+
+ // ——— Edges (draw-in animation) ———
+ EDGES.forEach((edge, i) => {
+ const stagger = i * 0.04
+ const edgeProgress = Math.max(0, Math.min(1, (entrance - stagger) * 2.5))
+ if (edgeProgress <= 0) return
+
+ const cp = edgeControlPoints(p(NODES[edge.from]!), p(NODES[edge.to]!))
+ ctx.beginPath()
+ const steps = 60
+ const maxStep = Math.round(steps * edgeProgress)
+ for (let s = 0; s <= maxStep; s++) {
+ const pt = bezier(cp[0], cp[1], cp[2], cp[3], s / steps)
+ s === 0 ? ctx.moveTo(pt.x, pt.y) : ctx.lineTo(pt.x, pt.y)
+ }
+ ctx.strokeStyle = muted
+ ctx.globalAlpha = 0.15
+ ctx.lineWidth = 1
+ ctx.stroke()
+ ctx.globalAlpha = 1
+ })
+
+ // ——— Particles ———
+ particlesRef.current.forEach((part) => {
+ part.t += part.speed * dt
+ if (part.t > 1) part.t -= 1
+
+ const edgeDelay = part.edge * 0.04
+ const particleFade = Math.max(0, Math.min(1, (entrance - edgeDelay - 0.25) * 4))
+ if (particleFade <= 0) return
+
+ const edge = EDGES[part.edge]!
+ const cp = edgeControlPoints(p(NODES[edge.from]!), p(NODES[edge.to]!))
+ const pos = bezier(cp[0], cp[1], cp[2], cp[3], part.t)
+
+ // Trail (faint, slightly behind)
+ for (let trail = 3; trail >= 1; trail--) {
+ const tt = part.t - trail * 0.025
+ if (tt < 0) continue
+ const tp = bezier(cp[0], cp[1], cp[2], cp[3], tt)
+ ctx.beginPath()
+ ctx.arc(tp.x, tp.y, part.radius * 0.7, 0, Math.PI * 2)
+ ctx.fillStyle = green
+ ctx.globalAlpha = 0.08 * part.brightness * particleFade * (1 - trail / 4)
+ ctx.fill()
+ }
+
+ // Glow halo
+ const glowR = part.radius * 5
+ const glowGrad = ctx.createRadialGradient(pos.x, pos.y, 0, pos.x, pos.y, glowR)
+ glowGrad.addColorStop(0, green)
+ glowGrad.addColorStop(1, 'transparent')
+ ctx.beginPath()
+ ctx.arc(pos.x, pos.y, glowR, 0, Math.PI * 2)
+ ctx.fillStyle = glowGrad
+ ctx.globalAlpha = 0.18 * part.brightness * particleFade
+ ctx.fill()
+
+ // Core
+ ctx.beginPath()
+ ctx.arc(pos.x, pos.y, part.radius, 0, Math.PI * 2)
+ ctx.fillStyle = green
+ ctx.globalAlpha = 0.85 * part.brightness * particleFade
+ ctx.fill()
+ ctx.globalAlpha = 1
+ })
+
+ // ——— Nodes ———
+ NODES.forEach((node, i) => {
+ const nodeFade = Math.max(0, Math.min(1, (entrance - 0.15 - i * 0.04) * 3))
+ if (nodeFade <= 0) return
+ const pos = p(node)
+ const baseR = 3.5 * Math.max(0.6, w / 1200)
+ const pulse = 0.85 + 0.15 * Math.sin(now / 1200 + i * 1.5)
+
+ // Ambient glow ring
+ const ringR = baseR * 4 * pulse
+ const ringGrad = ctx.createRadialGradient(pos.x, pos.y, 0, pos.x, pos.y, ringR)
+ ringGrad.addColorStop(0, green)
+ ringGrad.addColorStop(1, 'transparent')
+ ctx.beginPath()
+ ctx.arc(pos.x, pos.y, ringR, 0, Math.PI * 2)
+ ctx.fillStyle = ringGrad
+ ctx.globalAlpha = 0.1 * nodeFade * pulse
+ ctx.fill()
+
+ // Outer dot
+ ctx.beginPath()
+ ctx.arc(pos.x, pos.y, baseR, 0, Math.PI * 2)
+ ctx.fillStyle = green
+ ctx.globalAlpha = 0.5 * nodeFade
+ ctx.fill()
+
+ // Inner bright center
+ ctx.beginPath()
+ ctx.arc(pos.x, pos.y, baseR * 0.4, 0, Math.PI * 2)
+ ctx.fillStyle = green
+ ctx.globalAlpha = 0.9 * nodeFade
+ ctx.fill()
+
+ // Label
+ const fontSize = Math.max(9, 10.5 * (w / 1200))
+ ctx.font = `${fontSize}px ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`
+ ctx.textAlign = 'center'
+ ctx.fillStyle = muted
+ ctx.globalAlpha = 0.45 * nodeFade
+ ctx.fillText(node.label, pos.x, pos.y - baseR - 10)
+ ctx.globalAlpha = 1
+ })
+
+ // ——— Active annotation ———
+ const ann = ANNOTATIONS[annotationRef.current.index]
+ if (ann && entrance > 0.6) {
+ const node = NODES[ann.nodeIdx]!
+ const pos = p(node)
+ const baseR = 3.5 * Math.max(0.6, w / 1200)
+ const fontSize = Math.max(8, 9 * (w / 1200))
+
+ // Fade in/out based on timer position
+ const timer = annotationRef.current.timer
+ const annAlpha = timer < 0.4 ? timer / 0.4 : timer > 2.4 ? (2.8 - timer) / 0.4 : 1
+
+ ctx.font = `${fontSize}px ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`
+ ctx.textAlign = 'center'
+ ctx.fillStyle = green
+ ctx.globalAlpha = 0.3 * annAlpha * Math.max(0, (entrance - 0.6) * 2.5)
+ ctx.fillText(ann.text, pos.x, pos.y + baseR + 18)
+ ctx.globalAlpha = 1
+ }
+
+ }, [syncColors])
+
+ // Start animation loop
+ useEffect(() => {
+ syncColors()
+ // Use setInterval as driver — works in background tabs and headless contexts
+ const interval = setInterval(() => render(performance.now()), 16)
+ return () => clearInterval(interval)
+ }, [render, syncColors])
+
+ // Watch for theme changes
+ useEffect(() => {
+ const observer = new MutationObserver(() => syncColors())
+ observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
+ return () => observer.disconnect()
+ }, [syncColors])
+
+ const handleMouseMove = useCallback((e: React.MouseEvent) => {
+ const rect = canvasRef.current?.getBoundingClientRect()
+ if (!rect) return
+ mouseRef.current = {
+ x: (e.clientX - rect.left) / rect.width,
+ y: (e.clientY - rect.top) / rect.height,
+ }
+ }, [])
+
+ return (
+ = {
+ 'contract-engineering': 'The contracts are the application. The code is an implementation detail.',
+ 'unblocking-agents': "The bottleneck isn't the model. It's the environment.",
+ 'primitives-over-pipelines': "Don't anticipate every path. Define capabilities, not trajectories.",
+ 'how-does-claude-code-actually-work': 'A deep dive into the architecture behind Claude Code.',
+ 'multi-staging': 'Branch-per-developer database workflows for parallel full-stack development.'
+}
+
+const coPostLogos: Record; w: string }> = {
+ Neon: { Component: Neon, w: 'w-[40px]' },
+ LangChain: { Component: Langchain, w: 'w-[56px]' }
+}
+
+function formatDate(dateStr: string) {
+ const date = new Date(dateStr)
+ return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+}
+
+export async function LabPreview() {
+ const posts = await getMainFeedPosts()
+ const latest = posts.slice(0, 3)
+
+ return (
+
+
+
+
+ )
+}
diff --git a/src/components/logo-bar.tsx b/src/components/logo-bar.tsx
new file mode 100644
index 00000000..37fac86b
--- /dev/null
+++ b/src/components/logo-bar.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { Albertsons } from '~/components/logos/albertsons'
+import { Cal } from '~/components/logos/cal'
+import { Graphite } from '~/components/logos/graphite'
+import { Greptile } from '~/components/logos/greptile'
+import { Gumloop } from '~/components/logos/gumloop'
+import { Langchain } from '~/components/logos/langchain'
+import { Trigger } from '~/components/logos/trigger'
+import { Vercel } from '~/components/logos/vercel'
+
+// Widths tuned per-logo so they feel visually balanced
+const logos = [
+ { Component: Vercel, name: 'Vercel', w: 'w-[72px]' },
+ { Component: Langchain, name: 'LangChain', w: 'w-[90px]' },
+ { Component: Albertsons, name: 'Safeway', w: 'w-[88px]' },
+ { Component: Gumloop, name: 'Gumloop', w: 'w-[64px]' },
+ { Component: Cal, name: 'Cal.com', w: 'w-[68px]' },
+ { Component: Graphite, name: 'Graphite', w: 'w-[76px]' },
+ { Component: Trigger, name: 'Trigger.dev', w: 'w-[72px]' },
+ { Component: Greptile, name: 'Greptile', w: 'w-[60px]' },
+]
+
+export function LogoBar({ compact = false }: { compact?: boolean }) {
+ if (compact) {
+ // Seamless scrolling marquee — two copies side by side
+ return (
+
+
+
+ {/* Logo bar (bottom, visible before scrolling) */}
+ A lab that ships.
++ We study how AI agents should be built — then we build them. +
+ + See the work → + +
+
+
+ {/* Chat container */}
+
+ {/* Chat background/border (fades as scaffold takes over) */}
+
+
+
+ )
+}
diff --git a/src/components/hero/scaffold.tsx b/src/components/hero/scaffold.tsx
new file mode 100644
index 00000000..f90a8f88
--- /dev/null
+++ b/src/components/hero/scaffold.tsx
@@ -0,0 +1,240 @@
+'use client'
+
+import type { ComponentBounds, LayoutRef } from './use-layout'
+import type { HeroState } from './scroll-phases'
+import { clamp01 } from './scroll-phases'
+
+// ── Types ────────────────────────────────────────────────────────────────
+
+/** Connector node definition: position relative to component bounds */
+export interface ConnectorNode {
+ /** Unique ID for this node */
+ id: string
+ /** Position relative to component: 0=left/top, 1=right/bottom */
+ xRatio: number
+ yRatio: number
+ /** Which edge: used for expansion direction */
+ edge: 'top' | 'bottom' | 'left' | 'right'
+}
+
+// Per-component connector node definitions
+export const CONNECTOR_NODES: ConnectorNode[][] = [
+ // /01 question: 3 nodes on bottom edge (for context branching down)
+ [
+ { id: 'q-bl', xRatio: 0.25, yRatio: 1, edge: 'bottom' },
+ { id: 'q-bc', xRatio: 0.5, yRatio: 1, edge: 'bottom' },
+ { id: 'q-br', xRatio: 0.75, yRatio: 1, edge: 'bottom' },
+ ],
+ // /02 reasoning: 3 nodes on right edge (for architecture fanning right)
+ [
+ { id: 'r-rt', xRatio: 1, yRatio: 0.25, edge: 'right' },
+ { id: 'r-rc', xRatio: 1, yRatio: 0.5, edge: 'right' },
+ { id: 'r-rb', xRatio: 1, yRatio: 0.75, edge: 'right' },
+ ],
+ // /03 response: 1 node on right edge (for evaluation extending right)
+ [
+ { id: 's-rc', xRatio: 1, yRatio: 0.5, edge: 'right' },
+ ],
+ // /04 citations: no connector nodes
+ [],
+]
+
+const S = 'var(--primary)'
+const CORNER_SIZE = 8
+const GUIDE_EXTEND = 50
+
+// ── Helper: get absolute position of a connector node ────────────────────
+
+export function getNodePosition(
+ bounds: ComponentBounds,
+ node: ConnectorNode
+): { x: number; y: number } {
+ return {
+ x: bounds.left + bounds.width * node.xRatio,
+ y: bounds.top + bounds.height * node.yRatio,
+ }
+}
+
+// ── Per-component scaffold ───────────────────────────────────────────────
+
+function ComponentScaffold({
+ bounds, index, drawProgress, ghostProgress, isFocused,
+}: {
+ bounds: ComponentBounds
+ index: number
+ drawProgress: number
+ ghostProgress: number
+ isFocused: boolean
+}) {
+ const { top: y, left: x, width: w, height: h } = bounds
+ if (w === 0 || h === 0) return null
+
+ const connectors = CONNECTOR_NODES[index]
+ const perimeter = 2 * (w + h)
+ const dashOffset = perimeter * (1 - drawProgress)
+ const mainOp = clamp01(drawProgress * 1.5)
+
+ // Ghost guide lines (dashed, very faint)
+ const ghostOp = ghostProgress * 0.06
+
+ return (
+ 0 ? `color-mix(in srgb, var(--accent) ${Math.round(50 * containerBgVis)}%, transparent)` : 'transparent',
+ border: chatP > 0 ? `1px solid color-mix(in srgb, var(--subtle) ${Math.round(100 * containerBgVis)}%, transparent)` : '1px solid transparent',
+ transition: 'background 0.3s, border-color 0.3s',
+ pointerEvents: 'none',
+ }} />
+
+
+
+ {/* Scroll progress indicator */}
+ {isScrolling && scrollProgress < 0.95 && (
+
+ {/* Header */}
+
+
+ {/* SVG scaffold overlay */}
+
+ Rubric
+
+
+
+
+
+
+ {/* /01 — Question (appears after submit) */}
+
+
+
+ {/* /02 — Reasoning */}
+
+
+
+ {reasoningP > 0
+ ?
+
+ {/* /03 — Response */}
+
+ {responseP > 0
+ ?
+
+ {/* /04 — Citations */}
+
+
+
+ {/* Chat input — shows question text, then submits */}
+
+ {CASES.map((c, ci) => {
+ const p = Math.max(0, (genUIP - ci * 0.25) / 0.5)
+ return (
+
+ {c.client}→
+
+ )
+ })}
+
+
+ 0.5} />
+
+
+
+ )}
+
+
+
+
+ {/* Left fade (desktop) — keeps hero text readable */}
+
+ {/* Bottom + side fades (mobile) */}
+
+
+ )
+}
diff --git a/src/components/lab-preview.tsx b/src/components/lab-preview.tsx
new file mode 100644
index 00000000..0bb3ad64
--- /dev/null
+++ b/src/components/lab-preview.tsx
@@ -0,0 +1,81 @@
+import Link from 'next/link'
+import { Langchain } from '~/components/logos/langchain'
+import { Neon } from '~/components/logos/neon'
+import { getMainFeedPosts } from '~/lib/posts'
+import { FadeIn } from './fade-in'
+
+const pullSentences: Record
+
+ Lab
+
+
+ See all
+
+ →
+
+
+
+
+ {latest.map((post, i) => {
+ const logo = post.coPost ? coPostLogos[post.coPost.partner] : null
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+ {formatDate(post.date)}
+
+
+ + {post.title} +
++ {pullSentences[post.slug] || post.pullSentence || post.description} +
+ {logo && ( +
+
+ )}
+
+
+ )
+ }
+
+ return (
+
+ {[...logos, ...logos].map((logo, i) => (
+
+
+
+ ))}
+
+
+ )
+}
diff --git a/src/ui/logos/albertsons.tsx b/src/components/logos/albertsons.tsx
similarity index 100%
rename from src/ui/logos/albertsons.tsx
rename to src/components/logos/albertsons.tsx
diff --git a/src/ui/logos/cal.tsx b/src/components/logos/cal.tsx
similarity index 100%
rename from src/ui/logos/cal.tsx
rename to src/components/logos/cal.tsx
diff --git a/src/ui/logos/drisk.tsx b/src/components/logos/drisk.tsx
similarity index 100%
rename from src/ui/logos/drisk.tsx
rename to src/components/logos/drisk.tsx
diff --git a/src/ui/logos/graphite.tsx b/src/components/logos/graphite.tsx
similarity index 100%
rename from src/ui/logos/graphite.tsx
rename to src/components/logos/graphite.tsx
diff --git a/src/components/logos/greptile.tsx b/src/components/logos/greptile.tsx
new file mode 100644
index 00000000..dc45f9bf
--- /dev/null
+++ b/src/components/logos/greptile.tsx
@@ -0,0 +1,17 @@
+export const Greptile = ({ className }: { className?: string }) => {
+ return (
+
+ )
+}
diff --git a/src/ui/logos/gumloop.tsx b/src/components/logos/gumloop.tsx
similarity index 100%
rename from src/ui/logos/gumloop.tsx
rename to src/components/logos/gumloop.tsx
diff --git a/src/ui/logos/langchain.tsx b/src/components/logos/langchain.tsx
similarity index 100%
rename from src/ui/logos/langchain.tsx
rename to src/components/logos/langchain.tsx
diff --git a/src/ui/logos/maige.tsx b/src/components/logos/maige.tsx
similarity index 100%
rename from src/ui/logos/maige.tsx
rename to src/components/logos/maige.tsx
diff --git a/src/ui/logos/neon.tsx b/src/components/logos/neon.tsx
similarity index 100%
rename from src/ui/logos/neon.tsx
rename to src/components/logos/neon.tsx
diff --git a/src/ui/logos/rubric.tsx b/src/components/logos/rubric.tsx
similarity index 100%
rename from src/ui/logos/rubric.tsx
rename to src/components/logos/rubric.tsx
diff --git a/src/components/logos/trigger.tsx b/src/components/logos/trigger.tsx
new file mode 100644
index 00000000..16ca23f5
--- /dev/null
+++ b/src/components/logos/trigger.tsx
@@ -0,0 +1,17 @@
+export const Trigger = ({ className }: { className?: string }) => {
+ return (
+
+ )
+}
diff --git a/src/ui/logos/vercel.tsx b/src/components/logos/vercel.tsx
similarity index 100%
rename from src/ui/logos/vercel.tsx
rename to src/components/logos/vercel.tsx
diff --git a/src/ui/logos/wordmark.tsx b/src/components/logos/wordmark.tsx
similarity index 100%
rename from src/ui/logos/wordmark.tsx
rename to src/components/logos/wordmark.tsx
diff --git a/src/ui/nav.tsx b/src/components/nav.tsx
similarity index 77%
rename from src/ui/nav.tsx
rename to src/components/nav.tsx
index f6db37e4..1e89cc16 100644
--- a/src/ui/nav.tsx
+++ b/src/components/nav.tsx
@@ -7,7 +7,7 @@ import { useShortcut } from '~/lib/hooks/use-shortcut'
import { cn } from '~/lib/utils/cn'
const links = [
- { href: '/blog', label: 'Blog' },
+ { href: '/lab', label: 'Blog' },
{ href: '/work', label: 'Work' },
{ href: '/contact', label: 'Contact' }
]
@@ -18,17 +18,15 @@ export function Nav() {
const { scrollDirection, scrollY } = useScrollDirection()
useShortcut('h', () => router.push('/'))
- useShortcut('b', () => router.push('/blog'))
- useShortcut('c', () => router.push('/contact'))
- useShortcut('p', () => router.push('/privacy'))
- useShortcut('n', () => router.push('/newsletter'))
+ useShortcut('b', () => router.push('/lab'))
useShortcut('w', () => router.push('/work'))
+ useShortcut('c', () => router.push('/contact'))
return (
-
+
+
+ {logos.map(logo => (
+
+
+
+ ))}
+