# Extruded Type Hero

> A hero where the brand's short word stands in big 3D letters beside the headline. The letters are deep and bevelled, with fronts in the brand colour and darker sides, in a glossy, satin or matte finish, lit by soft studio lights and standing on a floor that reflects them and melts into the background. The word sways slowly, each letter lifts off the floor and settles again in turn while its contact shadow softens, and the word leans toward the pointer. Every movement repeats exactly, so a 12 second recording loops without a seam. Pick one of three typefaces, set the colours, depth, bevel and spacing, and get one self-contained page, a paste-in embed, a still picture for when WebGL is missing, and a 1080p video.

- Output: Web, 3D extruded word on a reflective floor · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/extruded-type-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 TextGeometry, FontLoader and RoomEnvironment), the typeface file 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.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add extruded-type-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/extruded-type-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/extruded-type-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/extruded-type-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 licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Build an animated website hero for my brand with its short name as chunky, bevelled 3D letters standing on a reflective studio floor, in our brand colours, slowly swaying with each letter bobbing, beside our headline and buttons, as a page, an embed and a looping 1080p video.