viewfx 0.0.5

package/src/index.css

@@ -0,0 +1,815 @@
+/**
+ * viewfx
+ * Tailwind CSS v4 entry — View Transitions theme effects.
+ * Tailwind v3 uses `src/plugin.cjs` (`require('viewfx')`).
+ * Keep `@utility` blocks in sync with `src/effects.cjs`.
+ */
+
+@import './masks.css';
+@plugin './compound.cjs';
+
+/* ============================================
+   Theme Configuration
+   ============================================ */
+
+@theme inline {
+  --fx-duration-none: 0ms;
+  --fx-duration-slower: 500ms;
+  --fx-duration-slow: 400ms;
+  --fx-duration-normal: 300ms;
+  --fx-duration-fast: 200ms;
+  --fx-duration-faster: 100ms;
+  --fx-duration-0: 0ms;
+  --fx-duration-100: 100ms;
+  --fx-duration-150: 150ms;
+  --fx-duration-200: 200ms;
+  --fx-duration-250: 250ms;
+  --fx-duration-300: 300ms;
+  --fx-duration-400: 400ms;
+  --fx-duration-500: 500ms;
+  --fx-duration-700: 700ms;
+  --fx-duration-800: 800ms;
+  --fx-duration-900: 900ms;
+  --fx-duration-1000: 1000ms;
+
+  --fx-delay-none: 0ms;
+  --fx-delay-0: 0ms;
+  --fx-delay-100: 100ms;
+  --fx-delay-150: 150ms;
+  --fx-delay-200: 200ms;
+  --fx-delay-250: 250ms;
+  --fx-delay-300: 300ms;
+  --fx-delay-400: 400ms;
+  --fx-delay-500: 500ms;
+  --fx-delay-700: 700ms;
+  --fx-delay-800: 800ms;
+  --fx-delay-900: 900ms;
+  --fx-delay-1000: 1000ms;
+
+  --fx-steps-none: 0;
+  --fx-steps-retro: 8;
+  --fx-steps-normal: 16;
+  --fx-steps-modern: 24;
+
+  --ease-expo-out: var(--expo-out);
+  --ease-expo-in: var(--expo-in);
+}
+
+/* ============================================
+   Engine
+   Custom properties inherit into the view-transition
+   pseudo tree from the document element.
+   ============================================ */
+
+:root {
+  --expo-out: linear(
+    0 0%,
+    0.1684 2.66%,
+    0.3165 5.49%,
+    0.446 8.52%,
+    0.5581 11.78%,
+    0.6535 15.29%,
+    0.7341 19.11%,
+    0.8011 23.3%,
+    0.8557 27.93%,
+    0.8962 32.68%,
+    0.9283 38.01%,
+    0.9529 44.08%,
+    0.9711 51.14%,
+    0.9833 59.06%,
+    0.9915 68.74%,
+    1 100%
+  );
+  --expo-in: linear(
+    0 0%,
+    0.0085 31.26%,
+    0.0167 40.94%,
+    0.0289 48.86%,
+    0.0471 55.92%,
+    0.0717 61.99%,
+    0.1038 67.32%,
+    0.1443 72.07%,
+    0.1989 76.7%,
+    0.2659 80.89%,
+    0.3465 84.71%,
+    0.4419 88.22%,
+    0.554 91.48%,
+    0.6835 94.51%,
+    0.8316 97.34%,
+    1 100%
+  );
+}
+
+:root::view-transition-group(root) {
+  animation-duration: var(--fx-duration-override, var(--fx-duration, 0.5s));
+  animation-timing-function: var(--fx-ease-override, var(--fx-ease, var(--expo-out)));
+  animation-delay: var(--fx-delay, 0s);
+}
+
+:root::view-transition-old(root) {
+  animation: var(--fx-anim-old, fx-fade-out)
+    var(--fx-duration-override, var(--fx-duration, 0.5s))
+    var(--fx-ease-override, var(--fx-ease, var(--expo-out)))
+    var(--fx-delay, 0s) both;
+  z-index: var(--fx-old-z, auto);
+  mix-blend-mode: normal;
+}
+
+:root::view-transition-new(root) {
+  mask: var(--fx-mask, none) var(--fx-mask-position, center) / 0 no-repeat;
+  mask-origin: content-box;
+  animation: var(--fx-anim, fx-fade-in)
+    var(--fx-duration-override, var(--fx-duration, 0.5s))
+    var(--fx-ease-override, var(--fx-ease, var(--expo-out)))
+    var(--fx-delay, 0s) both;
+  mix-blend-mode: normal;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(root),
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none !important;
+  }
+}
+
+/* ============================================
+   Keyframes
+   ============================================ */
+
+@property --fx-mosaic {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
+:root.mosaic::view-transition-new(root),
+:root[class*='mosaic-duration']::view-transition-new(root) {
+  mask: none;
+  -webkit-mask-image:
+    repeating-linear-gradient(
+      #0000 0,
+      #0000 calc(6.25% - var(--fx-mosaic) * 8%),
+      #fff calc(6.25% - var(--fx-mosaic) * 6.6%),
+      #fff calc(6.25% + var(--fx-mosaic) * 6.6%),
+      #0000 calc(6.25% + var(--fx-mosaic) * 8%),
+      #0000 12.5%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      #0000 0,
+      #0000 calc(6.25% - var(--fx-mosaic) * 8%),
+      #fff calc(6.25% - var(--fx-mosaic) * 6.6%),
+      #fff calc(6.25% + var(--fx-mosaic) * 6.6%),
+      #0000 calc(6.25% + var(--fx-mosaic) * 8%),
+      #0000 12.5%
+    );
+  mask-image:
+    repeating-linear-gradient(
+      #0000 0,
+      #0000 calc(6.25% - var(--fx-mosaic) * 8%),
+      #fff calc(6.25% - var(--fx-mosaic) * 6.6%),
+      #fff calc(6.25% + var(--fx-mosaic) * 6.6%),
+      #0000 calc(6.25% + var(--fx-mosaic) * 8%),
+      #0000 12.5%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      #0000 0,
+      #0000 calc(6.25% - var(--fx-mosaic) * 8%),
+      #fff calc(6.25% - var(--fx-mosaic) * 6.6%),
+      #fff calc(6.25% + var(--fx-mosaic) * 6.6%),
+      #0000 calc(6.25% + var(--fx-mosaic) * 8%),
+      #0000 12.5%
+    );
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+}
+
+@keyframes fx-mosaic {
+  from {
+    --fx-mosaic: 0;
+  }
+  to {
+    --fx-mosaic: 1;
+  }
+}
+
+@keyframes fx-mask-grow {
+  to {
+    mask-size: var(--fx-mask-size);
+  }
+}
+
+@keyframes fx-spiral {
+  to {
+    mask-size: var(--fx-mask-size);
+    mask-image: conic-gradient(from 0deg, #fff 0%, #fff 100%);
+  }
+}
+
+@keyframes fx-reveal-light {
+  from {
+    clip-path: polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%);
+  }
+  to {
+    clip-path: polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%);
+  }
+}
+
+@keyframes fx-reveal-dark {
+  from {
+    clip-path: polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%);
+  }
+  to {
+    clip-path: polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%);
+  }
+}
+
+@keyframes fx-wipe-in-h {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes fx-wipe-out-h {
+  from {
+    clip-path: inset(0 0 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 100%);
+  }
+}
+
+@keyframes fx-wipe-in-left {
+  from {
+    clip-path: inset(0 0 0 100%);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes fx-wipe-out-left {
+  from {
+    clip-path: inset(0 0 0 0);
+  }
+  to {
+    clip-path: inset(0 100% 0 0);
+  }
+}
+
+@keyframes fx-wipe-in-down {
+  from {
+    clip-path: inset(0 0 100% 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes fx-wipe-out-down {
+  from {
+    clip-path: inset(0 0 0 0);
+  }
+  to {
+    clip-path: inset(100% 0 0 0);
+  }
+}
+
+@keyframes fx-wipe-in-up {
+  from {
+    clip-path: inset(100% 0 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes fx-wipe-out-up {
+  from {
+    clip-path: inset(0 0 0 0);
+  }
+  to {
+    clip-path: inset(0 0 100% 0);
+  }
+}
+
+@keyframes fx-venetian-out {
+  from {
+    clip-path: inset(0 0 0 0);
+  }
+  to {
+    clip-path: inset(100% 0 0 0);
+  }
+}
+
+@keyframes fx-expand-in {
+  from {
+    clip-path: inset(50%);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@keyframes fx-split-in {
+  from {
+    clip-path: inset(0 50%);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@keyframes fx-shutter-in {
+  from {
+    clip-path: inset(50% 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@keyframes fx-glitch-in {
+  0% {
+    clip-path: inset(16% 0 6% 0);
+    transform: translateX(-3.2%) skewX(-1.5deg);
+  }
+  14% {
+    clip-path: inset(3% 0 20% 10%);
+    transform: translateX(3.6%) skewX(2deg);
+  }
+  28% {
+    clip-path: inset(0 14% 8% 0);
+    transform: translateX(-2.8%) skewX(-0.8deg);
+  }
+  42% {
+    clip-path: inset(18% 0 4% 0);
+    transform: translateX(4%) skewX(1.2deg);
+  }
+  56% {
+    clip-path: inset(5% 8% 14% 0);
+    transform: translateX(-3%) skewX(-1deg);
+  }
+  70% {
+    clip-path: inset(0);
+    transform: translateX(0) skewX(0);
+  }
+  84% {
+    clip-path: inset(10% 0 4% 8%);
+    transform: translateX(2.4%) skewX(0.8deg);
+  }
+  100% {
+    clip-path: inset(0);
+    transform: translateX(0) skewX(0);
+  }
+}
+
+@keyframes fx-glitch-out {
+  0% {
+    clip-path: inset(0);
+    transform: translateX(0) skewX(0);
+    opacity: 1;
+  }
+  16% {
+    clip-path: inset(0 0 16% 6%);
+    transform: translateX(3%) skewX(1.2deg);
+  }
+  32% {
+    clip-path: inset(14% 10% 4% 0);
+    transform: translateX(-3.4%) skewX(-1.5deg);
+  }
+  48% {
+    clip-path: inset(4% 0 18% 0);
+    transform: translateX(2.6%) skewX(0.6deg);
+  }
+  64% {
+    clip-path: inset(12% 6% 6% 0);
+    transform: translateX(-2.2%) skewX(-1deg);
+  }
+  80% {
+    clip-path: inset(6% 0 12% 8%);
+    transform: translateX(2%) skewX(0.8deg);
+    opacity: 0.85;
+  }
+  100% {
+    clip-path: inset(20% 0 16% 0);
+    transform: translateX(-1.5%) skewX(0);
+    opacity: 0;
+  }
+}
+
+@keyframes fx-slide-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fx-slide-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-50%);
+    opacity: 0.3;
+  }
+}
+
+@keyframes fx-lift-in {
+  from {
+    opacity: 0;
+    transform: translateY(18%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fx-lift-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+}
+
+@keyframes fx-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fx-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.15);
+  }
+}
+
+@keyframes fx-rotate-in {
+  from {
+    opacity: 0;
+    transform: rotate(-6deg) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+}
+
+@keyframes fx-rotate-out {
+  from {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: rotate(6deg) scale(0.9);
+  }
+}
+
+@keyframes fx-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fx-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fx-blur-in {
+  from {
+    opacity: 0;
+    filter: blur(18px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes fx-blur-out {
+  from {
+    opacity: 1;
+    filter: blur(0);
+  }
+  to {
+    opacity: 0;
+    filter: blur(14px);
+  }
+}
+
+/* ============================================
+   Effect utilities — put on <html>
+   ============================================ */
+
+@utility circle {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-circle);
+  --fx-mask-size: 200vmax;
+  --fx-duration: 1s;
+}
+
+@utility circle-blur {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-circle-blur);
+  --fx-mask-size: 200vmax;
+  --fx-duration: 1s;
+}
+
+@utility corner-tl {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-corner-tl);
+  --fx-mask-position: top left;
+  --fx-mask-size: 200vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility corner-tr {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-corner-tr);
+  --fx-mask-position: top right;
+  --fx-mask-size: 200vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility corner-bl {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-corner-bl);
+  --fx-mask-position: bottom left;
+  --fx-mask-size: 200vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility corner-br {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-corner-br);
+  --fx-mask-position: bottom right;
+  --fx-mask-size: 200vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility iris {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-star);
+  --fx-mask-size: 320vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility diamond {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-diamond);
+  --fx-mask-size: 300vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility hexagon {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-hexagon);
+  --fx-mask-size: 320vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility square {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-square);
+  --fx-mask-size: 280vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility mosaic {
+  --fx-anim: fx-mosaic;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-duration: 1.2s;
+  --fx-ease: cubic-bezier(0.4, 0, 0.15, 1);
+}
+
+@utility soft {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-soft);
+  --fx-mask-size: 300vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility heart {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-heart);
+  --fx-mask-size: 300vmax;
+  --fx-duration: 1.6s;
+  --fx-ease: ease-in-out;
+}
+
+@utility expand {
+  --fx-anim: fx-expand-in;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-duration: 0.6s;
+}
+
+@utility split {
+  --fx-anim: fx-split-in;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-duration: 0.7s;
+}
+
+@utility shutter {
+  --fx-anim: fx-shutter-in;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-duration: 0.7s;
+}
+
+@utility ink {
+  --fx-anim: fx-mask-grow;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: var(--mask-ink);
+  --fx-mask-size: 280vmax;
+  --fx-duration: 1.8s;
+  --fx-ease: ease-in-out;
+}
+
+@utility spiral {
+  --fx-anim: fx-spiral;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-mask: conic-gradient(from 0deg, #fff 0%, transparent 0%);
+  --fx-mask-size: 280vmax;
+  --fx-duration: 1.8s;
+  --fx-ease: ease-in-out;
+}
+
+@utility polygon {
+  --fx-anim: fx-reveal-light;
+  --fx-anim-old: none;
+  --fx-old-z: -1;
+  --fx-duration: 0.7s;
+}
+
+.dark.polygon {
+  --fx-anim: fx-reveal-dark;
+}
+
+.dark[class*='polygon-duration'] {
+  --fx-anim: fx-reveal-dark;
+}
+
+@utility slide-right {
+  --fx-anim: fx-wipe-in-h;
+  --fx-anim-old: fx-wipe-out-h;
+  --fx-duration: 0.6s;
+}
+
+@utility slide-left {
+  --fx-anim: fx-wipe-in-left;
+  --fx-anim-old: fx-wipe-out-left;
+  --fx-duration: 0.6s;
+}
+
+@utility slide-up {
+  --fx-anim: fx-wipe-in-up;
+  --fx-anim-old: fx-wipe-out-up;
+  --fx-duration: 0.6s;
+}
+
+@utility slide-down {
+  --fx-anim: fx-wipe-in-down;
+  --fx-anim-old: fx-wipe-out-down;
+  --fx-duration: 0.6s;
+}
+
+@utility venetian {
+  --fx-anim: fx-wipe-in-down;
+  --fx-anim-old: fx-venetian-out;
+  --fx-duration: 0.8s;
+}
+
+@utility glitch {
+  --fx-anim: fx-glitch-in;
+  --fx-anim-old: fx-glitch-out;
+  --fx-duration: 1s;
+  --fx-ease: step-end;
+}
+
+@utility slide {
+  --fx-anim: fx-slide-in;
+  --fx-anim-old: fx-slide-out;
+  --fx-duration: 0.6s;
+}
+
+@utility lift {
+  --fx-anim: fx-lift-in;
+  --fx-anim-old: fx-lift-out;
+  --fx-duration: 0.7s;
+}
+
+@utility zoom {
+  --fx-anim: fx-zoom-in;
+  --fx-anim-old: fx-zoom-out;
+  --fx-duration: 0.7s;
+}
+
+@utility rotate {
+  --fx-anim: fx-rotate-in;
+  --fx-anim-old: fx-rotate-out;
+  --fx-duration: 0.7s;
+}
+
+@utility fade {
+  --fx-anim: fx-fade-in;
+  --fx-anim-old: fx-fade-out;
+  --fx-duration: 0.5s;
+  --fx-ease: ease-in-out;
+}
+
+@utility dissolve {
+  --fx-anim: fx-blur-in;
+  --fx-anim-old: fx-blur-out;
+  --fx-duration: 0.7s;
+  --fx-ease: ease-in-out;
+}
+
+/* ============================================
+   Timing utilities
+   ============================================ */
+
+@utility fx-duration-* {
+  --fx-duration-override: --value(--fx-duration-*, [*]);
+}
+
+@utility fx-delay-* {
+  --fx-delay: --value(--fx-delay-*, [*]);
+}
+
+@utility fx-steps-* {
+  --fx-ease-override: steps(--value(--fx-steps-*, integer, [integer]));
+}