Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.
runed
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/glyph-matrix.json
Install dependencies
Install the required packages for this component:
pnpm add runed
Copy the Source Code
Copy and paste the following code into your project:
glyph-matrix.svelte
index.ts
Folder Structure
Folder Structure
Usage
Examples
Letters Example
Props
GlyphMatrix
A canvas-based glyph animation that renders a shifting matrix of characters.
| Name | Type | Default | Description |
|---|---|---|---|
glyphs | string | "01·•+*/\<>=" | Characters to randomly pick from. |
cellSize | number | 14 | Cell size in pixels, which also controls the font size. |
mutationRate | number | 0.04 | Probability from 0 to 1 that a cell mutates on each tick. |
interval | number | 90 | Tick interval in milliseconds. |
fadeBottom | number | 0.6 | Fade amount toward the bottom of the canvas. |
color | string | "#6B7280" | Glyph color. Pass a theme-aware CSS color value from the consumer. |
boost | number | 1.2 | Brightness multiplier for the glyph color. Values above 1 make the matrix brighter. |
class | string | "" | Additional CSS classes applied to the canvas. |
style | string | undefined | Inline styles forwarded to the canvas element. |