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

1

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

PropTypeDefault
title?
string
-
description?
string
-
fontSize?
number
-
chars?
string
-
className?
string
-
children?
ReactNode
-
Button Copy
This component is an interactive button that visually changes state when clicked. The states are 'idle', 'loading', and 'success', represented by animated icons. When clicked, the button transitions from idle to loading and then to success, using smooth animations.
Dynamic Island
A reusable Dynamic Island component inspired by Apple's design, featuring smooth state transitions and animations.