A live visual tool that changes a fragment shader—a small program that draws graphics—once per minute to follow audio features and the current Spotify track on a web page. It saves the shader and hot-swaps the result so the page updates without a full reload.

Use it to start, stop, or advance an automatic shader-editing loop for a chosen shader file or the most recent one.

It removes the need to edit and reload shader code manually during a music-driven visual performance, while using screenshots to check the actual result.

How loqwai/paper-cranes configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to loqwai/paper-cranes. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/loqwai/paper-cranes/main/.claude/skills/vibej/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/loqwai/paper-cranes

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/loqwai/paper-cranes/vibej/github.svg)](https://agentmods.dev/skills/loqwai/paper-cranes/vibej)

Your own site

<a href="https://agentmods.dev/skills/loqwai/paper-cranes/vibej"><img src="https://agentmods.dev/badge/skills/loqwai/paper-cranes/vibej/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/loqwai/paper-cranes/vibej"><img src="https://agentmods.dev/badge/skills/loqwai/paper-cranes/vibej.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 121 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 7,526 The whole file, excluding the scripts and references it only reads on demand.

Security scan B 2 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00121	$0.07526
Opus 5.5	$0.00048	$0.03010
Sonnet 5.5	$0.00024	$0.01505
Haiku 4.5	$0.00012	$0.00753

Measured 11d ago against content hash 83bf985ce708, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade B, and why

vibej scanned grade B with 2 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Reads agent configuration directoriesmediumAgent snooping

.claude/, .codex/, .gemini/ hold keys, settings and other credentials a mod has no legitimate need for.

!`cat .claude/vj-state.json 2>/dev/null || echo "(none)"`

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

!`PORT=$(./scripts/dev-port); curl -s -o /dev/null -w "%{http_code}" http://localhost:$PORT/ 2>/dev/null || echo "not running"`

.claude/skills/vibej/SKILL.md · 478 lines

How it starts

The opening of the file, as written. The whole thing — 478 lines — stays where its author put it; the contents beside it link to each section on GitHub.

vibej — Live Auto-VJ Loop for the Jam Page

Run Claude as the VJ: every minute, read the current audio features + track name, make ONE meaningful edit to the shader, move on. Non-destructive by default (edits .frag via /__save-shader, HMR hot-swaps).

Aliases: /vibej is the canonical name; /vj is the legacy alias and behaves identically. Examples below use /vibej — substitute /vj freely. The state file is still .claude/vj-state.json for backward compatibility with in-progress sessions.

Philosophy

LOOK before you touch, LOOK after you touch. A screenshot is the only ground truth. Audio features and a green compile tell you nothing about whether the frame is a wall of clipped pink, a mushy blob, or shivering. (2026-08-18: 26 ticks tuned blind on an unreadable frame.)
Diagnose before you add. When the user says "still subtle / not interesting / shivery / washed out", the first move is a screenshot + root cause, then a fix — usually a subtraction or a tonemap — not a new motif. Adding on top of a broken frame is how three effects got vetoed in a row.
Match the music, structurally. Colour follows SLOW music (key, section, set); geometry and lighting follow FAST music (kicks, hits). Mixing them reads as flashing.
One focused move per tick, and it must be visible on the projector from across the room.
Respect the user's hands. Don't smash their knobs, don't rewrite their code wholesale, and know which uniforms their controller is currently PINNING (see TAKE OVER below).
Fail loud, not silent: GL-compile before every save; if it breaks, fix or revert.

Pre-show checklist (do ALL of this before tick 1 — it is the show)

Read the shader's journal(s) and the last HANDOFF. Todo + History-of-changes = your rules.
Screenshot the display as it stands and judge it (dark floor? focal point? clipping? noise?). If it does not read, the first ticks are legibility (tonemap / floor / level window / vignette).
Audio verified: raw energy > gate (0.065 for wavelet-ease), quietGate computed not pinned.
Know the controller state: Object.keys(window.cranes.messageParams) — every key there is PINNED by the phone. If the shader's music drivers are in that list, they are dead. Fix in the shader (mix each pinned spring 50/50 with an un-owned neighbour) or ask the user to release.
Cursor hidden via CSS on the display page (Cursor hygiene). Verify with a screenshot.
Target is a SCRATCH COPY, never committed art. /vibej rewrites the file every minute.
State the room/relay/URL the display is on so the user can control it. Ask which room.

Read the full file on GitHub · 478 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

DESIGN-v2.md 12 KB

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

11d ago First seen · 478 lines · 121 tokens per session scan B 83bf985ce708

Subscribe to this mod's changes

vibej is a skill published in the GitHub repository loqwai/paper-cranes (7 stars, last pushed 3d ago), licensed BSD-3-Clause. It adds 121 tokens to every session and 7,526 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it B with 2 findings (reads agent configuration directories, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-02.

Creative and media

local-ai-agents

Build local-first AI agents that run entirely on a developer workstation with Microsoft Foundry Local and Qwen function-calling models. Covers Small Language Models (SLMs), the OpenAI-compatible local endpoint, sandboxed local tools, local RAG with Chroma, local MCP servers, hybrid cloud/local routing, and the…

microsoft/ai-agents-for-beginners · 200 tokens

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.

obra/superpowers · 21 tokens

next-cache-components-adoption

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…

vercel/next.js · 95 tokens

chat-pet-sprite-creation

Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.

microsoft/vscode · 53 tokens

cpu-profile-analysis

Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…

microsoft/vscode · 71 tokens

insight-error-page

Write or audit an insight-kind error page for the Next.js dev overlay. Use when creating a new errors/ .mdx page, auditing an existing one, or checking that a page matches the framework fix cards. Covers page structure, title alignment, FixCard cards with Copy prompt button, code snippets, terminology verification…

vercel/next.js · 83 tokens

paper-cranes: Skill for Claude Code