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

webgl-holographic-foil

Generate a self-contained WebGL2 holographic foil hero animation with real-time cursor-based tilt interaction.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#prototype#generative#shader#hero#Web#webGL#iridescent
One-click install
npx skills add https://github.com/nexu-io/open-design --skill webgl-holographic-foil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webgl-holographic-foil
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/webgl-holographic-foil
Command: npx skills add https://github.com/nexu-io/open-design --skill webgl-holographic-foil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of creating high-performance, visually complex web hero sections without relying on heavy external assets, build pipelines, or opaque sandbox workarounds.

Core Features & Use Cases

  • WebGL2 Rendering: Implements thin-film interference and crushed-foil surface shaders for high-fidelity visual effects.
  • Interactive Feedback: Provides real-time palette shifting and foil tilting based on user cursor movement.
  • Use Case: Ideal for landing pages or design prototypes requiring a premium, interactive aesthetic that remains lightweight and self-contained in a single HTML file.

Quick Start

Generate a holographic foil hero animation for the current design project.

Frequently Asked Questions about webgl-holographic-foil

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

FAQPage Schema
How do I implement the holographic foil effect in my web project?▼

Use the provided WebGL2 shader implementation which calculates thin-film interference and crushed-foil normals. The artifact is self-contained and requires only a canvas element to render the real-time animation.

Does this WebGL2 hero require external assets or textures?▼

No, the holographic foil effect is entirely procedural. It uses mathematical noise functions and domain warping to simulate surface textures, ensuring zero external dependencies and fast load times.

Can I customize the palette or tilt sensitivity?▼

Yes, you can modify the interference palette function (iri) or the tilt multiplier in the fragment shader code to adjust the color range and responsiveness to cursor movement.

Why is my browser not rendering the holographic effect?▼

Ensure your browser supports WebGL2 and that hardware acceleration is enabled. The script checks for getContext('webgl2') and will display an error message if the environment is unsupported.

Related Skills

Explore More Design & Creative Skills→
ogallottiogallotti
1

gerar-design

Present interactive design choices and generate CSS token design systems.

Community
Advanced
cas-team-analystcas-team-analyst
9

create-micro-ui

Generate single-file HTML micro UI components with Vite live preview.

Official
Intermediate
HakiickHakiick

responsive-tester

Validate responsive design across mobile, tablet, and desktop viewports with Playwright.

Community
Intermediate
Logisoft-webLogisoft-web

overdrive

Implement shaders, physics-based animations, and cinematic transitions with WebGL, CSS, and JavaScript.

Community
Advanced