Stunning shaders. Zero code. One click to embed.

Browse 30+ presets, customize with simple controls, and drop interactive shaders into Webflow, Framer, Squarespace, or anywhere you build.

Get started
ShadeCraft shader examples
ShadeCraft application interface

Create mesmerizing, interactive visuals.

30+ presets, visual customization, and one-click embeds for Webflow, Framer, Squarespace, and anywhere you build.

Embed icon

Embed anywhere

Get an embed URL and iframe code ready for Webflow, Framer, Squarespace, WordPress, Shopify, or your own codebase. One click, done.

Library icon

Your library, always available

Save shaders to your personal library with persistent URLs that won't break. If something goes missing, we rebuild it automatically.

Setup icon

Clear setup guidance

We walk you through every step, from creating your shader to embedding it live. If you can follow a recipe, you can do this.

Interactivity icon

Interactivity that responds

Add mouse interactions that make your shaders feel alive. Choose from follow, repel, distort, pulse, or orbit modes. Each one changes how the shader reacts to your visitors.

Checkmark
5 mouse interaction modes: Follow, Repel, Distort, Pulse, Orbit
Checkmark
Auto-animate with speed and amplitude controls
Checkmark
Hover effects with customizable properties and transitions
Checkmark
Configurable intensity and smoothing for all interactions
Presets icon

30+ presets to start from

Dithering patterns, grainy gradients, minimal designs, and more. Each preset is ready to customize and embed in seconds.

Checkmark
Presets span multiple shader types and visual styles
Checkmark
Hover-to-preview shows the shader before you commit
Checkmark
Custom code editor for full creative freedom
Code icon

Customize without code

Adjust speed, shape, scale, dither type, and colors with sliders that update the shader in real time. No syntax to memorize.

Checkmark
Real-time preview as you tweak settings
Checkmark
7 shape options and 4 dither types to choose from
Checkmark
Front and back color pickers for full color control

Step by step. Simple by design.

Create, configure, save, embed. That's really all there is to it.

Create
Customize
Save
Embed
Create shader step
Pick your starting point.
Browse presets or paste your own Paper.design code.
Customize shader step
Make it yours.
Tweak speed, shape, colors, and interactivity until it feels right.
Save shader step
Keep it forever.
Keep your shaders organized and accessible for future projects.
Embed shader step
Drop it in.
Copy the code, paste it into your site. That's it.