## Two Animation Modes
- Reveal: A single shape assembles with a staggered character animation
- Transition: Shape A morphs into Shape B and loops continuously
## Flexible Shape Source
- Text input (any word or phrase)
- SVG upload (custom logos or icons)
## Full Visual Control
- Background and accent colors
- Canvas background color
- Background pattern (dots or custom symbols)
- Cell size, letter spacing, line height
- Typography presets: Mono Sans, Mono Serif, Sans, Serif, Display
- Custom font support (any CSS font-family)
- Font weight (100 – 900)
## Animation Tuning
- Hold time (how long each shape stays)
- Transition time (A ⇄ B morph duration)
- Background flicker speed
- Accent character flicker speed
- Stagger (per-cell timing for assembly animation)
- Shape size scale (independent for A and B)
## Performance
- Canvas-based rendering for smooth 60fps
- DPR-aware for crisp display on retina screens
- IntersectionObserver auto-pauses when off-screen
- Responsive: works on desktop, tablet, and mobile
## Use Cases
Hero Sections
The primary use case. Build attention-grabbing first views for SaaS, AI, devtool, conference, and editorial sites.
Section Decorations
Use MatrixHero as an accent inside content sections — feature highlights, pricing dividers, CTA blocks, footer accents. Lower the accent flicker and set a subtle color combination to keep focus on the surrounding content.
Title Typography
Make any section title come alive. Use Reveal mode with a short word (e.g. "FEATURES", "ABOUT", "WORK") and the assemble-in animation triggers as visitors scroll. Pairs beautifully with editorial layouts and portfolio sites.
## How to Use
1. Drag MatrixHero into your frame
2. Set Width to Fill and Height to your desired hero size
3. Choose Mode (Reveal or Transition)
4. Enter your text in Text A (and Text B for Transition mode)
5. Customize colors, font, and animation timing in the property panel
## Tips
- For best results on mobile, use shorter text (e.g. `BUILD` instead of `BUILD APP`)
- Use the Breakpoint feature in Framer to set different text per device
- For SVG shapes, use bold, high-contrast vector files
Mikiko Niwa
