ComponentsPixel
Pixel sort
Rows sort into place like a glitch artwork.
Installation
$ npx shadcn@latest add @textlab/pixel-sortNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { PixelSort } from "@/components/textlab/pixel-sort/pixel-sort";
<PixelSort as="h1" text="Corrupted" />Variants
smearsortProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "smear" | "sort" | "smear" | Retracting streaks, or bands of rows sliding into register. |
| duration | number | 1.4 | Seconds each part takes. |
| hover | boolean | true | Tear the image again briefly on hover. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Music, art and experimental brands.
- Heavy display words on dark or light flat backgrounds.
Skip it
- Small text; rows are too few to read as bands.
- Gradients behind the text; the canvas is flat color.
Accessibility and motion
Accessibility
- Decorative canvas; the text is read from a hidden copy.
- Settles into clean type; nothing keeps flashing.
Motion
- Settles from full glitch to clean in about 1.4 s after it enters view.
- Hover re-tears to 45% and settles again.
Reduced motion. Plain text instead of the canvas.
Performance
- Per-pixel work runs only while settling; device pixel ratio capped at 1.5 for this effect.