Webgl Horizontal Parallax

A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.

gabrielmoreira Updated 17 repo stars

File contents

Horizontal Parallax Gallery

Produce a single self-contained index.html — A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.

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-horizontal-parallax/
├── SKILL.md          ← you're reading this
├── example.html      ← the complete, working artifact (READ FIRST)
└── (assets, if any)

Credits / attribution

  • effect: David Faure / Codrops (MIT)
  • imagery: Original (AI-generated)

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).

gabrielmoreira/agent-skills-mirror/tree/main/mirrors/repos/nexu-io@open-design/plugins/_official/examples/webgl-horizontal-parallax commit abd49ab65b

Frequently asked questions

npx skillmds@latest add gabrielmoreira/webgl-horizontal-parallax