Open Design gallery

Design systems Examples

Webgl distortion grain

A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.

page

Remix it with Open Design

In a chat or editor where the Open Design Agent Kit is installed, paste this. Claude asks what to make, then starts from this example.

Remix the Open Design example od:prototype:webgl-distortion-grain.

Make one like it in Claude

The brief this example was made from. Change the details to fit yours.

Build a vertical gallery where image planes bend with scroll velocity, distort under the cursor via simplex noise, and carry a film grain.

Source

example.html on GitHub

Made with the Open Design Agent Kit. Design systems and examples are synced from Open Design.