Changelog - 2025-12-18 (#1)

Dark Matter Site: Narrative Section Components & CMS-Ready Content Schema

Overview

This changelog documents the creation of five rich narrative section components for the Dark Matter Longevity Fund pitch deck, along with comprehensive documentation and a CMS-friendly YAML data structure for future content management.

Key deliverables:

5 Narrative Section Components: Full-featured Astro components with citations, animations, and multi-theme support (light/dark/vibrant)
Design System Showcase Page: A /design-system/messages page displaying all narrative sections for iteration
Content Documentation: Markdown files documenting each section's data structure, visual layout, and key messages
Zod Schema: Type-safe content collection schema for validating narrative YAML frontmatter

The narrative sections tell the complete investment story:

The Aging Crisis (Problem) — $1T+ healthcare costs from age-related diseases
Aging Population (Opportunity) — 2B people over 60 by 2050
Our Differentiation (Team) — Scientific depth, exclusive access, IP focus
Exit Potential (Returns) — IPO and M&A paths to liquidity
Fund Strategy (Fund) — $100M fund, 25 investments, stage allocation

Changes by Area

1. Design System Messages Page (`src/pages/design-system/messages.astro`)

Created a showcase page for iterating on narrative section designs:

Imports all 5 narrative section components
Displays each section with a labeled badge showing its purpose
Uses BaseThemeLayout with dark mode as default
Provides visual reference for the complete pitch deck flow

ASTRO

<BaseThemeLayout title="Messages - Design System" mode="dark">
  <div class="variant-section">
    <div class="variant-label">The Aging Crisis: The Problem We're Solving</div>
    <TheAgingCrisis />
  </div>
  <!-- ... more sections ... -->
</BaseThemeLayout>

2. Narrative Section Components (`src/layouts/sections/narratives/`)

Created 5 comprehensive section components, each with:

Hero Opening: Large stats, animated text, scroll indicators
Content Sections: Cards, grids, visualizations with scroll-triggered reveals
Citations System: Inline citation popovers with Sources section
Theming: Full support for light, dark, and vibrant modes
Animations: IntersectionObserver-based scroll reveals with staggered delays

TheAgingCrisis.astro

Hero: "$1T+" stat with disease list
Disease cost cards (CVD, Diabetes, Cancer, Chronic Conditions)
Healthspan vs Lifespan gap visualization
US demographics stats (55M+ Americans 65+)
Cost implications (per-retiree costs, annual increases)
7 citations from healthcare sources

AgingPopulation.astro

Hero: "2B" people over 60 by 2050
Demographic statistics (global aging projections)
Scientific breakthroughs (CRISPR, Senolytics, AI)
Longevity economy stats ($7T+ market)
7 citations from UN, NIH, McKinsey

DarkMatterDifferentiation.astro

Four pillars of differentiation:
- Deep Scientific Expertise
- Proprietary Deal Flow (Stanford, Cedars-Sinai)
- Longevity Leader Network
- IP-Protected Solutions
Team section with photos linked to pillars
6 citations from Stanford and Cedars-Sinai

ExitPotential.astro

Hero stats ($2B+ IPOs, 17.9% CAGR, $5B+ funding)
Two exit paths: IPOs vs M&A (side-by-side cards)
Market growth visualization ($5.7B → $34.6B)
Example deal structure (Pharma-Senolytics model)
5 citations from Wellington, Crunchbase, Labiotech

FundPortfolioConstructionDetails.astro

Hero metrics ($100M fund, 10 years, 25 investments)
Fund economics (2% fee, 20-25% carry, GP commitment)
Stage allocation bar chart (50% Seed, 30% A/B, 20% Follow-ons)
Geographic donut chart (70% US/Europe, 30% RoW)
Check sizes and ownership targets
Follow-on pyramid (tiered capital concentration)
LP benefits (3 numbered cards)

3. Citations Infrastructure (`src/lib/citations/` and `src/components/citations/`)

Leveraged existing citation system for all narrative sections:

CitationReference type with hexCode, title, url, source, publishedDate
buildCitationIndex() for sequential numbering
InlineCitation.astro for popover references
Sources.astro for numbered source lists

4. Narrative Content Documentation (`src/content/narratives/`)

Created 5 documentation files with CMS-ready YAML frontmatter:

section--the-aging-crisis.md

YAML

slug: the-aging-crisis
component: TheAgingCrisis.astro
order: 1
category: problem
title: The Aging Crisis
subtitle: Age-related diseases cost $1T+ annually...

hero:
  stat: "$1T+"
  label: annual global healthcare costs
  diseases: [Alzheimer's, Cancer, CVD, Diabetes, Renal Failure]

diseaseCosts:
  - disease: Cardiovascular Disease
    cost: "$1.8T"
    timeframe: by 2050 (US)
    description: Leading cause of death globally...
    citationKey: alyqs4
  # ... more cards

citations:
  alyqs4:
    title: Key Drivers of 2025 Health Care Cost Increases
    url: https://...
    source: Parrott Benefit Group

section--aging-population.md

Demographic statistics array
Science breakthroughs array (no citations)
Economy points with citations

section--dark-matter-differentiation.md

Pillars array with bullet points and citation keys
Team array with photo paths and pillar mappings

section--exit-potential.md

IPO and M&A path objects with points
Market growth projection
Deal example with rationale and terms

section--fund-portfolio-construction.md

Hero metrics, economics, geography arrays
Stage allocation with percentages
Follow-on tiers with highlight flags
LP benefits

5. Content Collection Schema (`src/content/narratives/narratives.config.ts`)

Updated the Zod schema to validate all narrative YAML structures:

TYPESCRIPT

export const narratives = defineCollection({
  type: 'content',
  schema: z.object({
    // Section metadata
    slug: z.string(),
    component: z.string(),
    order: z.number().optional(),
    category: z.enum(['problem', 'opportunity', 'solution', 'team', 'returns', 'fund']).optional(),

    // Display configuration
    title: z.string(),
    subtitle: z.string().optional(),
    eyebrow: z.string().optional(),

    // Section-specific schemas
    hero: z.object({ ... }).optional(),
    diseaseCosts: z.array({ ... }).optional(),
    pillars: z.array({ ... }).optional(),
    // ... 20+ optional field schemas

    // Citations library
    citations: z.record(z.string(), citationSchema).optional(),
  }).passthrough(), // Allow iteration
});

Key schema features:

Reusable statCardSchema for stat/label/description patterns
citationSchema for citation references
closingSchema for CTA sections
Section-specific schemas (pillars, tiers, paths, etc.)
.passthrough() for iteration flexibility

Files Changed Summary

New

Section Components:

src/layouts/sections/narratives/TheAgingCrisis.astro — Problem statement with disease costs and demographics
src/layouts/sections/narratives/AgingPopulation.astro — Opportunity with demographics and science breakthroughs
src/layouts/sections/narratives/DarkMatterDifferentiation.astro — Competitive advantages and team
src/layouts/sections/narratives/ExitPotential.astro — IPO/M&A paths and deal structure
src/layouts/sections/narratives/FundPortfolioConstructionDetails.astro — Fund mechanics infographic

Design System:

src/pages/design-system/messages.astro — Showcase page for all narrative sections

Content Documentation:

src/content/narratives/section--the-aging-crisis.md — YAML schema + documentation
src/content/narratives/section--aging-population.md — YAML schema + documentation
src/content/narratives/section--dark-matter-differentiation.md — YAML schema + documentation
src/content/narratives/section--exit-potential.md — YAML schema + documentation
src/content/narratives/section--fund-portfolio-construction.md — YAML schema + documentation

Modified

src/content/narratives/narratives.config.ts — Comprehensive Zod schema for narrative content validation

Technical Details

Theming Architecture

Each section supports three visual modes via CSS selectors:

CSS

:global([data-mode="light"]) .section { ... }
:global([data-mode="dark"]) .section { ... }
:global([data-mode="vibrant"]) .section { ... }

Color schemes by section type:

Problem (Aging Crisis): Red/orange warning tones
Opportunity (Aging Population): Purple/violet brand colors
Team (Differentiation): Purple brand with green team accents
Returns (Exit Potential): Green growth tones, amber for deals
Fund (Portfolio): Blue institutional tones, multi-color subsections

Animation System

Scroll-triggered reveals using IntersectionObserver:

JAVASCRIPT

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const delay = parseInt(entry.target.style.getPropertyValue('--delay') || '0');
        setTimeout(() => entry.target.classList.add('revealed'), delay);
      }
    });
  },
  { threshold: 0.15, rootMargin: '0px 0px -50px 0px' }
);

Staggered delays via CSS custom properties: