Design Atlas

← Atlas

3D and shaders ​

GPU effects for the web: shader libraries and registries, WebGL and WebGPU playgrounds, 3D scene templates and the references that explain how shaders work.

Start here ​

  • Paper Shaders — 30 zero-dependency WebGL2 canvas shaders for React or vanilla JS, Apache-2.0, with every prop and range listed in llms.txt.
  • Canvas UI — 35 GPU effects that run over live, clickable HTML, in WebGL or WebGPU, for six frameworks through a shadcn registry.
  • Orbkit — 33 state-driven WebGL orbs with some of the best agent documentation in the atlas, including a JSON API of allowed parameters.
  • The Book of Shaders — the classic step-by-step guide to fragment shaders, for understanding what the libraries' props actually do.
  • Shaderfrog — a graph editor for custom materials on lit 3D objects in Three.js, Babylon.js and PlayCanvas.

All sources ​

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • 100,000 StarsInteractive Chrome Experiment that turns nearby stellar data into a navigable, cinematic star map.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • 23rd14 showpiece shader, ASCII and footer components for React and Svelte 5 via the shadcn CLI, with an agent skill; no licence file.Verdict NicheLook only licence, not statedAgent channels llms-txt, registry, skillReviewed
  • A-FrameAn HTML-first framework for interactive WebXR scenes, with live 3D examples and a visual inspector.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Aave Design & EngineeringAave Labs’ engineering article pairs live glass-effect controls with a cross-browser SVG displacement and WebGL implementation.Verdict NicheConditional licence, proprietary freeAgent channels noneReviewed
  • Abstract by WannathisA pack of sculptural abstract 3D objects in fuzzy, metallic, glass, and gradient finishes for expressive hero art and backgrounds.Verdict NicheConditional licence, proprietary paidAgent channels noneReviewed
  • Active TheoryA creative studio portfolio built around a dark, animated particle scene and a compact route into its project work.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Atelier UIAn interactive library of shader and motion components with a live preview, adjustable controls and copyable implementation prompts.Verdict UsefulConditional licence, mixedAgent channels llms-txt, cli, promptsReviewed
  • Backgrounds SupplyPaid lifetime library of gradient, AI and animated hero backgrounds, plus a free Gradient Lab shader tool.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txtReviewed
  • BlenderFree GPL 3D suite for making and baking web assets, with glTF export and an official MCP server.Verdict Very usefulConditional licence, open source copyleftAgent channels mcpReviewed
  • Bruno SimonA playable 3D portfolio that turns project discovery into driving through a stylized low-poly world.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Canvas UI35 GPU effects over live, clickable HTML in WebGL or WebGPU, for six frameworks through a shadcn registry.Verdict Very usefulConditional licence, source availableAgent channels llms-txt, registryReviewed
  • Canvas UI Qwen DemoAn interactive Canvas UI showcase that previews shader effects over live HTML and keeps its controls and install snippets beside each example.Verdict UsefulConditional licence, source availableAgent channels registryReviewed
  • Chrome ExperimentsGoogle's archive of creative browser experiments, with WebGL, sound and motion collections linked to their live demos.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • CodropsCreative web demos, interaction tutorials and a handpicked site exhibition for expressive frontend design.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Componentry53 animated React effects, from text and WebGL hero backgrounds to image effects, installed through the shadcn CLI.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, registryReviewed
  • compute.toysBrowser playground for WebGPU compute shaders in WGSL or Slang: simulations, particles and path tracers to fork.Verdict NicheConditional licence, mixedAgent channels noneReviewed
  • Design DNATurns references into a three-part JSON profile (tokens, style, WebGL effects), with measured colours and a ΔE verify loop.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • Design Engineer ToolsOne-page list of about 128 apps and sites a web design engineer uses, from galleries and component kits to 3D, capture and motion tools.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Drei133 MIT helpers for React Three Fiber (staging, loaders, controls, materials), with llms.txt and a docs MCP.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, llms-txtReviewed
  • EfectoBrowser canvas your agent drives through MCP tools, plus an FX engine for dither, ASCII and halftone posters.Verdict UsefulConditional licence, mixedAgent channels mcp, llms-txt, api, skillReviewed
  • framecnEditframe video scenes, captions, transitions and WebGL shader backdrops; Editframe itself is licensed by headcount.Verdict NicheConditional licence, mixedAgent channels llms-txt, registry, api, skillReviewed
  • GetLayersPaid library of WebGL scenes, gradients and cinematic templates, each copied as one prompt; MCP needs the top tier.Verdict UsefulConditional licence, proprietary paidAgent channels mcp, llms-txt, prompts, skillReviewed
  • glass-lens-reactA React glass-surface demo showing how refractive controls behave over video, images, gradients and interface elements.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • glimmWebGL colour-band page transitions for React/Next.js, with a copyable agent prompt.Verdict NicheShip licence, open source permissiveAgent channels promptsReviewed
  • gltf.reportDrop in a GLB to inspect, validate, script and Draco/Meshopt-compress it locally, built on glTF Transform.Verdict UsefulConditional licence, mixedAgent channels cliReviewed
  • HexGLA WebGL racing game whose landing page frames a playable 3D experience with a futuristic visual theme.Verdict NicheShip licence, open source permissiveAgent channels noneReviewed
  • Interact GalleryScreenshot-backed reviews of browser 3D configurators, virtual tours and interactive product experiences, sortable by UX and performance.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • LafysPaid library of long website prompts for Claude, Lovable and v0, each with a video of the result; conflicting licence terms.Verdict NicheConditional licence, proprietary paidAgent channels llms-txt, promptsReviewed
  • Light RailsInteractive editor for shaping animated light patterns with geometry, colour and timing controls, then exporting the result.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • LightswindHuge flashy 3D/WebGL and liquid-glass library with its own CLI, MCP server and llms-full.txt.Verdict UsefulConditional licence, mixedAgent channels mcp, llms-txt, cli, registryReviewed
  • Liquid Glass Playground by PallavA long-form playground that maps liquid-glass presets, parameters and interface uses into a browsable visual lab.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Liquid Glass Web ReactA detailed playground for draggable refractive lenses, with live controls for shape, light, colour fringing and motion.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Liquid Orb EditorLive WebGPU editor for liquid-glass orbs, with shareable parameter links and Web or SwiftUI/Metal code export.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Loader Buttons25 experimental loading-state buttons in WebGL, SVG, Canvas and CSS; no licence published.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • LusionA creative studio portfolio with sculptural 3D scenes, restrained typography and immersive project storytelling.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • mesh3dA hand-picked gallery of interactive Three.js and WebGL sites, with separate experiment and maker directories.Verdict Very usefulLook only licence, not statedAgent channels noneReviewed
  • MetalForgeGallery and live editor for shader animations, with SwiftUI, React Native and web outputs and an MCP beta.Verdict UsefulConditional licence, proprietary paidAgent channels mcpReviewed
  • NextWell LabA portfolio lab of browser experiments with deep-linked 3D, interaction, game, clock and Pomodoro scenes.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Orbkit33 state-driven WebGL orbs for voice and chat agents, with llms.txt, a skill, a JSON API and a shadcn install.Verdict UsefulConditional licence, mixedAgent channels llms-txt, registry, api, skillReviewed
  • OriginKitAn interactive component catalogue for shader, cursor, animation and other high-impact web effects, with live parameter controls.Verdict UsefulConditional licence, source availableAgent channels mcpReviewed
  • Paper Shaders30 zero-dependency WebGL2 canvas shaders for React or vanilla JS, Apache-2.0, with a full prop reference in llms.txt.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • PlayCanvasA WebGL and WebGPU engine whose Explore catalog links to live games, product configurators and real-time graphics demos.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • PointilliserTwo browser tools turn text or images into neo-pointillist graphics made from clustered circles or 3D spheres.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Poly HavenAbout 2,400 CC0 HDRIs, PBR textures and models made by people, with a keyless API that asks for credit.Verdict Very usefulShip licence, public domainAgent channels llms-txt, apiReviewed
  • React BitsLarge catalogue of animated React components and WebGL backgrounds (GSAP, three.js, Framer Motion) with an llms.txt index.Verdict Very usefulConditional licence, mixedAgent channels llms-txtReviewed
  • React Three FiberMIT React renderer that writes three.js scenes as JSX, with performance guides, llms-full.txt and a docs MCP.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, llms-txtReviewed
  • Reverse UI68 animated React feature illustrations and shader effects for SaaS pages; 19 free, the rest a one-time paid licence. MUI and Emotion.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • shadercnWebGPU ports of the Orbkit orbs in shadcn registry format; the orb files are non-commercial despite the MIT repo.Verdict NicheConditional licence, mixedAgent channels llms-txt, registry, api, skillReviewed
  • ShaderfrogGraph editor that splices GLSL shaders into Three.js, Babylon and PlayCanvas materials, with a community gallery.Verdict NicheConditional licence, mixedAgent channels noneReviewed
  • ShadertoyCommunity gallery of live GLSL scenes with an in-browser shader editor and a documented API for public examples.Verdict UsefulConditional licence, mixedAgent channels apiReviewed
  • ShapefestA consistent 3D illustration system for studying and using floating, isometric, clay, glass, plastic, and metal forms.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • SketchfabInteractive 3D model gallery with orbitable browser previews, model annotations and filters for visual reference.Verdict UsefulConditional licence, mixedAgent channels apiReviewed
  • SpheriumA WebGL globe editor for styling world maps as dot fields and exporting the result as SVG.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • SplineBrowser and desktop 3D tool with an event system, code and glTF export, and an MCP server in the desktop app.Verdict Very usefulConditional licence, proprietary paidAgent channels mcp, llms-txtReviewed
  • The Book of ShadersClassic step-by-step guide to fragment shaders with editable live examples; learning only, all rights reserved.Verdict Very usefulConditional licence, proprietary freeAgent channels noneReviewed
  • Theatre.js (stale)In-browser keyframe editor for THREE.js and R3F scenes; Apache core, AGPL studio, stalled since 2024.Verdict NicheStaleConditional licence, mixedAgent channels noneReviewed
  • Three.jsThe default MIT WebGL/WebGPU library: 607 examples, an editor, TSL, and an llms.txt with rules for code generators.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • ui.cameraPuts UI screenshots in a 3D scene for angled 4K stills and camera-move videos; commercial use needs Pro.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Unicorn StudioA visual shader editor with a gallery of animated, interactive graphics that can be embedded on websites.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Unseen StudioStudio portfolio with a pastel 3D world, expressive serif and sans typography, and a filtered project grid.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • vgpuA composable WebGPU library with live shader examples, versioned docs, CLI discovery and agent resources.Verdict UsefulShip licence, open source permissiveAgent channels mcp, llms-txt, cli, skillReviewed
  • wwwtf.siteA young gallery of 25 weird, WebGL-heavy experimental websites from the curator of Sections.wtf.Verdict NicheLook only licence, not statedAgent channels noneReviewed

