Horizontal Parallax Gallery
FreeCreate stunning horizontal-scroll WebGL galleries with ease.
Free · Opens the source repo
What Horizontal Parallax Gallery does
The Horizontal Parallax Gallery skill enables developers to create a visually engaging horizontal-scroll gallery using WebGL and Three.js. This skill produces a self-contained index.html file that showcases images with a smooth horizontal glide effect and parallax texture shifting based on the viewer's position. This effect is achieved through linear interpolation (lerp) smoothing, which enhances the visual experience as users scroll through the gallery.
This skill is particularly useful for designers and developers looking to incorporate dynamic visual elements into their web projects. The gallery not only provides a modern aesthetic but also leverages GPU rendering capabilities to ensure high performance. By using WebGL, the skill allows for complex visual effects without compromising on speed, making it ideal for interactive art displays, portfolios, or product showcases.
The implementation is straightforward, as the skill comes with an example HTML file that serves as a complete working artifact. Users can easily modify the provided example to fit their specific needs, replacing images with their own license-compliant assets. The skill also includes clear instructions for maintaining credits for the original effects and imagery, ensuring proper attribution is upheld.
Overall, the Horizontal Parallax Gallery skill is a powerful tool for anyone looking to enhance their web applications with sophisticated visual effects, making it a valuable addition to any developer's toolkit.
When to use it
Use this skill when you want to add an interactive and modern image gallery to your web project, especially when horizontal scrolling and parallax effects are desired.
When not to use it
This skill may not be suitable for projects that do not require WebGL rendering or where simple image galleries suffice without advanced visual effects.
What you can build with it
Portfolio Display
Use the Horizontal Parallax Gallery to showcase your design or photography work in an interactive format that captivates viewers.
Product Showcase
Implement this skill to create an engaging product gallery that highlights features through smooth scrolling and parallax effects.
Art Installations
Utilize the gallery for online art installations, allowing users to explore artworks in a visually dynamic way.
How to install Horizontal Parallax Gallery
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/webgl-horizontal-parallax --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioHorizontal 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
Open Design 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).
Frequently asked questions about Horizontal Parallax Gallery
Similar skills
Algorithmic Art
Create generative art using p5.js and algorithmic philosophies.
Fal.ai Media Generation
Create images, videos, and audio with AI.
p5.js Production Pipeline
Create stunning generative art and interactive visuals.
ASCII Video Production
Transform videos into striking ASCII art animations.
Pixel Art
Transform images into retro pixel art and animations.
Generate Image
Create images quickly using AI providers.