Shaders you can play with right now

Hundreds of shaders projects, each running live on its creator's own site: some of them vibe-coded with AI, all of them playable in your browser with nothing to install. Press a card to play one on its own page, or start the cruise to ride through them one after another.

Made one of these? See how many people played yours → or use email

• shimmer text A soft-blur front sweeps across your text, then settles into crisp type. One file, zero dependencies, 8 kB gzipped. The text stays…
• Maya Vertex Animation Texture Baker Vertex Animation Texture Encoder for Maya - Convert skinned meshes, deformers, and anything that moves into VAT! With this ON, the first…
• atmosphere Pass in a time and a weather, and it roughly reproduces that sky. One WebGL fragment shader, no dependencies, no DOM or framework…
• programmatic patterns A collection of generative HTML backgrounds. Each file is fully self-contained — no build step, no dependencies. Download and open in any…
• particleforge Real-time GPU-accelerated particle system editor in your browser. Create stunning VFX with force fields, color gradients, and 12 presets…
• web demoR3FSketchMaterial R3FSketchMaterial A hand-drawn ballpoint look for React Three Fiber. Any mesh gets scribbled hatching that follows the light, wobbly pen outlines that…
• revealed Paint one image out of another. A wet-edge WebGL reveal for React and plain JS. ![A scripted pointer sweep tears a photograph of a beige…
• crt shader Multi-pass CRT rendering for WebGL 2, with image, React, Three.js and pmndrs adapters. The pipeline applies signal filtering…
• Personal 3D portfolio An interactive, 3D personal portfolio website showcasing data science, AI projects, and UI/UX engineering work. Built with immersive WebGL…
• 3d room An interactive WebGL room rendered in the browser with Three.js. The scene uses fully baked lighting exported from Blender, a runtime…
• nucleus io A flyable 3D portfolio: pilot a spaceship through a neon void, open project orbs, and collide with physics text. NUCLEUS.IO is Roy Wang's…
• generative art pack [!NOTE] Six agents and four skills that take a generative piece from concept → sketch → algorithm → shader → color → export (print, video…
• ink wash painting skill A Claude skill that paints Chinese ink-wash (水墨) of any subject as live browser art — WebGL2 shaders for paper, water and ink, Canvas…
• webgl Three.js and hand-written GLSL: 3D product configurators, engineering calculators, and interactive sites. Available for contract work…
• rummy Real-time 3D scenes rendered as ASCII, in WebGL2. Built for hero backgrounds. rummy takes a raymarched scene, a video or any canvas and…
• generative art piecefluid wallpaper fluid wallpaper Living generative ink for the web — WebGL2 fluid you can embed, tune, and leave running. fluid-wallpaper is ambient artwork that feels…
• vernier gl Interactive design grid — a snapping, measuring WebGL backdrop. An infinite 8px grid that reveals itself around your pointer. A crosshair…
• stereo lab A hands-on playground for learning the core concepts behind a 3D motion framework by touching the code directly. One Vite app; stations…
• wave3d Design 3D gradient waves in your browser: the glossy, twisting wave of light from Stripe's designs. Tweak one live, then export a code…
• motes Procedural, pointer-reactive ASCII backgrounds for the web. Drop-in for React and vanilla. Zero runtime dependencies. The ASCII-on-the-web…
• shaderflow A visual node-to-GLSL shader editor with a live WebGL viewport. Design a material by wiring nodes on a graph — ShaderFlow compiles the…
• dithering shader A generative WebGL2 dithering playground and production-ready React component. Design animated two-color textures, terrain, depth…
• allanhert portfolio Personal site of Allan Hert, founder of Hertwave. Two things live here: a selected-work portfolio, and a Lab of interactive WebGL…
• brc background A WebGL domain-warp background effect, derived from studying the main-menu shader of Bomb Rush Cyberfunk (Team Reptile). How it was made…
• three.js visual node editor Video preview of how it works: remember it is in alpha state, errors might occur, check the console and report if you can Visual node…
• Luxel design studio Small design tools that run in your browser. Palettes, image compression, screenshot polish and animated charts, all in one place. Luxel…
• web demolumathread lumathread LumaThread is a composable WebGL luminous-filament renderer for React. The component is distributed as editable source through its shadcn…
• Paperlab Physical, realistic paper as a React component. A hero image that peels, a receipt that unrolls, a letter that folds, a poster rippling in…
• react aurora background One tiny WebGL shader instead of blurred DOM elements: smooth on phones, laptops stay quiet. Rendered at a low resolution and scaled by the…
• cargo A workshop of small tools for designers and design engineers. Free, forever. Built one Saturday at a time. No accounts, no tracking, no…
• openshaders A few hundred lines of shader code can give a website light, texture, and movement. Too much of that work stays in demos and experiments…
• polanaluz Stained-glass light for your hero section. Windows-wallpaper-style beams of light through stained glass, rendered live in the browser. Live…
• GSS Style sheets for the GPU. Selectors, the cascade and @keyframes, compiled into a single raymarching shader. Website · Playground ·…
• halation Fluid gradients behind textured glass — a free, open-source background generator for designers. Halation renders flowing color fields…
• state of cinema nextjs An immersive entry journey for a streaming platform, the first thing a visitor sees before they sign up. A stage curtain opens on a river…
• fluid Dependency-free WebGL studio for generating backgrounds, wallpapers, Open Graph images, and live embeddable canvases. One HTML file. No…