Patterns worth reusing ​

  • Give every effect the same framing props (speed, scale, rotation, fit) so layouts never need per-shader positioning code (Paper Shaders).
  • Turn any animated effect into a deterministic still with speed={0} and a fixed frame, for reduced motion, print or email (Paper Shaders); seed random effects so video renders come out identical (framecn).
  • Cap total pixel count as well as DPR so full-bleed shaders stay affordable on 4K screens, and stop rendering off-screen (Paper Shaders, Orbkit, shadercn).
  • Treat live DOM as a texture so an effect stays interactive, and fall back to plain HTML rather than an error or a blank area when the API is missing (Canvas UI).
  • Ship each effect in two renderers behind the same API, so the WebGL-or-WebGPU choice can wait (Canvas UI).
  • Publish one machine-readable table of every prop and its range, so agents use only real parameters (Paper Shaders' llms.txt, Orbkit's JSON API).
  • Compose effects into the host engine's material instead of forking its lighting code (Shaderfrog).
  • Run simulation in compute passes and keep drawing as a separate, cheap final pass (compute.toys).
  • Keep full-screen shader transitions for moments worth mentioning in a changelog, and swap the route while the band covers the screen (glimm).
  • Let people tune a shader live and copy its current state, so the handoff carries the exact values (GetLayers).
  • Learn effects as a chain of small functions (shape, repeat, distort, colour), then describe the technique to the agent in your own words (The Book of Shaders).

