@lovince/motion 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovince/motion",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A framework-agnostic motion system: native CSS reveals, managed GSAP timelines and scroll scenes, and Lenis smooth scrolling — with mandatory cleanup and reduced-motion handling.",
   "type": "module",
   "license": "MIT",

package/styles/presets.css

@@ -56,3 +56,163 @@
     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;
+  }
+}