The page this skill built from examples/raster-office, working in your browser. Opens in a new tab. Also: Versal days.
12-second example rendered by this skill from examples/raster-office · 1280×720
What you get
- A self-contained index.html hero and an embed.html to paste into an existing site
- Your word, paper, ink and accent colors, fonts, logo, headline, buttons and a header caption with a beat ticker
- 18 documented effect settings: word, case, seed, loop length, beats, snap, columns, gap, fill, accents, anchor, three colors, header, caption, frame, pointer press
- Shapes, outline letters or a mix in the free cells; the word on the top or bottom rows; a card or a bleed to the edges; left, right or centered layouts, with the poster above the copy on phones
- An SVG still of the first beat for reduced motion or a failed script, so the hero is never blank
- Contrast and layout checks at 390, 768, 1024 and 1440 px
- A frame-perfect MP4 that loops seamlessly (1080p by default, portrait sizes too) and a poster
- Open-source licenses for every part it builds on
Good fit
- Design studios, type foundries and record labels can set their name one big letter per cell on a strict Swiss grid.
- Festivals, conferences and museums can put a date or edition in the header caption, with a beat ticker and a counter beside it.
- Loud, graphic brands with a short word of 3 to 8 letters get the strongest poster, since every letter fills its own cell.
Not for
- Long words or sentences: the grid sets one letter per cell and reads best at 3 to 8 letters
- Soft, quiet or photographic brands: the look is loud, flat and graphic by design
- Full landing pages below the hero (see the Landing Pages series)
About this skill
A Swiss poster that moves to a beat beside your headline. Your brand word is set one big letter per cell on a strict grid, and the free cells carry flat marks: dots, quarter discs, bars, arrows. On every beat one move snaps through. A band of tiles turns, a row slides and wraps, neighbors trade places, or tiles flip ink and paper with a wipe. Halfway through, the whole poster inverts. Then every move is undone in a new order, so the loop lands back on the word. Your agent sets the word, grid, colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.
Example request
Build a Kinetic Type Grid hero for Raster Office, a Zurich graphic design studio: the word RASTER on a black four-column poster with vermillion accents, headline 'Posters, signage and identities on a grid.', and record a 12-second loop.
How it works
Your agent
- 1
Collect the brand
Every claim, price, date and spec in the copy must come from the person.
- 2
Write hero.json
Copy the closer example and replace everything:
examples/raster-office/hero.json(a Zurich graphic design studio, paper page, a black poster with off-white letters and vermillion accents, the word on top, copy on the left) orexamples/versal-days/hero.json(a type and motion festival in Basel, near-black page, an off-white poster with black letters, cobalt accents and outline letters, the word at the bottom, copy on the right). - 3
Build
It lists every problem in
hero.jsonat once (missing fields, text over its limit, a setting out of range, colours that don't contrast, ink too close to paper, an accent too close to paper, an odd number of beats, beats shorter than 0.42 s) and writes nothing until they're fixed. - 4
Check
It loads the page at 390, 768, 1024 and 1440 px and must say
okat each: nothing wider than the screen or cut off, readable contrast for every line of text (the build has already checked the text against every colour the effect can put behind it), names on every link and button, one h1. - 5
Look at it
They save
out/still-1440x900.pngandout/still-390x844.png, the live hero at 0.4 seconds. - 6
Record the video
It steps the hero through 8 seconds at 30 fps at 1920×1080, drawing each frame at exactly its time, and writes
out/preview.mp4(H.264, for X, LinkedIn, Product Hunt or a README) andout/poster.png(the frame at 5.1 s). - 7
Put it live
As a page: upload
out/index.htmlandout/assets/to any static host (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3).
- 1
You get
- out/index.html
- out/embed.html
- out/still-1440x900.png
- out/still-390x844.png
- out/preview.mp4
- out/poster.png
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the recording (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). - At runtime, nothing but a 2D canvas: the drawing code is inlined in the page. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts.
Last checked Oct 26, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
build: fix hero.json firstEach line names the field and what to change; colour problems suggest a colour that works.
The letters look small or uneven
Each letter is fitted to its cell by its own outline, so narrow letters (I, J) stay narrow; that is the Swiss look. A heavier
fonts.weightfills the cells more.The word is cut off
wordtakes at most 12 letters and the grid always has rows enough for it, but long words in few columns make small cells; raisecolsor shorten the word.
What’s in the download
- SKILL.md16.3 KB
- examples/
- examples/raster-office/2.07 KBRaster Office, a graphic design studio, light · 2 files
- examples/versal-days/2.00 KBVersal Days, a type and motion festival, dark · 2 files
- scripts/
- scripts/effect/the poster itself:
effect.mjs(its settings, checks and the still picture),effect.js(the grid, the tiles, the beats and their moves, on a 2D canvas). - scripts/effect/effect.js23.8 KB
- scripts/effect/effect.mjs11.8 KB
- scripts/kit/the kit shared by every Motion Heroes skill: the build and checks (
build.mjs), the section's CSS (shell.css), the browser runtime (runtime.js: clock, pausing, pixel ratio, reduced motion, fallback), the recorder (record.mjs,cdp.mjs), the pinned fonts (fonts.json), the pinned three.js catalogue (three.json, unused by this effect) andKIT.md, which explains them. - scripts/kit/build.mjs34.5 KB
- scripts/kit/cdp.mjs4.90 KB
- scripts/kit/fonts.json5.42 KB
- scripts/kit/KIT.md16.0 KB
- scripts/kit/record.mjs8.11 KB
- scripts/kit/runtime.js15.1 KB
- scripts/kit/shell.css9.41 KB
- scripts/kit/three.json6.35 KB
- scripts/build.mjs263 Bwhat you run. They call the Motion Heroes kit.
- scripts/check.mjs9.48 KBLookbk's checks, screenshots, colour maths and HTML writer.
- scripts/chrome.mjs3.63 KB
- scripts/color.mjs1.40 KB
- scripts/inline.mjs1.67 KB
- scripts/markup.mjs6.15 KB
- scripts/record.mjs255 B
- scripts/screenshot.mjs1.79 KB
- NOTICE.md1.67 KBwhere the effect comes from, and the fonts it loads.
- TESTED.json721 B
25 files · 183 KB · installs to ~/.claude/skills/kinetic-type-grid-hero for Claude Code and ~/.agents/skills/kinetic-type-grid-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Animated canvas hero · page + embed + 1080p video
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Motion Heroes · 50 skills
- Updated
- Oct 26, 2026
- Checked
- Oct 26, 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
How long can the word be?
Up to 12 characters, with spaces dropped, though 3 to 8 letters read best. The grid always has rows enough for the word, but a long word in few columns makes small cells, so raise the columns (3 to 8) or shorten it. Above 6 columns, letters on phones fall under 50 px.
Which fonts work best for the letters?
The letters are drawn in the display face at the headline weight, so a heavy weight gives the strongest poster. A heavy grotesk or condensed face such as Anton, Archivo Black, Oswald or Schibsted Grotesk at 800 carries the grid. Any Google Fonts family works, with a pinned list loading from jsDelivr.
Does the loop really land back on the word?
Yes. Beats per loop must be even, from 8 to 24 (default 16), because the second half undoes every move of the first in a new order. A loop lasts 8 to 14 seconds with each beat at least 0.42 s, and reduced motion shows the first beat with the word set straight.
Which agents is Kinetic Type Grid Hero 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: the Motion Heroes kit, the poster grid, letter fitting and beat choreography, the still picture and the examples. No third-party code is included. 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.