webgl-horizontal-parallax
Lets your agent create galleries that move horizontally with a parallax effect. It's useful for presenting images dynamically and with depth.
What it does
Creates a horizontally scrolling image gallery using advanced technology (WebGL). Images glide smoothly sideways, and each has a depth effect that changes as you move.
When to use it
- ✓To create an online visual portfolio.
- ✓To showcase a project with a modern flair.
- ✓To make an event website with side navigation.
Example of what to ask your AI
“Create a horizontal gallery with a parallax effect for my travel photos.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It uses a graphics library called Three.js to draw images in 3D. A special effect makes the images appear to move at different depths as you scroll the page.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill webgl-horizontal-parallaxOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/webgl-horizontal-parallax/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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).
FAQ
What is WebGL?
It's a technology that allows displaying interactive 2D and 3D graphics directly in the browser, without needing plugins.
What is 'parallax'?
It's a visual effect where foreground elements move faster than background elements, creating a sense of depth.
Do I need to install anything?
No, the output is a single HTML file that works directly in the browser.
Details
Original description by the author
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.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #597
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
ios-icon-gen
Lets your agent generate icons for iOS apps. It uses Apple symbols or icons from other sources to create the correct files.
affaan-m/ECC
algorithmic-art
Helps your agent create art using code, generating unique images. It's useful when you want original computer-generated art.
anthropics/skills
canvas-design
Helps your agent create beautiful visual art in files. It's useful when you ask for a poster, art, or any static design.
anthropics/skills