sahilsaini5

sahilsaini5 / ditherwave

Public

A tiny WebGL2 dithering primitive for React. Bayer, halftone, ASCII, error-diffusion. Under 8kb gz.

ditherwave.vercel.app ascii-art bayer creative-coding dithering halftone
14
1
100% credibility
Found Apr 28, 2026 at 14 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A lightweight library for adding dithering effects to images, videos, or canvases and creating animated grainy backgrounds in web projects.

How It Works

1
🌐 Stumble upon the demo

You find a fun website showcasing wavy, grainy backgrounds and pixelated art effects on photos and videos.

2
🎨 Try the magic live

Drag in your favorite picture or video, tweak colors and patterns, and watch it transform into cool retro pixel art right before your eyes.

3
⚙️ Pick your perfect look

Slide controls for pixel size, colors, and styles like dots or letters until the effect feels just right.

4
📋 Grab your snippet

Copy the simple code block that matches exactly what you created, ready to use anywhere.

5
💻 Drop it into your site

Paste the snippet around your images or backgrounds, and refresh to see the effects come alive.

✨ Visitors love the vibe

Your website now glows with stylish, animated retro effects that make everything feel fresh and eye-catching.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 14 to 14 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is ditherwave?

Ditherwave is a tiny TypeScript library that adds WebGL2 dithering effects to React apps, wrapping images, videos, or canvases in a `` component for real-time bayer, halftone, ASCII, or error-diffusion patterns. It also offers `` for animated, grainy noise backgrounds quantized to custom color levels. At under 8kb gzipped, it delivers live, performant effects with zero runtime deps—React is optional, and vanilla JS APIs work in plain HTML.

Why is it gaining traction?

In a world of bloated shaders and Three.js wrappers, ditherwave stands out as a github tiny primitive: tree-shakable, 60fps even on mid-range hardware, and pause-aware via IntersectionObserver. Devs hook on the drop-in simplicity—tweak palettes, pixel sizes, or mouse interaction without setup—and the modes nail retro looks like Game Boy bayer or newspaper halftone without sequential CPU hacks.

Who should use this?

Frontend devs building retro-themed sites, landing pages with hero waves, or React apps needing live video dithering (think glitch art or pixelated streams). Suited for indie game UIs in Canvas/WebGL or Next.js/Vite projects chasing that Obra Dinn vibe without heavy bundles.

Verdict

Grab it for quick, tiny dithering wins—docs and live demo are polished—but with 14 stars and 1.0% credibility, treat as early alpha for production. Test in your stack; it'll ship fast if WebGL2 fits.

(187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.