Dot Matrix Display

// Code for dot-matrix-display/basic

Installation

Usage

import { DotMatrixDisplay } from "@/components/pluto-ui/dot-matrix-display"

<DotMatrixDisplay text="You can get it all here" />

Props

Examples

Basic Usage

// Code for dot-matrix-display/basic

Custom Colors and Size

<DotMatrixDisplay 
  text="Custom Display" 
  hue={200}
  size={6}
  fontSize={120}
/>

Custom Animation Speed

<DotMatrixDisplay 
  text="Faster Animation" 
  duration={5}
/>

Features

• Retro LED Effect: Authentic dot matrix display appearance using CSS masks and filters
• Animated Scrolling: Smooth infinite scrolling text animation
• Customizable Colors: Adjust hue, background lightness, and blur effects
• Responsive: Adapts to different container sizes
• Type-safe: Full TypeScript support
• Pure CSS: No JavaScript required for animations

Styling

The component uses CSS custom properties for easy customization:

• --size: Size of each dot in pixels (default: 4px)
• --hue: Hue value for the color (default: 30)
• --bg-lightness: Background lightness (default: 0.5)
• --blur: Blur amount (default: 1)
• --duration: Animation duration in seconds (default: 10)

You can override these by passing props or using CSS variables.

Notes

• The component uses the 'Teko' font family - ensure it's loaded in your project
• The dot matrix effect is created using CSS mask and radial-gradient
• The scrolling animation uses CSS translate transform for smooth performance
• The component uses oklch color space for vibrant, perceptually uniform colors
• Multiple filter effects are applied to create the authentic LED appearance
• The text is duplicated internally to create seamless infinite scrolling