# Clay Mascot Hero

> An animated hero section with a toy-like 3D mascot standing beside your headline. It pops in, breathes, blinks, waves, hops now and then and turns its head and eyes toward the cursor, on a pedestal in front of an arch with slow rays, floating clay bits and an optional speech bubble. The mascot is a simple character built from primitives (a bean, ball, pear or block body, eyes, mouth, ears or antennae, little arms, one accessory) with soft clay shading. It is not a sculpted or illustrated character, and not AI-character quality. Your agent writes one hero.json that picks every part and colour. The build checks contrast and that the mascot stands off its backdrop, then writes a self-contained page plus a paste-in embed. A recorder steps the animation frame by frame for a smooth MP4 and poster, and a cut-out script saves the mascot alone as a transparent PNG.

- Output: Web, Animated 3D mascot hero · page + embed · MP4 + transparent PNG
- Price: $6.90 one-time, or included in Pro
- Page: https://lookbk.dev/skills/clay-mascot-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks, the recording and the cut-out (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 (an SVG drawing of the same mascot) and system fonts; the page still works.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add clay-mascot-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/clay-mascot-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/clay-mascot-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/clay-mascot-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

> Build a Clay Mascot hero for our app with our logo, colours and headline: make the mascot a little robot with antennae in our brand colours, record a 1080p video for the launch post, and save a transparent PNG of the mascot for our socials.