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

• fayaaa Turn images, text, and marks into living fire. A shape-aware WebGPU shader playground that runs entirely in the browser. Open the live…
• ribbon generator ▶ Live demo · 中文 A single-file 3D light-ribbon generator. Three.js + UnrealBloom, no build step, no install — one HTML file that renders…
• Contril A cel-shaded arcade boat racing game on an infinite procedural ocean. Anime-inspired cel shading, procedural ocean physics, zero external…
• redrock A cel-shaded downhill racing game built in Three.js, with every asset generated procedurally at runtime. Play it in the browser — no…
• sketches 3d This holds the outputs of my foray into 3D modeling, shaders, Three.JS, and psuedo-gamedev. It consists of a variety of scenes, sketches…
• browser gamejungle trail jungle trail A first-person walk down a winding jungle trail into overgrown stone ruins with a waterfall, built in Three.js with zero external art…
• inkField Before scrolling: this repo hosts the published app. To paint, go to the live site. To submit a recording, use the gallery upload page. The…
• lumenshaders A self-contained web tool that generates looping abstract shader art: liquid chrome, silk ribbons, soft gradient blooms, aura rings, light…
• heliograph A fictional solar observatory in one HTML file: every visual drawn at runtime, no images, no build step. HELIOGRAPH is the Institute of…▶ 3 plays this week
• melon jelly webgpu [!NOTE] Melon Jelly WebGPU is live: Experience real-time XPBD soft-body physics, dynamic mesh cutting, volumetric Beer–Lambert refraction…
• icosahedron 3d An interactive 3D WebGL application built with Three.js and Vite, featuring 3,000 instanced icosahedrons transitioning between dual visual…
• earth 3d An interactive, photorealistic, multi-layered 3D Earth globe rendered in real time in the browser using Three.js, custom WebGL GLSL…
• shader studio Eleven animated WebGL visualisations, designed in the browser and taken away as code, as a 4K still, or as a seamless loop — and shown…
• threejs portal A three.js scene with a glowing portal and fireflies, built to test texture baking and keeping a scene fast on a range of devices. Live at…
• particle interaction → 在线演示 · 建议用桌面版 Chrome / Edge 打开 基于 Three.js r160 的 Instanced 渲染管线：以低多边形 Quad 为基础几何体，用 InstancedBufferGeometry + 三个…
• Krishnastmi An ethereal, interactive 3D WebGL digital sculpture capturing the supreme divine bond of Little Radha Ji and Little Krishna (Jugal Jodi)…
• black hole A mesmerizing WebGL simulation of a black hole — where physics meets art, and code becomes cosmos. This project began as a tribute to one…
• jellyfish three.js Real-time procedural jellyfish swimming through an ocean of code, powered by WebGPU.* → Watch Aurelia swim live ← There's something about…
• lumaform orb A WebGL exploration tool for designing animated AI-assistant orbs — the kind of ambient, reactive visual an assistant uses to show what it…
• kin living pond A living goldfish pond for the browser. Name your pond, then look after it. Goldfish swim with articulated bodies and fins under travelling…
• stillwater harbor A 128x128 heightfield wave simulation with foam wake behind a moving boat and broken reflections of harbor lights. Drag to orbit, tap the…
• generative art piecewindcrest windcrest A hill where every blade of grass is real geometry. A few hundred thousand blades are drawn in one instanced call, and the CPU animates…
• nightsail A giant marble head under a column of light, in a stormy night sea. The tide drowns it and gives it back: the swell washes over its face…
• driftfield A cloud of points living inside a curl-noise flow field, with a lens in front of it. Everything you can see is on a slider: how many points…
• generative art pieceraymarchcity raymarchcity 音频驱动的 raymarching 夜城。整座城市——楼、招牌、路面、车流、雨、雾、霓虹——都在一个 fragment shader 里算出来，没有一个模型文件。丢一首歌进窗口，城市跟着节拍呼吸。 在线：（桌面、手机都行，打开点一下就放） 浏览器里拖进来的歌存在…
• generative art piece3d gradients generator 3d gradients generator Make animated 3D gradients in your browser. Change the colors, shapes, noise, and materials, then copy your settings to reuse them. Morph…
• DeadWax A record that wears where you played it. Every groove on a real record degrades in proportion to how many times a stylus has crossed it…
• jscreensaver Unix screensavers in your browser — live at jscreensaver.net JavaScript port of generative artwork from XScreenSaver. 170+ Unix/X11…
• liquid lens A photograph, and a body of liquid you move over it with the pointer. Seven soft bodies chase your hand; where two are near each other…
• web kick MADKICK is a browser-based audiovisual experience: an endlessly evolving 170 BPM kick drum — continuously re-modulated through a Web Audio…
• inkfall A fluid simulation that runs in the browser. Move the pointer, a finger, or your hand in front of the camera, and ink blooms through water…
• slime mould computer A single cell with no neurons, designing the metro Lviv never built. Explore, then Optimise. 150 frames, sped up — no cuts. (mp4) Open the…
• reality tear An interactive camera experiment inspired by the idea of physically pulling reality apart. Your live camera feed is mapped onto a simulated…
• generative art piecegas station highway gas station highway A photorealistic first-person gas station at dawn, built in Three.js with zero external art assets. Every mesh, every texture and every…
• nocturne A collection of single-file WebGL art pieces — zero images, zero libraries, everything rendered live in the browser. Generative WebAudio…
• cosmic atlas A cinematic, navigable replica of the real universe, in the browser. 81 catalogued objects across 65 kinds — planets, moons, nebulae…▶ 3 plays this week
• generative art piecefractbox engine fractbox engine A composable, distance-estimated 3D fractal engine for the browser. You build a fractal by ordering small primitive operators (box fold…
• dither flow A 1-bit dithered flow field for the web. Cursor-stirred ink that swirls along curl noise, quantized through an 8×8 Bayer matrix — pure ink…
• Nikkiro Audio Visualizer Nikkiro Audio Visualizer is a free, open-source 3D audio-reactive music visualizer for the web, Windows desktop, and Android, built with…
• generative art piecemorph morph A generative design studio for procedural 3D sculpture. Five families of mathematical surfaces, a physically based material system and an…
• beryl A product page for a glass reading stone, where the stone is real. Slide it across the page and the words swell under it. Tap it and rings…Vibe-coded
• game of life game-of-life · glsl · javascript · shaders · threejs
• parallax studio 可直接上传图片的中文画廊编辑网站，基于 Xian Horizontal Parallax Gallery 改造。 在「图片」面板点击 上传图片，也可以一次选多张或拖入图片。 点击缩略图选中图片；列表右侧调整顺序或删除，下面的按钮替换图片。 在「特效」中逐张选择噪声扰动、RGB…
• oppo watch ai 一组 WebGL / GLSL shader 实验：声波、液态玻璃、流体融合 A set of WebGL / GLSL shader experiments — sound waves, liquid glass, and fluid metaball morphing…
• glass Drop a logo, get it back as a glass app icon. Live at phileeppov.com/glass, where changes land first. I designed it and built it with…
• GaussianBlur URP Demo A screen blur effect for Unity/C# Asset Store Link HRP version non-ShaderGraph version PLEASE LEAVE A REVIEW OR RATE THE PACKAGE IF YOU…
• black hole shader This project provides a WebGL2 shader to render a non-rotating black hole with an accretion disc and background stars. See the [full…
• precomputed atmospheric scattering This project provides a new implementation of our [Precomputed Atmospheric Scattering]( paper. This new implementation uses more…
• ModellingAndAnimationWithWebGL This project is for demonstrating the basic animation and object modelling with WebGL. Please don't mind my horrible horse model. I didn't…
• pitchblack sqr WebGL multipass experimentation features godrays && black/white thresholds. all ShaderToy people for ispiration and knowledge base.
• Toys No.037 GLSLSchool Task3 RayMarching Kirby さて今回の課題ですが、せっかくなのでシェーダアート的に「フラグメントシェーダだけを用いた表現」に挑戦してみましょう。 とは言えそれだと課題として選択肢が広すぎると思うので......「for…
• aurora webgl shader · threejs · webgl
• babylon mtoon material Unity Santarh/MToon Shader WebGL porting to babylon.js. Some settings will be ignored or generates inconsistent lighting. Shade(shaded…
• webgl noise examples 导语：大自然蕴含着各式各样的纹理，小到细胞菌落分布，大到宇宙星球表面。运用图形噪声，我们可以在3d场景中模拟它们，本文就带大家一起走进万能的图形噪声。 图形噪声，是计算机图形学中一类随机算法，经常用来模拟自然界中的各种纹理材质，如下图的云、山脉等，都是通过噪声算法模拟出来的​。…
• realtime planet shader This is a GLSL fragment shader I originally made on Shadertoy when learning raymarching. Later I switched to analytic raycasting for better…
• aladino ⚠️⚠️ BETA! ⚠️⚠️ (Most likely I won't maintain this...) Aladino is a tiny (around ~5kb gzipped) and dependency-free javascript library that…
• digital marbling Digital Marbling. Ink dropping and tine lines are implemented in a shader.
• Plotter GLSL Shader a 3D raveling and unraveling transformation on the model, based on a time var to vary the trigonometric angle operations and apparent…
• shader backgrounds A shader backgroud animation
• web demowebgl vs webgpu waves webgl vs webgpu waves This project showcases a side-by-side comparison of WebGL and WebGPU rendering techniques by implementing a procedural fire and smoke…
• Ray Tracing A quick simple ray tracer written in glsl using JavaScript and WebGL
• Tetris WebGL glsl · shader · webgl · webgl-game
• my webgl webgl实践
• Morphing Morphing Basics
• Sci fi Tunnel Sci-fi Tunnel by Manish Dhaka
• sunset sea A physically based sunset over the sea, in one WebGL fragment shader. No dependencies. One ES module. Put a on your page and call new…
• black shadow lab A browser-based WebGL webcam experiment inspired by “this website only works with the color black.” Bright pixels mostly pass through…
• LiquidGlassUI Glass that actually refracts. Apple-style liquid glass for the web in one dependency-free HTML file. ▶ Live demo : drag the glass card, the…
• gerawebgl I first developed my own WebGL library (based on v1.0) back in 2014. Now I’ve decided to revisit those ideas, explore what WebGL 2.0…
• shader svg An animated WebGL mesh-gradient "ghost" rendered inside an SVG silhouette — built with Next.js 15, @paper-design/shaders-react, and Framer…
• p5js shaders Shaders are a great way to make graphics for your projects. So far you have probably made graphic shapes like rect() or ellipse() or maybe…
• threejs vanilla holographic material A simple to use holographic material for threejs Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for…
• generative art pieceVaseFX VaseFX VaseFX is a generative art vase sculpting tool by Frank Force. Sculpt, glaze, and render procedural pottery directly in your browser…🔥 2 · 😂 2 · 🤯 1
• vgpu demo A glass drop that follows your cursor and bends whatever it crosses. The artwork, the text and the drop are all painted by one WebGPU…
• aura break Click the live link. Nothing to install. You need a browser with WebGL, which is any Chrome, Edge, Safari or Firefox from the last several…▶ 3 plays this week
• learn webgl shader · webgl
• web demo3D slader 3D slader glsl · shader · slader · webgl
• webgpu compute inspired by Get started with GPU Compute on the web and Vulkan Minimal Compute.
• ProcessingStuff A showcase of some of my experimental Processing sketches. Please ask for permission before releasing remixes of my sketches outside of…
• obsidian site pasta A minimalist, single-file creative web development experiment featuring an interactive GLSL liquid metal sculpture synchronized with smooth…
• Specular goodness this speculars take into account the angle the light is hitting the texture and properly mix the colour of the texture with the colour of…
• labs 21 live web demos. No npm. No React. No build step. Shaders, particle systems, fluid fields and generative scenes. Every demo is a single…
• onkochishin A local, searchable gallery over the 57 self-contained demos in elder-plinius/FABLE-SHOWCASE. Our own work here is MIT (LICENSE). Upstream…
• nextjs webgl templates 13 open-source Next.js 16 + React Three Fiber / WebGL templates in one app. Raymarched black holes, GPU fluid simulation, a million-agent…
• Threeblock Some Games and tools
• motionforge An open-source laboratory and developer workbench for extraordinary web animations. Explore advanced motion. Customize every detail. Export…
• pigment drift generator Watercolor backgrounds for the web. Still or moving, endlessly tweakable, and ready to drop into your site. Pigment drift is the slow…
• web demoWebGLMandelbulbFractal WebGLMandelbulbFractal DHBW Stuttgart WebGL Project that displays a 3D Mandelbub Fractal without the use of any third-party libraries or tools.
• curtainsjs Note that if you are using React, you might want to try react-curtains, curtains.js official React package. The library is split into…
• Nostalgia SeabedLamp3D 3D scene WebGL with mp3 player
• shaderup shaderup is a minimal library for rendering GLSL fragment shaders on a canvas. It handles the WebGL boilerplate, so you can focus on…
• threejs shader editor This is a simple shader editor for Three.js. It allows you to edit the shaders of testing mesh in real time. It's GLSL used for glsl2.0 and…
• Sky Shader Interactive procedurally generated sun and skies. Run it in your browser. This extends code from my Ludum Dare 33 entry, Otherworldly…
• Rainy Night Convenience Store 一个三渲二（Cel-shaded）风格的日式便利店雨夜街角微缩景观。 整个场景是一个可以自由拖拽、旋转、缩放的实时 3D 模型，没有任何 UI 界面元素。 在线预览： 浏览器需支持 WebGL；首次加载约 2.1 MB，完全离线自包含。 便利店本体：发光招牌带（HOSHINO…
• demolishedWebGPU demolishedWebGPU is a shader rendering engine based on WebGPU. WebGPU is a new web API that exposes modern computer graphics capabilities…
• 3d web pack How a pack file is structured. Each agent owns one layer of a high-end 3D site. They hand off to one another automatically. WebGPU reached…
• pixel shader academy Learn GLSL the way you learn a video game. 🎮 Play the Free Demo → · 🛒 Buy on itch.io → · 🌐 Landing site Pixel Shader Academy is a…
• paper crumple demo An interactive demo of crumpled paper balls: click one to unfold it into a card, drag to pick it up, flick to throw it. The crumpling…
• three projective media Projective media for Three.js, validated under real application constraints. three-projective-media projects one HTML video texture onto…
• Cazi r.github.io Kişisel portfolyo sitesi — retro masaüstü arayüzü. Tek dosya: index.html. Harici bağımlılık yok (yalnızca Google Fonts). Kaynak…