Skip to content

feat/added glyph matrix component#970

Open
sarvan-2187 wants to merge 1 commit into
magicuidesign:mainfrom
sarvan-2187:main
Open

feat/added glyph matrix component#970
sarvan-2187 wants to merge 1 commit into
magicuidesign:mainfrom
sarvan-2187:main

Conversation

@sarvan-2187
Copy link
Copy Markdown

Description

Adds a new GlyphMatrix animated background component to Magic UI.
The component renders a lightweight canvas-based matrix of dynamically mutating glyphs with responsive resizing and theme-aware coloring.
It is designed for futuristic hero sections, terminal-inspired interfaces, and ambient UI backgrounds.

Changes

  • Added new GlyphMatrix component
  • Implemented canvas-based glyph rendering
  • Added animated glyph mutation system
  • Added responsive resizing with ResizeObserver
  • Added theme-aware foreground color support using CSS variables
  • Added configurable props for glyphs, mutation rate, interval, cell size, and fade intensity
  • Added cleanup for animation observers and RAF loops
  • Added JSX-compatible implementation
  • Added demo/example usage

Motivation

Magic UI currently lacks a lightweight animated matrix/grid background component for futuristic and developer-focused interfaces.

This component provides:

  • Better visual ambience for landing pages
  • A reusable animated background primitive
  • A performant alternative to DOM-heavy matrix effects
  • A highly customizable aesthetic component for AI, cyberpunk, and terminal-inspired UIs

Breaking Changes

None.

Screenshots

Device / Browser / Viewport: Lenovo LOQ / Brave / 1920*1080

Before After
None Glyph Matrix Demo

@vercel
Copy link
Copy Markdown

vercel Bot commented May 19, 2026

@sarvan-2187 is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

@sarvan-2187
Copy link
Copy Markdown
Author

Closes #969

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant