Baseframe field notes
The Interface Motion Kit
One focused collection for the moments that make a website feel considered. Plain HTML and CSS, with commented source and reduced-motion overrides.
18 patterns, organized by purpose
- Entrances: soft rise, quiet fade, gentle scale, slide in, spring settle, curtain reveal.
- Interaction: hover lift, press feedback, underline reveal, icon nudge, focus ring, card border.
- Feedback and transitions: status pulse, loading dots, success reveal, toast entrance, panel reveal, badge pop.
The sample demonstrates three patterns. The full kit includes every pattern in one stylesheet, a runnable HTML gallery, integration instructions, and a license for use in your own or your clients’ end products. It does not include a React library, Figma files, custom installation, or a promise of future updates.
Download the free sample HTML ↓
$29 USD · one-time
The paid offer is on hold while we validate demand. The sample and playground remain available without an account.
How you use it
- Open the included gallery in a browser.
- Copy the pattern and its reduced-motion override into your stylesheet.
- Apply the documented class to your own markup.
- Adjust color, timing, and distance; test in your actual interface.
These are presentation patterns. You provide application state, live-region announcements where appropriate, and accessible HTML. CSS animation alone does not make an interface accessible.
License and support
Read the full license before purchase. For a problem with a paid download, contact [email protected] with the purchase reference, never your payment card details. No response time is promised.