GLSL demos you can play with right now

Hundreds of GLSL demos, 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

• 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
• earth 3d An interactive, photorealistic, multi-layered 3D Earth globe rendered in real time in the browser using Three.js, custom WebGL GLSL…
• anabasis 文字 → 粒子：两个字（字号自动放大）· 一句话 · 一整段（自动缩小折行）· 工作台界面 一件生成艺术作品 + 一套可复现的渲染工具链。 图片是第五种形态。 上传一张图（或拖进来、Ctrl+V 粘贴），程序把它按亮度阈值 / 透明通道 /…
• generative art piecekomorebi light komorebi light 木漏れ日, sunlight filtering through leaves, on a sheet of cold-press watercolour paper, in the browser, at your own time of day. By night the…
• physarum A slime mould in raw WebGL2. No library: 262 144 agents living in two textures, growing a transport network out of noise, fed by your…
• cyberpunk city generator 程序化赛博朋克超级都市生成器 Procedural Cyberpunk Mega-City Generator 一座公元 2080–2150 年间的未来超级都市，完全由代码生成 —— 每次都不同。 雨夜街道 · 湿沥青反射、霓虹幕墙、横跨街道的天桥…
• FCTX HOTARU Type a word. A million particles of light gather into its shape. Let go, and it collapses under its own gravity. ▶ Open the live demo · The…
• flores amarillas universo Aplicación web para crear y compartir un universo romántico personalizado. Cada regalo combina una experiencia WebGL 360°, una carta, 18…
• 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 + 三个…
• nocturne an experience in motion. A single-page, hyper-animated dark web experience: a portfolio and demo piece built with vanilla JS, GSAP, Lenis…
• 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…
• 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…
• aquarium Интерактивная 3D-инсталляция: живой аквариум, в котором всё зависит от зрителя. Аквариум — самый маленький из миров, за которые человек…
• generative art piececosmos demo cosmos demo A universe in a single HTML file. Thousands of randomly generated planets attract each other with real Newtonian gravity, collide, merge…
• 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…
• nexus visual engine Reactive Simulators Gallery — 30 motores visuales WebGL audio‑reactivos para DJ sets, instalaciones inmersivas, exposiciones y performance…
• 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…
• omr A scroll-driven descent through a life, rendered in real time in the browser. Photographs hang as glass lanterns on a helix falling away…
• terminal synth Synthétiseur visuel dark/industriel — outil de performance live solo, piloté par Adaptive Autoplay, rendu WebGL2 audio-réactif…
• 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…
• healing visual lab Healing Visual Lab 是一个持续生长的交互式数字疗愈作品集——51 件独立的 H5 页面，每件都是一个完整的创意编程实验。 一个哲学内核贯穿所有作品： 身体记得的，代码可以翻译。代码翻译不了的，时间可以消融。What the body remembers…
• 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…
• physarum culture A live GPU simulation of up to two million slime-mould agents growing real transport networks, in a single HTML file with no build step and…
• 5d fountain song show **Give it a song. It reads the whole track first, writes a show, and then fires water early so the water arrives on time.** The physics…
• 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…
• pelagic jellyfish webgl Real-time procedural jellyfish, soft-body animation, underwater optics, and interactive liquid glass in Three.js Pelagic is an interactive…
• almost Every life you didn’t live is still dreaming somewhere. ALMOST is an immersive 3D poem about the lives hidden inside every choice. Visitors…
• 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…
• 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
• 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…
• webgl buddha This demo is a WebGL port of Android live wallpaper 3D Buddha Live Wallpaper. Article explaining implementation of soft particles used in…
• game of life game-of-life · glsl · javascript · shaders · threejs
• oppo watch ai 一组 WebGL / GLSL shader 实验：声波、液态玻璃、流体融合 A set of WebGL / GLSL shader experiments — sound waves, liquid glass, and fluid metaball morphing…
• playcanvas quake An in-progress, source-faithful TypeScript port of the original 1996 Quake runtime to PlayCanvas. It reads the original Quake data formats…
• conspace rooms Add ?lang=ru or ?lang=en to any page for the language. The mirror is a backup copy: ?mirror keeps you on GitHub Pages and the browser…
• soul strings A camera-driven string instrument. Your hands become constellations; the screen becomes a cosmic harp.
• somnia filaments spatial experience built with three.js and mediapipe
• 3D Tetris using WebGL A 3D take on Tetris (tetracubes) built with vanilla JavaScript + WebGL2: smooth gravity, collision + locking, row clears, two shading…
• 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…
• 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…
• au hexx :small_orange_diamond: :large_orange_diamond: Crazy golden WebGL raymarch-thing for DEVX / Digital Design Day 2018 :large_orange_diamond…
• 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…
• Ray Tracing A quick simple ray tracer written in glsl using JavaScript and WebGL
• Tetris WebGL glsl · shader · webgl · webgl-game
• Morphing Morphing Basics
• Sci fi Tunnel Sci-fi Tunnel by Manish Dhaka
• yichang 3d A single-file, offline 3D map of the Yangtze valley around Yichang (Hubei, China), running entirely in the browser. Everything lives inside…
• gdgoc demo 1 An interactive eight-room WebGL exhibition built with Three.js, custom GLSL shaders, physically based materials, raycasting, camera…
• aetherflow A real-time 3D fluid laboratory that runs entirely on your GPU. Position-based fluids solved in WebGPU compute, lit with screen-space…
• threejs meydajs fftspectrum longstoryshort: microphone reads the audio, and Meydajs extracts psychoacoustic metrics to control an effect in Three.js. open another tab…
• 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…
• Liquid Glass with WebGL A lightweight, modular library for liquid glass effects on HTML elements. The page background is captured with html2canvas, the region…
• endurance 一部在浏览器里实时渲染的太空电影，也是七个可以亲手操控的场景。 A real-time WebGL film and playground — Kerr black hole, wormhole, tidal waves, a spinning dock and the…
• 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…
• aether An interactive single-page site for a fictional high-altitude research station, built so that everything on screen is computed from the…
• liquid logo A free, open-source tool for creating animated logos with a liquid metal aesthetic. Create logo animations in real-time in the browser.
• genuary 2026 31 generative artworks I created for Genuary 2026. Click any piece below to run it in your browser. Genuary is a month-long generative art…
• overprint Turn a photo into a risograph print, in the browser. Overprint does what a print shop does, not what a filter does: it picks a few spot…
• bmw hall A scroll-driven 3D web experience. Four chambers, one baked camera timeline, and a real-time configurator — built to learn how cinematic…
• shimmers Shimmering quil sketches; a few particle simulations, video processing experiments, randomly generated L-systems, 3d transformations, and…
• 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
• generative art pieceearthlight earthlight Earth from low orbit, rendered in real time in the browser. The International Space Station circles Earth every 93 minutes and sees about…
• generative art piecewaterfall waterfall A scroll experience built around a real-time waterfall of light. A hero with your words over the fall; a dive into it; a journey down…
• aether currents ▸ LIVE — full experience Conduct sound with your hands. A browser-based instrument: on-device hand tracking drives granular audio synthesis…
• Disaurde Tool for building real time camera effects with visual blocks. Disaurde is a browser-based realtime filter processor. It allows to create…
• web demo3D slader 3D slader glsl · shader · slader · webgl
• Striatum Script-based real time shader processor for camera. Striatum is the next version of Disaurde, it allows to create complex and customizable…
• meniscus Type that floats. A word sits in a live pool of water: the water climbs each letter's edge, the floor takes its shadow, and when the word…
• 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…
• 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…
• motionforge An open-source laboratory and developer workbench for extraordinary web animations. Explore advanced motion. Customize every detail. Export…
• asciipaper Live, interactive ASCII wallpapers for Windows, Linux, macOS and Android. One click turns any wallpaper into one of 38 styles: LEGO bricks…
• 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…
• shaderup shaderup is a minimal library for rendering GLSL fragment shaders on a canvas. It handles the WebGL boilerplate, so you can focus on…
• Sky Shader Interactive procedurally generated sun and skies. Run it in your browser. This extends code from my Ludum Dare 33 entry, Otherworldly…
• demolishedWebGPU demolishedWebGPU is a shader rendering engine based on WebGPU. WebGPU is a new web API that exposes modern computer graphics capabilities…
• web demo3D Tetris 3D Tetris WebGL project for Computer Graphics Course
• 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…
• 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…
• programmatic patterns A collection of generative HTML backgrounds. Each file is fully self-contained — no build step, no dependencies. Download and open in any…
• crt shader Multi-pass CRT rendering for WebGL 2, with image, React, Three.js and pmndrs adapters. The pipeline applies signal filtering…
• sk graphics High-performance digital architecture studio specializing in interactive spatial web environments, custom GLSL shader engines, and…
• blazing energy showcase An experimental, cinematic 3D product experience built with JavaScript and Three.js. The project explores real-time WebGL product…
• 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…