Matrix Hero

Animated typography. Morphing text.

Use Case 1 use case 2 use case 3 - Reveal : A single shape assembles with a staggered character animation - Transition : Shape A morphs into Shape B and loops continuously - Text input (any word or phrase) - SVG upload (custom logos or icons) - 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) - 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) - 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 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. 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 - 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

Animated typography. Morphing text.