Skip to content

v0.2.0 - Full Feature Parity with Web Matrix Component

Choose a tag to compare

@tristanmanchester tristanmanchester released this 05 Nov 14:24
· 22 commits to main since this release

πŸŽ‰ Major Release: v0.2.0

This release brings full feature parity with the web Matrix component from ElevenLabs UI, plus additional React Native-specific enhancements!

✨ Highlights

  • 🎯 Complete template.md implementation - All features from the web spec
  • πŸ§ͺ Comprehensive test suite - 37 tests covering all functionality
  • 🌐 Web platform support - Works on iOS, Android, and Web
  • πŸ“¦ Pre-generated animations - Drop-in animated presets at 7Γ—7
  • 🎨 New animations - Pulse, snake, ripple, and chevron patterns
  • πŸ“Έ WebP demo generation - Programmatic animation creation

πŸ†• New Features

Pre-generated Preset Constants (7Γ—7)

  • waveFrames - 24-frame sine wave animation
  • loaderFrames - Perimeter spinner animation
  • pulseFrames - 16-frame brightness pulse
  • snakeFrames - 49-frame snake with fading tail
  • rippleFrames - 24-frame concentric ripple effect
  • chevronLeftFrame / chevronRightFrame - Static directional indicators

New Generator Functions

  • generatePulseFrames() / pulse() - Global brightness animation
  • generateSnakeFrames() / snake() - Snake traversal with fading tail
  • generateRippleFrames() / ripple() - Concentric wave effect
  • chevronLeft() / chevronRight() - Directional indicators
  • vu() helper - Create static VU meter patterns from levels array

Component Enhancements

  • paused prop for controlled animation playback
  • presetLabel prop for additional accessibility
  • Static patterns render without Reanimated overhead
  • Frame normalization handles mismatched dimensions

πŸ”„ Breaking Changes

  • Default size changed from 12 to 10 - Matches web template.md spec

πŸ“¦ Installation

```bash
npm install react-native-dotgrid react-native-svg react-native-reanimated
```

πŸš€ Quick Start

```tsx
import { Matrix, waveFrames, digits } from 'react-native-dotgrid';

// Static digit

// Animated wave

```

πŸ“š Documentation

See the README for comprehensive documentation with animated examples!

πŸ™ Acknowledgments

Inspired by the Matrix component from ElevenLabs UI.


Full Changelog: https://github.com/tristanmanchester/react-native-dotgrid/commits/v0.2.0

Full Changelog: https://github.com/tristanmanchester/react-native-dotgrid/commits/v0.2.0