@vikeriait/vue-viewport 1.1.0

package/dist/vue-viewport.js

@@ -0,0 +1,330 @@
+import { defineComponent as V, withDirectives as $, createBlock as P, openBlock as I, resolveDynamicComponent as C, withCtx as O, renderSlot as D, unref as T, ref as w, onMounted as _, onUnmounted as A } from "vue";
+const F = [
+  "fade",
+  "fade-up",
+  "fade-down",
+  "fade-left",
+  "fade-right",
+  "slide-up",
+  "slide-down",
+  "slide-left",
+  "slide-right",
+  "scale-up",
+  "scale-down",
+  "blur-in",
+  "fade-y",
+  "slide-y"
+], N = F.reduce((e, o) => (e[o] = `animate-${o}`, o.endsWith("-y") || (e[`${o}-up`] = `animate-${o}-up`, e[`${o}-down`] = `animate-${o}-down`), e), {}), x = { ...N };
+function k(e) {
+  Object.assign(x, e);
+}
+function W(e) {
+  let o = 0, t = 0;
+  const n = /(?:(?<prefix>[a-z0-9:-]+):)?(?<neg>-)?translate-y-(?:\[(?<arb>[^\]]+)\]|(?<num>\d+))/gi;
+  let s;
+  for (; (s = n.exec(e)) !== null; ) {
+    const { prefix: r, arb: i, num: u } = s.groups || {};
+    let a = 0;
+    if (i ? i.endsWith("px") ? a = parseFloat(i) : i.endsWith("rem") && (a = parseFloat(i) * 16) : u && (a = parseInt(u, 10) * 4), a > 0) {
+      const l = Math.ceil(a + 10), d = r && r.includes("below"), c = r && r.includes("above");
+      d ? t = Math.max(t, l) : c ? o = Math.max(o, l) : (o = Math.max(o, l), t = Math.max(t, l));
+    }
+  }
+  return { top: o, bottom: t };
+}
+function q(e, o) {
+  if (o && (o.includes("slide") || o.includes("fade-") && !o.includes("fade-in") || o.includes("scale")))
+    try {
+      const s = getComputedStyle(e).getPropertyValue("--viewport-distance").trim();
+      if (s) {
+        let r = 0;
+        s.endsWith("px") ? r = parseFloat(s) : s.endsWith("rem") && (r = parseFloat(s) * 16);
+        const i = Math.ceil(r);
+        return { top: i, bottom: i };
+      }
+    } catch {
+    }
+  return { top: 0, bottom: 0 };
+}
+function B(e) {
+  try {
+    const t = getComputedStyle(e).transform;
+    if (t && t !== "none") {
+      const n = t.match(/^matrix\((.+)\)$/);
+      if (n) {
+        const s = n[1].split(",").map(parseFloat);
+        if (s.length === 6) {
+          const r = Math.abs(s[5]), i = Math.abs(s[4]), u = Math.max(i, r);
+          if (u > 0) {
+            const a = Math.ceil(u);
+            return { top: a, bottom: a };
+          }
+        }
+      }
+    }
+  } catch {
+  }
+  return { top: 0, bottom: 0 };
+}
+function L(e, o) {
+  const t = W(e.className);
+  if (t.top > 0 || t.bottom > 0)
+    return `${t.top}px 0px ${t.bottom}px 0px`;
+  const n = q(e, o);
+  if (n.top > 0 || n.bottom > 0)
+    return `${n.top}px 0px ${n.bottom}px 0px`;
+  const s = B(e);
+  return s.top > 0 || s.bottom > 0 ? `${s.top}px 0px ${s.bottom}px 0px` : "0px";
+}
+class j {
+  roots = /* @__PURE__ */ new Map();
+  /**
+   * Generates a unique key for the observer options.
+   */
+  getOptionsKey(o, t) {
+    const n = Array.isArray(t) ? [...t].sort().join(",") : t;
+    return `${o}|${n}`;
+  }
+  /**
+   * Starts observing an element.
+   * Reuse an existing observer if one exists with the exact same options.
+   */
+  observe(o, t, n) {
+    const s = t.root || null, r = t.rootMargin || "0px", i = t.threshold ?? 0;
+    this.roots.has(s) || this.roots.set(s, /* @__PURE__ */ new Map());
+    const u = this.roots.get(s), a = this.getOptionsKey(r, i);
+    let l = u.get(a);
+    return l || (l = {
+      observer: new IntersectionObserver((c) => {
+        c.forEach((h) => {
+          const E = h.target, b = l?.elements.get(E);
+          b && b(h);
+        });
+      }, {
+        root: s,
+        rootMargin: r,
+        threshold: i
+      }),
+      elements: /* @__PURE__ */ new Map(),
+      root: s,
+      key: a
+    }, u.set(a, l)), l.observer.observe(o), l.elements.set(o, n), l;
+  }
+  /**
+   * Stops observing an element for a specific observer instance.
+   */
+  unobserve(o, t) {
+    if (o.observer.unobserve(t), o.elements.delete(t), o.elements.size === 0) {
+      o.observer.disconnect();
+      const n = this.roots.get(o.root);
+      n && (n.delete(o.key), n.size === 0 && this.roots.delete(o.root));
+    }
+  }
+}
+const p = new j();
+function M(e) {
+  const { value: o, modifiers: t, arg: n } = e;
+  let s = {}, r = n;
+  typeof o == "string" ? r = o : typeof o == "object" && o !== null && (s = o, typeof s.animation == "string" && (r = s.animation));
+  const i = t.once || s.once || !1;
+  return { options: s, animationName: r, once: i };
+}
+function H(e, o) {
+  if (typeof e == "number") return e;
+  if (typeof e == "string") return g(e);
+  if (e === !0) {
+    const n = getComputedStyle(o).getPropertyValue("--viewport-stagger").trim();
+    return g(n || "100ms");
+  }
+  return 0;
+}
+function R(e, o, t, n) {
+  const s = { el: e, entry: o, direction: t, options: n }, r = H(n.stagger, e);
+  r > 0 ? Q(s, r) : y(s, 0);
+}
+function Y(e, o, t, n) {
+  n.delay !== void 0 ? e.style.transitionDelay = v(n.delay) : e.style.removeProperty("transition-delay"), delete e.dataset.vpInView, delete e.dataset.vpEntry;
+  const s = o.boundingClientRect;
+  s.top < 0 ? e.dataset.vpPos = "above" : s.bottom > window.innerHeight && (e.dataset.vpPos = "below"), n.onLeave?.(o, t), e.dispatchEvent(new CustomEvent("view-leave", {
+    detail: { entry: o, direction: t }
+  }));
+}
+const f = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap();
+function g(e) {
+  if (!e) return 0;
+  const o = e.split(",").map((t) => {
+    const n = /([\d.]+)(m?s)/.exec(t.trim());
+    if (!n) return 0;
+    const s = parseFloat(n[1]);
+    return n[2] === "s" ? s * 1e3 : s;
+  });
+  return Math.max(...o);
+}
+function y(e, o = 0) {
+  const { el: t, entry: n, direction: s, options: r } = e;
+  let i = o;
+  if (o > 0) {
+    const u = getComputedStyle(t), a = g(u.transitionDelay);
+    i += a;
+  }
+  i > 0 && (t.style.transitionDelay = `${i}ms`), t.dataset.vpEntry = s, delete t.dataset.vpPos, r.onEnter?.(n, s), t.dispatchEvent(new CustomEvent("view-enter", {
+    detail: { entry: n, direction: s }
+  })), requestAnimationFrame(() => {
+    t.dataset.vpInView = "";
+  });
+}
+function z(e, o) {
+  const t = m.get(e);
+  if (!t || t.queue.length === 0) return;
+  t.queue.sort((s, r) => s.el.compareDocumentPosition(r.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).forEach((s, r) => {
+    y(s, r * o);
+  }), t.queue = [];
+}
+function Q(e, o) {
+  const t = e.el.parentElement;
+  if (!t) {
+    y(e, 0);
+    return;
+  }
+  let n = m.get(t);
+  n || (n = { queue: [], timeout: 0 }, m.set(t, n)), n.queue.push(e), n.timeout && clearTimeout(n.timeout), n.timeout = window.setTimeout(() => {
+    z(t, o);
+  }, 10);
+}
+function v(e) {
+  return typeof e == "number" ? `${e}ms` : e;
+}
+const S = {
+  // Apply the preset attribute in beforeMount
+  beforeMount(e, o) {
+    e.dataset.vpMounted = "";
+    const { options: t, animationName: n } = M(o);
+    if (t.duration !== void 0 && (e.style.transitionDuration = v(t.duration)), t.delay !== void 0 && (e.style.transitionDelay = v(t.delay)), t.easing !== void 0 && (e.style.transitionTimingFunction = t.easing), n) {
+      const r = n.split(/\s+/).map((i) => x[i]).filter((i) => !!i).join(" ");
+      r && (e.dataset.vpPreset = r), e.dataset.vpEntry = "down";
+    }
+  },
+  mounted(e, o) {
+    const { options: t, animationName: n, once: s } = M(o), r = {
+      root: t.root || null,
+      rootMargin: t.rootMargin || L(e, n),
+      threshold: t.threshold ?? 0.1
+    };
+    let i = window.scrollY;
+    const u = p.observe(e, r, (a) => {
+      const l = a.isIntersecting, d = window.scrollY, c = d >= i ? "down" : "up";
+      i = d, l ? (R(e, a, c, t), s && p.unobserve(u, e)) : Y(e, a, c, t);
+    });
+    f.set(e, u);
+  },
+  unmounted(e) {
+    const o = f.get(e);
+    o && (p.unobserve(o, e), f.delete(e));
+  }
+}, U = /* @__PURE__ */ V({
+  name: "Viewport",
+  __name: "Viewport",
+  props: {
+    /** The HTML tag to render. Defaults to 'div'. */
+    as: {
+      type: String,
+      default: "div"
+    },
+    /** The animation preset name (e.g., 'fade-up'). */
+    preset: {
+      type: String,
+      default: void 0
+    },
+    /** Delay in ms or CSS string (e.g. '100ms'). Set to true to use global variable. */
+    stagger: {
+      type: [Number, String, Boolean],
+      default: void 0
+    },
+    /** Intersection threshold (0.0 - 1.0). */
+    threshold: {
+      type: [Number, Array],
+      default: void 0
+    },
+    /** Custom rootMargin string. */
+    rootMargin: {
+      type: String,
+      default: void 0
+    },
+    /** If true, disconnects the observer after the first entry. */
+    once: {
+      type: Boolean,
+      default: !1
+    },
+    /** Custom root element (defaults to viewport). */
+    root: {
+      type: Object,
+      default: void 0
+    },
+    /** Custom duration for the animation. */
+    duration: {
+      type: [Number, String],
+      default: void 0
+    },
+    /** Custom delay for the animation. */
+    delay: {
+      type: [Number, String],
+      default: void 0
+    },
+    /** Custom easing for the animation. */
+    easing: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["enter", "leave"],
+  setup(e, { emit: o }) {
+    const t = e, n = o, s = {
+      animation: t.preset,
+      stagger: t.stagger,
+      threshold: t.threshold,
+      rootMargin: t.rootMargin,
+      once: t.once,
+      root: t.root,
+      duration: t.duration,
+      delay: t.delay,
+      easing: t.easing,
+      onEnter: (r, i) => {
+        n("enter", { entry: r, direction: i });
+      },
+      onLeave: (r, i) => {
+        n("leave", { entry: r, direction: i });
+      }
+    };
+    return (r, i) => $((I(), P(C(t.as), null, {
+      default: O(() => [
+        D(r.$slots, "default")
+      ]),
+      _: 3
+    })), [
+      [T(S), s]
+    ]);
+  }
+});
+function G(e, o = {}) {
+  const t = w(!1), n = w(null);
+  let s = null, r = null;
+  return _(() => {
+    e.value && (r = e.value, s = p.observe(r, o, (i) => {
+      t.value = i.isIntersecting, n.value = i;
+    }));
+  }), A(() => {
+    s && r && p.unobserve(s, r);
+  }), { isInView: t, entry: n };
+}
+const J = {
+  install(e, o) {
+    o?.presets && k(o.presets), e.directive("viewport", S), e.component("VViewport", U);
+  }
+};
+export {
+  U as Viewport,
+  J as ViewportPlugin,
+  J as default,
+  G as useInViewport,
+  S as vViewport
+};

package/dist/vue-viewport.umd.cjs

@@ -0,0 +1 @@
+(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d.VueViewport={},d.Vue))})(this,(function(d,l){"use strict";const M={...["fade","fade-up","fade-down","fade-left","fade-right","slide-up","slide-down","slide-left","slide-right","scale-up","scale-down","blur-in","fade-y","slide-y"].reduce((t,o)=>(t[o]=`animate-${o}`,o.endsWith("-y")||(t[`${o}-up`]=`animate-${o}-up`,t[`${o}-down`]=`animate-${o}-down`),t),{})};function I(t){Object.assign(M,t)}function T(t){let o=0,e=0;const n=/(?:(?<prefix>[a-z0-9:-]+):)?(?<neg>-)?translate-y-(?:\[(?<arb>[^\]]+)\]|(?<num>\d+))/gi;let s;for(;(s=n.exec(t))!==null;){const{prefix:r,arb:i,num:c}=s.groups||{};let a=0;if(i?i.endsWith("px")?a=parseFloat(i):i.endsWith("rem")&&(a=parseFloat(i)*16):c&&(a=parseInt(c,10)*4),a>0){const u=Math.ceil(a+10),m=r&&r.includes("below"),p=r&&r.includes("above");m?e=Math.max(e,u):p?o=Math.max(o,u):(o=Math.max(o,u),e=Math.max(e,u))}}return{top:o,bottom:e}}function $(t,o){if(o&&(o.includes("slide")||o.includes("fade-")&&!o.includes("fade-in")||o.includes("scale")))try{const s=getComputedStyle(t).getPropertyValue("--viewport-distance").trim();if(s){let r=0;s.endsWith("px")?r=parseFloat(s):s.endsWith("rem")&&(r=parseFloat(s)*16);const i=Math.ceil(r);return{top:i,bottom:i}}}catch{}return{top:0,bottom:0}}function O(t){try{const e=getComputedStyle(t).transform;if(e&&e!=="none"){const n=e.match(/^matrix\((.+)\)$/);if(n){const s=n[1].split(",").map(parseFloat);if(s.length===6){const r=Math.abs(s[5]),i=Math.abs(s[4]),c=Math.max(i,r);if(c>0){const a=Math.ceil(c);return{top:a,bottom:a}}}}}}catch{}return{top:0,bottom:0}}function _(t,o){const e=T(t.className);if(e.top>0||e.bottom>0)return`${e.top}px 0px ${e.bottom}px 0px`;const n=$(t,o);if(n.top>0||n.bottom>0)return`${n.top}px 0px ${n.bottom}px 0px`;const s=O(t);return s.top>0||s.bottom>0?`${s.top}px 0px ${s.bottom}px 0px`:"0px"}class A{roots=new Map;getOptionsKey(o,e){const n=Array.isArray(e)?[...e].sort().join(","):e;return`${o}|${n}`}observe(o,e,n){const s=e.root||null,r=e.rootMargin||"0px",i=e.threshold??0;this.roots.has(s)||this.roots.set(s,new Map);const c=this.roots.get(s),a=this.getOptionsKey(r,i);let u=c.get(a);return u||(u={observer:new IntersectionObserver(p=>{p.forEach(V=>{const j=V.target,P=u?.elements.get(j);P&&P(V)})},{root:s,rootMargin:r,threshold:i}),elements:new Map,root:s,key:a},c.set(a,u)),u.observer.observe(o),u.elements.set(o,n),u}unobserve(o,e){if(o.observer.unobserve(e),o.elements.delete(e),o.elements.size===0){o.observer.disconnect();const n=this.roots.get(o.root);n&&(n.delete(o.key),n.size===0&&this.roots.delete(o.root))}}}const f=new A;function x(t){const{value:o,modifiers:e,arg:n}=t;let s={},r=n;typeof o=="string"?r=o:typeof o=="object"&&o!==null&&(s=o,typeof s.animation=="string"&&(r=s.animation));const i=e.once||s.once||!1;return{options:s,animationName:r,once:i}}function C(t,o){if(typeof t=="number")return t;if(typeof t=="string")return v(t);if(t===!0){const n=getComputedStyle(o).getPropertyValue("--viewport-stagger").trim();return v(n||"100ms")}return 0}function D(t,o,e,n){const s={el:t,entry:o,direction:e,options:n},r=C(n.stagger,t);r>0?k(s,r):h(s,0)}function N(t,o,e,n){n.delay!==void 0?t.style.transitionDelay=b(n.delay):t.style.removeProperty("transition-delay"),delete t.dataset.vpInView,delete t.dataset.vpEntry;const s=o.boundingClientRect;s.top<0?t.dataset.vpPos="above":s.bottom>window.innerHeight&&(t.dataset.vpPos="below"),n.onLeave?.(o,e),t.dispatchEvent(new CustomEvent("view-leave",{detail:{entry:o,direction:e}}))}const g=new WeakMap,y=new WeakMap;function v(t){if(!t)return 0;const o=t.split(",").map(e=>{const n=/([\d.]+)(m?s)/.exec(e.trim());if(!n)return 0;const s=parseFloat(n[1]);return n[2]==="s"?s*1e3:s});return Math.max(...o)}function h(t,o=0){const{el:e,entry:n,direction:s,options:r}=t;let i=o;if(o>0){const c=getComputedStyle(e),a=v(c.transitionDelay);i+=a}i>0&&(e.style.transitionDelay=`${i}ms`),e.dataset.vpEntry=s,delete e.dataset.vpPos,r.onEnter?.(n,s),e.dispatchEvent(new CustomEvent("view-enter",{detail:{entry:n,direction:s}})),requestAnimationFrame(()=>{e.dataset.vpInView=""})}function F(t,o){const e=y.get(t);if(!e||e.queue.length===0)return;e.queue.sort((s,r)=>s.el.compareDocumentPosition(r.el)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1).forEach((s,r)=>{h(s,r*o)}),e.queue=[]}function k(t,o){const e=t.el.parentElement;if(!e){h(t,0);return}let n=y.get(e);n||(n={queue:[],timeout:0},y.set(e,n)),n.queue.push(t),n.timeout&&clearTimeout(n.timeout),n.timeout=window.setTimeout(()=>{F(e,o)},10)}function b(t){return typeof t=="number"?`${t}ms`:t}const w={beforeMount(t,o){t.dataset.vpMounted="";const{options:e,animationName:n}=x(o);if(e.duration!==void 0&&(t.style.transitionDuration=b(e.duration)),e.delay!==void 0&&(t.style.transitionDelay=b(e.delay)),e.easing!==void 0&&(t.style.transitionTimingFunction=e.easing),n){const r=n.split(/\s+/).map(i=>M[i]).filter(i=>!!i).join(" ");r&&(t.dataset.vpPreset=r),t.dataset.vpEntry="down"}},mounted(t,o){const{options:e,animationName:n,once:s}=x(o),r={root:e.root||null,rootMargin:e.rootMargin||_(t,n),threshold:e.threshold??.1};let i=window.scrollY;const c=f.observe(t,r,a=>{const u=a.isIntersecting,m=window.scrollY,p=m>=i?"down":"up";i=m,u?(D(t,a,p,e),s&&f.unobserve(c,t)):N(t,a,p,e)});g.set(t,c)},unmounted(t){const o=g.get(t);o&&(f.unobserve(o,t),g.delete(t))}},S=l.defineComponent({name:"Viewport",__name:"Viewport",props:{as:{type:String,default:"div"},preset:{type:String,default:void 0},stagger:{type:[Number,String,Boolean],default:void 0},threshold:{type:[Number,Array],default:void 0},rootMargin:{type:String,default:void 0},once:{type:Boolean,default:!1},root:{type:Object,default:void 0},duration:{type:[Number,String],default:void 0},delay:{type:[Number,String],default:void 0},easing:{type:String,default:void 0}},emits:["enter","leave"],setup(t,{emit:o}){const e=t,n=o,s={animation:e.preset,stagger:e.stagger,threshold:e.threshold,rootMargin:e.rootMargin,once:e.once,root:e.root,duration:e.duration,delay:e.delay,easing:e.easing,onEnter:(r,i)=>{n("enter",{entry:r,direction:i})},onLeave:(r,i)=>{n("leave",{entry:r,direction:i})}};return(r,i)=>l.withDirectives((l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.as),null,{default:l.withCtx(()=>[l.renderSlot(r.$slots,"default")]),_:3})),[[l.unref(w),s]])}});function W(t,o={}){const e=l.ref(!1),n=l.ref(null);let s=null,r=null;return l.onMounted(()=>{t.value&&(r=t.value,s=f.observe(r,o,i=>{e.value=i.isIntersecting,n.value=i}))}),l.onUnmounted(()=>{s&&r&&f.unobserve(s,r)}),{isInView:e,entry:n}}const E={install(t,o){o?.presets&&I(o.presets),t.directive("viewport",w),t.component("VViewport",S)}};d.Viewport=S,d.ViewportPlugin=E,d.default=E,d.useInViewport=W,d.vViewport=w,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@vikeriait/vue-viewport",
+  "version": "1.1.0",
+  "description": "Vue directive & composable: viewport detection + Tailwind scroll animations",
+  "keywords": [
+    "vue",
+    "viewport",
+    "intersectionobserver",
+    "scroll",
+    "tailwind",
+    "animate"
+  ],
+  "author": "Vikeria",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vikeriait/vue-viewport.git"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src/styles/tailwind.css",
+    "src/styles/presets.css",
+    "types",
+    "web-types.json"
+  ],
+  "main": "./dist/vue-viewport.umd.cjs",
+  "module": "./dist/vue-viewport.js",
+  "types": "./dist/index.d.ts",
+  "web-types": "./web-types.json",
+  "style": "./src/styles/tailwind.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "style": "./src/styles/tailwind.css",
+      "import": "./dist/vue-viewport.js",
+      "require": "./dist/vue-viewport.umd.cjs"
+    },
+    "./tailwind": "./src/styles/tailwind.css",
+    "./css": "./dist/style.css",
+    "./style": "./src/styles/tailwind.css"
+  },
+  "sideEffects": [
+    "./src/styles/**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "changelogen": "^0.6.2",
+    "esbuild": "^0.27.2",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.6.2",
+    "prettier": "^3.7.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.51.0",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.4.0"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "generate": "node scripts/generate-presets.js",
+    "build": "pnpm generate && vite build && pnpm build:css",
+    "build:css": "esbuild src/styles/presets.css --minify --outfile=dist/style.css",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "release": "pnpm changelogen --release --push && pnpm publish"
+  }
+}

