The page this skill built from examples/alder, working in your browser. Opens in a new tab. Also: .
14-second example rendered by this skill from examples/alder · 1280×720
Example settingswhat each example above was built from
examples/alderhero.json
- Brand
- Alder & Thaw
- Headline
- Stay until it settles.
- Colors
- background #9fa0a1 · plate #ece6da · ink #1f1c19 · accent #a9432c
- Mode
- light
- Fonts
- Fraunces and Inter
examples/pell-ridgehero.json
- Brand
- Pell Ridge
- Headline
- THE NIGHT HELD STILL.
- Colors
- background #2b2c30 · plate #1c1916 · ink #efe6d2 · accent #c9a45c
- Mode
- dark
- Fonts
- Jost and Inter
What you get
- A self-contained HTML hero page and a paste-in embed
- A traced glass globe with refraction, reflection, caustic and meniscus
- Your headline cut into the plinth as a lit V-cut inscription
- A seamless 14 s 1080p loop that opens on the settled globe
- 2 examples: a winter café in sun and an observatory in moonlight
- A baked still picture for browsers without WebGL
- Checks for text size, contrast and clearance at phone, tablet and desktop widths
- Open-source licenses for every part it builds on
Good fit
- A café, bakery or hotel that wants its winter hero to feel like a single real, quiet object.
- An observatory, planetarium or night tour that wants gold glitter swirling in moonlight above a gilt headline.
- A gift shop or seasonal launch that wants motion without a decorated layout, chips or pill buttons.
Not for
- Pages that need a scrolling story
- Brands that want a flat graphic look
- Long headlines of more than 2 lines
- Hosts that cannot run WebGL for most visitors
About this skill
A website hero that is a single still-life photograph of a glass snow globe on a stone plinth, ray traced in the browser. The headline is cut into the plinth's face as a V-cut inscription filled with paint or gilt and lit by the same sun that throws the globe's shadow and caustic. Thick glass reflects the room and its window, the water magnifies a handmade miniature and shows the room behind upside down, and an air cap carries a thin meniscus. Every 14 s loop the globe is shaken, the surface sloshes, flat flakes or glitter swirl, tumble, glint and settle on roofs and branches, and the room goes still. 2 sets: a winter café in low sun, and an observatory in moonlight.
Example request
Build a Motion Heroes hero: a glass snow globe on a stone plinth by a window, ray traced, with my headline cut into the plinth and a 14 s shake, swirl and settle loop.
How it works
Your agent
- 1
Collect the brand and the words
Name and a logo (
.svg) or a monogram. - 2
Write hero.json
Copy
examples/alder/hero.json(the café in winter sun, snow, limestone and walnut) orexamples/pell-ridge/hero.json(the observatory at night, glitter, black basalt and gilt) and replace everything. - 3
Build, check, look, record
Record
cycleseconds for a seamless loop. - 4
Put it live
Upload
index.htmlwith itsassets/folder, or pasteembed.htmlinto your page and copyassets/next to it.
- 1
You get
- index.html
- embed.html
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the recording (set
CHROME_PATHif it isn't found). - ffmpeg, for the video (or set
FFMPEG_PATH). - Internet access when the page is opened, for the fonts (pinned with integrity hashes).
Last checked Nov 9, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The page shows the headline in plain text over a photograph of the globe
WebGL isn't available; the baked still and the real headline stay.
The letters are hard to read in the stone
Raise the contrast between
paintandstone(the build stops under 3:1), or addlipLighton a dark set.The glass shows one flat colour behind the miniature
The wall needs some light and shade behind the globe; keep the default sun, or raise
sunStrength.
What’s in the download
- SKILL.md10.2 KB
- examples/
- examples/alder/1.53 KBtwo examples. · 1 file
- examples/pell-ridge/1.56 KB1 file
- scripts/
- scripts/effect/
- scripts/effect/effect.js79.2 KBthe set solved from the layout, the room and inscription, the traced globe and miniature, the air cap and meniscus, the flake simulation and its drawing (WebGL1).
- scripts/effect/effect.mjs6.03 KBthe settings, checks, letter grounds and the still.
- scripts/kit/the Motion Heroes kit v2 (see
KIT.md). - scripts/kit/build.mjs47.4 KB
- scripts/kit/cdp.mjs5.07 KB
- scripts/kit/check.mjs15.7 KB
- scripts/kit/fonts.json5.42 KB
- scripts/kit/KIT.md13.7 KB
- scripts/kit/record.mjs8.11 KB
- scripts/kit/runtime.js22.5 KB
- scripts/kit/shell.css18.7 KB
- scripts/kit/three.json6.35 KB
- scripts/build.mjs263 Bbuilds the page and the embed from
hero.json. - scripts/check.mjs179 Bthe page checks and the hero rules H6 and H9 at four widths.
- scripts/chrome.mjs3.63 KB
- scripts/color.mjs1.40 KB
- scripts/inline.mjs1.67 KB
- scripts/markup.mjs6.15 KB
- scripts/record.mjs255 Brecords the looping MP4, the poster or one still.
- scripts/screenshot.mjs1.79 KB
- NOTICE.md1.34 KB
- TESTED.json767 B
24 files · 259 KB · installs to ~/.claude/skills/snow-globe-hero for Claude Code and ~/.agents/skills/snow-globe-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Snow globe still life with the headline cut in stone · page + embed · 1080p loop
- Needs
- Node.js 18+, Chrome, ffmpeg
- Series
- Motion Heroes · 87 skills
- Updated
- Nov 9, 2026
- Checked
- Nov 9, 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
Is the glass a filter over a picture?
No. The globe is ray traced: a thick glass wall, a water core that magnifies the miniature and shows the room behind upside down, Fresnel reflection of the window, total internal reflection at the rim, and a caustic focused on the ledge.
Does the loop really close?
Yes. The flakes are simulated once for the whole 14 s loop and eased onto their resting places at the end of the settle, so the last frame matches the first, in both examples.
Can visitors shake the globe?
On a live page a quick move across the globe, or a press on it, starts the shake once the snow has settled. Reduced motion shows the settled globe as a still picture.
Which agents is Snow Globe 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 Motion Heroes kit v2 and the traced glass, miniature and flake simulation in raw WebGL1, with no third-party library. 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.