@ssgoi/core 2.4.0 → 2.5.1

package/dist/view-transitions/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=t=>new Promise(n=>setTimeout(n,t)),m=(t,n)=>{t.style.position="absolute",t.style.width="100%",t.style.top=`${-1*((n==null?void 0:n.scroll.y)??0)}px`,t.style.left="0"},H={stiffness:80,damping:25},X={stiffness:75,damping:25},U=300,M=10,N="horizontal",B="#000000",G=(t={})=>{const{inSpring:n=X,outSpring:l=H,transitionDelay:h=U,blindCount:o=M,direction:i=N,staggerDelay:s=100,blindColor:e=B}=t;let r,d=null;const c=(p,a,g,y=!1)=>{const f=Math.min(.5,s*g/1e3),$=1-f,x=(y?g-1-a:a)/g*f,w=x+$;return p<=x?0:p>=w?1:(p-x)/$},u=(p,a,g="left")=>{window.getComputedStyle(p).position==="static"&&(p.style.position="relative");const f=document.createElement("div");f.className="blind-container",f.style.cssText=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../jaemin-DL1-g_B5.cjs"),B=t=>new Promise(e=>setTimeout(e,t)),M={stiffness:80,damping:25},G={stiffness:75,damping:25},V=300,j=10,q="horizontal",K="#000000",Z=(t={})=>{const{inSpring:e=G,outSpring:r=M,transitionDelay:c=V,blindCount:s=j,direction:o=q,staggerDelay:l=100,blindColor:n=K}=t;let i,d=null;const a=(p,g,y="left")=>{window.getComputedStyle(p).position==="static"&&(p.style.position="relative");const h=document.createElement("div");h.className="blind-container",h.style.cssText=`
       position: absolute;
       top: 0;
       left: 0;
@@ -7,29 +7,29 @@
       pointer-events: none;
       z-index: 9999;
       overflow: hidden;
-    `;const $=[];for(let b=0;b<o;b++){const x=document.createElement("div");if(i==="horizontal"){const w=100/o,L=`calc(${w}% + 1px)`;x.style.cssText=`
+    `;const f=[];for(let $=0;$<s;$++){const m=document.createElement("div");if(o==="horizontal"){const x=100/s,T=`calc(${x}% + 1px)`;m.style.cssText=`
           position: absolute;
-          top: ${w*b}%;
+          top: ${x*$}%;
           left: 0;
           width: 100%;
-          height: ${L};
-          background: ${e};
-          transform: scaleX(${a==="hidden"?0:1});
-          transform-origin: ${g} center;
+          height: ${T};
+          background: ${n};
+          transform: scaleX(${g==="hidden"?0:1});
+          transform-origin: ${y} center;
           will-change: transform;
-        `}else{const w=100/o,L=`calc(${w}% + 1px)`;x.style.cssText=`
+        `}else{const x=100/s,T=`calc(${x}% + 1px)`;m.style.cssText=`
           position: absolute;
           top: 0;
-          left: ${w*b}%;
-          width: ${L};
+          left: ${x*$}%;
+          width: ${T};
           height: 100%;
-          background: ${e};
-          transform: scaleY(${a==="hidden"?0:1});
-          transform-origin: ${g==="left"?"top":"bottom"} center;
+          background: ${n};
+          transform: scaleY(${g==="hidden"?0:1});
+          transform-origin: ${y==="left"?"top":"bottom"} center;
           will-change: transform;
-        `}$.push(x),f.appendChild(x)}return p.appendChild(f),{container:f,blinds:$}};return{out:()=>{let p=null;return r=new Promise(a=>{d=a}),{spring:l,prepare:a=>{m(a),a.style.zIndex="1000",p=u(a,"hidden","left")},onStart:()=>{},tick:a=>{if(!p)return;const g=1-a;p.blinds.forEach((y,f)=>{const $=c(g,f,o,!1);i==="horizontal"?y.style.transform=`scaleX(${$})`:y.style.transform=`scaleY(${$})`})},onEnd:()=>{d&&d()}}},in:()=>{let p=null;return{spring:n,prepare:a=>{a.style.position="relative",a.style.zIndex="0",p=u(a,"closed","right")},onStart:()=>{},wait:async()=>{r&&await r,await W(h)},tick:a=>{p&&p.blinds.forEach((g,y)=>{const f=c(a,y,o,!1);i==="horizontal"?g.style.transform=`scaleX(${1-f})`:g.style.transform=`scaleY(${1-f})`})},onEnd:()=>{p&&p.container&&p.container.remove()}}}}},q=(t={})=>{var o,i;const{opacity:n=!1,direction:l="enter"}=t,h={stiffness:((o=t.spring)==null?void 0:o.stiffness)??150,damping:((i=t.spring)==null?void 0:i.damping)??20};return l==="enter"?{in:s=>({spring:h,tick:e=>{s.style.transform=`translateX(${(1-e)*100}%)`,n&&(s.style.opacity=e.toString())}}),out:(s,e)=>({spring:h,prepare:r=>{m(r,e),r.style.zIndex="-1"},tick:r=>{s.style.transform=`translateX(${-(1-r)*20}%)`,n&&(s.style.opacity=r.toString())}})}:{in:s=>({spring:{stiffness:100,damping:20},tick:e=>{s.style.transform=`translateX(${-(1-e)*20}%)`,n&&(s.style.opacity=e.toString())}}),out:(s,e)=>({spring:{stiffness:100,damping:20},prepare:r=>{m(r,e),r.style.zIndex="100"},tick:r=>{s.style.transform=`translateX(${(1-r)*100}%)`,n&&(s.style.opacity=r.toString())}})}},V=t=>new Promise(n=>setTimeout(n,t)),Z={stiffness:400,damping:20},j={stiffness:40,damping:8},J=100,K=(t={})=>{const{inSpring:n=j,outSpring:l=Z,transitionDelay:h=J}=t;let o,i=null;return{in:s=>({spring:n,prepare:e=>{e.style.opacity="0"},wait:async()=>{o&&(await o,await V(h))},tick:e=>{s.style.opacity=e.toString()}}),out:(s,e)=>(o=new Promise(r=>{i=r}),{spring:l,tick:r=>{s.style.opacity=r.toString()},prepare:r=>m(r,e),onEnd:()=>{i&&i()}})}};function P(t,n){function l(i){let s=0,e=0;const r=i.offsetWidth,d=i.offsetHeight;let c=i;for(;c;)s+=c.offsetTop,e+=c.offsetLeft,c=c.offsetParent;return s-=window.scrollY,e-=window.scrollX,{top:s,left:e,width:r,height:d}}const h=l(t),o=l(n);return new DOMRect(o.left-h.left,o.top-h.top,o.width,o.height)}const Q={stiffness:10,damping:5},k=.2,E=.82;function T(t){const n=P(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:n.width,height:window.innerHeight-n.top}}function A(t,n){const l=n.left+n.width/2,h=n.top+n.height/2;t.style.transformOrigin=`${l}px ${h}px`}function I(t,n){t.style.clipPath=`polygon(
-    ${n.left}px ${n.top}px,
-    ${n.left+n.width}px ${n.top}px,
-    ${n.left+n.width}px ${n.top+n.height}px,
-    ${n.left}px ${n.top+n.height}px
-  )`}function R(t,n){t.style.transform=`translateY(${-n.top}px)`}function S(t,n,l){return t<=n?0:t>=l?1:(t-n)/(l-n)}function v(t,n,l){t.topLeft.style.transform=`translate(${n}px, ${l}px)`,t.topRight.style.transform=`translate(${-n}px, ${l}px)`,t.bottomLeft.style.transform=`translate(${n}px, ${-l}px)`,t.bottomRight.style.transform=`translate(${-n}px, ${-l}px)`}function tt(t="white",n){const o=document.createElement("div");o.style.position="fixed",o.style.pointerEvents="none",o.style.zIndex="9999",o.style.top=`${n.top-2}px`,o.style.left=`${n.left-2}px`,o.style.width="10px",o.style.height="10px";const i=document.createElement("div");i.style.position="absolute",i.style.width="10px",i.style.height="2px",i.style.backgroundColor=t,i.style.top="0",i.style.left="0";const s=document.createElement("div");s.style.position="absolute",s.style.width="2px",s.style.height="10px",s.style.backgroundColor=t,s.style.top="0",s.style.left="0",o.appendChild(i),o.appendChild(s);const e=document.createElement("div");e.style.position="fixed",e.style.pointerEvents="none",e.style.zIndex="9999",e.style.top=`${n.top-2}px`,e.style.left=`${n.left+n.width-10+2}px`,e.style.width="10px",e.style.height="10px";const r=document.createElement("div");r.style.position="absolute",r.style.width="10px",r.style.height="2px",r.style.backgroundColor=t,r.style.top="0",r.style.right="0";const d=document.createElement("div");d.style.position="absolute",d.style.width="2px",d.style.height="10px",d.style.backgroundColor=t,d.style.top="0",d.style.right="0",e.appendChild(r),e.appendChild(d);const c=document.createElement("div");c.style.position="fixed",c.style.pointerEvents="none",c.style.zIndex="9999",c.style.top=`${n.top+n.height-10+2}px`,c.style.left=`${n.left-2}px`,c.style.width="10px",c.style.height="10px";const u=document.createElement("div");u.style.position="absolute",u.style.width="10px",u.style.height="2px",u.style.backgroundColor=t,u.style.bottom="0",u.style.left="0";const p=document.createElement("div");p.style.position="absolute",p.style.width="2px",p.style.height="10px",p.style.backgroundColor=t,p.style.bottom="0",p.style.left="0",c.appendChild(u),c.appendChild(p);const a=document.createElement("div");a.style.position="fixed",a.style.pointerEvents="none",a.style.zIndex="9999",a.style.top=`${n.top+n.height-10+2}px`,a.style.left=`${n.left+n.width-10+2}px`,a.style.width="10px",a.style.height="10px";const g=document.createElement("div");g.style.position="absolute",g.style.width="10px",g.style.height="2px",g.style.backgroundColor=t,g.style.bottom="0",g.style.right="0";const y=document.createElement("div");return y.style.position="absolute",y.style.width="2px",y.style.height="10px",y.style.backgroundColor=t,y.style.bottom="0",y.style.right="0",a.appendChild(g),a.appendChild(y),{topLeft:o,topRight:e,bottomLeft:c,bottomRight:a,*[Symbol.iterator](){yield o,yield e,yield c,yield a}}}const et=t=>{var o;const n=(t==null?void 0:t.spring)??Q,l=(t==null?void 0:t.scale)??.92,h=((o=t==null?void 0:t.border)==null?void 0:o.color)??"white";return{out:async(i,s)=>{const e=T(s),r=P(document.body,s.positionedParent),d=tt(h,{...e,top:r.top});return{spring:n,prepare:()=>{m(i),A(i,e),I(i,e),R(i,e);for(const c of d)s.positionedParent.appendChild(c),c.style.transition="transform 0.1s ease-out"},onEnd:()=>{i.style.clipPath="",i.style.transformOrigin="",setTimeout(()=>{for(const c of d)s.positionedParent.removeChild(c)},1e3)},tick:c=>{const u=1-c;if(u<k){const p=S(u,0,k),a=1-(1-l)*p;i.style.transform=`translateY(${-e.top}px) scale(${a})`;const g=(e.width-e.width*a)/2,y=(e.height-e.height*a)/2;v(d,g,y)}else if(u<E){const p=S(u,k,E),a=-e.top-e.height*p;i.style.transform=`translateY(${a}px) scale(${l})`}else{const p=S(u,E,1),a=l+(1-l)*p;i.style.transform=`translateY(${-e.top-e.height}px) scale(${a})`;const g=(e.width-e.width*a)/2,y=(e.height-e.height*a)/2;v(d,g,y)}}}},in:async(i,s)=>{const e=T(s);return{spring:n,prepare:()=>{A(i,e),I(i,e),i.style.transform=`translateY(${-e.top+e.height}px) scale(${l})`},onEnd:()=>{i.style.clipPath="",i.style.transformOrigin="",i.style.transform=""},tick:r=>{if(r<k)i.style.transform=`translateY(${-e.top+e.height}px) scale(${l})`,i.style.opacity="0";else if(r<E){const d=S(r,k,E),c=-e.top+e.height*(1-d);i.style.transform=`translateY(${c}px) scale(${l})`,i.style.opacity="1"}else{const d=S(r,E,1),c=l+(1-l)*d;i.style.transform=`translateY(${-e.top}px) scale(${c})`,i.style.opacity="1"}}}}}};function nt(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}const it=(t={})=>{var i,s;const n={stiffness:((i=t.spring)==null?void 0:i.stiffness)??300,damping:((s=t.spring)==null?void 0:s.damping)??30},l=t.timeout??300;let h=null,o=null;return{in:async(e,r)=>{const d=e,c=Array.from(d.querySelectorAll("[data-hero-key]"));if(c.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(a=>{h?a(!0):(o=a,setTimeout(()=>{o=null,a(!1)},l))})||!h)return h=null,{spring:n,tick:()=>{}};const p=c.map(a=>{const g=a.getAttribute("data-hero-key");if(!g)return null;const y=nt(h,g);if(!y)return null;const f=a,$=P(h,y),b=P(d,f),x=$.left-b.left-r.scrollOffset.x,w=$.top-b.top-r.scrollOffset.y,L=$.width/b.width,F=$.height/b.height,Y=f.style.transform,_=f.style.position,z=f.style.transformOrigin,O=f.style.zIndex;return{toEl:f,dx:x,dy:w,dw:L,dh:F,originalTransform:Y,originalPosition:_,originalTransformOrigin:z,originalZIndex:O}}).filter(Boolean);return h=null,p.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{p.forEach(({toEl:a})=>{a.style.position="relative",a.style.transformOrigin="top left",a.style.zIndex="1000"})},tick:a=>{p.forEach(({toEl:g,dx:y,dy:f,dw:$,dh:b})=>{g.style.transform=`translate(${(1-a)*y}px,${(1-a)*f}px) scale(${a+(1-a)*$}, ${a+(1-a)*b})`})},onEnd:()=>{p.forEach(({toEl:a,originalTransform:g,originalPosition:y,originalTransformOrigin:f,originalZIndex:$})=>{a.style.transform=g,a.style.position=y,a.style.transformOrigin=f,a.style.zIndex=$})}}},out:async e=>({onStart:()=>{h=e,o&&(o(!0),o=null)},prepare:r=>{m(r),r.style.opacity="0"}})}};function st(t){const n=P(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:n.width,height:window.innerHeight-n.top}}const rt=(t={})=>{var i,s;const n={stiffness:((i=t.spring)==null?void 0:i.stiffness)??50,damping:((s=t.spring)==null?void 0:s.damping)??30},l=t.initialRotation??45,h=t.initialScale??.01,o=t.rotationTriggerPoint??.8;return{out:async(e,r)=>{const d=e.style.opacity;return{spring:{stiffness:80,damping:25},from:1,to:0,prepare:()=>{m(e,r),e.style.opacity="1"},tick:c=>{e.style.opacity=String(c)},onEnd:()=>{e.style.opacity=d}}},in:async(e,r)=>{const d=st(r),c=e.style.transform,u=e.style.transformOrigin,p=e.style.position,a=e.style.zIndex;return{spring:n,from:0,to:1,prepare:()=>{const g=Math.min(d.width,d.height)*.4;e.style.setProperty("--max-border-radius",`${g}px`),e.style.setProperty("--border-radius-scale","1"),e.style.willChange="transform",e.style.backfaceVisibility="hidden";const y=d.left+d.width/2,f=d.top+d.height/2;e.style.transformOrigin=`${y}px ${f}px`,e.style.position="fixed",e.style.top=`${d.top}px`,e.style.left=`${d.left}px`,e.style.width=`${d.width}px`,e.style.height=`${d.height}px`,e.style.zIndex="1000",e.style.overflow="hidden",e.style.transform=`rotate(${l}deg) scale(${h}) translateZ(0)`,e.style.borderRadius="calc(var(--max-border-radius) * var(--border-radius-scale))",e.style.opacity="1"},tick:g=>{let y;if(g<=.05)y=h;else if(g<=o){const x=(g-.05)/(o-.05),w=Math.pow(x,9);y=h+(.8-h)*w}else{const x=(g-o)/(1-o);y=.8+.2*(1-Math.pow(1-x,3))}let f;const $=.7;if(g<=$)f=l;else{const x=(g-$)/(1-$),w=1-Math.pow(1-x,2);f=l*(1-w)}let b;if(g<=$)b=1;else{const x=(g-$)/(1-$);b=1-Math.pow(x,.5)}e.style.transform=`rotate(${f.toFixed(2)}deg) scale(${y.toFixed(4)}) translateZ(0)`,e.style.setProperty("--border-radius-scale",b.toFixed(4))},onEnd:()=>{e.style.willChange="",e.style.backfaceVisibility="",e.style.removeProperty("--max-border-radius"),e.style.removeProperty("--border-radius-scale"),e.style.transform=c,e.style.transformOrigin=u,e.style.position=p,e.style.zIndex=a,e.style.top="",e.style.left="",e.style.width="",e.style.height="",e.style.overflow="",e.style.borderRadius=""}}}}};function ot({detailRect:t,galleryRect:n,pageRect:l,scrollOffset:h},o){const i=n.left-t.left+(n.width-t.width)/2-h.x,s=n.top-t.top+(n.height-t.height)/2-h.y,e=n.width/t.width,r=n.height/t.height,d=Math.max(e,r),c=t.top/l.height*100,u=(l.width-(t.left+t.width))/l.width*100,p=(l.height-(t.top+t.height))/l.height*100,a=t.left/l.width*100;return o.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,g=>{const y=1-g,f=c*y,$=u*y,b=p*y,x=a*y;o.style.clipPath=`inset(${f}% ${$}% ${b}% ${x}%)`,o.style.transform=`translate(${i*y}px, ${s*y}px) scale(${1+(d-1)*y})`}}function lt({galleryRect:t,detailRect:n,scrollOffset:l},h){const o=n.left-t.left+(n.width-t.width)/2+l.x,i=n.top-t.top+(n.height-t.height)/2+l.y,s=n.width/t.width,e=n.height/t.height,r=Math.max(s,e);return d=>{h.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const c=1-d;h.style.transform=`translate(${o*c-l.x}px, ${i*c-l.y}px) scale(${1+(r-1)*c})`,h.style.opacity=`${1-c}`}}function at({galleryRect:t,detailRect:n,scrollOffset:l},h){const o=n.left-t.left+(n.width-t.width)/2-l.x,i=n.top-t.top+(n.height-t.height)/2-l.y,s=n.width/t.width,e=n.height/t.height,r=Math.max(s,e);return d=>{const c=1-d,u=d;h.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,h.style.transform=`translate(${o*c}px, ${i*c}px) scale(${1+(r-1)*c})`,h.style.opacity=`${u}`}}function dt({detailRect:t,galleryRect:n,pageRect:l,scrollOffset:h},o){const i=n.left-t.left+(n.width-t.width)/2+h.x,s=n.top-t.top+(n.height-t.height)/2+h.y,e=n.width/t.width,r=n.height/t.height,d=Math.min(e,r),c=t.top/l.height*100,u=(l.width-(t.left+t.width))/l.width*100,p=(l.height-(t.top+t.height))/l.height*100,a=t.left/l.width*100;return o.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,g=>{const y=1-g,f=c*y,$=u*y,b=p*y,x=a*y;o.style.clipPath=`inset(${f}% ${$}% ${b}% ${x}%)`,o.style.transform=`translate(${i*y-h.x}px, ${s*y-h.y}px) scale(${1+(d-1)*y})`}}function ct(t,n,l){const h=t.querySelector("[data-pinterest-detail-key]"),o=n.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||n.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let i=null,s=null,e=!1;if(!h&&o){s=o;const u=s.getAttribute("data-pinterest-detail-key");if(!u)return null;i=t.querySelector(`[data-pinterest-gallery-key="${u}"]`),i&&(e=!0)}else if(h&&!o){s=h;const u=s.getAttribute("data-pinterest-detail-key");if(!u)return null;i=n.querySelector(`[data-pinterest-gallery-key="${u}"]`),i&&(e=!1)}if(!i||!s)return null;const r=P(e?t:n,i),d=P(e?n:t,s),c=n.getBoundingClientRect();return e?{inAnimation:ot({detailRect:d,galleryRect:r,pageRect:c,scrollOffset:l},n),outAnimation:lt({galleryRect:r,detailRect:d,scrollOffset:l},t)}:{inAnimation:at({galleryRect:r,detailRect:d,scrollOffset:l},n),outAnimation:dt({detailRect:d,galleryRect:r,pageRect:c,scrollOffset:l},t)}}const ht=(t={})=>{var s,e;const n={stiffness:((s=t.spring)==null?void 0:s.stiffness)??50,damping:((e=t.spring)==null?void 0:e.damping)??10},l=t.timeout??300;let h=null,o=null,i=null;return{in:async(r,{scrollOffset:d})=>{const c=r;return!await new Promise(p=>{h?p(!0):(o=p,setTimeout(()=>{o=null,p(!1)},l))})||!h?(h=null,{spring:n,tick:()=>{}}):(i=ct(h,c,d),i?(h=null,{spring:n,tick:p=>{i&&i.inAnimation(p)}}):{spring:n,tick:()=>{}})},out:async r=>({spring:n,onStart:()=>{h=r,o&&(o(!0),o=null)},prepare:d=>{m(d),d.style.zIndex="-1"},tick:d=>{i&&i.outAnimation(d)}})}},C={stiffness:30,damping:7},pt=(t={})=>{var r,d;const n=t.direction??"up",l={stiffness:((r=t.spring)==null?void 0:r.stiffness)??C.stiffness,damping:((d=t.spring)==null?void 0:d.damping)??C.damping},h=n==="up";let o=null,i=null,s=null;const e=()=>{if(o===null||i===null)return null;const c=Math.min(o,i),u=window.innerHeight;return Math.max(c,u)};return{in:c=>(i=c.offsetHeight,o!==null&&(s=e()),{spring:l,tick:u=>{if(s===null&&(s=e(),s===null))return;const p=h?(1-u)*s:(1-u)*-s;c.style.transform=`translateY(${p}px)`}}),out:c=>({spring:l,onStart:()=>{o=c.offsetHeight,i!==null&&(s=e())},tick:u=>{if(s===null&&(s=e(),s===null))return;const p=h?(1-u)*-s:(1-u)*s;c.style.transform=`translateY(${p}px)`},prepare:u=>{m(u),u.style.zIndex=h?"-1":"1"}})}},D={stiffness:30,damping:7},yt=(t={})=>{var o,i;const n=t.direction??"left",l={stiffness:((o=t.spring)==null?void 0:o.stiffness)??D.stiffness,damping:((i=t.spring)==null?void 0:i.damping)??D.damping},h=n==="left";return{in:s=>({spring:l,tick:e=>{const r=h?(1-e)*100:(1-e)*-100;s.style.transform=`translateX(${r}%)`}}),out:(s,e)=>({spring:l,tick:r=>{const d=h?(1-r)*-100:(1-r)*100;s.style.transform=`translateX(${d}%)`},prepare:r=>{m(r,e),r.style.zIndex=h?"-1":"1"}})}};exports.blind=G;exports.drill=q;exports.fade=K;exports.film=et;exports.hero=it;exports.jaemin=rt;exports.pinterest=ht;exports.scroll=pt;exports.slide=yt;
+        `}f.push(m),h.appendChild(m)}return p.appendChild(h),{container:h,blinds:f}};return{out:()=>{let p=null;return i=new Promise(y=>{d=y}),{springs:Array.from({length:s},(y,u)=>({from:0,to:1,spring:r,offset:u*l,tick:h=>{if(!p)return;const f=p.blinds[u];f&&(o==="horizontal"?f.style.transform=`scaleX(${h})`:f.style.transform=`scaleY(${h})`)}})),schedule:"chain",prepare:y=>{b.prepareOutgoing(y),y.style.zIndex="1000",p=a(y,"hidden","left")},onStart:()=>{},onEnd:()=>{d&&d()}}},in:()=>{let p=null;return{springs:Array.from({length:s},(y,u)=>({from:1,to:0,spring:e,offset:u*l,tick:h=>{if(!p)return;const f=p.blinds[u];f&&(o==="horizontal"?f.style.transform=`scaleX(${h})`:f.style.transform=`scaleY(${h})`)}})),schedule:"chain",prepare:y=>{y.style.position="relative",y.style.zIndex="0",p=a(y,"closed","right")},onStart:()=>{},wait:async()=>{i&&await i,await B(c)},onEnd:()=>{p&&p.container&&p.container.remove()}}}}},J=(t={})=>{var s,o;const{opacity:e=!1,direction:r="enter"}=t,c={stiffness:((s=t.spring)==null?void 0:s.stiffness)??150,damping:((o=t.spring)==null?void 0:o.damping)??20};return r==="enter"?{in:l=>({spring:c,tick:n=>{l.style.transform=`translateX(${(1-n)*100}%)`,e&&(l.style.opacity=n.toString())}}),out:(l,n)=>({spring:c,prepare:i=>{b.prepareOutgoing(i,n),i.style.zIndex="-1"},tick:i=>{l.style.transform=`translateX(${-(1-i)*20}%)`,e&&(l.style.opacity=i.toString())}})}:{in:l=>({spring:{stiffness:100,damping:20},tick:n=>{l.style.transform=`translateX(${-(1-n)*20}%)`,e&&(l.style.opacity=n.toString())}}),out:(l,n)=>({spring:{stiffness:100,damping:20},prepare:i=>{b.prepareOutgoing(i,n),i.style.zIndex="100"},tick:i=>{l.style.transform=`translateX(${(1-i)*100}%)`,e&&(l.style.opacity=i.toString())}})}},Q=t=>new Promise(e=>setTimeout(e,t)),R={stiffness:7,damping:4},tt={stiffness:8,damping:4},et=0,nt=(t={})=>{const{inSpring:e=tt,outSpring:r=R,transitionDelay:c=et}=t;let s,o=null;return{in:l=>({spring:e,prepare:n=>{n.style.opacity="0",n.style.willChange="opacity"},wait:async()=>{s&&(await s,await Q(c))},tick:n=>{l.style.opacity=n.toString()}}),out:(l,n)=>(s=new Promise(i=>{o=i}),{spring:r,tick:i=>{l.style.opacity=i.toString()},prepare:i=>{b.prepareOutgoing(i,n),i.style.willChange="opacity"},onEnd:()=>{o&&o()}})}},it={stiffness:5,damping:3.5},st=.8,rt="white",w={start:0,end:.45},E={start:.85,end:1},L={start:.2,end:.9},ot=t=>{var s;const e=(t==null?void 0:t.spring)??it,r=(t==null?void 0:t.scale)??st,c=((s=t==null?void 0:t.border)==null?void 0:s.color)??rt;return{out:async(o,l)=>{const n=P(l),i=b.getRect(document.body,l.positionedParent),d=at(c,{...n,top:i.top});let a=1,p=-n.top;return{spring:e,prepare:()=>{b.prepareOutgoing(o),k(o,n),I(o,n),dt(o,n);for(const g of d)l.positionedParent.appendChild(g)},onEnd:()=>{o.style.clipPath="",o.style.transformOrigin="",setTimeout(()=>{for(const g of d)l.positionedParent.removeChild(g)},1e3)},tick:g=>{const y=1-g;if(w.start<=y&&y<=w.end){const f=A(y,w.start,w.end);a=1-(1-r)*f}if(E.start<=y&&y<=E.end){const f=A(y,E.start,E.end);a=r+(1-r)*f}if(L.start<=y&&y<=L.end){const f=A(y,L.start,L.end);p=-n.top-n.height*f}o.style.transform=`translateY(${p}px) scale(${a})`;const u=(n.width-n.width*a)/2,h=(n.height-n.height*a)/2;lt(d,u,h)}}},in:async(o,l)=>{const n=P(l);let i=r,d=-n.top+n.height;return{spring:e,prepare:()=>{k(o,n),I(o,n),o.style.transform=`translateY(${-n.top+n.height}px) scale(${r})`},onEnd:()=>{o.style.clipPath="",o.style.transformOrigin="",o.style.transform=""},tick:a=>{if(w.start<=a&&a<=w.end){const p=A(a,w.start,w.end);i=1-(1-r)*p}if(E.start<=a&&a<=E.end){const p=A(a,E.start,E.end);i=r+(1-r)*p}if(L.start<=a&&a<=L.end){const p=A(a,L.start,L.end);d=-n.top+n.height*(1-p)}o.style.transform=`translateY(${d}px) scale(${i})`}}}}};function lt(t,e,r){const c=e*.7,s=r*.7;t.topLeft.style.transform=`translate(${c}px, ${s}px)`,t.topRight.style.transform=`translate(${-c}px, ${s}px)`,t.bottomLeft.style.transform=`translate(${c}px, ${-s}px)`,t.bottomRight.style.transform=`translate(${-c}px, ${-s}px)`}function at(t="white",e){const s=document.createElement("div");s.style.position="fixed",s.style.pointerEvents="none",s.style.zIndex="9999",s.style.top=`${e.top-1}px`,s.style.left=`${e.left-1}px`,s.style.width="15px",s.style.height="15px";const o=document.createElement("div");o.style.position="absolute",o.style.width="15px",o.style.height="1px",o.style.backgroundColor=t,o.style.top="0",o.style.left="0";const l=document.createElement("div");l.style.position="absolute",l.style.width="1px",l.style.height="15px",l.style.backgroundColor=t,l.style.top="0",l.style.left="0",s.appendChild(o),s.appendChild(l);const n=document.createElement("div");n.style.position="fixed",n.style.pointerEvents="none",n.style.zIndex="9999",n.style.top=`${e.top-1}px`,n.style.left=`${e.left+e.width-15+1}px`,n.style.width="15px",n.style.height="15px";const i=document.createElement("div");i.style.position="absolute",i.style.width="15px",i.style.height="1px",i.style.backgroundColor=t,i.style.top="0",i.style.right="0";const d=document.createElement("div");d.style.position="absolute",d.style.width="1px",d.style.height="15px",d.style.backgroundColor=t,d.style.top="0",d.style.right="0",n.appendChild(i),n.appendChild(d);const a=document.createElement("div");a.style.position="fixed",a.style.pointerEvents="none",a.style.zIndex="9999",a.style.top=`${e.top+e.height-15+1}px`,a.style.left=`${e.left-1}px`,a.style.width="15px",a.style.height="15px";const p=document.createElement("div");p.style.position="absolute",p.style.width="15px",p.style.height="1px",p.style.backgroundColor=t,p.style.bottom="0",p.style.left="0";const g=document.createElement("div");g.style.position="absolute",g.style.width="1px",g.style.height="15px",g.style.backgroundColor=t,g.style.bottom="0",g.style.left="0",a.appendChild(p),a.appendChild(g);const y=document.createElement("div");y.style.position="fixed",y.style.pointerEvents="none",y.style.zIndex="9999",y.style.top=`${e.top+e.height-15+1}px`,y.style.left=`${e.left+e.width-15+1}px`,y.style.width="15px",y.style.height="15px";const u=document.createElement("div");u.style.position="absolute",u.style.width="15px",u.style.height="1px",u.style.backgroundColor=t,u.style.bottom="0",u.style.right="0";const h=document.createElement("div");return h.style.position="absolute",h.style.width="1px",h.style.height="15px",h.style.backgroundColor=t,h.style.bottom="0",h.style.right="0",y.appendChild(u),y.appendChild(h),{topLeft:s,topRight:n,bottomLeft:a,bottomRight:y,*[Symbol.iterator](){yield s,yield n,yield a,yield y}}}function P(t){const e=b.getRect(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:e.width,height:window.innerHeight-e.top}}function k(t,e){const r=e.left+e.width/2,c=e.top+e.height/2;t.style.transformOrigin=`${r}px ${c}px`}function I(t,e){t.style.clipPath=`polygon(
+    ${e.left}px ${e.top}px,
+    ${e.left+e.width}px ${e.top}px,
+    ${e.left+e.width}px ${e.top+e.height}px,
+    ${e.left}px ${e.top+e.height}px
+  )`}function dt(t,e){t.style.transform=`translateY(${-e.top}px)`}function A(t,e,r){return t<=e?0:t>=r?1:(t-e)/(r-e)}function ct(t,e){return t.querySelector(`[data-hero-key="${e}"]`)}const pt=(t={})=>{var l,n;const e={stiffness:((l=t.spring)==null?void 0:l.stiffness)??300,damping:((n=t.spring)==null?void 0:n.damping)??30},r=t.timeout??300,c=t.maxDistance??700;let s=null,o=null;return{in:async(i,d)=>{const a=i,p=Array.from(a.querySelectorAll("[data-hero-key]"));if(p.length===0)return{spring:e,tick:()=>{}};if(!await new Promise(u=>{s?u(!0):(o=u,setTimeout(()=>{o=null,u(!1)},r))})||!s)return s=null,{spring:e,tick:()=>{}};const y=p.map(u=>{const h=u.getAttribute("data-hero-key");if(!h)return null;const f=ct(s,h);if(!f)return null;const $=u,m=b.getRect(s,f),x=b.getRect(a,$),T=m.left-x.left-d.scrollOffset.x,Y=m.top-x.top-d.scrollOffset.y,U=m.width/x.width,W=m.height/x.height,X=$.style.transform,N=$.style.position,z=$.style.transformOrigin,H=$.style.zIndex;return{toEl:$,dx:T,dy:Y,dw:U,dh:W,originalTransform:X,originalPosition:N,originalTransformOrigin:z,originalZIndex:H}}).filter(u=>u!==null&&Math.abs(u.dy)<=c);return s=null,y.length===0?{spring:e,tick:()=>{}}:{spring:e,prepare:()=>{y.forEach(({toEl:u})=>{u.style.position="relative",u.style.transformOrigin="top left",u.style.zIndex="1000"})},tick:u=>{y.forEach(({toEl:h,dx:f,dy:$,dw:m,dh:x})=>{h.style.transform=`translate(${(1-u)*f}px,${(1-u)*$}px) scale(${u+(1-u)*m}, ${u+(1-u)*x})`})},onEnd:()=>{y.forEach(({toEl:u,originalTransform:h,originalPosition:f,originalTransformOrigin:$,originalZIndex:m})=>{u.style.transform=h,u.style.position=f,u.style.transformOrigin=$,u.style.zIndex=m})}}},out:async i=>({onStart:()=>{s=i,o&&(o(!0),o=null)},prepare:d=>{b.prepareOutgoing(d),d.style.opacity="0"}})}};function ht({detailRect:t,galleryRect:e,pageRect:r,scrollOffset:c},s){const o=e.left-t.left+(e.width-t.width)/2-c.x,l=e.top-t.top+(e.height-t.height)/2-c.y,n=e.width/t.width,i=e.height/t.height,d=Math.max(n,i),a=t.top/r.height*100,p=(r.width-(t.left+t.width))/r.width*100,g=(r.height-(t.top+t.height))/r.height*100,y=t.left/r.width*100;return s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,u=>{const h=1-u,f=a*h,$=p*h,m=g*h,x=y*h;s.style.clipPath=`inset(${f}% ${$}% ${m}% ${x}%)`,s.style.transform=`translate(${o*h}px, ${l*h}px) scale(${1+(d-1)*h})`}}function yt({galleryRect:t,detailRect:e,scrollOffset:r},c){const s=e.left-t.left+(e.width-t.width)/2+r.x,o=e.top-t.top+(e.height-t.height)/2+r.y,l=e.width/t.width,n=e.height/t.height,i=Math.max(l,n);return d=>{c.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const a=1-d;c.style.transform=`translate(${s*a-r.x}px, ${o*a-r.y}px) scale(${1+(i-1)*a})`,c.style.opacity=`${1-a}`}}function ut({galleryRect:t,detailRect:e,scrollOffset:r},c){const s=e.left-t.left+(e.width-t.width)/2-r.x,o=e.top-t.top+(e.height-t.height)/2-r.y,l=e.width/t.width,n=e.height/t.height,i=Math.max(l,n);return d=>{const a=1-d,p=d;c.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,c.style.transform=`translate(${s*a}px, ${o*a}px) scale(${1+(i-1)*a})`,c.style.opacity=`${p}`}}function gt({detailRect:t,galleryRect:e,pageRect:r,scrollOffset:c},s){const o=e.left-t.left+(e.width-t.width)/2+c.x,l=e.top-t.top+(e.height-t.height)/2+c.y,n=e.width/t.width,i=e.height/t.height,d=Math.min(n,i),a=t.top/r.height*100,p=(r.width-(t.left+t.width))/r.width*100,g=(r.height-(t.top+t.height))/r.height*100,y=t.left/r.width*100;return s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,u=>{const h=1-u,f=a*h,$=p*h,m=g*h,x=y*h;s.style.clipPath=`inset(${f}% ${$}% ${m}% ${x}%)`,s.style.transform=`translate(${o*h-c.x}px, ${l*h-c.y}px) scale(${1+(d-1)*h})`}}function ft(t,e,r){const c=t.querySelector("[data-pinterest-detail-key]"),s=e.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||e.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let o=null,l=null,n=!1;if(!c&&s){l=s;const p=l.getAttribute("data-pinterest-detail-key");if(!p)return null;o=t.querySelector(`[data-pinterest-gallery-key="${p}"]`),o&&(n=!0)}else if(c&&!s){l=c;const p=l.getAttribute("data-pinterest-detail-key");if(!p)return null;o=e.querySelector(`[data-pinterest-gallery-key="${p}"]`),o&&(n=!1)}if(!o||!l)return null;const i=b.getRect(n?t:e,o),d=b.getRect(n?e:t,l),a=e.getBoundingClientRect();return n?{inAnimation:ht({detailRect:d,galleryRect:i,pageRect:a,scrollOffset:r},e),outAnimation:yt({galleryRect:i,detailRect:d,scrollOffset:r},t)}:{inAnimation:ut({galleryRect:i,detailRect:d,scrollOffset:r},e),outAnimation:gt({detailRect:d,galleryRect:i,pageRect:a,scrollOffset:r},t)}}const $t=(t={})=>{var l,n;const e={stiffness:((l=t.spring)==null?void 0:l.stiffness)??30,damping:((n=t.spring)==null?void 0:n.damping)??10},r=t.timeout??300;let c=null,s=null,o=null;return{in:async(i,{scrollOffset:d})=>{const a=i;return!await new Promise(g=>{c?g(!0):(s=g,setTimeout(()=>{s=null,g(!1)},r))})||!c?(c=null,{spring:e,tick:()=>{}}):(o=ft(c,a,d),o?(c=null,{spring:e,tick:g=>{o&&o.inAnimation(g)}}):{spring:e,tick:()=>{}})},out:async i=>({spring:e,onStart:()=>{c=i,s&&(s(!0),s=null)},prepare:d=>{b.prepareOutgoing(d),d.style.zIndex="-1"},tick:d=>{o&&o.outAnimation(d)}})}},O={stiffness:5,damping:4},mt=(t={})=>{var i,d;const e=t.direction??"up",r={stiffness:((i=t.spring)==null?void 0:i.stiffness)??O.stiffness,damping:((d=t.spring)==null?void 0:d.damping)??O.damping},c=e==="up";let s=null,o=null,l=null;const n=()=>{if(s===null||o===null)return null;const a=Math.min(s,o),p=window.innerHeight;return Math.max(a,p)};return{in:a=>(o=a.offsetHeight,s!==null&&(l=n()),{spring:r,tick:p=>{if(l===null&&(l=n(),l===null))return;const g=c?(1-p)*l:(1-p)*-l;a.style.transform=`translateY(${g}px)`}}),out:a=>({spring:r,onStart:()=>{s=a.offsetHeight,o!==null&&(l=n())},tick:p=>{if(l===null&&(l=n(),l===null))return;const g=c?(1-p)*-l:(1-p)*l;a.style.transform=`translateY(${g}px)`},prepare:p=>{b.prepareOutgoing(p),p.style.zIndex=c?"-1":"1"}})}},D={stiffness:15,damping:7},xt=(t={})=>{var s,o;const e=t.direction??"left",r={stiffness:((s=t.spring)==null?void 0:s.stiffness)??D.stiffness,damping:((o=t.spring)==null?void 0:o.damping)??D.damping},c=e==="left";return{in:l=>({spring:r,tick:n=>{const i=c?(1-n)*100:(1-n)*-100;l.style.transform=`translateX(${i}%)`}}),out:(l,n)=>({spring:r,tick:i=>{const d=c?(1-i)*-100:(1-i)*100;l.style.transform=`translateX(${d}%)`},prepare:i=>{b.prepareOutgoing(i,n),i.style.zIndex=c?"-1":"1"}})}},v={stiffness:17,damping:6},_=20,C=800,bt=()=>{let t,e=null;return{in:r=>({spring:v,prepare:c=>{c.style.transform=`perspective(${C}px) rotateY(${_}deg) translateX(-100%)`},wait:async()=>{t&&await t},tick:c=>{const s=(1-c)*_,o=-(1-c)*100;r.style.transform=`perspective(${C}px) rotateY(${s}deg) translateX(${o}%)`},onEnd:()=>{r.style.transform=""}}),out:(r,c)=>(t=new Promise(s=>{e=s}),{spring:v,prepare:s=>{b.prepareOutgoing(s,c)},tick:s=>{const o=1-s,l=o*_,n=o*100;r.style.transform=`perspective(${C}px) rotateY(${-l}deg) translateX(${n}%)`},onEnd:()=>{e&&e(),r.style.transform=""}})}},wt={stiffness:1,damping:1},Et={stiffness:20,damping:25},Lt="#000000",At="circle",F="CURTAIN_REVEAL_OVERLAY_ID",Tt={position:"fixed",inset:"0",width:"100vw",height:"100%",zIndex:"9999",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"},St={position:"relative",display:"inline-block",height:"5.5rem",overflow:"hidden"},_t={display:"flex",height:"100%",willChange:"transform",transition:"transform 0.3s ease"},Ct={display:"inline-flex",alignItems:"center",justifyContent:"center",whiteSpace:"nowrap",fontSize:"5.5rem",fontWeight:"900",letterSpacing:"0.02em",color:"#FFFFFF"},Pt=.4,S=.5,kt=.2;function It(t,e){switch(t){case"circle":return`circle(${e*100}% at 50% 50%)`;case"square":return`inset(${(1-e)*50}% round ${10*e}%)`;case"triangle":{const r=e*100;return`polygon(50% ${50-r}%, ${50-r}% ${50+r}%, ${50+r}% ${50+r}%)`}}}const Ot=t=>t.reduce((e,r)=>e+r,0),Dt=(t={})=>{const{background:e=Lt,texts:r=[],shape:c=At,inSpring:s=Et,outSpring:o=wt,textStyle:l={}}=t;return{out:(n,i)=>{const d=n.style.opacity;return{spring:o,from:1,to:0,prepare:a=>{b.prepareOutgoing(a,i),a.style.opacity="1"},tick:a=>{const p=Math.max(0,a-Pt);n.style.opacity=String(p)},onEnd:()=>{n.style.opacity=d}}},in:n=>{let i=null,d=null,a=null;const p=document.body.style.overflow,g=document.getElementById(F);let y=[];const u=()=>{i=document.createElement("div"),i.id=F,Object.assign(i.style,Tt,{background:e}),document.body.appendChild(i),d=document.createElement("div"),Object.assign(d.style,St),i.appendChild(d),a=document.createElement("div"),Object.assign(a.style,_t),d.appendChild(a),r.forEach(h=>{const f=document.createElement("div");f.textContent=h,Object.assign(f.style,Ct,l),a.appendChild(f)}),y=Array.from(a.children).map(h=>h.getBoundingClientRect().width)};return{spring:s,from:0,to:1,prepare:()=>{document.body.style.overflow="hidden",n.style.opacity="1",g==null||g.remove(),u(),i&&d&&(i.style.clipPath="none",d.style.transform="scale(1)")},tick:h=>{if(!(!i||!d||!a)){if(h<=S&&r.length>0){const f=h/S,$=Math.min(Math.floor(f*r.length),r.length-1),m=y[$]??0,x=Ot(y.slice(0,$));d.style.width=`${m}px`,a.style.transform=`translateX(-${x}px)`}if(h>S){const $=1-Math.max(0,Math.min(1,(h-S)/kt));i.style.clipPath=It(c,$),d.style.transform=`scale(${$})`}}},onEnd:()=>{i==null||i.remove(),i=d=a=null,document.body.style.overflow=p}}}}};exports.jaemin=b.jaemin;exports.blind=Z;exports.curtainReveal=Dt;exports.drill=J;exports.fade=nt;exports.film=ot;exports.hero=pt;exports.pinterest=$t;exports.scroll=mt;exports.slide=xt;exports.strip=bt;

package/dist/view-transitions/index.d.ts

@@ -3,8 +3,10 @@ export * from './drill';
 export * from './fade';
 export * from './film';
 export * from './hero';
-export * from './jaemin';
+export { jaemin } from './jaemin';
 export * from './pinterest';
 export * from './scroll';
 export * from './slide';
+export * from './strip';
+export * from './curtain-reveal';
 //# sourceMappingURL=index.d.ts.map

package/dist/view-transitions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC"}