Mikiko Niwa
Mikiko Niwa
Matrix Hero
$12
Subtotal
$12
Taxes
—
Total
$12

Animated typography. Morphing text.

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

By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.

Powered by