# SDS Motion Forge

> 611+ production-ready CSS animations across text, buttons, inputs,
> cards, loaders and scroll. One class name per effect, zero required
> JavaScript, fully backward compatible, MIT licensed.

## Install

- CDN: https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css
- npm: npm i @salkomdesignstudio/sds-motion-forge  (import the dist CSS once)
- Category bundles: @salkomdesignstudio/sds-motion-forge/categories/{text|buttons|inputs|cards|loaders|scroll}

## Usage pattern

Add the class: <h1 class="sds-velvet-drop">Hello</h1>
Scroll-gate any effect: add data-sds + https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/sds-scroll.min.js
Cursor/interactive effects: https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion-interactive.min.js (zero config)
Theme: override --sds-primary, --sds-duration(-instant…-dramatic), --sds-ease-(standard|decelerate|accelerate|emphasized|spring|bounce)

## Machine-readable

- Full effect registry (names, categories, requirements, triggers, tokens): https://sds-motion-forge.netlify.app/registry.json
- Motion specification: https://github.com/salkomdesignstudio/SDS-Motion-Forge/blob/main/SPEC.md
- README: https://github.com/salkomdesignstudio/SDS-Motion-Forge#readme

## Wrappers

- React: @salkomdesignstudio/motion-forge-react (<SdsMotion>, <SdsText>, useSdsInView)
- Angular: @salkomdesignstudio/motion-forge-angular (sdsMotion/sdsText/sdsInView directives)
- Tailwind: @salkomdesignstudio/motion-forge-tailwind (animate-sds-* utilities)
- Web Components: @salkomdesignstudio/motion-forge-elements (<sds-motion>, <sds-text>)

## Accessibility

Every effect is neutralized under prefers-reduced-motion (machine-verified).