Pixel Reveal Text
A typography shader component that materializes text out of pixel matrix noise with neon contour highlights on scroll.
18.7 KB
•Updated on September 20, 2026
Animoji Phrases
The same loop effect cycling through a rotating set of phrases, in top of the Animoji component.
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-pixel-reveal-textUsage
Code
import { PixelRevealText } from '@/components/spaceui/pixel-reveal-text'
export default function Example() {
return <PixelRevealText text="Every detail, perfected." fontSize={44} pixelSize={4} edgeColor="#ffe9a8" />
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | Text content to reveal |
fontSize | number | 44 | Font size in pixels |
fontFamily | string | inherit | CSS font family |
fontWeight | string|number | 600 | Font weight |
color | string | — | Base text color (inherits from theme if omitted) |
edgeColor | string | #ffe9a8 | Accent color of the advancing wavefront (Aurum by default) |
pixelSize | number | 4 | Resolution of pixel blocks |
noiseStrength | number | 0.35 | Degree of matrix randomness during reveal |
progress | number | — | Optional controlled reveal progress (0 to 1) |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
