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 ​

Showing 50 of 78 sites

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
  • AbetoAn interactive studio portfolio pairing a warm, illustrated botanical hero with realtime digital experiences.Verdict UsefulLook only licence, not statedAgent 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
  • Babylon.jsApache-2.0 WebGL and WebGPU engine from Microsoft, with a playground, node editors, sandbox and inspector for building 3D in the browser.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • 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
  • MessengerA browser game's illustrated tiny-planet title screen, with a single contrasting entry action and an immersive 3D scene.Verdict 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
  • model-viewerWeb component documentation for showing interactive 3D models in a page or in AR, with a quick start, examples and FAQ.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Needle EngineShips 3D scenes to the web from Unity, Blender or code, with a product-led site that shows the editor as the interface.Verdict UsefulLook only licence, not statedAgent channels llms-txtReviewed
  • 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
  • OKOK ServicesSingapore and Amsterdam studio portfolio with a black chrome hero and links to interactive client experiences.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • OpenShaderLibrary117 shader effects written once and exported for React, React Native and SwiftUI, so web and native apps share the same visuals.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txtReviewed
  • 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
  • Plasma UIReact surfaces with WebGL refraction, liquid joins and grid snapping, demonstrated through a material playground and a small workspace.Verdict NicheShip 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

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).