# Isometric Explainer Film

> A "how it works" film set in a small clay-like isometric world. The question comes up, a floating plate rises and one station per step springs out of it, from a kit of twelve objects drawn in code: phone, laptop, server, database, cloud, padlock, envelope, chart screen, AI chip, warehouse, person and globe. Pipes draw in between, a glowing packet travels them on the beat and the camera follows it from station to station while a big numbered card explains each step. Each object has its own action when the packet lands. The film ends on the whole system running and your brand and URL, with its own soundtrack.

- Output: Video, MP4 · 35–38 s · 1080p · with music
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/isometric-explainer-film

## What you need

- Node.js 22 or newer and FFmpeg on the PATH.
- HyperFrames, run through `npx` at the tested version: `npx --yes hyperframes@0.8.192`. The first render downloads its own headless Chrome (`npx --yes hyperframes@0.8.192 browser ensure` if it says Chrome is missing).
- Network access to `fonts.googleapis.com` (Bricolage Grotesque and Figtree) and `cdn.jsdelivr.net` (GSAP 3.14.2) while rendering. If jsDelivr is blocked, set `GSAP_FILE` to a local `gsap.min.js` 3.14.2.
- About 10–20 minutes of render time on a 4-core machine (`--workers 2`); `--quality draft` is faster for a look.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add isometric-explainer-film
```

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/isometric-explainer-film` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/isometric-explainer-film`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/isometric-explainer-film` 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 licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Make an Isometric Explainer Film answering "How does Relay deliver a message?" in four steps: app sends it, encrypted, routed at the edge, delivered everywhere. End on relay.example/docs.