Rolling Word Herov1.0.0
Use this Skill to build a product website.
- Yours to keep: the files stay on your computer.
- Payment by Waffo Pancake, our merchant of record.
- 38 free Skills to try first
A hero section skill for Claude Fable 5: a centered headline whose last word rolls to the next every two seconds, delivered as React source on Framer Motion.
Picked most often by
Updated Nov 6, 2026
Preview gallery
Similar Skills
View all
What you get
- The Hero component in React with its button, plus a short usage file your agent can paste straight into a page.
- references/theme.md with the palette, type, radius, icon stroke and motion tokens, all editable from that one file.
- Phone and desktop sizes already set, with the headline stepping down to fit a narrow screen.
Good fit
- Launch or product pages that need a finished opening section today instead of a blank frame.
- First screens where one changing word can carry several promises without a carousel.
- Teams who want readable source they own, not another hero package to keep updated.
Not for
- Products that already follow a design system of their own; this block's palette and type scale would compete with it.
- Anyone wanting a versioned package from npm; you receive source code and keep it up to date yourself.
- Pages that also need a nav bar, forms, login or checkout; this block is only the hero.
About this Skill
Rolling Word Hero is a landing page hero skill for Claude Fable 5, for a first screen that moves without shouting. A small announcement pill sits over a centered headline, and the final word swaps among five choices on a two-second timer, rising on a soft spring. A supporting sentence and two buttons finish the section. Words, accent and spacing are yours to change through the block's tokens.
How it works
- Name the page that needs a hero; the agent checks your stack and rewrites the block in that project's own style.
- Write your headline, the rolling words and the supporting sentence, keeping each word short enough for one line.
- Set your accent in the theme tokens and the buttons follow it.
- Run scripts/check-blocks.mjs, then open the page at phone width before it ships.
Checked before delivery
- The last word of the headline changes every two seconds: the old word leaves upwards, the new one rises from below and settles, and the list starts again after the last word
- At phone width the headline, supporting line and buttons stay on the screen without sideways scrolling
- scripts/check-blocks.mjs reports no symbol icons, no off-palette blue or violet and no remote files
What you need before you start
- You bring
- The product or company name and how the headline should begin · Optional: five short words to take turns at the end of the headline, the supporting sentence and the labels of the three buttons
- Dependencies
- React 18+ · Tailwind CSS · framer-motion · lucide-react
- Outside costs
- None
- Last tested
- v1.0.0 — Claude Code / Cursor
User reviews
Loading reviews…
FAQ
What if my site is not React?
The source is React with Tailwind and Framer Motion, but the agent studies your repository first and rebuilds the hero in your own framework and conventions. A standalone HTML file happens only if you ask for one.
Will the hero load anything from a CDN?
No. Fonts and icons stay as local files, and scripts/check-blocks.mjs flags anything pointing at another host.
How do I stop the word from rolling?
Keep one word in the list or delete the timer in animated-hero.tsx. The headline then holds still, and the pill, sentence and buttons stay exactly where they were placed.