ComponentsMatrix Card

Matrix Card

A reusable card component that displays a matrix rain effect on hover, combining smooth animations with canvas-based effects.

Matrix Rain Card

Hover or hold to see the matrix rain effect!

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/matrix-card.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/matrix-card-demo.json"

How to use

Demo.tsx

"use client"

import React from "react"

import MatrixCard from "@/components/smoothui/ui/MatrixCard"

const MatrixCardDemo = () => {
  return (
    <MatrixCard
      title="Matrix Rain Card"
      description="Hover or hold to see the matrix rain effect!"
      fontSize={16}
    />
  )
}

export default MatrixCardDemo

Props

Prop	Type	Description
title?	string	Card title.
description?	string	Card description.
fontSize?	number	Font size for the matrix effect.
chars?	string	Characters to use in the matrix effect.
className?	string	Optional additional class names for the root container.
children?	ReactNode	Custom content inside the card (replaces title/description).