Dot Halftone Component Test
This page demonstrates the DotHalftone component with ripple transition effects and aspect ratio preservation. The component renders images as black dot halftone patterns using GPU-accelerated WebGL shaders with contain behavior (scales to fit entirely, clean white space for extra areas). Try rapidly clicking different image buttons to test the smooth transition queuing. Move your mouse over the dots to see them react!
Multiple Instances Performance Test
Multiple black dot halftone instances to test performance
Instance 1
Instance 2
Instance 3
Instance 4
Instance 5
Component Features
- ✅ GPU-accelerated WebGL shader rendering
- ✅ Perfect circular black dots
- ✅ Center-out ripple transition effects
- ✅ Aspect ratio preservation with clean contain mode (no fake content)
- ✅ Smooth transition queuing for rapid button presses
- ✅ Interactive mouse effects (dots enlarge near cursor)
- ✅ Race condition prevention with loading versioning
- ✅ Configurable ripple intensity and frequency
- ✅ Configurable grid dimensions (rows/columns)
- ✅ Adjustable cell size for dot scaling
- ✅ Performance optimized for real-time rendering
- ✅ Multiple instances support
- ✅ TypeScript with strict typing
