website-motionlisted

OPTIONAL polish layer: two motion effects that make a long marketing page feel authored rather than dumped — a count-up on hero stat numbers, and a 12px rise-and-fade reveal on section headings — plus the reduced-motion contract, the a11y gate change, and the motion.spec.ts that keep them from silently costing a visitor access to content. Not part of the default new-website build: add it only when a site has a long scrolling homepage and real numbers worth reading. Also carries the one-line hero-height check (a binding min-height:100vh hides the next section at every screen height). Trigger phrases: "add some motion", "scroll reveal", "fade in on scroll", "animate the stats", "count-up numbers", "animated counter", "the page feels flat", "eye candy", "make the homepage less static", "prefers-reduced-motion", "does the animation break accessibility".
karero/website-builder · ★ 4 · Web & Frontend · score 74

Install: claude install-skill karero/website-builder

# Website motion Two effects, deliberately. Motion is where a site starts looking machine-made: applied to every card and paragraph it reads as a template, and it is the single easiest way to lose content to an accessibility bug nobody notices. This skill ships the two that earn their place, and — more importantly — the contract that makes them safe. **Only add this when the page is actually long.** On a three-section site a reveal is noise. The count-up needs numbers a visitor should stop and read (attendee counts, years running, projects shipped), not decoration. **Prerequisite:** `website-qa` green first. This adds a test file to that suite and changes how the a11y gate runs. > ### The class names below are examples, not the scaffold's > > `.section-title`, `.section-subtitle`, `.hero-stat-number` and `.hero` appear > **zero times** in `new-website`'s Astro templates. They come from a real site > this was extracted from. Nothing here works until you point every selector at > your own markup — the CSS, the two scripts, and the `CONFIG` block at the top > of `templates/motion.spec.ts`. The spec skips with a stated reason when a > selector is left empty, so an unconfigured copy reports "not applicable" > instead of failing in a way that looks like a product bug. --- ## 0. The one-line check that is not motion Before adding anything, measure the hero: ```js const h = document.querySelector('.hero'); // your hero's selector ({ vh: innerHeight, heroHeight: h