Kinetic UI | The Creative Motion Component Library

The GlyphMatrix component renders a high-performance digital stream rain on a canvas, inspired by the classic Matrix film effect and modern cyberpunk HUD elements. It is fully responsive, customizable, and features interactive cursor repulsion that dynamically scatters and scrambles the glyphs on hover.

Live Preview

Glyph Matrix

System Terminal

LOG: DECRYPTING GLYPH DATA STREAM...

STATUS: HOVER OVER STREAM TO INITIATE MOUSE SCATTER

Active Theme: matrixDENSITY: 1.1

FIREWALL WARNINGINTRUSION DETECTED IN DIGITAL STREAM

MOVE CURSOR OR TOUCH TO INTERACT

Installation

npx kinetic-ui-cli@latest add glyph-matrix

Use Cases

Custom Background Container

You can layer the GlyphMatrix behind user interfaces or dashboard widgets by setting its positioning to absolute:

import { GlyphMatrix } from '@/components/creative/glyph-matrix';

export function CyberCard() {
  return (
    <div className="relative w-80 h-96 border border-zinc-800 rounded-2xl bg-black overflow-hidden p-6 flex flex-col justify-between">
      {/* Background Matrix Rain */}
      <div className="absolute inset-0 opacity-40 z-0">
        <GlyphMatrix theme="cyber" fontSize={12} interactive={true} />
      </div>

      <div className="relative z-10">
        <h3 className="text-lg font-mono font-bold text-white uppercase tracking-wider">Access Node</h3>
        <p className="text-zinc-500 text-xs mt-1">Terminal connection secure.</p>
      </div>

      <button className="relative z-10 w-full py-2 bg-pink-500 text-white font-mono text-xs font-bold uppercase rounded-lg border border-pink-400/20 hover:bg-pink-600 transition-all duration-200">
        Establish Link
      </button>
    </div>
  );
}

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GlyphMatrix } from "@/components/creative/glyph-matrix";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GlyphMatrix } from "@/components/creative/glyph-matrix";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GlyphMatrix
        theme{/* value */}
        fontSize{10}
        speed{10}
      />
    </div>
  );
}

Frequently Used With