The page this skill built from examples/orvane, working in your browser. Opens in a new tab. Also: Nimbra.

12-second example rendered by this skill from examples/orvane · 1280×720

Example settingswhat each example above was built from

examples/orvanehero.json

Brand: Orvane
Headline: Pick a pass, find your line.
Badge: Bouldering · open 7am to 11pm
Colors: background #f4efe6 · ink #1a1714 · accent #a93c19
Mode: light
Fonts: Bricolage Grotesque and Inter

examples/nimbrahero.json

Brand: Nimbra
Headline: Data that lives next to your users.
Badge: Now in 31 regions
Colors: background #0d0f1a · ink #eef1ff · accent #8b98ff
Mode: dark
Fonts: Sora and Inter

What you get

A self-contained index.html hero and an embed.html to paste into an existing site
3 to 5 cards with your text, colours and CSS patterns
Pointer tilt with depth parallax, glare and layered shadows
The top card sliding or flipping to the back every few seconds
A still picture for reduced motion and as a fallback
A seamless 1080p MP4 loop and poster
Open-source licenses for every part it builds on

Good fit

Pricing pages and plan launches where 3 to 5 tiers each have a price, a name and one line to say.
Developer tools and apps that want a few key figures, like a latency or an uptime, to rotate past beside the headline.
Sites that want motion without WebGL or a library, since the cards are plain HTML and CSS 3D with real text.

Not for

Real 3D models or product renders with thickness
Long text: card values hold 6 characters and titles 22
Centred layouts with the cards behind the headline
More than 5 cards

About this skill

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.

Example request

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

How it works

You ask
Make a hero for our gym with our four passes as a tilting card stack that cycles every 3 seconds.
Your agent
1. 1
  Collect the brand and the cards
  Every claim, price, figure and date in the copy and on the cards must come from the person.
2. 2
  Write hero.json
  Copy the closer example folder and replace everything: examples/orvane/ (light, copy on the left, four pass prices for a bouldering gym that slide to the back every 3 seconds) or examples/nimbra/ (dark, copy on the right, three product figures for a database that flip to the back every 4 seconds, over a dot grid).
3. 3
  Build
  It lists every problem in hero.json at once (missing fields, text over its limit, a setting out of range, colours that don't contrast, card text that doesn't read on its face) and writes nothing until they're fixed.
4. 4
  Check
  It loads the page at 390, 768, 1024 and 1440 px and must say ok at each: nothing wider than the screen or cut off, readable contrast for every line of text, names on every link and button, one h1.
5. 5
  Look at it
  The first two save out/still-1440x900.png and out/still-390x844.png, the stack at rest at 1.6 seconds.
6. 6
  Record the video
  Set --seconds to one full turn of the stack (cards × cycle, printed by the build: 12 for both examples), or a whole multiple of it, and the clip loops without a seam.
7. 7
  Put it live
  As a page: upload out/index.html and out/assets/ to any static host (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3).
You get
- out/index.html
- out/embed.html
- out/still-1440x900.png
- out/still-390x844.png
- out/preview.mp4
- out/poster.png

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.

Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.

If something goes wrong

build: fix hero.json first
Each line names the field and what to change; colour problems suggest a colour that works.
"text … needs 4.5:1" on a card
The card's text doesn't read on one end of its gradient. Use the ink the message suggests, or make the face darker (for white text) or lighter (for dark text). Two ends far apart in lightness can't both carry one text colour.
A value looks small
Long values (5 or 6 characters, or a long unit) are set smaller to fit. Shorten it, or move words into the unit or the title.

What’s in the download

SKILL.md16.3 KB
examples/
examples/nimbra/2.31 KBa database's figures, dark, mirrored, three cards flipping · 2 files
examples/orvane/2.54 KBa bouldering gym's passes, light, four cards sliding · 2 files
scripts/
scripts/effect/the stack itself: effect.mjs (its settings, the card colour and contrast rules, the still picture), effect.js (the cards, the tilt, the cycling, the glare) and effect.css (the faces, patterns, shadows and glow).
scripts/effect/effect.css4.92 KB
scripts/effect/effect.js12.3 KB
scripts/effect/effect.mjs12.8 KB
scripts/kit/the kit shared by every Motion Heroes skill: the build and checks (build.mjs), the section's CSS (shell.css), the browser runtime (runtime.js: clock, pausing, pixel ratio, reduced motion, fallback), the recorder (record.mjs, cdp.mjs), the pinned fonts (fonts.json; three.json is part of the kit, but this effect doesn't load three.js) and KIT.md, which explains them.
scripts/kit/build.mjs34.5 KB
scripts/kit/cdp.mjs4.90 KB
scripts/kit/fonts.json5.42 KB
scripts/kit/KIT.md16.0 KB
scripts/kit/record.mjs8.11 KB
scripts/kit/runtime.js15.1 KB
scripts/kit/shell.css9.41 KB
scripts/kit/three.json6.35 KB
scripts/build.mjs263 Bwhat you run. They call the Motion Heroes kit.
scripts/check.mjs9.48 KBLookbk's checks, screenshots, colour maths and HTML writer.
scripts/chrome.mjs3.63 KB
scripts/color.mjs1.40 KB
scripts/inline.mjs1.67 KB
scripts/markup.mjs6.15 KB
scripts/record.mjs255 B
scripts/screenshot.mjs1.79 KB
NOTICE.md1.73 KBwhere the effect comes from, and the fonts it loads.
TESTED.json613 B

26 files · 178 KB · installs to ~/.claude/skills/tilt-card-stack-hero for Claude Code and ~/.agents/skills/tilt-card-stack-hero for other agents

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

Similar Skills

View all

Cutout Float Hero+3

New

Horizontal Panels Hero+3

Details

Output: 3 to 5 glossy tilt cards · CSS 3D · page + embed · 1080p loop
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series: Motion Heroes · 71 skills
For: Founder Marketer Designer Ecommerce seller
Updated: Nov 1, 2026
Checked: Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Written for

Claude Code Codex Cursor GitHub Copilot Gemini CLI OpenCode

See all 31 agents that read skill folders.

Install guides

For your agent

Generates with

Plain HTML and CSS 3D transforms (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg

Uses tools

FFmpeg Chrome Node.js

Good forProduct launch Web design Brand

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

How long should the video be to loop cleanly?

Record one full turn of the stack: the number of cards times the cycle setting, which the build prints. Both examples take 12 seconds, so --seconds 12 gives a clip that loops without a seam.

Can I choose my own colours for each card?

Yes. Give each card a color and color2 for its gradient and an ink for its text, or leave them out and the build turns the accent round the colour wheel. Card text must reach 4.5:1 on both ends of its face.

What is the difference between slide and flip?

With slide, the top card swings out beside the stack, a little low, and tucks in at the back. With flip, it turns right over on the way and shows its back, a pattern and a ring, before settling behind.

Which agents is Tilt Card Stack Hero written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesWritten by Lookbk

Lookbk wrote this package, the card stack, its tilt, cycling and glare, from scratch in plain HTML, CSS 3D and JavaScript; it loads no library, only fonts pinned on jsDelivr under the SIL Open Font License 1.1. Written by Lookbk, no third-party code.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.