I built the animation
library my clients needed.

<p class="sds-velvet-drop">Animates on load. Zero JavaScript.</p>

<!-- Mode 2 — scroll-gated via data-sds -->
<section class="sds-scroll-fade-up" data-sds>Animates when entering viewport.</section>

<!-- Mode 3 — modifier stack -->
<div class="sds-card-lift sds-delay-200 sds-ease-spring sds-once" data-sds>
  200ms delay · spring easing · plays once on scroll — no JavaScript
</div>

<!-- Mode 4 — stagger children automatically -->
<ul class="sds-stagger">
  <li class="sds-scroll-fade-up" data-sds>Item 1</li>
  <li class="sds-scroll-fade-up" data-sds>Item 2</li>
</ul>

:root {
  /* 6-step duration scale — override at :root to retime all 300+ animations */
  --sds-duration-instant:  0.12s;
  --sds-duration-fast:     0.25s;
  --sds-duration-normal:   0.4s;
  --sds-duration-moderate: 0.6s;
  --sds-duration-slow:     0.9s;
  --sds-duration-xslow:    1.4s;

  /* Named easing — not raw bezier values */
  --sds-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --sds-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --sds-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
}

# Download previous published tarball from npm registry
- name: Check backward compatibility
  run: |
    # Extract class names from published tarball
    npm pack @salkomdesignstudio/sds-motion-forge --dry-run \
      | grep '\.sds-' > published-classes.txt

    # Extract new build classes
    grep '\.sds-' dist/**/*.css > new-classes.txt

    # Fail if any published class is missing from new build
    comm -23 <(sort published-classes.txt) <(sort new-classes.txt) \
      | grep '.' && exit 1 || echo "✓ All classes preserved"