Ajax Davis
5e92ae49a3
feat: implement revolutionary dithered landing page with Bayer matrix animation
Core Dithering System:
- Add Bayer matrix 8×8/4×4 ordered dithering algorithm
- Implement DitherEngine with canvas-based text rendering
- Create reveal (one-shot) and pulse (continuous) animation modes
- Add SSR safety checks for Next.js server-side rendering
New UI Components:
- DitherCanvas: Base component with RAF-based animation
- DitherHeadline: Multi-line staggered reveal for hero text
- DitherSectionHeader: Pulsing section headers
- FlowDiagram: Animated SVG showing agent→registry→tools flow
- ActivityStream: Live ticker with mock tool activity
Accessibility Features:
- useReducedMotion hook for prefers-reduced-motion support
- Screen reader compatibility with aria-labels
- Fallback to static rendering when animations disabled
Homepage Redesign:
- Replace generic sections with narrative storytelling
- Add ProblemSection: Fragmented chaos design (before tpmjs)
- Add VisionSection: Dynamic ecosystem visualization (after tpmjs)
- Redesign EcosystemStats with dithered counters and live activity
- Add DeveloperStories: Code-first testimonials
- Update HeroSection with dithered headline and blueprint scanline
Visual Design:
- Minimalist + Blueprint technical aesthetic
- Animated scanline background effect
- Grid patterns with subtle opacity
- Brutalist typography and hard edges
Technical Implementation:
- Export new components in UI package.json
- Add components to tsup.config.ts entry points
- SSR-safe canvas operations with environment checks
- Performance optimizations: frame caching, mobile detection
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>