Shaders & WebGPU

Shader and WebGPU demos: raymarched scenes, glass UI, SDF toys. Handy when you are picking materials or hero motion.

Submit a project

9 projects

Back to Playground

Frequently asked questions

What WebGPU and shader demos are in this collection?

9 projects in Shaders & WebGPU: Raymarched scenes, glass and liquid materials, SDF toys, and WebGPU experiments from independent builders. Each entry links to a live demo, preview, and often source you can fork.

How do I use shader references when building AI product UI?

Pick a demo close to your hero or loading state. Open the live URL, screenshot the motion you want, or paste the project link into a coding agent brief. Pair with Patterns for trust and loading UX conventions.

How is this lane different from the full Playground hub?

This page filters to shader and WebGPU work only. The hub mixes motion, tools, components, Framer, and portfolios. Use this lane when material, GPU, or glass UI is the brief.

Who are these shader demos for?

Design engineers, creative developers, and designers shipping AI copilots or generative UI who need concrete GPU references instead of static moodboards.