Individual skill

webgl-holographic-foil

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.

plugins/_official/examples/webgl-holographic-foil/SKILL.md

Read pinned source

Source commit e7a18df64d0e5e1161903e93bb5a302229dbeb96

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 106,554
Repository last updated: Nov 8, 2026
License: Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai-design Repository topic
byok Repository topic
design-systems Repository topic
claude-design Repository topic
hermes-agent Repository topic
agent-skills Repository topic
desktop-app Repository topic
figma-alternative Repository topic
prototyping Repository topic
ui-generator Repository topic
engineering Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 1,413 bytes
example.htmlasset · 5,846 bytes
open-design.jsonasset · 2,731 bytes

Read excerpt


# Holographic 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

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-holographic-foil/
├── SKILL.md          ← you're reading this
├── example.html      ← the complete, working artifact (READ FIRST)