feat/added glyph matrix component#970
Conversation
|
@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. |
|
Closes #969 |
|
@Yeom-JinHo Ready for review. Let me know if any changes are needed. |
Yeom-JinHo
left a comment
Yeom-JinHo
left a comment
There was a problem hiding this comment.
Thanks! Two things to address before re-review:
-
Please run
pnpm lint / prettier— registry convention is 2-space indent, no semicolons, named-only exports, cn() for className composition. -
The component isn't wired into the site yet —
config/docs.ts(sidebar) and
docs/components/glyph-matrix.mdxare missing. Once added, the existingegistry.jsonentry will render the page.
| }; | ||
|
|
||
| const parseRgb = (c: string) => { | ||
| const m = c.match(/rgba?\(([^)]+)\)/); |
There was a problem hiding this comment.
This regex only matches rgb()/rgba(), but shadcn/Tailwind v4 tokens resolve to oklch(...).
On a miss this falls back to {0,0,0}, making the glyphs invisible in dark mode
2 participants
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
Motivation
Magic UI currently lacks a lightweight animated matrix/grid background component for futuristic and developer-focused interfaces.
This component provides:
Breaking Changes
None.
Screenshots