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

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

Example settingswhat each example above was built from

examples/kiteframehero.json
Brand
Kiteframe
Headline
Websites that work as hard as your bakery
Badge
Sites, bookings and payments in one
Colors
background #0c0b12 · ink #f4f1ea · accent #ffb36b
Mode
dark
Fonts
Bricolage Grotesque and DM Sans
examples/tallowhero.json
Brand
Tallow
Headline
Calm, honest planning for designers
Badge
Weekly planning, without the meeting
Colors
background #f5f1ea · ink #17151a · accent #a8380a
Mode
light
Fonts
Fraunces and Inter

What you get

  • A self-contained HTML page with your headline ending in a rolling word
  • A paste-in embed of the same section, scoped so it won't touch your styles
  • Up to 8 words, each with its own colour, glow, underline and bloom
  • A blinking caret, overshoot, motion blur and drum depth you can tune or switch off
  • A dot or hairline backdrop drum that turns with the words
  • An SVG still picture and a no-script headline that still reads
  • A frame-exact 1080p MP4 and poster that loop seamlessly, plus two worked examples
  • Open-source licenses for every part it builds on

Good fit

  • Products that serve several kinds of customers and want each one to see itself in the headline.
  • Agencies, studios and tools that can finish one strong sentence with 3 to 8 different words.
  • Launch pages where a big, readable headline should carry the motion instead of an illustration.

Not for

  • Headlines where the changing part is longer than a short phrase of 18 characters
  • More than 8 alternatives, since the drum takes 3 to 8 words
  • Pages that need a product picture or illustration beside the copy
  • Scroll-driven storytelling sections

About this skill

A big headline is the picture: its last word sits on a smooth 3D drum and rolls through a list of 3 to 8 words. Each word tips up and away in perspective while the next rises from below, both smeared by a vertical motion blur, then rolls a little past its place and settles back. Every word has its own colour, which also lights a soft glow around the letters, an underline that slides to the word's width and a wide bloom behind the headline, all blending during the roll. A caret blinks after the word while it rests. Behind it, a faint drum of dots or hairlines turns with the words. The words are real text in the headline, so the page reads with the first word without the script, and the loop closes exactly.

Example request

Use the word-carousel-hero skill to build a hero for my website builder Kiteframe: the headline "Websites that work as hard as your bakery" with the last word rolling through florist, barbershop, yoga studio and bike shop, each in its own colour, on a near-black page with a drum of dots, copy centred, and a 12 second loop video.

Similar Skills

View all
New
web
Variable Weight Wave HeroClaude CodeCodexCursor+3 more agents
New
web
Scroll Word Reveal HeroClaude CodeCodexCursor+3 more agents

Details

Output
Rolling word drum · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 71 skills
Updated
Nov 1, 2026
Checked
Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Plain DOM text with CSS 3D transforms and a maskAn SVG blur stretched vertically for the motion blurPlain 2D canvas for the backdrop, no librariesHeadless Chrome for checks and frame-exact recording, ffmpeg for the MP4
Good forProduct launchBrandWeb design

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

Write a review

FAQ

Does the headline still work without the script?

Yes. The rolling word is real text in the headline. Without the script the page shows the headline with your first word, and screen readers and search engines read that same sentence.

How long is one loop?

One loop is every word once: the number of words times hold plus roll. With 5 words, a 1.7 second hold and a 0.7 second roll, that is 12 seconds, and the build prints it for you.

Can I give each word its own colour?

Yes. Each word takes a colour that also tints its glow, its underline and the bloom behind the headline. The build checks every colour reaches 4.5:1 on your background and suggests one that does when it falls short.

Which agents is Word Carousel 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 from scratch; it uses no libraries, only the browser's CSS 3D transforms, an SVG blur and a 2D canvas, and its fonts load from jsDelivr or Google Fonts under the SIL Open Font License. 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.