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

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

Example settingswhat each example above was built from

examples/hollinhero.json
Brand
Hollin Rooms
Headline
Snowed in, happily.
Colors
background #f2efe8 · ink #1c2026 · accent #b5562f
Mode
light
Fonts
Fraunces and Inter
examples/ferrowhero.json
Brand
Ferrow Supper Club
Headline
Supper, by lamplight.
Colors
background #0f1522 · ink #f3ead8 · accent #e0a458
Mode
dark
Fonts
Newsreader and DM Sans

What you get

  • A self-contained index.html and a paste-in embed.html
  • A miniature village world built entirely in code, with no image or model files
  • 3 scroll stations where your own lines are painted, gilded and handwritten into the scene
  • 2 worlds: a winter morning for light pages and an autumn night for dark ones
  • A still picture for reduced motion and when WebGL is missing
  • A 1080p MP4 of the whole scroll story and a poster frame
  • Page checks at 4 widths for text size, contrast and bar clearance
  • Open-source licenses for every part it builds on

Good fit

  • A guesthouse, restaurant or bakery that wants visitors to feel the walk from the road to the table.
  • A walking holiday or village brand whose story is a place you arrive at in 3 steps.
  • A local maker who wants the copy painted, gilded and handwritten into a world rather than laid over a photo.

Not for

  • Products that need a photo of the real thing in the hero
  • Pages that must not pin the scroll
  • Brands far from a place-and-arrival story, such as fintech dashboards
  • Sites that cannot load three.js from a CDN

About this skill

A scroll-pinned hero that is a model maker's miniature country built in three.js code: a ridge with a fingerpost, a valley of stone-walled fields and flocked conifers, a village of plaster houses under thick snow, and one bakery you go into. As the visitor scrolls 3 screen heights, a macro lens travels down the lane, along the street and in at the window, stopping at 3 stations where the copy is built into the place: painted on the fingerpost, gilded on the fascia, written on a card on the table. One low sun with soft shadows, haze, mist and a shallow focus make it read as a real model. A second world is the same village on an autumn night, lit by its windows and lamps.

Example request

Build a scroll-pinned website hero for a village guesthouse: a miniature snowy valley built in three.js, a macro lens that travels from a fingerpost on the ridge to the bakery's gilded fascia and in through the window to a card on the table, with each step's line built into the world, soft sun shadows, haze and a shallow model-like focus, on the Motion Heroes story composition.

Similar Skills

View all
New
web
Wireframe ScanClaude CodeCodexCursor+3 more agents
New
web
Day NightClaude CodeCodexCursor+3 more agents

Details

Output
three.js miniature-world scroll story · page + embed · 1080p story clip
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

three.js r180 miniature world with soft shadows and depth of fielda macro lens on a scroll-driven spline through 3 stationscopy built into the scene as painted, gilded and handwritten objectsa front layer of near props drawn over the headline
Good forBrandWeb designProduct launch

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

Write a review

FAQ

Can I change the words on the fingerpost, the fascia and the card?

Yes. Set effect.lines to 3 short lines, one per station; they are drawn into the scene in your fonts. Give the numbered steps different words so the page never repeats a line.

Does it work on phones?

Yes. On a 390 px screen the headline sits over the sky and slope, each station's object fills the band under it, and a lighter blur and shadow map keep the frame time low.

What happens when WebGL is not available or motion is reduced?

The page shows a soft still of the first station's sky and snow (or night field), the real headline and the steps, so nothing is lost.

Which agents is Scroll World 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, including the world, the lens and the kit; the page loads three.js r180 (MIT License) with its RoundedBoxGeometry and BufferGeometryUtils add-ons from a pinned CDN. 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.