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.
Informations de source
- Dépôt
- nexu-io/open-design
- Dernière activité de la source
- 18 août 2026 à 07:09
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 97 471
- Forks
- 11 317
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Explorateur de fichiers
9 fichiersAffichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- name
- webgl-distortion-grain
- description
- A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.
- triggers
- ["distortion & grain","webgl gallery"]
- od
- {"mode":"prototype","platform":"web","scenario":"design","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"craft":{"requires":["animation-discipline"]}}
# Distortion & Grain
Produce a single self-contained `index.html` — A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.
## Why this is a powered artifact
OpenDesign detects `getContext('webgl2')` / heavy WebGL and renders this file in **powered preview** (a cross-origin-isolated iframe). The full GPU + scroll pipeline runs; no opaque-sandbox workarounds are needed.
## Resource map
```
webgl-distortion-grain/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
```
## Credits / attribution
- effect: Jan Kohlbach / Codrops (MIT)
- imagery: Original (AI-generated)
- simplex noise: Ashima Arts (MIT)
Keep any bundled LICENSE and on-screen credit intact. Replace imagery only with license-clean assets (original / AI, Lummi.ai, Unsplash/Pexels — never scraped imagery).
Voir sur GitHub