Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In
Open live demo

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

10-second example rendered by this skill from examples/fernhall · 1280×720

Example settingswhat each example above was built from

examples/fernhallhero.json
Brand
Fernhall Type
Headline
Letters with some weight.
Badge
New family · Plump Display
Colors
background #f3ead9 · ink #1d1a16 · accent #a5351f
Mode
light
Fonts
Bricolage Grotesque and Instrument Sans
examples/pomelohero.json
Brand
Pomelo
Headline
Reading that feels like playtime.
Badge
Reading app for ages 4 to 7
Colors
background #16224a · ink #f7f4ec · accent #ffc94d
Mode
dark
Fonts
Fredoka and Nunito

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your word dropped as solid, extruded letters or toy blocks in your colours and headline font
  • Deterministic physics with bounce, tumble, friction and a squash on every hard landing
  • A trapdoor sweep that clears the shelf so the loop closes exactly
  • A pointer shove on the live page and a scripted nudge in recordings
  • An SVG still of the settled pile for reduced motion and failures
  • A frame-exact 1080p MP4 loop and poster, plus contrast and layout checks at four widths
  • Open-source licenses for every part it builds on

Good fit

  • A type foundry, sign maker or lettering studio that wants its letters to feel heavy and physical on the first screen.
  • A toy, game or children's learning brand whose name reads well as a pile of bright blocks.
  • A launch or brand page that needs a playful hero video which loops without a visible seam.

Not for

  • Long words or phrases (the word is 2 to 10 characters)
  • Calm, minimal or luxury pages that need a still hero
  • Lowercase or script wordmarks that must keep their exact shape
  • Reproducing a real logo as the falling letters

About this skill

Big, chunky letters of the brand's word fall from the top of the hero one after another, bounce, tumble and pile up on a shelf beside the headline. Each letter is solid, with a lit face, a darker extruded side, a soft shadow and a squash and spring back when it lands hard. A small rigid-body solver runs the whole loop once from a fixed seed with a fixed step, and every frame is looked up by time, so the recording is the same on any machine. Near the end of the loop the shelf drops open like a trapdoor, the pile slides away and the drop starts again, closing the loop exactly. On the live page the pointer shoves letters aside. Letters can be the glyphs themselves or toy blocks, drawn on a plain 2D canvas with no libraries.

Example request

Make a hero for our type foundry where the letters of our new typeface's name drop in and pile up beside the headline.

Similar Skills

View all
New
web
Spotlight Type HeroClaude CodeCodexCursor+3 more agents
New
web
Text on Path HeroClaude CodeCodexCursor+3 more agents

Details

Output
Rigid-body letter drop · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 71 skills
Updated
Nov 1, 2026
Checked
Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Hand-written rigid-body solver on a 2D canvas (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forBrandProduct launchSocial media

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

Write a review

FAQ

Will the drop look the same every time?

Yes. The physics runs once from the seed with a fixed step, and every frame is looked up by time, so the same settings always give the same drop, the same pile and the same recording on any machine. Change the seed for a different pile.

How does the loop restart?

Near the end of each loop the shelf drops open like a trapdoor, 40 degrees by default, the pile slides off its far end, and the shelf swings back level before the next drop. With the default 10 second cycle, record 10 seconds for one exact loop.

Can I use toy blocks instead of letters?

Yes. Set style to blocks and each letter is printed on a rounded block in your colours, with the letter in a contrasting ink. The blocks bounce, tumble and pile with the same physics as the plain letters.

Which agents is Letter Drop 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 from scratch: the letters run on a hand-written rigid-body solver drawn on a plain 2D canvas with no libraries, and the brands in the examples are made up. 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.