Pitfalls ​

  • Licences are the main trap. Orbkit's XorDev ports and every shadercn orb are non-commercial; The Book of Shaders forbids using its code in any project; Canvas UI's Commons Clause bars reselling the components; compute.toys shaders have no licence field; some Shaderfrog nodes include CC BY-NC-SA code.
  • Every mounted shader is its own GPU context, and browsers cap WebGL contexts at around 16 per page (Orbkit); stop off-screen effects or use static frames.
  • Browser support varies: WebGPU builds need Chrome or Edge 113+, Safari 26+ or Firefox 141+, and html-in-canvas effects only fully work in Chrome behind a flag or an origin trial whose token covers only canvasui.dev (Canvas UI). shadercn documents no fallback, so add a static image or CSS gradient.
  • Reduced motion is often left to you: Paper Shaders doesn't document it, so set speed to 0 yourself; glimm gives reduced-motion users no animation at all.
  • Young packages break often: Paper Shaders is on 0.0.x and ships breaking changes in patch versions, and glimm reworked its visuals across 0.2 and 0.3. Pin exact versions.
  • Heavy WebGL and compute cost battery and frame rate; ask for a static fallback on mobile (GetLayers), and expect big simulations to freeze weaker GPUs (compute.toys).
  • A prompt describes an effect, it doesn't reproduce it: GetLayers' rebuild differs from the preview unless you download the source, which needs a paid tier.
  • Shader components render nothing on the server; reserve their space to avoid layout shift (Orbkit). Full-page distortion can hurt readability and focus visibility (Canvas UI).