package/src/styles/presets.css

@@ -0,0 +1,258 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT MANUALLY */
+
+:root {
+  --viewport-duration: 0.6s;
+  --viewport-ease: ease-out;
+  --viewport-delay: 0s;
+  --viewport-distance: 2rem;
+  --viewport-stagger: 100ms;
+  --viewport-scale-in: 0.95;
+  --viewport-scale-out: 1.05;
+  --viewport-blur: 12px;
+}
+
+/* Base transition for all animations */
+[data-vp-preset*="animate-"] {
+  transition-duration: var(--viewport-duration);
+  transition-timing-function: var(--viewport-ease);
+  transition-delay: var(--viewport-delay);
+}
+
+
+/* fade Group */
+[data-vp-preset~="animate-fade"],
+[data-vp-preset~="animate-fade-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-fade-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-fade-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-fade-up"][data-vp-pos="above"] {
+  opacity: 0;
+  transition-property: opacity;
+}
+
+[data-vp-preset~="animate-fade"][data-vp-in-view],
+[data-vp-preset~="animate-fade-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-fade-up"][data-vp-entry="up"][data-vp-in-view] {
+  opacity: 1;
+}
+
+/* fade-up Group */
+[data-vp-preset~="animate-fade-up"],
+[data-vp-preset~="animate-fade-up-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-fade-up-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-fade-up-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-fade-up-up"][data-vp-pos="above"] {
+  opacity: 0; transform: translateY(var(--viewport-distance));
+  transition-property: opacity, transform;
+}
+
+[data-vp-preset~="animate-fade-up"][data-vp-in-view],
+[data-vp-preset~="animate-fade-up-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-fade-up-up"][data-vp-entry="up"][data-vp-in-view] {
+  opacity: 1; transform: translateY(0);
+}
+
+/* fade-down Group */
+[data-vp-preset~="animate-fade-down"],
+[data-vp-preset~="animate-fade-down-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-fade-down-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-fade-down-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-fade-down-up"][data-vp-pos="above"] {
+  opacity: 0; transform: translateY(calc(var(--viewport-distance) * -1));
+  transition-property: opacity, transform;
+}
+
+[data-vp-preset~="animate-fade-down"][data-vp-in-view],
+[data-vp-preset~="animate-fade-down-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-fade-down-up"][data-vp-entry="up"][data-vp-in-view] {
+  opacity: 1; transform: translateY(0);
+}
+
+/* fade-left Group */
+[data-vp-preset~="animate-fade-left"],
+[data-vp-preset~="animate-fade-left-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-fade-left-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-fade-left-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-fade-left-up"][data-vp-pos="above"] {
+  opacity: 0; transform: translateX(var(--viewport-distance));
+  transition-property: opacity, transform;
+}
+
+[data-vp-preset~="animate-fade-left"][data-vp-in-view],
+[data-vp-preset~="animate-fade-left-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-fade-left-up"][data-vp-entry="up"][data-vp-in-view] {
+  opacity: 1; transform: translateX(0);
+}
+
+/* fade-right Group */
+[data-vp-preset~="animate-fade-right"],
+[data-vp-preset~="animate-fade-right-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-fade-right-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-fade-right-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-fade-right-up"][data-vp-pos="above"] {
+  opacity: 0; transform: translateX(calc(var(--viewport-distance) * -1));
+  transition-property: opacity, transform;
+}
+
+[data-vp-preset~="animate-fade-right"][data-vp-in-view],
+[data-vp-preset~="animate-fade-right-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-fade-right-up"][data-vp-entry="up"][data-vp-in-view] {
+  opacity: 1; transform: translateX(0);
+}
+
+/* slide-up Group */
+[data-vp-preset~="animate-slide-up"],
+[data-vp-preset~="animate-slide-up-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-slide-up-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-slide-up-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-slide-up-up"][data-vp-pos="above"] {
+  transform: translateY(var(--viewport-distance));
+  transition-property: transform;
+}
+
+[data-vp-preset~="animate-slide-up"][data-vp-in-view],
+[data-vp-preset~="animate-slide-up-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-slide-up-up"][data-vp-entry="up"][data-vp-in-view] {
+  transform: translateY(0);
+}
+
+/* slide-down Group */
+[data-vp-preset~="animate-slide-down"],
+[data-vp-preset~="animate-slide-down-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-slide-down-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-slide-down-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-slide-down-up"][data-vp-pos="above"] {
+  transform: translateY(calc(var(--viewport-distance) * -1));
+  transition-property: transform;
+}
+
+[data-vp-preset~="animate-slide-down"][data-vp-in-view],
+[data-vp-preset~="animate-slide-down-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-slide-down-up"][data-vp-entry="up"][data-vp-in-view] {
+  transform: translateY(0);
+}
+
+/* slide-left Group */
+[data-vp-preset~="animate-slide-left"],
+[data-vp-preset~="animate-slide-left-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-slide-left-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-slide-left-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-slide-left-up"][data-vp-pos="above"] {
+  transform: translateX(var(--viewport-distance));
+  transition-property: transform;
+}
+
+[data-vp-preset~="animate-slide-left"][data-vp-in-view],
+[data-vp-preset~="animate-slide-left-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-slide-left-up"][data-vp-entry="up"][data-vp-in-view] {
+  transform: translateX(0);
+}
+
+/* slide-right Group */
+[data-vp-preset~="animate-slide-right"],
+[data-vp-preset~="animate-slide-right-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-slide-right-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-slide-right-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-slide-right-up"][data-vp-pos="above"] {
+  transform: translateX(calc(var(--viewport-distance) * -1));
+  transition-property: transform;
+}
+
+[data-vp-preset~="animate-slide-right"][data-vp-in-view],
+[data-vp-preset~="animate-slide-right-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-slide-right-up"][data-vp-entry="up"][data-vp-in-view] {
+  transform: translateX(0);
+}
+
+/* scale-up Group */
+[data-vp-preset~="animate-scale-up"],
+[data-vp-preset~="animate-scale-up-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-scale-up-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-scale-up-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-scale-up-up"][data-vp-pos="above"] {
+  opacity: 0; transform: scale(var(--viewport-scale-in));
+  transition-property: opacity, transform;
+}
+
+[data-vp-preset~="animate-scale-up"][data-vp-in-view],
+[data-vp-preset~="animate-scale-up-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-scale-up-up"][data-vp-entry="up"][data-vp-in-view] {
+  opacity: 1; transform: scale(1);
+}
+
+/* scale-down Group */
+[data-vp-preset~="animate-scale-down"],
+[data-vp-preset~="animate-scale-down-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-scale-down-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-scale-down-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-scale-down-up"][data-vp-pos="above"] {
+  opacity: 0; transform: scale(var(--viewport-scale-out));
+  transition-property: opacity, transform;
+}
+
+[data-vp-preset~="animate-scale-down"][data-vp-in-view],
+[data-vp-preset~="animate-scale-down-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-scale-down-up"][data-vp-entry="up"][data-vp-in-view] {
+  opacity: 1; transform: scale(1);
+}
+
+/* blur-in Group */
+[data-vp-preset~="animate-blur-in"],
+[data-vp-preset~="animate-blur-in-down"][data-vp-entry="down"],
+[data-vp-preset~="animate-blur-in-down"][data-vp-pos="below"],
+[data-vp-preset~="animate-blur-in-up"][data-vp-entry="up"],
+[data-vp-preset~="animate-blur-in-up"][data-vp-pos="above"] {
+  opacity: 0; filter: blur(var(--viewport-blur));
+  transition-property: opacity, filter;
+}
+
+[data-vp-preset~="animate-blur-in"][data-vp-in-view],
+[data-vp-preset~="animate-blur-in-down"][data-vp-entry="down"][data-vp-in-view],
+[data-vp-preset~="animate-blur-in-up"][data-vp-entry="up"][data-vp-in-view] {
+  opacity: 1; filter: blur(0);
+}
+
+/* SMART PRESETS (Composite) */
+/* fade-y */
+[data-vp-preset~="animate-fade-y"][data-vp-entry="down"],
+[data-vp-preset~="animate-fade-y"][data-vp-pos="below"],
+[data-vp-preset~="animate-fade-y"][data-vp-entry="up"],
+[data-vp-preset~="animate-fade-y"][data-vp-pos="above"] {
+  opacity: 0;
+  transition-property: opacity, transform;
+}
+
+[data-vp-preset~="animate-fade-y"][data-vp-entry="down"],
+[data-vp-preset~="animate-fade-y"][data-vp-pos="below"] { transform: translateY(var(--viewport-distance)); }
+
+[data-vp-preset~="animate-fade-y"][data-vp-entry="up"],
+[data-vp-preset~="animate-fade-y"][data-vp-pos="above"] { transform: translateY(calc(var(--viewport-distance) * -1)); }
+
+[data-vp-preset~="animate-fade-y"][data-vp-in-view] { opacity: 1; transform: translateY(0); }
+
+/* slide-y */
+[data-vp-preset~="animate-slide-y"][data-vp-entry="down"],
+[data-vp-preset~="animate-slide-y"][data-vp-pos="below"],
+[data-vp-preset~="animate-slide-y"][data-vp-entry="up"],
+[data-vp-preset~="animate-slide-y"][data-vp-pos="above"] {
+  transition-property: transform;
+}
+
+[data-vp-preset~="animate-slide-y"][data-vp-entry="down"],
+[data-vp-preset~="animate-slide-y"][data-vp-pos="below"] { transform: translateY(var(--viewport-distance)); }
+
+[data-vp-preset~="animate-slide-y"][data-vp-entry="up"],
+[data-vp-preset~="animate-slide-y"][data-vp-pos="above"] { transform: translateY(calc(var(--viewport-distance) * -1)); }
+
+[data-vp-preset~="animate-slide-y"][data-vp-in-view] { transform: translateY(0); }
+
+/* ACCESSIBILITY & PRINT OVERRIDES */
+@media (prefers-reduced-motion: reduce), print {
+  [data-vp-mounted] {
+    opacity: 1 !important;
+    transform: none !important;
+    transition: none !important;
+    filter: none !important;
+    animation: none !important;
+    translate: none !important;
+  }
+}

package/src/styles/tailwind.css

@@ -0,0 +1,8 @@
+@import "./presets.css" layer(utilities);
+
+@custom-variant inviewport (&[data-vp-in-view]);
+@custom-variant inviewport-down (&[data-vp-in-view][data-vp-entry="down"]);
+@custom-variant inviewport-up (&[data-vp-in-view][data-vp-entry="up"]);
+@custom-variant aboveviewport (&[data-vp-pos="above"]);
+@custom-variant belowviewport (&[data-vp-pos="below"]);
+