diff --git a/apps/web/src/components/home/ProblemSection.tsx b/apps/web/src/components/home/ProblemSection.tsx
new file mode 100644
index 0000000..a15fff2
--- /dev/null
+++ b/apps/web/src/components/home/ProblemSection.tsx
@@ -0,0 +1,72 @@
+/**
+ * ProblemSection Component
+ *
+ * Shows the fragmented, static world before tpmjs.
+ * Cards are rotated randomly to create visual chaos.
+ */
+
+'use client';
+
+import { Card, CardContent } from '@tpmjs/ui/Card/Card';
+import { Container } from '@tpmjs/ui/Container/Container';
+import { DitherSectionHeader } from '@tpmjs/ui/DitherText/DitherSectionHeader';
+import { Icon } from '@tpmjs/ui/Icon/Icon';
+import { problemPoints } from '../../data/homePageData';
+
+export function ProblemSection(): React.ReactElement {
+ return (
+
+ {/* Subtle grid background */}
+
+
+
+ THE PROBLEM
+
+
+ {problemPoints.map((problem, index) => {
+ // Random rotation for chaos
+ const rotation = (index % 2 === 0 ? 1 : -1) * (Math.random() * 5 + 2);
+
+ return (
+
+
+
+
+
+
+ {problem.title}
+
+
+ {problem.description}
+
+
+
+ );
+ })}
+
+ Agents stuck with static, manually-configured toolsets
+
+
+
+ );
+}
diff --git a/apps/web/src/components/home/VisionSection.tsx b/apps/web/src/components/home/VisionSection.tsx
new file mode 100644
index 0000000..3f91f7b
--- /dev/null
+++ b/apps/web/src/components/home/VisionSection.tsx
@@ -0,0 +1,71 @@
+/**
+ * VisionSection Component
+ *
+ * Shows the dynamic, connected ecosystem enabled by tpmjs.
+ * Features animated flow diagram showing semantic discovery.
+ */
+
+'use client';
+
+import { Container } from '@tpmjs/ui/Container/Container';
+import { DitherSectionHeader } from '@tpmjs/ui/DitherText/DitherSectionHeader';
+import { FlowDiagram } from '@tpmjs/ui/FlowDiagram/FlowDiagram';
+
+export function VisionSection(): React.ReactElement {
+ return (
+
+ {/* Blueprint grid with subtle pulse */}
+
+
+
+ THE VISION
+
+
+
+
+
+
+
Dynamic
+
+ Agents discover tools on-demand through semantic search
+
+
+
+
+
+ Scalable
+
+
+ Thousands of tools available without manual integration
+
+
+
+
+
+ Evolving
+
+
+ New capabilities emerge as the community publishes tools
+
+
+
+
+ The registry that gives agents superpowers
+
+
+
+ );
+}
diff --git a/apps/web/src/data/homePageData.ts b/apps/web/src/data/homePageData.ts
index 2ddf6bf..b741ced 100644
--- a/apps/web/src/data/homePageData.ts
+++ b/apps/web/src/data/homePageData.ts
@@ -220,3 +220,71 @@ export const statistics: Statistic[] = [
subtext: '95th percentile latency',
},
];
+
+export interface ProblemPoint {
+ title: string;
+ description: string;
+ icon: IconName;
+}
+
+export const problemPoints: ProblemPoint[] = [
+ {
+ title: 'Manual Configuration',
+ description:
+ 'Agents require hard-coded tool imports and manual config files for every capability',
+ icon: 'copy',
+ },
+ {
+ title: 'No Discovery',
+ description: 'Tools must be known ahead of time—no way to find new capabilities on-demand',
+ icon: 'check',
+ },
+ {
+ title: 'Version Hell',
+ description: 'Breaking changes force manual updates across every agent using a tool',
+ icon: 'chevronDown',
+ },
+ {
+ title: 'Limited Capabilities',
+ description: 'Static toolsets restrict agents to predetermined functions—no room to grow',
+ icon: 'externalLink',
+ },
+];
+
+export interface DeveloperStory {
+ code: string;
+ quote: string;
+ author: string;
+ company: string;
+}
+
+export const developerStories: DeveloperStory[] = [
+ {
+ code: `const agent = new Agent({
+ tools: await tpmjs.search({
+ query: "email, slack, calendar"
+ })
+})`,
+ quote: 'Reduced config from 500 lines to 3',
+ author: 'Sarah Chen',
+ company: 'Support.ai',
+ },
+ {
+ code: `// Agents find tools semantically
+const tools = await tpmjs.search({
+ query: "parse PDF invoices",
+ limit: 5
+})`,
+ quote: 'Our agents adapt to new doc formats instantly',
+ author: 'Marcus Rodriguez',
+ company: 'DocFlow',
+ },
+ {
+ code: `// No more version conflicts
+agent.loadTool("sql-query@latest")
+// Always get the newest, tested version`,
+ quote: 'Eliminated 80% of our integration bugs',
+ author: 'Priya Patel',
+ company: 'DataSync Pro',
+ },
+];
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9c963c9..abec288 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -106,6 +106,34 @@
"./system/hooks/useParallax": {
"types": "./dist/system/hooks/useParallax.d.ts",
"default": "./dist/system/hooks/useParallax.js"
+ },
+ "./system/hooks/useReducedMotion": {
+ "types": "./dist/system/hooks/useReducedMotion.d.ts",
+ "default": "./dist/system/hooks/useReducedMotion.js"
+ },
+ "./system/hooks/useDitherAnimation": {
+ "types": "./dist/system/hooks/useDitherAnimation.d.ts",
+ "default": "./dist/system/hooks/useDitherAnimation.js"
+ },
+ "./DitherCanvas/DitherCanvas": {
+ "types": "./dist/DitherCanvas/DitherCanvas.d.ts",
+ "default": "./dist/DitherCanvas/DitherCanvas.js"
+ },
+ "./DitherText/DitherHeadline": {
+ "types": "./dist/DitherText/DitherHeadline.d.ts",
+ "default": "./dist/DitherText/DitherHeadline.js"
+ },
+ "./DitherText/DitherSectionHeader": {
+ "types": "./dist/DitherText/DitherSectionHeader.d.ts",
+ "default": "./dist/DitherText/DitherSectionHeader.js"
+ },
+ "./FlowDiagram/FlowDiagram": {
+ "types": "./dist/FlowDiagram/FlowDiagram.d.ts",
+ "default": "./dist/FlowDiagram/FlowDiagram.js"
+ },
+ "./ActivityStream/ActivityStream": {
+ "types": "./dist/ActivityStream/ActivityStream.d.ts",
+ "default": "./dist/ActivityStream/ActivityStream.js"
}
},
"files": ["dist"],
diff --git a/packages/ui/src/ActivityStream/ActivityStream.tsx b/packages/ui/src/ActivityStream/ActivityStream.tsx
new file mode 100644
index 0000000..4773d13
--- /dev/null
+++ b/packages/ui/src/ActivityStream/ActivityStream.tsx
@@ -0,0 +1,126 @@
+/**
+ * ActivityStream Component
+ *
+ * Live ticker showing recent tool activity (invocations, publications, updates).
+ * Uses mock data to simulate a live ecosystem.
+ */
+
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ActivityItem, ActivityStreamProps } from './types';
+
+// Mock data generator
+const mockTools = [
+ 'web-scraper',
+ 'sql-query',
+ 'email-sender',
+ 'github-manager',
+ 'image-processor',
+ 'pdf-generator',
+ 'slack-bot',
+ 'calendar-sync',
+ 'data-validator',
+ 'file-converter',
+];
+
+const activityTypes: ActivityItem['type'][] = ['invoked', 'published', 'updated'];
+
+function generateMockActivity(): ActivityItem {
+ const type = activityTypes[Math.floor(Math.random() * activityTypes.length)] || 'invoked';
+ const tool = mockTools[Math.floor(Math.random() * mockTools.length)] || 'unknown-tool';
+ const seconds = Math.floor(Math.random() * 30) + 1;
+
+ return {
+ type,
+ tool,
+ time: `${seconds}s ago`,
+ };
+}
+
+function getActivityIcon(type: ActivityItem['type']): string {
+ switch (type) {
+ case 'invoked':
+ return '▸';
+ case 'published':
+ return '+';
+ case 'updated':
+ return '↻';
+ default:
+ return '•';
+ }
+}
+
+function getActivityColor(type: ActivityItem['type']): string {
+ switch (type) {
+ case 'invoked':
+ return 'text-brutalist-accent';
+ case 'published':
+ return 'text-green-500';
+ case 'updated':
+ return 'text-yellow-500';
+ default:
+ return 'text-foreground-secondary';
+ }
+}
+
+export function ActivityStream({
+ activities: initialActivities,
+ updateInterval = 6000,
+ maxItems = 5,
+ className = '',
+}: ActivityStreamProps): React.ReactElement {
+ // Initialize with provided activities or generate mock data
+ const [activities, setActivities] = useState
(
+ initialActivities || Array.from({ length: maxItems }, generateMockActivity)
+ );
+
+ // Auto-update with new activities
+ useEffect(() => {
+ const interval = setInterval(() => {
+ const newActivity = generateMockActivity();
+
+ setActivities((prev) => {
+ const updated = [newActivity, ...prev];
+ return updated.slice(0, maxItems);
+ });
+ }, updateInterval);
+
+ return () => clearInterval(interval);
+ }, [updateInterval, maxItems]);
+
+ return (
+
+
+ Recent Activity
+
+
+
+ {activities.map((activity, index) => (
+
+
+ {getActivityIcon(activity.type)}
+
+
+
+ {activity.tool}
+ {activity.type}
+
+
+ {activity.time}
+
+ ))}
+
+
+ {/* Canvas element */}
+
+
+ {/* Hidden text for screen readers */}
+ {text}
+
+ );
+}
diff --git a/packages/ui/src/DitherCanvas/types.ts b/packages/ui/src/DitherCanvas/types.ts
new file mode 100644
index 0000000..d68429a
--- /dev/null
+++ b/packages/ui/src/DitherCanvas/types.ts
@@ -0,0 +1,35 @@
+/**
+ * Type definitions for DitherCanvas components
+ */
+
+export interface DitherCanvasProps {
+ /** Text to render and dither */
+ text: string;
+
+ /** Animation mode */
+ mode: 'reveal' | 'pulse' | 'static';
+
+ /** Animation speed in milliseconds (default: 2000) */
+ speed?: number;
+
+ /** Dithering threshold 0-255 (default: 128) */
+ threshold?: number;
+
+ /** Font string (e.g., "bold 120px Space Grotesk") */
+ font?: string;
+
+ /** Text color (default: currentColor) */
+ color?: string;
+
+ /** Additional CSS classes */
+ className?: string;
+
+ /** Delay before animation starts (ms, default: 0) */
+ delay?: number;
+
+ /** Callback when animation completes (reveal mode only) */
+ onComplete?: () => void;
+
+ /** Use low-detail dithering for performance */
+ lowDetail?: boolean;
+}
diff --git a/packages/ui/src/DitherText/DitherHeadline.tsx b/packages/ui/src/DitherText/DitherHeadline.tsx
new file mode 100644
index 0000000..23d74ac
--- /dev/null
+++ b/packages/ui/src/DitherText/DitherHeadline.tsx
@@ -0,0 +1,48 @@
+/**
+ * DitherHeadline Component
+ *
+ * Large hero headline with dramatic dithered reveal animation.
+ * Supports multi-line text with staggered line reveals.
+ */
+
+'use client';
+
+import { DitherCanvas } from '../DitherCanvas/DitherCanvas';
+import type { DitherHeadlineProps } from './types';
+
+export function DitherHeadline({
+ children,
+ delay = 500,
+ stagger = 150,
+ speed = 1500,
+ fontSize = '120px',
+ fontWeight = '800',
+ className = '',
+ onComplete,
+}: DitherHeadlineProps): React.ReactElement {
+ // Split text into lines
+ const lines = children.split(/\n|/);
+
+ // Track completion
+ const handleLineComplete = () => {
+ onComplete?.();
+ };
+
+ return (
+
+ {lines.map((line, index) => (
+
+ ))}
+
+ );
+}
diff --git a/packages/ui/src/DitherText/DitherSectionHeader.tsx b/packages/ui/src/DitherText/DitherSectionHeader.tsx
new file mode 100644
index 0000000..83519da
--- /dev/null
+++ b/packages/ui/src/DitherText/DitherSectionHeader.tsx
@@ -0,0 +1,32 @@
+/**
+ * DitherSectionHeader Component
+ *
+ * Section header with subtle pulsing dither effect.
+ * Continuously animates for a "living" feel without being distracting.
+ */
+
+'use client';
+
+import { DitherCanvas } from '../DitherCanvas/DitherCanvas';
+import type { DitherSectionHeaderProps } from './types';
+
+export function DitherSectionHeader({
+ children,
+ pulseSpeed = 3000,
+ fontSize = '56px',
+ fontWeight = '700',
+ className = '',
+}: DitherSectionHeaderProps): React.ReactElement {
+ return (
+
+
+
+ );
+}
diff --git a/packages/ui/src/DitherText/types.ts b/packages/ui/src/DitherText/types.ts
new file mode 100644
index 0000000..d778200
--- /dev/null
+++ b/packages/ui/src/DitherText/types.ts
@@ -0,0 +1,46 @@
+/**
+ * Type definitions for DitherText components
+ */
+
+export interface DitherHeadlineProps {
+ /** Text content (can include line breaks) */
+ children: string;
+
+ /** Delay before animation starts (ms) */
+ delay?: number;
+
+ /** Delay between each line stagger (ms) */
+ stagger?: number;
+
+ /** Animation speed (ms) */
+ speed?: number;
+
+ /** Font size (CSS value, e.g., "120px") */
+ fontSize?: string;
+
+ /** Font weight (CSS value, e.g., "800") */
+ fontWeight?: string;
+
+ /** Additional CSS classes */
+ className?: string;
+
+ /** Callback when all lines complete */
+ onComplete?: () => void;
+}
+
+export interface DitherSectionHeaderProps {
+ /** Header text */
+ children: string;
+
+ /** Pulse speed (ms for full cycle) */
+ pulseSpeed?: number;
+
+ /** Font size (CSS value, e.g., "56px") */
+ fontSize?: string;
+
+ /** Font weight (CSS value, e.g., "700") */
+ fontWeight?: string;
+
+ /** Additional CSS classes */
+ className?: string;
+}
diff --git a/packages/ui/src/FlowDiagram/FlowDiagram.tsx b/packages/ui/src/FlowDiagram/FlowDiagram.tsx
new file mode 100644
index 0000000..8f48ed5
--- /dev/null
+++ b/packages/ui/src/FlowDiagram/FlowDiagram.tsx
@@ -0,0 +1,318 @@
+/**
+ * FlowDiagram Component
+ *
+ * Animated SVG diagram showing the flow from AI Agent → Semantic Query → Registry → Tools.
+ * Uses stroke-dashoffset animation for path reveals and expanding circles for radiating effect.
+ */
+
+'use client';
+
+import type { FlowDiagramProps } from './types';
+
+export function FlowDiagram({
+ className = '',
+ speed = 5000,
+ autoPlay = true,
+}: FlowDiagramProps): React.ReactElement {
+ const animationDuration = `${speed / 1000}s`;
+
+ return (
+
+
+