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/fennick, working in your browser. Opens in a new tab. Also: Calce.

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

Example settingswhat each example above was built from

examples/fennickhero.json
Brand
Fennick
Headline
Leave the city at the door.
Colors
background #efe8da · ink #1b2733 · accent #c8682a
Mode
light
Fonts
Fraunces and Inter
examples/calcehero.json
Brand
Calce
Headline
LEAVE THE HEAT AT THE GATE.
Colors
background #17140f · ink #efe6d4 · accent #d9a441
Mode
dark
Fonts
Big Shoulders Display and Inter

What you get

  • A self-contained HTML page and a paste-in embed
  • A pinned story that parts the printed card a word at a time and pushes into the scene
  • 2 cut-paper scenes, a lakeside sauna at dusk and a courtyard at noon
  • Captions printed on the card and given to screen readers as a list
  • Checks at 4 widths for text size, contrast and clearance
  • A still picture for reduced motion and when WebGL2 is missing
  • A 1080p MP4 of the whole story
  • Open-source licenses for every part it builds on

Good fit

  • Hotels, baths and retreats can let visitors step through the page into the place itself.
  • Editorial launches get a printed first screen whose headline parts a word at a time as the story begins.
  • A brand that wants depth without footage gets a lit paper diorama drawn entirely in code.

Not for

  • Pages that must not pin while the visitor scrolls
  • Footage or photography inside the frame
  • Scenes other than the 2 shipped without editing the shader
  • Very long headlines or captions

About this skill

A scroll story built as a tunnel book. The page is a printed card: a small plate, a running head, a numbered caption legend and the headline are cut through it. As visitors scroll, the section pins and the card's 2 leaves lift and part along a die-cut seam that steps round every word, so the headline splits a word at a time and the card's thickness catches the light. The camera then pushes through the plate into a diorama of 8 cut-paper sheets with paper tooth, lit edges, soft shadows that slide with the parallax, backlit tissue and vellum mist. 2 scenes ship: a lakeside sauna at blue hour and a noon courtyard through an arch.

Example request

Build an editorial hero that works like a tunnel book: the headline and a small plate are cut through a printed card, and as visitors scroll the card parts along a seam that steps round each word and the camera pushes through the plate into a lit cut-paper diorama.

Similar Skills

View all
New
web
Dither LaserClaude CodeCodexCursor+3 more agents
New
web
Image TrailClaude CodeCodexCursor+3 more agents

Details

Output
WebGL cut-paper scroll story hero · page + embed · 1080p video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 77 skills
Updated
Nov 2, 2026
Checked
Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL2 with one fragment shader, no librariesThe headline cut into the scene from the page's own layoutMotion Heroes kit v2 (editorial composition with a pinned scroll story)Headless Chrome checks and frame-stepped recorder, ffmpeg
Good forBrandWeb designProduct launch

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

Write a review

FAQ

Is the headline still real text?

Yes. The page keeps the real headline for readers, search and screen readers. The letters you see are cut into the card from its exact layout, and inside them the scene is held to a level that reads against the card.

What happens on phones?

The plate fills the band between the bar and the headline, the headline still parts along the seam, and the story pins for 3 screen heights just as on a laptop. The printed caption legend is left off for room, but screen readers still get it.

Can I change the scene?

Pick the lake or the courtyard, a landscape or portrait plate, the depth of the book and how far the pointer looks around. New scenes mean editing the cut-paper shapes in the shader.

Which agents is Scroll Expand 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 and its Motion Heroes kit v2; it uses no third-party library, and fonts load from Fontsource 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.