# Product Turntable Hero

> An animated website hero with your product standing in a 3D studio on a reflective floor. It turns as the visitor scrolls (the section pins) or by itself, and they can drag it round. Spec callouts are pinned to points on its surface: as the product turns, each dot follows its point, draws a line out to a card with the number and what it means, and fades when the point turns away. The tour stops at each spec. It loads your own .glb model, or builds a bottle, jar or speaker in code in your colours with your wordmark. It comes in your colours, fonts, logo, headline and buttons, as one page or a section to paste into your site, checked at four widths. It also records a smooth 1080p video of the turn 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/product-turntable-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 (r180, with GLTFLoader, RoomEnvironment and RoundedBoxGeometry) 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.
- For your own product: a **binary glTF (`.glb`)**, Y up, one product, ideally under 3 MB. Export it from Blender, Cinema 4D, Shapr3D, Fusion or your CAD tool. Draco- or meshopt-compressed files and KTX2 textures are **not** supported (their decoders aren't pinned); export without them. A `.gltf` with separate files isn't supported either.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add product-turntable-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/product-turntable-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/product-turntable-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/product-turntable-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 Product Turntable hero for Orra, our steel field bottle: moss green with a burnt-orange stripe on warm sand, four specs (24 h cold, 750 ml, 340 g, a lid that never drips), turned by scrolling, and a 'Shop the Field Bottle' button. Record a video for the launch post.