Free downloadMake Your Site Feel Alive: Five Web Animations in One File
A free kit to add motion to your website without making it slow or hard to use: one demo page with five effects (split headline, scroll reveal, magnetic button, sticky gallery, count-up numbers), the code of each, and a Claude Code prompt per effect that adds it to your own site. With a guide on which effect fits where, why only transform and opacity should move, the LCP rule for your hero, and how every effect switches off for visitors who reduce motion. No libraries. Idea via @mobileeditingclub.
What is inside
- alive-site.html The demo page: one file, no libraries, fonts included, works offline. Add ?static to see it with every effect off.
- Split + reveal A headline whose words slide up one after the other, and cards that fade in once as you scroll to them.
- Magnetic + sticky A button that leans toward the mouse with a fixed limit, and a pinned gallery that slides sideways while you scroll.
- Count-up Numbers that count up once when they come into view, with the final value in the HTML for search engines and screen readers.
- PROMPTS.md A setup prompt, one Claude Code prompt per effect for your own site, and a check prompt for phone width, reduced motion and no JavaScript.
- Guide Which effect where, seven performance rules, six accessibility rules, and how each effect works in plain words.
Any current browser to open the demo page. To add the effects to your own site: the site's code and Claude Code (or you copy the code yourself). For plain HTML and for frameworks such as React, Next.js or Astro (the prompts ask Claude Code to adapt the code to your stack). No account. The guide is in English.