# Particle Portrait Hero

> An animated website hero that turns your own photo or logo into thousands of dots in 3D. Each dot sits forward or back by the brightness under it, so the picture has real relief. The dots fly in and assemble. As the visitor scrolls, the hero pins and the picture turns to show its depth, peels away into a slow orbit of dots and comes back together, with the pointer sending ripples through it. You give it your picture, colours, fonts, logo and words. It builds one self-contained page plus a paste-in embed and checks it at four widths. It also records a smooth 1080p video of the same scroll story for launch posts.

- Output: Web, One HTML page + embed · MP4 + poster
- Price: $6.90 one-time, or included in Pro
- Page: https://lookbk.dev/skills/particle-portrait-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the recording (the scripts find it; set `CHROME_PATH` if they don't).
- ffmpeg, for the video (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).
- Internet access when the page is opened: three.js and the fonts load from jsDelivr at pinned versions with integrity hashes. Without it, visitors see the still picture and system fonts; the page still works.
- The picture: an `.svg`, `.png`, `.jpg` or `.webp` of up to 3 MB, between 3:1 and 1:3. About 1000 px on the long side is plenty: it is inlined into the page, and the dots sample it at `grid` across.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add particle-portrait-hero
```

The first run prints a sign-in link; open it, approve, and run the command again. Pro skills install for accounts that bought them or have Pro.

Where it installs:

- Run by Claude Code: `~/.claude/skills/particle-portrait-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/particle-portrait-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/particle-portrait-hero` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licences: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Make a Particle Portrait hero for Signal Hours, my weekly interview show: use my cut-out portrait, navy background with blue shadows and warm amber lights, the headline 'Long talks, slowly made.' and a 'Play episode 112' button, with three story labels in the corner. Record a video for the launch post.