New to Claude Skills? Learn how to install them →

nexu-io on GitHub

Halftone Drift

Free

Create dynamic duotone visuals with WebGL2.

by nexu-io84.9k stars on nexu-io/open-design
3 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Halftone Drift does

Halftone Drift is a self-contained WebGL2 artifact that generates an engaging visual experience by applying a flowing field effect through a rotated halftone dot grid. The result is a duotone print aesthetic that can be manipulated in real-time by moving the cursor, allowing users to interactively bend the drift of the visuals. This skill is particularly useful for designers and developers looking to create captivating web experiences without relying on external assets or complex setups.

The skill comes with a complete example.html file that serves as a working demonstration of the concept. This file is designed to be easily integrated into any web project, providing a straightforward way to incorporate dynamic visual elements into websites or applications. The self-contained nature of the artifact ensures that it can be utilized without the need for additional dependencies or third-party libraries, making it an efficient choice for rapid prototyping or production use.

Halftone Drift leverages the capabilities of WebGL2 to deliver high-performance graphics rendering. The powered preview feature of Open Design allows for seamless interaction and visualization within a cross-origin-isolated iframe, ensuring that the full GPU and scroll pipeline is utilized effectively. This means developers can expect smooth performance even when manipulating the visuals in real-time.

This skill is ideal for web developers and designers who want to enhance their projects with unique visual effects while maintaining simplicity and efficiency in their codebase. Whether for personal projects, client work, or experimentation, Halftone Drift provides a compelling way to explore the possibilities of WebGL2 in a user-friendly manner.

When to use it

Use this skill when you need to create interactive, visually appealing web experiences that utilize WebGL2 without external dependencies.

When not to use it

This skill may not be suitable for projects requiring extensive customization or complex interactions beyond the provided functionality.

What you can build with it

Interactive Art Installations

Utilize Halftone Drift to create engaging visual displays for art installations that respond to user interactions.

Web Portfolio Enhancements

Incorporate Halftone Drift into your web portfolio to showcase your skills in web design and interactive graphics.

Prototyping Web Experiences

Use Halftone Drift as a rapid prototyping tool to test dynamic visual concepts in web applications.

How to install Halftone Drift

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/webgl-halftone-drift --agent claude-code

2. 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-io

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

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-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).

Frequently asked questions about Halftone Drift

Similar skills