Scale the interactive 404 abacus to match the hero section sizing with
responsive breakpoints:
- Mobile (base): 1.5x scale
- Small (sm): 2x scale
- Medium (md): 2.5x scale
- Large (lg): 3x scale
Prevent layout dominance on small screens with maxWidth constraints
and centered positioning.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add dynamic custom bead rendering system that allows beads to change appearance
based on their context (active state, position, place value, type, etc.).
Custom Bead Features:
- Add emoji-function, image-function, and svg-function types
- Functions receive CustomBeadContext with bead state and style info
- Support for dynamic rendering based on: active state, position, place value,
bead type (heaven/earth), color, and size
- Enables creative visualizations like traffic lights, themed symbols, etc.
404 Page Easter Eggs:
- Create interactive 404 page with manipulable abacus
- Add 14 HTTP status code easter eggs (200, 201, 301, 400, 401, 403, 418,
420, 451, 500, 503, 666, 777, 911)
- Each code triggers site-wide custom bead transformation
- Use function-based rendering for variety (different emojis per bead
position/state)
- Easter eggs persist until page reload via global AbacusDisplayContext
Storybook Documentation:
- Add comprehensive custom bead stories showing static and function-based usage
- Include examples: active/inactive states, heaven/earth types, place value
colors, traffic lights, color theming
- Document CustomBeadContext API and usage patterns
Technical Implementation:
- Extend CustomBeadContent union type in AbacusContext
- Update AbacusStaticBead and AbacusAnimatedBead to handle function types
- Pass bead context (type, value, active, position, placeValue, color, size)
to custom render functions
- Maintain consistency across static (SSR) and animated (client) rendering
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Thomas Hallock