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

18.7-second example rendered by this skill from examples/hearthpage · 1280×720

Example settingswhat each example above was built from

examples/hearthpagepage.json
Brand
Hearthpage
Style
paper
Headline
Hearthpage: the quiet machinery behind paid newsletters
Sections
7
examples/sablewirepage.json
Brand
sablewire
Style
graphite
Headline
Sablewire: CI that never builds the same thing twice
Sections
7

What you get

  • A whole page or a single pricing page, from the sections you pick, in your words, numbers and links
  • A monthly/yearly switch that rolls each price digit by digit, and announces the new prices to screen readers
  • Testimonials as a pinned stack that deals away with the scroll, or a drifting wall of three, two or one column
  • Two finished styles, paper and graphite, with your own accent colour and closing film or picture
  • Phone layouts (a sticky billing switch, sideways-dealt letters) and a reduced-motion version where everything is shown and still
  • Checks at 390, 768, 1024 and 1440 px for overflow, text size, AA contrast, clipping, focus rings and reduced motion
  • A 1080p video of the scripted scroll through every section, rendered frame by frame, and a --moments report of when each section is settled so stills never catch a digit mid-roll
  • Open-source licenses for every part it builds on

Good fit

  • SaaS and developer tools get a comparison table whose header pins as you read, and an annual switch that rolls every price like an odometer, as in Sablewire.
  • Newsletters, publishers and studios get the paper style: Fraunces on cream, testimonials as letters lifting off a pile, and an ink-black footer with the name across it.
  • Teams that only need part of a page can build just pricing and the FAQ, or stats and testimonials, in any order, with the same staggered reveals throughout.

Not for

  • New section types beyond the seven (masthead, stats, testimonials, pricing, faq, cta, footer)
  • Other fonts or layouts through settings: each style is the design; the accent colour is yours
  • Checkout or forms: the buttons are links to your own signup and contact pages
  • Long copy: every field has a length limit the build enforces

About this skill

A library of landing-page sections that move with one motion language, composed in any order from one page.json: a masthead whose headline rises word by word out of a mask, a stats band whose numbers count up as it arrives with meters that measure each one against a target you name, testimonials as a pinned stack of letters that lift off the pile as you scroll or as a wall of panels with pull quotes and results drifting against each other, pricing with a monthly/yearly switch that rolls every digit like an odometer, an FAQ, a closing band whose film frame opens out to the edges, and a footer with the wordmark set to fill the width. The two styles are laid out differently, not just re-coloured: paper (warm editorial, Fraunces on cream stock, plan columns, a magazine Q&A with roman numerals, hand-drawn rules and drop capitals, an ink back page) and graphite (dark technical, Geist inside a ruled frame, stats as build-timeline bars over a live cache ticker, pricing as a comparison table with a pinned header, a terminal FAQ that types its answers, the name in outline cut by the floor). Your agent writes page.json; the build checks every length, the check tests four widths for overflow, text size, AA contrast, clipping, focus rings and reduced motion, and a recorder makes a 1080p video of the scroll.

Example request

Use the Motion Sections Kit to build our pricing page in the graphite style: our three plans with monthly and annual prices, the six questions from support, a wall of customer quotes and our footer links.

Similar Skills

View all
New
video
Dark Glass LandingClaude CodeCodexCursor+3 more agents
New
video
Auth over FootageClaude CodeCodexCursor+3 more agents

Details

Output
Animated landing-page sections you compose in page.json · rolling prices, comparison table, pinned quote stack, counters with real meters, editorial and terminal FAQs · two styles with their own layouts · 1080p video of the scroll
Needs
Node.js 18+, and Chrome for the checks; ffmpeg only for the video
Series
Page Kits · 4 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

Seven section templates rendered from page.json, with a style sheet per style (no framework, no libraries)A small inlined runtime that draws every frame from the scroll and the clock (reveals, counters and meters, stack, wall, ticker, digit roll, typed answers)Headless Chrome checks and a frame-stepped scroll recorder + ffmpeg

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

Write a review

FAQ

Can I use only some of the sections?

Yes. page.json lists the sections in the order you want; the masthead has to come first and the footer last when you use them, and everything else can be left out or reordered.

How do the prices roll?

Each digit is a column of 0 to 9 that slides to its new value when the billing switch changes, right to left and plan after plan, so 48 rolls down to 40 through every number between. Screen readers hear the new price as text.

What happens with reduced motion?

Nothing moves on its own: every section is shown finished, the stack becomes a grid of letters, the wall a still grid, and the film stays on its first frame. The billing switch and the questions still work, at once. The check fails if anything still moves.

Which agents is Motion Sections Kit 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

the sections, both styles and the Motion Sections kit, all written for Lookbk; the two closing films are Lookbk's own generated Loop Heroes footage. The fonts are from Google Fonts. 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.