The iconic Matrix digital rain effect rendered on canvas with theme-aware colors.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/matrix-rain.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<script setup lang="ts">
import MatrixRain from '~/components/ui/matrix-rain/MatrixRain.vue';
</script>
<template>
<div class="relative h-100 w-full bg-background">
<MatrixRain class="absolute inset-0" />
</div>
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | '#0f0' | Color of the falling characters |
font-size | number | 14 | Font size of the characters in pixels |
speed | number | 1 | Animation speed multiplier |
class | string | — | Additional CSS classes for the container |