# Tilt Card Stack Hero

> A fanned stack of 3 to 5 glossy cards floats in perspective beside the headline: pricing tiers, plans or key figures, each with the brand's own label, a big number, a title and a detail line on a gradient face with a pattern drawn in CSS. The stack tilts toward the pointer with every card at its own depth, so the back cards slide against the front one, while a glare follows the turn and layered shadows open as cards lift. Every few seconds the top card swings out and tucks in at the back, sliding or flipping over to show its back. Without a pointer the tilt follows a path that repeats with the stack, so a recording of one full turn loops without a seam. It is plain HTML and CSS 3D, with no WebGL and no library.

- Output: Web, 3 to 5 glossy tilt cards · CSS 3D · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/tilt-card-stack-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`).
- **What the cards say**: 3 to 5 cards, each a big number or glyph of up to 6 characters (with an optional small unit), a title, and optionally a label and a detail line. Pricing tiers, plans, key figures or features work best.
- Internet access when the page is opened, for the fonts only (pinned on jsDelivr with integrity hashes). Without it, visitors see system fonts; the cards still move.

## Install

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

> Make a hero for our gym with our four passes as a tilting card stack that cycles every 3 seconds.