Component catalog

♥ The user singled out the dither chart as an interesting component to feature on the homepage. Use the real pixelated data visualization with selectable chart styles and clearly labeled sample data. — Pixelated Canvas charts with line, donut, bar and other data shapes. Good for distinctive dashboards and product illustrations; keep its data text alternative, label demo data and provide controls outside the canvas. Hosted local demo preserves the upstream component and install command.

A compact waiting indicator with multiple visual treatments. Start here for free loading UI; inspect the demo and choose a variant that fits the surrounding content.

Hero with animated dithering shader backdrop (@paper-design/shaders-react); text/card layer uses tokens, shader colour is a hex prop.

Keyboard-operable pixel art editor with drawing, color selection and undo. Hosted demo uses original small artwork; useful for creative tools and playful interactions.

Convert any image to ASCII art with customizable charsets, colors, and animations.

A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.

A canvas loader that scans across an image with animated pixel grids, text masks, and progress overlays.

Convert any image to a pixelated canvas mouse distortion effects, as seen on Tailwind CSS Website.

A real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.

Pixel-grid loader with shimmer and elapsed time.

Compound Next.js image figure with CSS Bayer dither via dither-plugin, partial reveal overlays, and typed tuning props

Classic Mac frame with an image or GIF composited into the CRT

Per-character pixel-font heading with four animation modes using Geist pixel fonts

Whole-word pixel-font heading that swaps or cycles fonts on hover using Geist pixel fonts

Paragraph where specific words render in an interactive pixel font that swaps or cycles on hover

Paragraph in pixel font where specific words escape into interactive sans/mono with hover swap or cycle

Composable marketing card with L-shaped extrusion, optional pixel gradient mesh, and Radix Slot on the root

A component that displays an image with a pixelated effect, creating a retro aesthetic.

An animated scrolling retro grid effect

Renders text with an animated ASCII background for a retro feel.

Full-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.

Retro dithered noise shader background.

A photo printed as a 1-bit dither that the cursor burns through to full colour, leaving a trail that knits back cell by cell.

Terminal CRT scanline squares effect with flicker + noise.

RGB split and distortion glitch effect with jitter effects.

Matrix style letter animation.

Exploding pixel particle bursts with optional liquid postprocessing.

Card content revealed through pixel expansion transition.

Falling pixelated snow effect with customizable density and speed.

Pixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and triggers.

Pixelated cursor trail emitting fading squares with retro digital feel.

Pixel dissolve transition for content reveal on hover.