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

The page this skill built from examples/shortorder, working in your browser. Opens in a new tab.

5-second example rendered by this skill from examples/shortorder · 1280×720

What you get

  • A one-page hero and a paste-in embed with your name, words, numbers and links
  • The waitress cut out of every frame and drawn over the headline
  • The intro animation tied to the film's own clock, so words and picture stay in step
  • A phone layout: the headline stays in the frame, the introduction and buttons move into a block underneath
  • Stills of the last frame for reduced motion, no WebGL, blocked autoplay or a slow connection, so it is never blank
  • A 1080p MP4 with the film's sound and a poster, rendered frame by frame
  • Checks at 390, 768, 1280 and 1920 px for overflow, overlaps, links and script errors
  • Open-source licenses for every part it builds on

Good fit

  • Restaurants, food apps and hospitality brands can greet visitors with a teddy-bear waitress skating down a sunlit diner with a tray of cherry pie and a milkshake.
  • Ordering and check-splitting apps can fill a guest check with up to three handwritten lines and prices, with an optional stamp such as PAID.
  • Brands with a short, friendly greeting can pair a red script word of up to five letters with one or two giant slab letters, such as UP or GO.

Not for

  • Swapping in your own video: the matte is made for this film, and the scene (a teddy-bear waitress skating through a 1950s diner) is the design
  • Changing the colors, fonts or layout through settings (every word, number and link is yours; the look is fixed)
  • Long headlines: each field has a length limit the build enforces
  • Sound on the live page (browsers only autoplay muted video; the MP4 keeps the sound)
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A website hero on five seconds of generated footage: a teddy-bear waitress in a mint uniform and paper hat roller-skates through a sunlit 1950s diner with red booths, chrome stools and a checkerboard floor, holding up a tray with cherry pie and a milkshake. A red script word and a giant cream "UP!" sit behind her; she is cut out of every frame and drawn over them. Around it: a pill navigation, a guest-check card that gets stamped PAID, a starburst badge and a scrolling ticker. Your agent writes one hero.json with your words and links; the build checks every length and writes a page and an embed, and a recorder makes a 1080p MP4 with sound.

Example request

Make a Roller Diner hero for our restaurant ordering app with our name, headline, guest-check items and buttons, and record the video.

Similar Skills

View all
New
web
Boardwalk Wheel HeroClaude CodeCodexCursor+3 more agents
New
web
Desert Gas HeroClaude CodeCodexCursor+3 more agents

Details

Output
Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
Needs
Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
Series
Footage Heroes · 17 skills
Updated
Oct 26, 2026
Checked
Oct 26, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Footage generated for Lookbk, with a per-frame matte of the subjectGSAP 3.14.2 (pinned CDN, SRI)WebGL subject cut-out in the browserHeadless Chrome checks and frame-stepped recorder + ffmpeg
Good forProduct launchBrandSocial media

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

Write a review

FAQ

Why are the giant letters limited to two characters?

The matte covers the bear but not her tray, so the tray passes over the headline’s space. The headline is sized to stay out of its way, which is why the slab letters take two characters and the script word five. Wide letters such as M and W run into the bar or under the bear.

What goes on the guest check and the ticker?

The check takes a heading and number, up to three handwritten lines with prices, an optional note, a total and an optional stamp word of up to 4 letters such as PAID. The red ticker takes 3 to 6 lines of up to 34 characters each.

Do the prices and offers have to be real?

Yes, every number, price and claim must come from you. With none to give, use plain lines in the ticker such as ‘Open late’ and an example order on the check rather than inventing figures about the business.

Which agents is Roller Diner 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 licensesBuilt on greensock/GSAP

What Lookbk adds on top of greensock/GSAP (Standard License): the footage, which was generated for Lookbk (a still image animated into film, with the matte cut from every frame), and the layout, template and Footage Heroes kit, all written for Lookbk. GSAP (free under its Standard License) loads from a pinned CDN with SRI; the fonts are from Google Fonts.

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