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.

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

• stille A fully animated one-page website I designed and built to pitch my web design work to local businesses: proof that a small business site…
• 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…
• ethanbchen.com Static personal homepage built with Vite, TypeScript, CSS, and Three.js. Project context and source evidence live in research/…
• p5.penplotter You sketch in p5.js the way you always do. Write plot.line() instead of line() and the same line is drawn on the canvas and remembered in…
• timberhall studio A responsive, single-file portfolio for a fictional digital studio. It opens with a real-time Three.js 3D timber lobby, then continues into…
• audio particle dancer Audio-reactive 3D particle character for the browser. The project combines a Three.js rigged dancer with a persistent particle surface…
• vernier gl Interactive design grid — a snapping, measuring WebGL backdrop. An infinite 8px grid that reveals itself around your pointer. A crosshair…
• openworld js A 40kb+ webgl library, with concise code and extensive world sandbox! World engine prioritizes first-person view!The world is your…
• 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…
• saarth site My personal website. Interactive 3D particles (Three.js), scroll animations (GSAP), and a tabla you can actually play. Open the link it…
• 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…
• threejs ocean simulator An interactive ocean simulator and editor built with Three.js. Shape waves, change the water and lighting, push the surface, drop buoys…
• webnix particles A cinematic browser experiment where typography, particles, motion and pointer interaction become one interface. WEBNIX is a visual…
• ab9d portfolio 3D particle-morph portfolio for Md. Manzurul Islam (AB9D). Pure static site — no build step, no framework. Three.js is vendored locally…
• GESTURE FX Frame a shot with your hands. The picture inside becomes a cartoon. Hand gestures detected on the frame they occur, composited into the…
• liminal AI creative coding studio for p5.js, GLSL, Three.js, music, video, and model-agnostic generative art workflows.
• N0 filtr A studio site for a studio of one. Design and engineering for founders who ship — twelve real projects, six services, and a footer you can…
• 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…
• alevoldon lab Interactive 3D lab of Vladimir Rybalsky — creative technologist at the intersection of AI agents, WebGL, and generative audio. A portfolio…
• Galaxy Quest Cinematic Engine A broadcast-standard, state-driven cinematic workspace built entirely in vanilla web technologies. This project proves that the modern…
• Qiuner.github.io An immersive personal portfolio built with Astro and Three.js. The same projects, experiences, and ideas are reinterpreted as a cosmic…
• syzygy A small world you roll a marble around, in the browser. A syzygy is three bodies on one line. There are three here — the planet under your…
• threejs react soft configurator A real-time, photorealistic 3D product configurator running entirely in the browser. Built with React 18, TypeScript, Three.js and GSAP…
• allanhert portfolio Personal site of Allan Hert, founder of Hertwave. Two things live here: a selected-work portfolio, and a Lab of interactive WebGL…
• textmode.js textmode.js is a free, lightweight, and framework-agnostic creative-coding library for real‑time ASCII and textmode graphics in the…
• 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…
• FLYFWEB FLYF® · 创意开发者 —— 这是我的个人主页，一个用 WebGL 做的交互作品集。 窄屏设备会把粒子数降到 26,000，用来换取更稳的帧率。
• personal website 一个纯手搓的个人网站。门厅是 2D 的，推门进去是一间 Three.js 手写的 3D 书房，屋里每件东西都能点；首页还藏着一支 30 秒的代码生成短片。 没有一个剪辑软件参与：画面是一个 HTML 文件里逐帧算出来的，音轨是 Web Audio 合成的。…
• quantum neural ar Real-time 3D neural network controlled entirely by hand gestures : no backend, no install, runs in the browser. A browser-based…
• iris camera lab A browser workbench for turning static 3D assets into interactive objects. Explore three assemblies, import your own GLB, define part…
• Blotter A JavaScript API for drawing unconventional text effects on the web. When applying effects to text on the web, designers have traditionally…
• Magic Camera Magic Camera is an in-browser invisibility cloak experiment powered by real-time computer vision. It records an empty reference view of…
• p5 toolkit Creative-coding utilities for p5.js, organized as an npm-workspaces monorepo. Each package lives here under its own name and evolves…
• line engine Engraved line patterns: superformulas, rosettes, waves and Lissajous, in motion Open Line Engine · Run it · More tools The engraved line of…
• motion pad One pad for the character of motion Open Motion Pad · Run it · More tools Easing as a place on a square instead of a dropdown. Each corner…
• halftone cloud Images rebuilt as a halftone of flying shapes Open Halftone Cloud · Run it · More tools Drop an image and it turns into a cloud of small…
• logomachine Seeded generative marks: one seed, one pattern, always Open Logomachine · Run it · More tools A machine for marks. Every seed is a pattern…
• motion primer Bodies with behaviors: swarm, pack, magnet, orbit, fall, scatter Open Motion Primer · Run it · More tools A primer of motion. Six…
• WebToe A web-native, node-based dataflow engine for real-time visuals — patch operators together in the browser, TouchDesigner-style, and open…
• Marways7 用 AI 写代码，也用代码探索 AI。 我喜欢把具体的问题拆开，把零散的灵感接上，做成能够被尝试、被改进的东西。 我的好奇心常常沿着三条路线出发：从信号里发现规律，从阅读中打开理解，让 AI 走向实际的工具与交互。 这里记录我的开源实验，也为下一个「能不能」留着位置。 ECG…
• tech glossary hub antigravity An interactive 2D physics-based showcase representing the multi-framework evolution of the Tech Glossary Hub ecosystem. Live Demo • Explore…
• 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…
• unicorn preview A click-around HTML preview of Unicorn, a desktop app that sits beside your terminal, keeping the story of what you and your agents build…
• b5 **b5 is for graphics, fast prototyping, and fun. Using blocks and wires, non-programmers can quickly build and share\* creative coding…
• oneocean elements free Animated backgrounds, UI pieces and shaded 3D icons in plain JavaScript. No React, no build step, zero dependencies. Every animated…
• magic tracked MagicTracked é uma aplicação web interativa para processamento visual e renderização de efeitos refrativos em tempo real. O sistema utiliza…
• LIQUID GLASS Figma's Liquid Glass effect, rebuilt as a real-time WebGL2 renderer. Design the glass in the browser, then export a config you can paste…
• cargo A workshop of small tools for designers and design engineers. Free, forever. Built one Saturday at a time. No accounts, no tracking, no…
• luminoveau Luminoveau is a C++ library designed to simplify game development and creative programming. Luminoveau provides a set of tools and…
• Galiyaara A photography portfolio you walk through instead of scroll. Galiyaara means corridor. So the site is one — a moonlit stone arcade rendered…
• teaching p5js 给老师：可以查看学生作品、分发模板、管理班级。 给学生：打开浏览器就能写 p5.js，不用配置环境。 给机构/学校：可私有部署，数据自己掌握。 给创意编程社区：比单机编辑器更适合教学组织。 用户注册与登录：基于 JWT…
• portfolio A single-page, scroll-driven portfolio. One particle field of 160,000 points takes a different form for each section of the page, so a…
• ASCIIGround A TypeScript library for creating animated ASCII canvas backgrounds. Creates smooth, organic-looking patterns like clouds, terrain or…
• GSS Style sheets for the GPU. Selectors, the cascade and @keyframes, compiled into a single raymarching shader. Website · Playground ·…
• design database Interaction, motion and material studies for the web. Small, self-contained components with live demos, documented props, and notes on how…
• 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…
• alive web A Claude skill for building immersive, award-grade websites that feel alive instead of static. On top of those rules, the skill carries art…
• pixel stretch Drag to stretch. Break the image. A glitch tool that runs entirely in your browser. → Open the tool — no install, no sign-up. A…
• genjutsu Claude Code skills that make an interface move, give a product its look, and build a whole website. genjutsu.athevon.dev, built with…
• xvviix portfolio A single-page, scroll-driven WebGL journey in black & gold. No templates, no page builders, no CSS fakes — every letter, particle and…
• fluid Dependency-free WebGL studio for generating backgrounds, wallpapers, Open Graph images, and live embeddable canvases. One HTML file. No…
• arcadelab The shortest path from "I made a game" to "my friends can play it." ArcadeLab is a platform where kids publish and play browser-based…
• every frame is code Every frame is code is a special tool that lets you describe what you want to see—a spinning logo, a bouncing ball, a colorful particle…
• ditherwave A tiny WebGL2 dithering primitive for React. Wrap any image, video, or canvas in — or drop in for an animated grainy background. Bayer…
• maharajahul design From a brief to an interface worth experiencing. A portable design skill for coding agents. Maharajahul Design connects art direction…
• photo studio A fresh perspective on a familiar image editor. A modern Python desktop workspace with 24 effects, before/after comparison, foreground…
• xerox collage editor Custom canvas size (presets or width/height inputs), shared across every sheet in the carousel. Photo cutouts with two modes: jagged…
• racing helmet motion 为真实人像制作有电影感的赛车头盔显影，并把完整方法封装成 Agent Skill 截取自 Archer 的线上实现——进入网站并移动鼠标可以看到完整交互 Racing Helmet Motion 教 Agent…
• pixel2motion Better commercial Pixel2Motion services are coming online: polished logo-to-motion workflows, project-ready previews, and production…
• sketchy snake vr An immersive 3D spatial sketchbook snake game built in WebXR with Three.js for Meta Quest, Apple Vision Pro, and web browsers. 3D Spatial…
• afterglow You don't move a character — you leave light on. A novel, endless HTML5 light-painting game. Hold the shutter open and steer glowing lights…
• interactive 3d product showcase An interactive 3D technical showcase demonstrating real-time web graphics, engineering systems, and product storytelling. A scroll-driven…