@lovince/motion 0.0.0-stage → 0.2.0

package/styles/presets.css

@@ -0,0 +1,218 @@
+/*
+ * Scroll reveals for `revealOnScroll` / `v-reveal`. An element is hidden only
+ * while `data-motion-state="hidden"` is set, which only the script does, so
+ * without JavaScript, or after cleanup, content is simply visible.
+ */
+
+[data-motion-reveal] {
+  transition-property: opacity, transform, clip-path;
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-ease-emphasized);
+  transition-delay: var(--motion-delay, 0s);
+}
+
+[data-motion-reveal][data-motion-state='hidden'] {
+  opacity: 0;
+  transition-delay: 0s;
+}
+
+[data-motion-reveal='fade-up'][data-motion-state='hidden'] {
+  transform: translate3d(0, var(--motion-distance-md), 0);
+}
+
+[data-motion-reveal='fade-down'][data-motion-state='hidden'] {
+  transform: translate3d(0, calc(var(--motion-distance-md) * -1), 0);
+}
+
+[data-motion-reveal='slide-left'][data-motion-state='hidden'] {
+  transform: translate3d(var(--motion-distance-md), 0, 0);
+}
+
+[data-motion-reveal='slide-right'][data-motion-state='hidden'] {
+  transform: translate3d(calc(var(--motion-distance-md) * -1), 0, 0);
+}
+
+[data-motion-reveal='scale'][data-motion-state='hidden'] {
+  transform: scale(0.94);
+}
+
+[data-motion-reveal='clip'][data-motion-state='hidden'] {
+  opacity: 1;
+  clip-path: inset(0% 0% 100% 0%);
+}
+
+[data-motion-reveal='clip'][data-motion-state='visible'] {
+  clip-path: inset(0% 0% 0% 0%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-motion-reveal] {
+    transition: none;
+  }
+
+  [data-motion-reveal][data-motion-state='hidden'] {
+    opacity: 1;
+    transform: none;
+    clip-path: none;
+  }
+}
+
+/*
+ * Stage carousel for `CarouselRoot mode="stage"`: slides stacked in the
+ * viewport, one in front and its neighbours peeking out dimmed behind it.
+ * Mark an image with `data-carousel-media` and a caption with
+ * `data-carousel-copy` to get their motion too.
+ */
+
+[data-mode='stage'][data-carousel-viewport] {
+  --lovince-carousel-duration: calc(var(--motion-duration-scene) * 1.5);
+  --lovince-carousel-ease: var(--motion-ease-emphasized);
+  --lovince-carousel-peek: 22.5%;
+  --lovince-carousel-active-size: 60%;
+  --lovince-carousel-side-size: 91.5%;
+  --lovince-carousel-side-height: 72%;
+  --lovince-carousel-side-opacity: 0.7;
+  --lovince-carousel-side-dim: 0.62;
+  position: relative;
+  isolation: isolate;
+  aspect-ratio: var(--lovince-carousel-ratio, 2.7);
+  overflow: hidden;
+  outline-offset: var(--lovince-space-1);
+}
+
+[data-mode='stage'][data-carousel-viewport] > [data-carousel-slide] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--lovince-carousel-active-size);
+  height: 81%;
+  overflow: hidden;
+  border-radius: var(--lovince-radius-md);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 0;
+  transition:
+    transform var(--lovince-carousel-duration) var(--lovince-carousel-ease),
+    width var(--lovince-carousel-duration) var(--lovince-carousel-ease),
+    height var(--lovince-carousel-duration) var(--lovince-carousel-ease),
+    opacity calc(var(--lovince-carousel-duration) * 0.82) var(--lovince-carousel-ease),
+    filter var(--lovince-carousel-duration) var(--lovince-carousel-ease),
+    box-shadow var(--lovince-carousel-duration) var(--lovince-carousel-ease);
+  will-change: transform, opacity;
+}
+
+[data-mode='stage'][data-carousel-viewport] > [data-position='active'] {
+  height: 100%;
+  opacity: 1;
+  z-index: 3;
+  pointer-events: auto;
+  box-shadow: var(--lovince-shadow-lg);
+  transform: translate(calc(-50% + var(--lovince-carousel-drag, 0px)), -50%);
+}
+
+[data-mode='stage'][data-carousel-viewport] > [data-position='previous'],
+[data-mode='stage'][data-carousel-viewport] > [data-position='next'] {
+  width: var(--lovince-carousel-side-size);
+  height: var(--lovince-carousel-side-height);
+  opacity: var(--lovince-carousel-side-opacity);
+  z-index: 2;
+  filter: brightness(var(--lovince-carousel-side-dim));
+}
+
+[data-mode='stage'][data-carousel-viewport] > [data-position='previous'] {
+  transform: translate(calc(-50% - var(--lovince-carousel-peek) + var(--lovince-carousel-drag, 0px)), -50%);
+}
+
+[data-mode='stage'][data-carousel-viewport] > [data-position='next'] {
+  transform: translate(calc(-50% + var(--lovince-carousel-peek) + var(--lovince-carousel-drag, 0px)), -50%);
+}
+
+[data-mode='stage'][data-carousel-viewport] > [data-position='far'] {
+  transform: translate(-50%, -45%) scale(0.94);
+}
+
+[data-mode='stage'][data-swiping] > [data-carousel-slide] {
+  transition: none;
+}
+
+[data-mode='stage'][data-orientation='vertical'] {
+  aspect-ratio: var(--lovince-carousel-ratio, 0.75);
+}
+
+[data-mode='stage'][data-orientation='vertical'] > [data-carousel-slide] {
+  width: 81%;
+  height: var(--lovince-carousel-active-size);
+}
+
+[data-mode='stage'][data-orientation='vertical'] > [data-position='active'] {
+  width: 100%;
+  transform: translate(-50%, calc(-50% + var(--lovince-carousel-drag, 0px)));
+}
+
+[data-mode='stage'][data-orientation='vertical'] > [data-position='previous'],
+[data-mode='stage'][data-orientation='vertical'] > [data-position='next'] {
+  width: var(--lovince-carousel-side-height);
+  height: var(--lovince-carousel-side-size);
+}
+
+[data-mode='stage'][data-orientation='vertical'] > [data-position='previous'] {
+  transform: translate(-50%, calc(-50% - var(--lovince-carousel-peek) + var(--lovince-carousel-drag, 0px)));
+}
+
+[data-mode='stage'][data-orientation='vertical'] > [data-position='next'] {
+  transform: translate(-50%, calc(-50% + var(--lovince-carousel-peek) + var(--lovince-carousel-drag, 0px)));
+}
+
+[data-mode='stage'][data-orientation='vertical'] > [data-position='far'] {
+  transform: translate(-45%, -50%) scale(0.94);
+}
+
+[data-mode='stage'] [data-carousel-media] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  transition: transform calc(var(--lovince-carousel-duration) * 1.64) var(--lovince-carousel-ease);
+}
+
+[data-mode='stage'][data-carousel-viewport] > [data-position='active'] [data-carousel-media] {
+  transform: scale(1.015);
+}
+
+[data-mode='stage'] [data-carousel-copy] {
+  opacity: 0;
+  transform: translate3d(0, var(--motion-distance-sm), 0);
+  transition:
+    opacity calc(var(--lovince-carousel-duration) * 0.6) var(--lovince-carousel-ease),
+    transform calc(var(--lovince-carousel-duration) * 0.72) var(--lovince-carousel-ease);
+}
+
+[data-mode='stage'][data-carousel-viewport] > [data-position='active'] [data-carousel-copy] {
+  opacity: 1;
+  transform: none;
+  transition-delay: var(--motion-duration-normal);
+}
+
+@media (max-width: 43.75rem) {
+  [data-mode='stage'][data-carousel-viewport]:not([data-orientation='vertical']) {
+    --lovince-carousel-peek: 31%;
+    --lovince-carousel-active-size: 76%;
+    --lovince-carousel-side-opacity: 0.55;
+    aspect-ratio: var(--lovince-carousel-ratio, 1.47);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mode='stage'][data-carousel-viewport] > [data-carousel-slide],
+  [data-mode='stage'] [data-carousel-media],
+  [data-mode='stage'] [data-carousel-copy] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+
+  [data-mode='stage'][data-carousel-viewport] > [data-position='active'] [data-carousel-media] {
+    transform: none;
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,23 @@
+/*
+ * Motion tokens: the spec's vocabulary, mapped onto the Lovince scales so CSS
+ * and JS motion share one source. JS reads the same values from
+ * @lovince/tokens (`defaultMotionConfig`, `motionDistance`).
+ */
+@import '@lovince/tokens/tokens.css';
+
+:root {
+  --motion-duration-instant: var(--lovince-duration-press);
+  --motion-duration-fast: var(--lovince-duration-fast);
+  --motion-duration-normal: var(--lovince-duration-state);
+  --motion-duration-slow: var(--lovince-duration-overlay);
+  --motion-duration-scene: var(--lovince-duration-travel);
+
+  --motion-ease-standard: var(--lovince-ease-standard);
+  --motion-ease-emphasized: var(--lovince-ease-emphasized);
+  --motion-ease-exit: var(--lovince-ease-in);
+  --motion-ease-reversible: var(--lovince-ease-in-out);
+
+  --motion-distance-sm: var(--lovince-space-3);
+  --motion-distance-md: var(--lovince-space-6);
+  --motion-distance-lg: var(--lovince-space-12);
+}

package/styles/utilities.css

@@ -0,0 +1,128 @@
+/*
+ * Opt-in utilities. Every rule sits behind a `motion-*` class, so nothing
+ * here touches an element that did not ask for it. No JavaScript needed.
+ */
+
+.motion-link {
+  position: relative;
+  text-decoration: none;
+}
+
+.motion-link::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: -0.2em;
+  height: 1px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform var(--motion-duration-normal) var(--motion-ease-standard);
+}
+
+.motion-link:hover::after,
+.motion-link:focus-visible::after {
+  transform: scaleX(1);
+  transform-origin: left;
+}
+
+.motion-lift {
+  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.motion-lift:hover,
+.motion-lift:focus-visible {
+  transform: translate3d(0, calc(var(--motion-distance-sm) / -3), 0);
+}
+
+.motion-press {
+  transition: transform var(--motion-duration-instant) var(--motion-ease-standard);
+}
+
+.motion-press:active {
+  transform: scale(0.97);
+}
+
+@keyframes motion-fade-up {
+  from {
+    opacity: 0;
+    transform: translate3d(0, var(--motion-distance-md), 0);
+  }
+}
+
+@keyframes motion-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes motion-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+}
+
+@keyframes motion-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes motion-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* One-shot entrances on load; `--motion-delay` staggers them by hand. */
+.motion-fade-up,
+.motion-fade-in,
+.motion-scale-in {
+  animation-duration: var(--motion-duration-slow);
+  animation-timing-function: var(--motion-ease-emphasized);
+  animation-delay: var(--motion-delay, 0s);
+  animation-fill-mode: both;
+}
+
+.motion-fade-up {
+  animation-name: motion-fade-up;
+}
+
+.motion-fade-in {
+  animation-name: motion-fade-in;
+}
+
+.motion-scale-in {
+  animation-name: motion-scale-in;
+}
+
+.motion-spin {
+  animation: motion-spin calc(var(--motion-duration-scene) * 1.5) linear infinite;
+}
+
+.motion-pulse {
+  animation: motion-pulse calc(var(--motion-duration-scene) * 2) var(--motion-ease-reversible) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-link::after,
+  .motion-lift,
+  .motion-press {
+    transition: none;
+  }
+
+  .motion-lift:hover,
+  .motion-lift:focus-visible,
+  .motion-press:active {
+    transform: none;
+  }
+
+  .motion-fade-up,
+  .motion-fade-in,
+  .motion-scale-in,
+  .motion-spin,
+  .motion-pulse {
+    animation: none;
+  }
+}