Claude Visualizer — Productivity skill for Claude Code

Claude Visualizer

A real-time ambient visualizer for [Claude Code](https://docs.anthropic.com/en/docs/claude-code) tool events. Watch Claude think, search, edit, and build — rendered as a living, breathing composition inspired by [Tycho](https://tychomusic.com/)'s visual aesthetic.

**Zero dependencies. Pure Node.js + vanilla HTML/CSS/JS.**

  

What It Does

• Ambient canvas — A warm, sunset-inspired scene with a pulsating sun, rotating halo rings, floating geometric shapes, drifting atmospheric layers, and particle effects — all combined from 5 custom artwork compositions
• Reactive blooms — When Claude uses a tool, particles burst from the sun. Each tool type has its own color
• Generative music — Optional ambient audio in F# major pentatonic. Each tool triggers a melodic phrase with reverb and delay. Inspired by Tycho's "A Walk"
• Technical sidebar — Every tool call logged in real time: inputs, outputs, duration, sequence numbers. Expandable cards show the full details
• Customizable display — Settings panel lets you toggle: smart summaries, live timers, session stats, result previews, MCP server labels, sequence numbers, working directory, and result size badges
• Settings persist — Your display preferences save to localStorage

Quick Start

1. Clone and start the server

git clone https://github.com/wretcher207/claude-visualizer.git
cd claude-visualizer
npm start

The server runs at `http://localhost:8765`. Open it in your browser.

2. Add the hook to Claude Code

Add this to your Claude Code settings file (`~/.claude/settings.json`):

**macOS / Linux:**

{
  "hooks": {
    "PreToolUse": [{ "hooks": [{ "type": "command", "command": "node /path/to/claude-visualizer/hook.js", "async": true }] }],