webgl-distortion-grain

Generate a vertical Three.js gallery with scroll-based plane distortion and simplex noise effects.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#prototype #Three.js #gallery #distortion #shader #Animation #webGL

One-click install

npx skills add https://github.com/nexu-io/open-design --skill webgl-distortion-grain

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: webgl-distortion-grain
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/webgl-distortion-grain
Command: npx skills add https://github.com/nexu-io/open-design --skill webgl-distortion-grain

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve?

This Skill addresses the complexity of implementing high-performance, GPU-accelerated web animations, allowing designers to create immersive, interactive galleries without writing boilerplate WebGL code.

Core Features & Use Cases

Scroll-Synced Distortion: Automatically deforms image planes based on scroll velocity for dynamic visual feedback.
Interactive Ripple Effects: Applies simplex noise to distort imagery under the cursor, creating a tactile user experience.
Use Case: Use this to build a high-end portfolio or product showcase where images react physically to user navigation and interaction.

Quick Start

Generate a vertical gallery with distortion and grain effects using the provided image assets.

Frequently Asked Questions about webgl-distortion-grain

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add my own images to the WebGL gallery?▼

Update the DATA array in the example.html file with your image paths, names, and indices. The script automatically loads these images and applies the WebGL shader effects to each element.

What is the performance impact of using WebGL distortion?▼

The gallery uses GPU-accelerated shaders and culling to maintain performance. Off-screen elements are culled, and the film grain is implemented as a lightweight hash to minimize frame-time overhead.

Does this gallery work on mobile devices?▼

The implementation uses standard WebGL2 and pointer events, making it compatible with modern mobile browsers. Ensure your images are optimized for web to maintain smooth interaction on touch devices.

Can I change the intensity of the distortion effect?▼

Modify the uniform values within the ShaderMaterial in the script. Specifically, adjust the scroll velocity multiplier or the noise intensity parameters in the vertex and fragment shaders.