The page this skill built from examples/monolith, working in your browser. Opens in a new tab.
17-second example rendered by this skill from examples/monolith · 1280×720
Example settingswhat each example above was built from
examples/monolithpage.json
- Brand
- Monolith
- Headline
- One model. _Only_ your data
What you get
- A whole page in your words and links: hero, pinned film, sliding rail, marquee and numbers, spotlight ending
- A film that plays forward and back with the scroll inside a window that opens to full screen
- Newsreader and Instrument Sans on liquid-glass panels, in this page's own colors
- A phone layout and a reduced-motion version where every section shows its finished state
- A 1080p video of the scripted scroll and a poster, rendered frame by frame
- Checks at 390, 768, 1280 and 1920 px for sideways scrolling, overflow, overlaps, links and script errors
- Open-source licenses for every part it builds on
Good fit
- AI products, developer tools, research labs and deep-tech launches can open on a frosted glass monolith with cyan and magenta light spiralling around it.
- The orbit around the monolith plays with the scroll as the window opens, which suits a product told in three steps: connect, answer, stay private.
- Numbers like uptime or setup time count up with decimals kept, and the rail's four cards fit the layers of a product or its pricing tiers.
Not for
- Your own video: the page is paced for this film (a frosted glass monolith on a black mirror floor while cyan and magenta light ribbons spiral around it)
- Changing the colors, fonts or the order of the sections through settings
- Long copy: every field has a length limit the build enforces
- Forms, a CMS or more sections than the five it has
- Sound: the films are muted and the recording is silent
About this skill
A whole cinematic landing page that tells its story as you scroll, on ten seconds of generated footage: a frosted glass monolith on a black mirror floor while cyan and magenta light ribbons spiral around it. The film loops behind a headline that rises word by word out of a blur under a liquid-glass bar. Then the film pins in a small rounded window that opens to full screen while it plays forward and back with the scroll, under three captions in turn. A row of four frames slides sideways, a marquee runs, three numbers count up, and a spotlight follows the pointer over the last picture. Your agent writes one page.json with your words and links; the build checks every length, and a recorder makes a 1080p video of the scroll. It suits AI products, developer tools, SaaS launches, research labs and deep-tech startups.
Example request
Make a Glass Monolith scroll page for our AI search product: connect, ask, stay private as the captions, and record the launch video.
How it works
Your agent
- 1
Collect the words
Every number, price and claim must come from the person.
- 2
Write page.json
Copy
<skill>/examples/monolith/page.json(Monolith, a private AI model for your company's documents) and replace every value. - 3
Build
It lists every problem at once (a missing field, a line too long for its place, a bad link) and writes nothing until they're fixed.
- 4
Check
It serves the page and opens it at 390, 768, 1280 and 1920 px wide and with reduced motion, scrolls through every section, and fails on script errors, sideways scrolling, words that run off the screen or out of their boxes, the bar covering the copy, links without an address, and reduced motion that still animates.
- 5
Look at it
Open the address it prints and scroll slowly through the pinned film.
- 6
Record the video (optional)
Writes
out/preview.mp4(1920×1080, 30 fps, 17 seconds: the hero, the film opening, the rail, the numbers and the spotlight) andout/poster.png. - 7
Put it on the site
Use
out/index.htmlas the page and uploadout/assets/next to it.
- 1
You get
- out/preview.mp4
- out/poster.png
- out/index.html
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the video (the scripts find it; set
CHROME_PATHif they don't). - ffmpeg for the video (
brew install ffmpeg,winget install ffmpeg,apt install ffmpeg; or setFFMPEG_PATH). - A web server for the page, so the film can jump to any frame:
node scripts/serve.mjs outserves it on localhost. - Internet access when the page is opened, for the two Google Fonts. Without them system fonts stand in.
Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The film in the pinned section doesn't move when I scroll
The page was opened from disk, or the server doesn't answer Range requests. Use
node scripts/serve.mjs out, or a host that does.The build says a field is too long
Shorten the words; the layout is set for these lengths.
The check says the bar covers the copy
On short screens the hero is tight; shorten the headline or the introduction.
What’s in the download
- SKILL.md9.18 KBthese instructions.
- examples/
- examples/monolith/2.69 KB1 file
- scripts/
- scripts/kit/
- scripts/kit/build.mjs6.09 KB
- scripts/kit/cdp.mjs4.90 KB
- scripts/kit/check.mjs5.56 KB
- scripts/kit/record.mjs5.46 KB
- scripts/kit/runtime.js8.54 KB
- scripts/kit/serve.mjs2.48 KB
- scripts/build.mjs145 Bentry points; the work is in
scripts/kit/(build.mjs,runtime.jsfor the browser,check.mjs,serve.mjs,record.mjs,cdp.mjs). - scripts/check.mjs145 B
- scripts/chrome.mjs3.63 KBfinds Chrome, Chromium or Edge.
- scripts/record.mjs147 B
- scripts/serve.mjs145 B
- template/
- template/fields.json4.88 KBevery field of
page.jsonwith its limit. - template/page.html13.1 KBthe design: its CSS and every section.
- NOTICE.md1.00 KB
- TESTED.json241 B
17 files · 68.3 KB · installs to ~/.claude/skills/glass-monolith-scroll-page for Claude Code and ~/.agents/skills/glass-monolith-scroll-page for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Scroll-driven landing page on generated footage · pinned film that scrubs with the scroll · 1080p video of the scroll
- Needs
- Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
- Series
- Scroll Films · 8 skills
- Updated
- Nov 1, 2026
- Checked
- Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Can I use my own video?
No. The page is paced for this film of a frosted glass monolith on a black mirror floor while cyan and magenta light ribbons spiral around it: the loop, the scrubbing copy and the five stills all come from it. Every word, number and link is yours through page.json.
Does it look like a stock 3D render?
It is a generated film of an invented object on a mirror floor, with no logos or text. The editorial serif headline and glass bar keep it from feeling like a template.
How does the film follow the scroll?
The pinned section holds still while you scroll through it, and the film jumps to the frame that matches how far you are, forward or back. It uses a copy of the film with a keyframe on every frame, so it never stalls.
Which agents is Glass Monolith Scroll Page 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 footage, generated for Lookbk from a scene written for Lookbk, and the page, template and Scroll Cinema kit, all written for Lookbk. 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.