---
title: "Matrix Hero — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Mikiko Niwa · Sections. Animated typography. Morphing text."
canonical: "https://framer.elliotli.dev/component/matrix-hero"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Matrix Hero

# Matrix Hero

Animated typography. Morphing text.

[View on Framer](https://framer.com/marketplace/components/matrix-hero/?via=elliot-li)

![Matrix Hero preview image 1](https://framer.elliotli.dev/og/component/matrix-hero/08567c452c2b40d3/1600x1200.jpg)

## Summary

Animated typography. Morphing text.

## Description

![Use Case 1](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-9tfvrdft-uMGPuqRV0mkhFPbxMJ2Hf5N4xBlwAu)Use Case 1![use case 2](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-9tfvrdft-jY1WcgL1d3F7EQa6WMV49OlqwkOlKM)use case 2![use case 3](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-9tfvrdft-KMJxZitUcPixYgYNzA8IRZ31KnpX1a)use case 3

\## 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #7031

## Details

- **Author**: Mikiko Niwa
- **Price**: $12.00
- **Published**: 2026-05-29
- **Updated**: 2026-05-29
- **Added**: 2026-05-13
- **Categories**: Sections

## More like this

-   [Velours Index](/component/velours-index) — Hamim Reza · $10 — Hover a title, reveal the film
-   [BlogSingleX Single](/component/blogsinglex-single) — Themomarket · $8 — Single Blog Details Component
-   [Slanted Cascade Cove](/component/slanted-cascade-cove) — Karim Saif · Free — Diagonal photo gallery
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews