parallax-hero.css

/*
 * Demo 2 — parallax hero.
 *
 * A continuous `cover` range, so the plugin picks the progress fallback: the
 * runtime seeks a paused WAAPI animation built from these keyframes and mirrors
 * the value into `--saf-progress`.
 */

@keyframes hero-parallax {
  from {
    transform: translateY(-14%) scale(1.2);
  }
  to {
    transform: translateY(14%) scale(1.2);
  }
}

@keyframes hero-caption {
  from {
    opacity: 1;
    letter-spacing: 0.02em;
  }
  to {
    opacity: 0.15;
    letter-spacing: 0.4em;
  }
}

.hero__layer {
  animation: hero-parallax 1s linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}

.hero__caption {
  animation: hero-caption 1s linear both;
  animation-timeline: view();
  animation-range: contain 0% cover 100%;
}