skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

webgl-horizontal-parallax

Generate a horizontal-scroll WebGL gallery with lerp smoothing and texture parallax effects.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#prototype#Three.js#gallery#parallax#scroll#Animation#webGL
One-click install
npx skills add https://github.com/nexu-io/open-design --skill webgl-horizontal-parallax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webgl-horizontal-parallax
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/webgl-horizontal-parallax
Command: npx skills add https://github.com/nexu-io/open-design --skill webgl-horizontal-parallax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of high-performance, interactive WebGL galleries that would otherwise require complex manual coding of Three.js scenes and scroll-linked animation logic.

Core Features & Use Cases

  • WebGL Parallax: Implements UV shift parallax effects based on viewport position for dynamic visual depth.
  • Smooth Interaction: Utilizes lerp-based smoothing for horizontal scroll navigation.
  • Use Case: Quickly generate a portfolio or product showcase gallery where images glide horizontally with a sophisticated, high-end motion feel.

Quick Start

Generate a horizontal parallax gallery using the webgl-horizontal-parallax skill with the provided image set.

Frequently Asked Questions about webgl-horizontal-parallax

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

FAQPage Schema
How do I create a horizontal parallax gallery?▼

Use the webgl-horizontal-parallax skill to generate a self-contained index.html file. The skill configures a Three.js scene that maps images to WebGL planes and applies UV shifts based on scroll position.

What technology powers the parallax effect?▼

The effect is powered by Three.js shaders. Each image plane uses a custom fragment shader to perform UV coordinate shifts, creating the parallax illusion as the user scrolls horizontally.

Does this gallery work on mobile devices?▼

The gallery is designed for web browsers supporting WebGL2. Performance depends on the device's GPU capabilities and the number of high-resolution images loaded into the scene.

Can I customize the parallax intensity?▼

Yes, the parallax intensity is controlled by the parallaxIntensity property within the Media class in the script. You can adjust this value to increase or decrease the UV shift effect.

What are the limitations of this WebGL approach?▼

This approach requires images to be loaded via CORS-compliant URLs and relies on browser-based WebGL support. It is optimized for visual prototyping rather than complex data-heavy applications.

Related Skills

Explore More Design & Creative Skills→
Ashtoon95-RAshtoon95-R

design-taste-gallery-minimal

Create image-first gallery interfaces with React, Tailwind CSS, and GSAP.

Community
Advanced
TheeCoderAhmedTheeCoderAhmed

managing-content

Integrate headless CMS platforms and generate type-safe frontend fetchers.

Community
Intermediate
mouayadakelmouayadakel

lazy-loading-strategy

Implement lazy loading for images, lists, and below-fold content.

Community
Basic
MicrockMicrock

gsap-scrolltrigger

Implement scroll-driven animations with GSAP ScrollTrigger for pinning and scrubbing.

Community
Intermediate