Install shaders and presets straight into your codebase with one command, keep them in sync with the design editor, and jump back into your project from the terminal.

A near-black end-of-page call-to-action where the brand mark is extruded into a slowly rocking 3D voxel solid right of center, ringed by motion-tracking markers and dithered down to two inks — mint on near-black — beside a left-aligned headline and two buttons.

A bright full-bleed hero for a payments platform — a lagoon-toned flowing gradient, sliced into soft vertical bars and a coarse grid whose cells slide under the cursor and settle back, under a deep-navy headline that pairs a light narrow opening line with a black extra-wide closing line.

A violet full-viewport hero where the brand mark sits oversized in the bottom-right corner, cropped by the frame — a white solid whose rim is struck by three cursor-tethered coloured lights (magenta, indigo, orange) that flood the field around it — beside a left-aligned Clash Display headline, one supporting line, and two buttons.

A tall near-black mega footer where a giant dark dodecahedron rises from the bottom edge like a planet at dawn — violet glow pooling behind it, facet edges traced in blue-to-chartreuse contour light, the whole scene bending gently around the cursor — beneath a right-aligned closing line, a brand column with a newsletter field, four link columns, and a hairline legal bar.

Explore Voxel Lamp shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Pixel Ink. Open in the design editor to customize and export code for your project.

Shaders for React, composed in JSX. 200+ WebGPU shader components, TypeScript ready. Compose in your codebase, or design in the editor and export for React. Compatible with React 18, 19 and Next.js.

Bad Projection. Open in the design editor to customize and export code for your project.

Explore Bouncy Light Logo shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Nebula Logo. Open in the design editor to customize and export code for your project.

Explore Glass Ribbon shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Explore Sunlight Surprise shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Explore Chrome Logo shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Explore Heated Shapes shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Explore Mesh Flow shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Everything new in Shaders v3, from the redesigned editor to our lightweight TypeGPU rendering engine.