Design Spec: /story Page

Date: 2026-03-12 Status: Approved URL: dorkos.ai/story Dual purpose: Live presentation at No Edges event (March 12, 2026) + permanent DorkOS origin story page

Overview

A scroll-driven narrative page that tells the origin story of DorkOS through Dorian's personal arc -- from wanting a to-do list to running coordinated autonomous agents across four companies in two months of evenings. The page serves a live presentation today and lives permanently on dorkos.ai as the "why behind the what."

The vibe throughout: less obligation, more life. The technology is in service of presence -- time back with family, focus on what matters, the machine handling what it doesn't need a human for.

Decisions Summary

File Structure

apps/site/src/
├── app/(marketing)/story/
│   ├── layout.tsx                        # metadata, OG tags
│   └── page.tsx                          # server component, composes sections
└── layers/features/marketing/
    ├── ui/
    │   ├── story/
    │   │   ├── StoryHero.tsx             # Slide 0: opening title card
    │   │   ├── MondayMorningSection.tsx  # Slide 1: boot dashboard
    │   │   ├── HowItBuiltSection.tsx     # Slide 2: 4-step timeline
    │   │   ├── JustPromptsSection.tsx    # Slide 3: equation reveal
    │   │   ├── CloseSection.tsx          # Slide 4: minimal close
    │   │   └── FutureVisionSection.tsx   # Slide 5: page-only, hidden in present mode
    │   └── PresentationShell.tsx         # Wraps the page; handles ?present=true
    └── lib/
        ├── use-presentation-mode.ts      # Hook: reads useSearchParams for ?present=true
        └── story-data.ts                 # Boot cards, timeline steps, equation items

New exports added to layers/features/marketing/index.ts barrel.

Page Component

app/(marketing)/story/page.tsx is a server component (no 'use client'). Metadata lives in layout.tsx. Client interactivity is encapsulated in section components and PresentationShell.

import { Suspense } from 'react'
import {
  PresentationShell,
  StoryHero,
  MondayMorningSection,
  HowItBuiltSection,
  JustPromptsSection,
  CloseSection,
  FutureVisionSection,
  MarketingFooter,
} from '@/layers/features/marketing'

export default function StoryPage() {
  return (
    <Suspense fallback={null}>
      <PresentationShell>
        <StoryHero />
        <MondayMorningSection id="morning" />
        <HowItBuiltSection id="timeline" />
        <JustPromptsSection id="prompts" />
        <CloseSection id="close" />
        <FutureVisionSection id="vision" />
        <MarketingFooter ... />
      </PresentationShell>
    </Suspense>
  )
}

<Suspense> is required by Next.js because PresentationShell calls useSearchParams() internally.

Metadata

app/(marketing)/story/layout.tsx:

export const metadata: Metadata = {
  title: 'The Story | DorkOS',
  description:
    'How one person built an AI operating system for their whole life -- in two months of evenings.',
  openGraph: {
    title: 'The Story | DorkOS',
    description: 'How one person built an AI operating system for their whole life -- in two months of evenings.',
    url: '/story',
    type: 'website',
  },
}

Presentation Mode

Activation

?present=true query parameter. URL: dorkos.ai/story?present=true

use-presentation-mode.ts

'use client'
import { useSearchParams } from 'next/navigation'
export function usePresentationMode() {
  const params = useSearchParams()
  return params.get('present') === 'true'
}

PresentationShell.tsx

Client component. When presentation mode is active:

• Adds data-present attribute to wrapper div
• CSS via globals.css or inline: scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh
• Each child section receives scroll-snap-align: start; min-height: 100vh (applied via the data-present selector on the parent)
• MarketingHeader hidden via data-present [data-marketing-header] { display: none }
• Keyboard listener (useEffect): ArrowRight/Space scrolls to next section by index; ArrowLeft scrolls to previous
• Progress dots: fixed bottom-right, one dot per section (excluding FutureVisionSection), current section highlighted in orange
• Font sizes boosted ~1.3x on slide headings via data-present h2, data-present h3 { font-size: calc(var(--heading-size) * 1.3) }

Keyboard navigation implementation

const sectionIds = ['morning', 'timeline', 'prompts', 'close']
// FutureVisionSection excluded from keyboard nav (page-only)

useEffect(() => {
  if (!isPresent) return
  const handler = (e: KeyboardEvent) => {
    if (e.key === 'ArrowRight' || e.key === ' ') {
      e.preventDefault()
      scrollToSection(currentIndex + 1)
    }
    if (e.key === 'ArrowLeft') {
      e.preventDefault()
      scrollToSection(currentIndex - 1)
    }
  }
  window.addEventListener('keydown', handler)
  return () => window.removeEventListener('keydown', handler)
}, [isPresent, currentIndex])

