Holographic Foil
FreeCreate interactive WebGL2 holographic effects easily.
Free · Opens the source repo
What Holographic Foil does
The Holographic Foil skill is designed to help developers and designers produce a visually striking WebGL2 experience with minimal effort. This skill generates a self-contained index.html file that showcases thin-film interference over a crushed-foil surface. The visual effect is dynamic, with the color palette shifting based on the viewer's angle, creating an immersive experience that can be manipulated by moving the cursor to tilt the film. This makes it an excellent tool for anyone looking to add engaging graphical elements to their web projects.
One of the key features of this skill is its reliance on WebGL2, which allows for advanced graphical rendering without the need for third-party assets. The artifact is designed to work seamlessly in environments that support getContext('webgl2'), ensuring that developers can leverage the full capabilities of the GPU for rendering. This is particularly beneficial for projects that require high-performance graphics, such as interactive visualizations or games.
The Holographic Foil skill is particularly suited for web developers and designers who want to enhance their projects with cutting-edge graphics. It is an ideal choice for those who may not have extensive experience with WebGL but still wish to create impressive visual effects. By providing a complete and working example in the form of example.html, users can quickly understand how to implement and customize the effect to fit their needs.
Overall, this skill offers a straightforward way to integrate advanced graphical effects into web applications, making it a valuable addition to the toolkit of any developer or designer focused on creating visually compelling user experiences.
When to use it
Use this skill when you want to add interactive holographic effects to your web projects with minimal setup.
When not to use it
This skill may not be suitable for projects that require extensive customization of WebGL features beyond the provided example.
What you can build with it
Web Design Projects
Integrate the Holographic Foil skill into your web design projects to create eye-catching visuals that engage users.
Interactive Art Installations
Use this skill to develop interactive art pieces that respond to user input, enhancing the viewer's experience.
Educational Demonstrations
Leverage the skill for educational purposes, showcasing the principles of thin-film interference in a visually appealing manner.
How to install Holographic Foil
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/webgl-holographic-foil --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-ioHolographic Foil
Produce a single self-contained index.html — A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
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-holographic-foil/
├── SKILL.md ← you're reading this
├── example.html ← the complete, working artifact (READ FIRST)
└── (assets, if any)
Credits / attribution
- Original, self-contained (no third-party assets).
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 Holographic Foil
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.