Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Halftone Drift · nexu-io | DecimalAI

nexu-io/webgl-halftone-drift

NewSkillScoreMaintained

A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.

Frontendby nexu-io

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/nexu-io-webgl-halftone-drift/SKILL.md

decimalai skills pull nexu-io-webgl-halftone-drift --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-webgl-halftone-drift/SKILL.md https://app.decimal.ai/s/nexu-io-webgl-halftone-drift/SKILL.md

Raw file: /s/nexu-io-webgl-halftone-drift/SKILL.md ↗ · machine-readable summary at /s/nexu-io-webgl-halftone-drift.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 14h ago

No measurable change+77% tokens0% turns77% of whole cases pass with skill (17/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-14	✗→✓	▲ Improved	3%	0%
case-03	✓→✓	＝ Same ✓	41%	0%
case-04	✓→✓	＝ Same ✓	140%	0%
case-05	✓→✓	＝ Same ✓	130%	0%
case-06	✓→✓	＝ Same ✓	245%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/22/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / open-design

plugins/_official/examples/webgl-halftone-drift/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/22/2026Version v2

Skill contents

SKILL.md

Halftone Drift

Produce a single self-contained index.html — A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.

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-halftone-drift/
├── 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).

Want to see if nexu-io/webgl-halftone-drift would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/28/2026, 21:36 UTC · 22 cases

Lift

50% vs 50%

Agent turns

1.0 vs 1.0

Tokens

+77%

5,732.77 vs 3,237.18

fail → pass · 1pass → pass · 16fail → fail · 5

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I need a standalone HTML landing page hero section built with WebGL2. It should feature a flowing wave field filtered through a duotone halftone dot pattern to mimic a printed aesthetic, where moving the mouse pointer noticeably bends the background animation.	fail→fail	39,743	48,633	+22%	1	1	0%	8,236	8,461	+3%	0	0	—
case-02 Can you create a single-file WebGL2 background component for a site header? I want an organic, drifting fluid effect styled like a two-tone halftone screen, and the motion should interactively distort whenever the user moves their cursor over the canvas.	fail→fail	47,272	46,732	-1%	1	1	0%	8,240	8,465	+3%	0	0	—
case-03 I need an interactive web viewport for inspecting a 3D GLTF asset of a mechanical part, complete with orbit controls and PBR material lighting.	pass→pass	27,700	42,194	+52%	1	1	0%	5,995	8,444	+41%	0	0	—
case-04 I want to apply a vintage halftone dot filter onto static HTML image elements on my landing page without using canvas scripting or WebGL contexts. How can I achieve this with CSS and SVG?	pass→pass	19,341	42,490	+120%	1	1	0%	3,517	8,451	+140%	0	0	—
case-05 Build a light-weight 2D canvas particle effect for older mobile web browsers where floating circles bounce around the viewport, built specifically with the Canvas 2D rendering API context.	pass→pass	19,829	38,655	+95%	1	1	0%	3,680	8,450	+130%	0	0	—
case-11 I am setting up a self-contained WebGL2 hero component. Which external WebGL wrapper library or framework script tag should I include in the document head?	fail→fail	15,169	39,641	+161%	1	1	0%	2,491	8,446	+239%	0	0	—
case-06 I am building a web hero background canvas and need to initialize the rendering context. I am debating whether to use standard WebGL1, 2D canvas, or WebGL2 for advanced shader features like version 300 ES GLSL. Which context call should be used?	pass→pass	14,366	40,361	+181%	1	1	0%	2,457	8,471	+245%	0	0	—
case-07 I want to deploy a WebGL background effect to a content system that only accepts single-file uploads. Should I output separate .css, .js, and .glsl files or bundle everything into a single file?	fail→fail	12,914	39,176	+203%	1	1	0%	2,190	8,458	+286%	0	0	—
case-08 For a print-style background shader effect, I want to define color rendering in GLSL. Should I sample a complex multi-color gradient texture or constrain output to a duotone palette?	pass→pass	15,179	40,810	+169%	1	1	0%	2,363	8,452	+258%	0	0	—
case-09 When constructing a halftone dot screen shader in GLSL, should the grid coordinates be kept aligned with the screen axes or rotated to achieve a classic print screen aesthetic?	pass→pass	13,407	40,665	+203%	1	1	0%	2,300	8,446	+267%	0	0	—
case-10 To make a fluid background shader react when the user moves their cursor across the hero canvas, should I re-calculate vertex buffer geometries on the CPU or pass mouse coordinates as a GLSL uniform?	pass→pass	12,527	38,762	+209%	1	1	0%	1,929	8,453	+338%	0	0	—
case-12 To keep a halftone dot shader looking sharp across high-DPI retina displays and responsive viewport resizing, how should dot cell frequency be controlled in the fragment shader?	pass→pass	20,557	19,272	-6%	1	1	0%	3,563	3,334	-6%	0	0	—
case-13 What algorithm should be used inside the fragment shader to produce continuous, organic background wave distortion across the screen?	pass→pass	17,988	20,359	+13%	1	1	0%	3,044	3,747	+23%	0	0	—
case-14 How should the canvas element be styled in CSS so that it acts as a seamless full-bleed background hero without triggering document scrollbars?	fail→pass	13,079	12,129	-7%	1	1	0%	2,199	2,260	+3%	0	0	—
case-15 When writing shader source strings for a WebGL2 canvas context, what version directive and variable input keywords should be placed at the top of the shader GLSL code?	pass→pass	9,611	6,569	-32%	1	1	0%	1,825	1,503	-18%	0	0	—
case-16 What mechanism should be used to continuously drive the WebGL render loop and pass updating timestamp values to the shader time uniform?	pass→pass	10,238	9,579	-6%	1	1	0%	1,852	1,756	-5%	0	0	—
case-17 When tracking user cursor movements on the canvas to warp a shader field, how should the interaction event listener be hooked up?	fail→fail	17,012	16,429	-3%	1	1	0%	3,018	3,026	+0%	0	0	—
case-18 How should the fragment shader convert calculated scalar field values into crisp, distinct circular halftone dots?	pass→pass	16,644	16,236	-2%	1	1	0%	2,711	3,067	+13%	0	0	—
case-19 When placing hero section text headline elements on top of an interactive WebGL canvas background, what structure should be used?	pass→pass	15,664	41,757	+167%	1	1	0%	2,626	8,437	+221%	0	0	—
case-20 When calling the context creation method on the hero canvas element, what optional context attributes should be supplied to maximize WebGL rendering performance?	pass→pass	11,846	15,169	+28%	1	1	0%	2,145	2,531	+18%	0	0	—
case-21 When a user resizes their browser window while viewing the WebGL hero section, what actions should the JavaScript window resize handler perform?	pass→pass	13,530	12,736	-6%	1	1	0%	2,206	2,324	+5%	0	0	—
case-22 If an interactive WebGL hero background requires texture assets or fallback images, what licensing criteria must be met for external imagery?	pass→pass	18,011	6,103	-66%	1	1	0%	2,631	1,139	-57%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of 0 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 50%
Pass rate with the skill: 50%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v2
Run completed: 8/28/2026, 21:36 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-14

Prompt

How should the canvas element be styled in CSS so that it acts as a seamless full-bleed background hero without triggering document scrollbars?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested today

Other measured skills in the registry, with their headline benchmark lift.