Creative coding demos you can play with right now

Hundreds of creative coding 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.

Creative coding is writing software to make something you look at or play with, not something you file a ticket about: sketches, toys, visual experiments, weird little instruments. This is the biggest stop on the map, and the one most likely to make you say "wait, how does that work?" before you hit next.

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

• fog mirror Blow on your screen to fog it up, then write on it — just like a steamy bathroom mirror, powered by your breath and your hands. Everyone…▶ 3 plays this week · 🔥 2 · 😂 2 · 🤯 1
• pamun ripple tank 물방울을 떨어뜨리면 물결이 퍼지고, 울림돌에 닿을 때마다 소리가 나요. 멀리 있는 돌일수록 늦게 울립니다. 거리가 박자, 높이가 음정입니다. **▶ 바로 열기: · English 설치 없이 링크 하나로 PC와 폰 브라우저에서 바로 됩니다. 만든…
• el mosco A cute-brutal interactive story. Kawaii pastel visuals as a Trojan horse for the abyss. You advance by completing challenges — each one…
• say hello to a black hole A real-time, browser-rendered Schwarzschild black hole simulation built with Three.js and custom GLSL shaders. Feed it with your microphone…▶ 3 plays this week
• wave arena studio **Give it a song. It reads the whole track, decides what that song is, and performs it as a body of water.** There is also ENTER DEMO — an…
• INFINIGEN Explorer Generate. Explore. Customize. Replace. Export. Build. INFINIGEN Explorer is an experimental browser-based world-generation toolkit built…▶ 10+ plays this week · 😂 3 · 🤯 1 🏆 #2 most played this week
• morphogen A studio of generative and artificial-life systems, in one page. Seedable. Tunable. Shareable. No build step, no dependencies, no network…
• yako A single-page cinematic WebGL experience: a five-chapter night descent through Rokujō Ward, a rain-lit megacity that only exists at…▶ 3 plays this week
• playground Every door here has its own key. Wander in. Five small worlds, each grown from its own soil — a fidget garden, a deck that won't sit still…
• veoures An unfamiliar life drifting alone in the dark. Watch long enough and it changes: limbs unfurl, skin contracts, new branches grow and old…
• Magic Mouse Movements Complete, accessible cursor effect kits for product stories, portfolios, data reveals, guided navigation, and experimental websites. Try…
• web demosublevel studio sublevel studio A single-file Three.js studio concept built around an interactive Kyoto lobby, playable objects, and an editorial portfolio. View the live…
• crt screen Wrap anything in a CRT. Aperture grille, scanlines, vignette, mains flicker — and the content underneath stays live. That selection being…
• murph tesseract A walk through the Tesseract from Interstellar — where time is no longer a line you fall down, but a room you can step inside, and a book…Vibe-coded
• szopka A Kraków folk-art tradition, built in code. An interactive 3D szopka krakowska floating in space: foil-bright towers, a dragon in his cave…
• rain on glass An interactive rainy window at night. Wipe the fogged glass with your hand, watch the city come into focus, and wait for it to steam back…Vibe-coded
• proce55us The project's homepage: (web editor: ) The app itself lives in the ECAL_MID_1_2027 monorepo (Tools/AgentCodingWithLMStudio/ for the web…
• bicycle day ▶ Try it now: — nothing to install; runs in your browser. A generative, psychedelic animation built from your images: a WebGL2 shader…
• generative art pieceinteresting x phase portrait interesting x phase portrait A 2x2 matrix turns every point into an arrow and the beads follow. Slide one puck across a map of just two numbers, the trace and the…
• CHROMA3D A Paint 3D-style 3D painting studio that runs in your browser — draw with neon, drop emoji stickers, spin and scale your art like scene…
• fractal terrain Then open . Any static server works. Shareable links carry the scene state in the URL, e.g. ?algo=ridged&seed=42&land=0: ui=0 hides the…
• interesting x maze nca No tile can see the whole maze. Each one only checks the four tiles touching it and says: I am one step further than my closest neighbour…
• nanobit Interactive 3D particle dust & optical depth gallery powered by WebGL2 and monocular neural depth estimation. nanobit transforms classical…
• steppe wind Ветер над степью, которого никто не просил. Однажды вечером человек открыл Claude на своём компьютере и написал: «Я не даю тебе никакой…Vibe-coded
• mkfuel Real-Time Interactive Navier-Stokes WebGL Fluid Physics Simulation. High-performance creative coding experience featuring real-time dye…
• htmlincanvas demo A live catalog of Canvas UI — 33 shader effects running over one real, interactive HTML page. Canvas UI is a genuinely impressive library…
• mkparticles Real-time, high-density WebGL point cloud with custom GPU GLSL turbulence shaders and post-processing. Built with Next.js 15, React Three…
• pro threads An animated, real-time WebGL wallpaper: letters made of thousands of fine threads of light that bend, flare and glow — inspired by the look…
• Bulleye Bully Bash A bull-themed Canvas arcade experiment with collision effects, score tracking, and a defense meter. Open the demo · Browse the code Click…
• interesting x euler formula e to the i pi = -1 sounds like magic. Start at 1 and repeat one tiny move, turn a little and stretch a little. The stretch dies away, the…
• generative art piecesakura sky island sakura sky island 一个纯程序化生成的「樱花空岛」3D 场景，单文件网页，用 Three.js 从零建模——没有任何外部模型、贴图或音效素材，所有几何体、贴图、云层、星空、月面都是在运行时算出来的。 A procedurally generated floating sakura island…
• camellia bloom 在线预览 → （HTTPS，摄像头可用；桌面 Chrome / Edge 体验最佳） 一握手，花收成一枚苞；一张开手掌，白山茶便一层一层散开，跟着手走，指尖还能轻轻拨动花瓣。 Three.js 粒子 + MediaPipe Hands 21 关键点 + 自定义 GLSL，纯原生…
• afterlight An interactive cinematic WebGL experience. Six scenes, one WebGL context, no downloaded assets. You arrive at a point of light in total…
• neon rain district An interactive, fully procedural 3D rainy neon city block for the browser. A single square city block — 152 × 152 units — suspended in a…
• doodle snakes and ladders One notebook-inspired board. Eight character designs. Snakes, ladders, silly surprises, and a little browser magic. 🎮 Play the game · 💻…
• glass archive A cinematic, scroll-driven 3D architectural portfolio and interactive monograph blending Japanese aesthetics, custom WebGL/Three.js…
• pure smoke Particle smoke in a glass cube. Free and open source under the MIT licence, made with three.js. Most smoke on the web is a video. This one…
• babeltro How do you make a plasma in Perl? A tunnel in SQL? A fire in raw WebAssembly? Nine classic demoscene effects — starfield, tunnel, plasma…
• gradient flow background 本项目作者完全不懂开发，所有代码、功能都是 AI 写的，包括这份说明文档。如果有低级错误，请见谅。 一个网页工具：做出会缓慢流动的彩色渐变背景。纯 WebGL 实时渲染，零依赖、离线可用、不用安装任何东西。 配色来自 10 套预设 + 色带上 12…
• interesting x gaussian integral No ordinary formula gives the bell curve's area. So build a 3D bell hill and weigh it twice: cut into slabs it holds area x area, peeled…
• One HTML Design Canvas 2D, CSS and vanilla JavaScript only. Lumen traces its rays in JavaScript; Proof magnifies a real DOM copy of the article and draws…
• aether moth 蒸汽朋克天文钟观测厅中的互动机械飞蛾。黄铜骨架、琥珀云母翼膜、巨型星象钟盘与实时振翅遥测。 在线预览 · Three.js · WebGL 以太飞蛾：程序化黄铜骨架、复眼、绒毛、云母翼膜与鳞片纹理，带有非对称振翅相位、二次谐波与惯性俯仰。…
• threejs timeline 用 Three.js r186 + TSL 做的可配置 3D 时间轴：一年一根毛玻璃立柱，沿时间轴排开，两端退进紫雾里。 年份范围、标题、色带都集中在配置里，默认附带一份 Web 发展史示例数据。支持 WebGPU，浏览器不支持时自动退回 WebGL2。…
• VisualEffects A curated set of interactive visual effects extracted from 51yifei — each one is a single self-contained file with no build step and no…
• playground A small light for every season. Interactive 3D experiments for the web, built with Three.js and React Three Fiber. A new one switches on…
• interesting x spec decoding A fast little model guesses the next word, a big one judges, and marbles pile up in glass tubes. Keep each guess with chance big ÷ small…
• Raycaster Simple raycaster made in p5js
• generative art pieceHoloPalm HoloPalm HoloPalm is a web-based augmented reality experiment that visualizes your hands as dynamic particle systems in real time using your device…
• generative art gallery An interactive gallery of generative art algorithms, drawn in real time in your browser with p5.js. Flow fields, fractals, cellular…
• orbit pop Kısa molalar için tasarlanmış, tek dokunuşla oynanan modern bir neon arcade oyunu. Orbit Pop, merkezdeki çekirdeğin rengiyle eşleşen…
• particle system three.js ��# <� � P a r t i c l e U n i v e r s e A n i n t e r a c t i v e 3 D g a l a x y b u i l t w i t h T h r e e . j s , f e a t u r i n g t…
• Nebula Partículas magnéticas interactivas con enlaces neón galácticos. Una experiencia web visual donde cientos de partículas cobran vida…
• magic particle fingers An interactive web experience using AI hand tracking to control magic particles and romantic shapes. (توضیحات فارسی در پایین صفحه) 👉 Click…
• neon text A neon sign that assembles, strikes and burns - built from a particle field. ▶ Live playground · type any text, six animations, any Google…
• sonic universe 进入在线体验 · 完整使用说明 · 有声黑洞示例 作品没有构建步骤、运行时依赖或后端服务。克隆或下载仓库后，Windows 用户安装 Python 3，双击 打开声波宇宙.cmd。启动器会独立运行本机预览服务，地址是 ` 随后打开 ` HTTP 或 HTTPS…
• interesting x s to z Watch the map of a ringing spring roll up into a computer's map through one formula, z = e^(sT). Drag the spring's motion past the glowing…
• pelican velo A real-time 3D seaside daydream. 一只鹈鹕，一辆单车，一整片正在退潮的海。 → Ride the live experience A single-page, fully procedural WebGL experience. A…
• toaster Toaster hears whatever is playing on your PC (Spotify, YouTube, anything) and writes it out as live Strudel code in front of you: named…
• the realm of yaniv ron Welcome to The Realm of Yaniv Ron, an interactive creative engineering showcase combining custom 60fps HTML5 3D projection, polyphonic Web…
• ascii raptors Birds of prey built from articulated geometry, animated procedurally, and drawn with real ASCII characters on Canvas 2D. TypeScript, no…
• aurora night Aurora Night is a quiet, one-page 3D web experience. A visitor enters an open landscape at night and sees a solitary seated woman from…
• interesting x screw motion Move a robot hand to any target and watch it corkscrew around one glowing axis: every rigid move is a single screw. Try averaging the raw…
• neon arena You don't aim. You position. Your cannons lock on automatically — survival is entirely about where you stand. A gunship. A circular neon…
• ai vs human shorts The animated YouTube Shorts from @code-pulse-ai, with every frame drawn by plain JavaScript on an HTML . There are no video files, no image…
• generative art pieceafterglow afterglow Those fleeting encounters,\ those brief, beautiful moments— Could they have planted\ seeds that quietly take root\ and live on within our…
• interesting x stress tensor Pull a clear plate with a hole and watch rainbow stress bands bloom. Drag a glass probe to read the stress tensor anywhere, turn a cut to…
• Blink A minimal grid sequencer for creating light patterns. Paint frames, chain them into loops, watch them animate. Click or drag on the grid to…
• interesting x sphere jacobian Drag a square of map coordinates and watch the real chunk of a glass ball it covers: fat at the equator, a sliver at the pole. Three brass…
• Valentine Day Gift 🎆 Particle Fluid Dynamics: Thousands of reactive particles forming interactive kinetic hearts on cursor movement. 💌 Personalized Secret…
• Cosmic Genesis 🪐 N-Body Gravitational Physics: Compute and render orbital trajectories of planets, moons, and asteroids in real time. ☀️ Shader-Driven…
• particle collage 把一张主图变成由成千上万张小照片组成的粒子拼贴：每颗粒子换成一张素材图，主图的明暗决定每张方块的亮度；镜头可以从照片云里飞入、拼成完整图像；支持 4K、竖屏、透明 PNG 的逐帧导出。 关于作者：阿飞这个名字挺好的（AfeiIsFine）。…
• code galaxy 把你的 GitHub 提交记录变成一片星空 —— 每个仓库是一条旋臂，深夜提交偏蓝、白天偏暖，高产的日子更亮。 🚀 在线体验 · 输入任意 GitHub 用户名即可，无需登录。 🎬 宇宙诞生动画：星星按时间顺序从最古老的年代逐颗点亮，向银心汇聚成河。 ⏳…
• seoul rain 비가 막 그친 새벽 5시의 서울 골목. 간판 불빛이 물웅덩이마다 부서져 흐르고, 지하철 환기구에서 익은 김 한 줌이 피어오릅니다. Three.js 한 파일로 그린 실시간 장면입니다. Three.js r160을 CDN에서 불러옵니다. 첫 실행에는…
• like share smash The world's first riot simulator where the real damage is to your future. Play it free in your browser: davidemorotti.com/4 You are a…
• layer type Type any three letters and get one layered 3D body. The first letter reads from the front, the second from the side, the third from above…
• trace Strange attractors drawn in sumi ink. The past day's price swing for each of the top ten cryptocurrencies bends a Lorenz attractor. Calmer…
• flux Conway's Game of Life, tinted by exchange rates. A circuit-board colony of cells that is meant to speed up when currencies move. Live demo…
• swell Ten cities' temperatures as glowing waves. One line per city, from Dubai down to Reykjavik: the warmer it is, the taller, faster and…
• grove Five cities, grown as glowing trees. Each tree's height comes from how much daylight that city gets today, and it glows while the sun is up…
• orbit A store catalogue as a gravity field. Thirty products from the DummyJSON catalogue pull on each other, and the expensive ones pull hardest…
• drift Pastel particles riding San Francisco's wind. A hundred trails cross the screen at the speed and heading of the wind over the city right…
• resonate Every quake USGS logged in the last hour lands as an expanding ring, coloured by magnitude. Live demo · How it works · Run it Live capture…
• grow A forest that replays 35 years of forest data. One second per year, 1991 to 2025: the world's net change in forest area, planted as trees…
• wisp A glowing spring network you grow by tapping. Every tap asks Open Trivia DB for one question. Its category picks the colour of the new…
• morph Five coastlines, drawn as breathing polygons. Warmer sea grows more sides; bigger waves quicken the pulse. Live demo · How it works · Run…
• flora Each country grows into a flower. Population sets the stem, land area sets the petals, and the flag colours the bloom. Live demo · How it…
• sfumato Interactive browser artwork (2026) — blurred webcam, hand-tracked words, fleeting lines of meaning. Live demo · Chrome or Arc on desktop ·…
• interesting x maxwell relations Two cylinders of gas: one measures hidden disorder the hard way, the other just warms a sealed box and reads a gauge. The two glowing bars…
• lightning generator Glowing light-ray, comet and lightning visuals, generated in your browser. Dozens of sliders, one-click randomize, export up to 16K. Free…
• island jelly A soft little tidepool island living inside a slab of jelly — a single-file Three.js diorama. A cross-section of a tidepool cut out of a…
• pelican ride 3d A pelican that actually rides a bicycle — every vertex, every animation curve and every sound generated in code. One crank angle governs…
• neon drift protocol A kinetic neon survival game built with Canvas 2D, Web Audio, and plain JavaScript—no libraries, build tools, images, or audio files…
• kinetic canvas lab Three interactive generative-art systems for curious hands, built with plain HTML, CSS, and JavaScript. Every system includes adjustable…
• little rain cloud A fox walks across the desert under a rain cloud that only rains on it. Wherever the rain lands, grass and flowers grow. Press C to pull…
• horizon A black hole drops onto a page of text and bends it, live, in ASCII. Every photon is a letter. The disk is typed by a ray tracer, the page…
• fractal portal A Python project that turns complex-number equations into high-resolution artwork. The rendered images are computed procedurally pixel by…
• hueverb A gallery of heard things. Hueverb is an interactive exhibition where sound becomes painting. Play a song, sing, clap, or hum, and every…
• interesting x boltzmann Hundreds of colliding particles relax to the Maxwell–Boltzmann distribution while the H-function drops. Inspired by a bookmark from…
• interesting x divergence Sources, sinks, and net flux — probe a 2D vector field; Mixed and Noisy reshuffle on Reseed. Built by Grok Bot with Claude Code/Opus, part…
• interesting x firefly sync Shake a glass jar of fireflies, then turn up group (higher-order) coupling and watch them snap into one flash: explosive synchronization…