diff --git a/packages/abacus-react/README.md b/packages/abacus-react/README.md index 167c6938..57c28c51 100644 --- a/packages/abacus-react/README.md +++ b/packages/abacus-react/README.md @@ -13,6 +13,7 @@ A comprehensive React component for rendering interactive Soroban (Japanese abac - 🔧 **Developer-friendly** - Comprehensive hooks and callback system - 🎓 **Tutorial system** - Built-in overlay and guidance capabilities - 🧩 **Framework-free SVG** - Complete control over rendering +- ✨ **3D Enhancement** - Three levels of progressive 3D effects for immersive visuals ## Installation @@ -113,6 +114,82 @@ Educational guidance with tooltips /> ``` +## 3D Enhancement + +Make the abacus feel tangible and satisfying with three progressive levels of 3D effects. + +### Subtle Mode + +Light depth shadows and perspective for subtle dimensionality. + +```tsx + +``` + +### Realistic Mode + +Material-based rendering with lighting effects and textures. + +```tsx + +``` + +**Materials:** +- `glossy` - High shine with strong highlights +- `satin` - Balanced shine (default) +- `matte` - Subtle shading, no shine + +**Lighting:** +- `top-down` - Balanced directional light from above +- `ambient` - Soft light from all directions +- `dramatic` - Strong directional light for high contrast + +### Delightful Mode + +Maximum satisfaction with enhanced physics and interactive effects. + +```tsx + +``` + +**Physics Options:** +- `hoverParallax` - Beads near mouse cursor lift up with depth perception + +All 3D modes work with existing configurations and preserve exact geometry. ## Core API