Lightweight

Lightweight No JavaScript library. Every effect in this tier runs on CSS transitions, CSS animations using the BDS keyframe library, and a minimal IntersectionObserver snippet to toggle .is-visible. This is the default for all mockups.

Files to load

<!-- 1. Token layer — durations, easings, keyframes -->
<link rel="stylesheet" href="tokens/animations.css">

<!-- 2. Motion utility classes — .bds-enter-*, .bds-anim-*, .bds-stagger-* -->
<link rel="stylesheet" href="tokens/motion-classes.css">

<!-- 3. Scroll reveal classes, hover effects, section theming, typography -->
<link rel="stylesheet" href="css/animations.css">

Scroll observer — minimal snippet

All .is-visible-triggered classes (reveals, text highlights) need an IntersectionObserver to apply the class when the element enters the viewport. The Lightweight tier does not include a bundled JS file — add this inline or in a small module:

// Trigger .is-visible when elements enter the viewport
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target); // fire once
      }
    });
  },
  { threshold: 0.15 }
);

document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));

Mark elements with data-reveal:

<div class="animate-fade-up" data-reveal>Content enters here</div>
<div class="clip-rise-reveal" data-reveal>
  <img src="photo.jpg" alt="...">
</div>

Entrance animations

The token-layer utility classes apply named keyframes with BDS duration tokens. They animate once on mount — ideal for page-load sequences or component entry.

Scroll-triggered reveals

Add the class + data-reveal attribute. The IntersectionObserver snippet above applies .is-visible when the element enters the viewport.

Stagger patterns

Combine entrance classes with stagger helpers for sequential list reveals.

<ul>
  <li class="bds-enter-fade bds-stagger-1">First item</li>
  <li class="bds-enter-fade bds-stagger-2">Second item</li>
  <li class="bds-enter-fade bds-stagger-3">Third item</li>
</ul>

Six stagger delays available: .bds-stagger-1 through .bds-stagger-6. Values come from --stagger-1 through --stagger-6 tokens in animations.css. For dynamic stagger (unknown item count, reversed sequences), see the GSAP tier.

Clip-path reveals

Cinematic image and section unveils. Implemented in CSS — no library dependency.

<div class="clip-circle-reveal" data-reveal>
  <img src="photo.jpg" alt="...">
</div>

<div class="clip-curtain-reveal" data-reveal>
  <img src="hero.jpg" alt="...">
</div>

Six variants: clip-circle-reveal, clip-curtain-reveal, clip-wipe-reveal, clip-rise-reveal, clip-diagonal-reveal, clip-diamond-reveal.

See Scroll Reveals for the full effect reference.

Hover effects

CSS-only micro-interactions. No JS required.

See Hover Effects for magnetic and cursor-trail variants (those require Premium JS).

Section theming

Section color presets. Combine with grain, glass, and dividers.

Attention animations

Draw the eye to a changed state without motion sickness risk. These loop continuously or fire on a single event.

<!-- Notification dot that breathes -->
<span class="bds-anim-pulse">3</span>

<!-- Bell shake on new message -->
<svg class="bds-anim-shake">...</svg>

<!-- Loading spinner -->
<div class="bds-anim-spin">...</div>

Reduced motion

tokens/animations.css includes a prefers-reduced-motion override that disables all animations and transitions for users who have enabled this OS preference. No additional work needed.

Related

• Tiers Overview — when to escalate
• Scroll Reveals — full reference
• Hover Effects