Current section tracked via IntersectionObserver on each section element.

Section Designs

Slide 0: StoryHero

• Background: bg-charcoal (#1A1814)
• Eyebrow: ORIGIN STORY (monospace, orange, uppercase, tracked)
• Headline: "What if the most powerful thing you could do with AI was get Thursday afternoon back?"
  • Large, light weight (font-weight: 300), max-width 580px, centered
• Divider: 32px orange horizontal rule
• Attribution: DORIAN COLLIER -- 144 STUDIO -- AUSTIN TX (monospace, small, warm-gray)
• Animation: REVEAL + STAGGER (standard marketing pattern)

Slide 1: MondayMorningSection

• Background: #0f0e0c (near-black, slightly warmer than charcoal)
• Eyebrow: A MONDAY MORNING
• Headline: "Before you touched anything."
• Subline: "While you slept, the system ran." (warm-gray)
• Boot cards grid: 4-column grid, 8 cards, staggered entrance animation

Cards animate in sequentially (staggered, ~80ms apart) using STAGGER + REVEAL.

• Landing line (below border): "This isn't ChatGPT. This is a personal operating system." — italic, centered, cream-white

Slide 2: HowItBuiltSection

• Background: bg-cream-primary (#F5F0E6)
• Eyebrow: TWO MONTHS OF EVENINGS
• Headline: "Each step hit a ceiling. Each ceiling became the next build."
• Timeline: Vertical, 4 numbered steps

Each step:

[number circle]  PRODUCT -- DURATION (monospace, small, colored)
                 Description sentence (IBM Plex Sans, medium weight)
                 Ceiling hit: limitation that drove the next step (monospace, warm-gray-light)

Steps:

• Footer: "Total calendar time from 'I want a to-do list' to 'my agents coordinate while I sleep' -- two months of evenings." — italic, warm-gray, border-top

Slide 3: JustPromptsSection

• Background: bg-charcoal film-grain
• Eyebrow: HERE'S THE THING
• Headline: "Platforms will just be prompts." (bold, large)
• Subline: "All open source. Here's what it actually is." (warm-gray)
• Equation items (animate in one at a time, ~200ms each):

50+ skills              =   text files
~100 coaching Qs        =   one markdown doc
board of advisors       =   configuration
automated hooks         =   small scripts

Left column: cream-white, monospace, right-aligned. = in orange. Right column: warm-gray, monospace, left-aligned.

• Divider (border-top, dark)
• Closing moment:
  • "Platforms will just be prompts." (medium weight, cream-white)
  • "Code isn't the scarce thing anymore. Knowing what to ask -- and what to remember -- is." (warm-gray, line-height 1.6)

Slide 4: CloseSection

• Background: bg-charcoal
• Maximum whitespace. Centered, no grid.
• Top line: "Anyone has access to the same AI. Not everyone has thought hard about what they actually want." (warm-gray, slightly smaller)
• Orange divider
• Close: "I built this so the machine could handle the obligations. So I could focus on the parts that are irreplaceable." (cream-white, light weight, large)
• Footer: FUNDAMENTALS FIRST -- 2026 (monospace, very small, warm-gray)

Slide 5: FutureVisionSection (page-only)

• Background: bg-cream-secondary
• Hidden in ?present=true via data-present [data-future-vision] { display: none }
• Eyebrow: WHERE THIS IS GOING
• Headline: "The next layer is already building."
• Three cards: Autonomous (orange), Connected (blue), Commerce (green)
  • Each: category label, short title, 1-2 sentence description referencing the DorkOS subsystem

Data File: story-data.ts

export const bootCards = [
  { id: 'health', label: 'Health', value: 'Synced', detail: 'HRV · sleep · steps', color: 'orange', priority: 'high' },
  { id: 'companies', label: 'Companies', value: '4 loaded', detail: 'tasks · projects', color: 'blue', priority: 'normal' },
  { id: 'overdue', label: '⚑ Overdue', value: '15 days', detail: 'flagged for you', color: 'orange', priority: 'urgent' },
  { id: 'calendar', label: 'Calendar', value: '3 preps', detail: 'meetings identified', color: 'purple', priority: 'normal' },
  { id: 'family', label: 'Family', value: 'Liam · Thu', detail: 'therapy · brief outdated', color: 'blue', priority: 'high' },
  { id: 'energy', label: 'Energy', value: '4 dims', detail: 'phys · mental · emo · spirit', color: 'green', priority: 'normal' },
  { id: 'coaching', label: 'Coaching', value: 'Fear check', detail: 'priorities → 3', color: 'orange', priority: 'normal' },
  { id: 'output', label: 'Output', value: 'Ready', detail: 'calendar · habits · audio', color: 'gray', priority: 'normal' },
]

export const evolutionSteps = [
  { step: 1, product: 'LifeOS', duration: 'A weekend', description: 'Calendar, todos, journaling, coaching. Built for my life -- not for any company.', ceiling: 'Needed to manage multiple AI projects at once.', color: 'orange' },
  { step: 2, product: 'DorkOS', duration: 'A few weeks', description: 'A command layer across all my agents. One place to run everything.', ceiling: 'Still had to be awake for any of it to run.', color: 'charcoal' },
  { step: 3, product: 'Pulse', duration: 'A few weeks', description: 'Scheduled tasks. The system fires overnight. Texts briefings before I wake up.', ceiling: "Agents couldn't talk to each other.", color: 'charcoal' },
  { step: 4, product: 'Mesh', duration: 'A few weeks', description: 'Four companies, each with its own agent. They find each other and coordinate.', ceiling: null, color: 'charcoal' },
]

export const equationItems = [
  { lhs: '50+ skills', rhs: 'text files' },
  { lhs: '~100 coaching Qs', rhs: 'one markdown doc' },
  { lhs: 'board of advisors', rhs: 'configuration' },
  { lhs: 'automated hooks', rhs: 'small scripts' },
]

export const futureCards = [
  { id: 'autonomous', label: 'Autonomous', title: 'Agents that run', description: 'Pulse. Already shipping. Your agents work while you sleep.', color: 'orange' },
  { id: 'connected', label: 'Connected', title: 'Agents that talk', description: 'Mesh. Agent-to-agent discovery and coordination across teams.', color: 'blue' },
  { id: 'commerce', label: 'Commerce', title: 'Agents that transact', description: 'HTTP 402. Agents negotiate, purchase, settle. The economy reshapes.', color: 'green' },
]

Animation Patterns

All animations use existing motion-variants.ts exports:

• REVEAL -- fade + slide-up (opacity: 0, y: 20 → opacity: 1, y: 0)
• STAGGER -- staggers children at 80ms
• SPRING -- overdamped spring (stiffness: 100, damping: 20)
• VIEWPORT -- { once: true, amount: 0.2 }

Boot cards use a custom stagger delay per card index:

<motion.div
  variants={REVEAL}
  transition={{ delay: index * 0.08 }}
>

Equation items animate in sequentially using the same pattern.

Design Conventions

All sections follow existing site conventions:

• 'use client' at top of every section component
• import { motion } from 'motion/react'
• import { REVEAL, STAGGER, SPRING, VIEWPORT } from '../lib/motion-variants'
• Use design token class names, never hardcoded colors (bg-charcoal, not #1A1814)
• IBM Plex Sans for body/headings, IBM Plex Mono for labels/code/data
• No em dashes -- double hyphens (--) instead
• File size target: < 300 lines per component; split if exceeded

Navigation

The MarketingNav is hidden in presentation mode. In normal reading mode, it is omitted from this page (the story has its own internal flow; a floating nav would compete with the scroll narrative). The MarketingHeader is present in normal mode, hidden in presentation mode.

A simple "back to home" link lives in the MarketingFooter.

Responsive

• Desktop (primary): Full grid layouts, large typography
• Tablet: 2-column boot card grid (from 4-column), timeline unchanged
• Mobile: Single-column boot cards, reduced heading sizes
• Presentation mode: Desktop-only. On mobile/tablet, ?present=true degrades gracefully to normal scroll (no snap, no keyboard nav, no dots)

Success Criteria

Presentation (today)

• Page loads at dorkos.ai/story?present=true
• Each section fills the viewport
• Arrow keys / spacebar advance and retreat between sections
• Progress dots visible in bottom-right
• All text readable from 15+ feet on a large TV
• MarketingHeader hidden in present mode

Permanent page

• Feels native to dorkos.ai -- same typography, motion, color tokens
• Tells the DorkOS origin story as a personal narrative
• Works as a standalone page for first-time visitors
• FutureVisionSection visible in normal reading mode, hidden in present mode
• Page is linked from MarketingFooter or MarketingNav