1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6908],{21802:(e,t,r)=>{"use strict";r.d(t,{W:()=>s});var a=r(37876),n=r(14232);let i="cubic-bezier(0.22, 0.61, 0.36, 1)";function s(e){let{children:t,compactMobileIndices:r=[],"aria-labelledby":s}=e,[l,o]=(0,n.useState)(0),[c,d]=(0,n.useState)(!1),u=(0,n.useRef)(null),p=t.length;(0,n.useEffect)(()=>{let e=u.current;if(!e||"undefined"==typeof IntersectionObserver)return void d(!0);let t=new IntersectionObserver(e=>{let[r]=e;r?.isIntersecting&&(d(!0),t.disconnect())},{rootMargin:"0px 0px -12% 0px",threshold:.01});return t.observe(e),()=>t.disconnect()},[]);let m=(0,n.useRef)(0);(0,n.useEffect)(()=>{let e=()=>{m.current=window.innerHeight};return e(),window.addEventListener("orientationchange",e),()=>window.removeEventListener("orientationchange",e)},[]),(0,n.useEffect)(()=>{let e=u.current;if(!e||0===p)return;let t=null,r=-1,a=()=>{null===t&&(t=requestAnimationFrame(()=>{t=null;let a=-e.getBoundingClientRect().top;if(a<=0){0!==r&&(r=0,o(0));return}let n=Math.min(Math.floor(a/(.7*(m.current||window.innerHeight))),p-1);n!==r&&(r=n,o(n))}))};return window.addEventListener("scroll",a,{passive:!0}),a(),()=>{window.removeEventListener("scroll",a),null!==t&&cancelAnimationFrame(t)}},[p]);let g=(0,n.useCallback)(e=>{let t=u.current;if(!t)return;let r=t.getBoundingClientRect().top+window.scrollY,a=m.current||window.innerHeight;window.scrollTo({top:r+e*a*.7,behavior:"smooth"})},[]);return 0===p?null:(0,a.jsx)("section",{"aria-labelledby":s,children:(0,a.jsx)("div",{ref:u,style:{height:`${.7*p*100+100}svh`},className:"relative",children:(0,a.jsxs)("div",{className:"sticky top-16 md:top-[5.25rem] lg:top-[5.5rem] h-[calc(100svh-4rem)] md:h-[calc(100svh-5.25rem)] lg:h-[calc(100svh-5.5rem)] flex items-stretch gap-2 md:gap-3 p-2 md:p-3",children:[(0,a.jsx)("div",{className:"hidden md:flex flex-col items-center justify-center gap-3 w-10 lg:w-12 shrink-0 order-first",style:{opacity:+!!c,transform:c?"translateX(0)":"translateX(-12px)",transition:`opacity 700ms ${i} 120ms, transform 700ms ${i} 120ms`},children:t.map((e,t)=>(0,a.jsx)("button",{type:"button","aria-label":`Go to step ${t+1}`,onClick:()=>g(t),className:`w-2.5 rounded-full transition-all duration-300 ease-[cubic-bezier(0.22,0.61,0.36,1)] ${t===l?"h-8 bg-fg-primary":"h-3 bg-bg-secondary hover:bg-fg-quaternary"}`},t))}),(0,a.jsx)("div",{className:"relative flex-1 min-w-0 h-full rounded-2xl md:rounded-design-xl overflow-hidden",style:{opacity:+!!c,transform:c?"scale(1) translateY(0)":"scale(0.96) translateY(56px)",transition:`opacity 750ms ${i}, transform 900ms ${i}`},children:t.map((e,t)=>{let s=t<l?"past":t===l?"active":"upcoming",o=r.includes(t);return(0,a.jsx)("div",{className:o?"absolute inset-0 flex items-center justify-center md:block":"absolute inset-0",style:{...{past:{opacity:0,transform:"scale(0.92) translateY(-30px)",pointerEvents:"none"},active:{opacity:1,transform:"scale(1) translateY(0)",pointerEvents:"auto"},upcoming:{opacity:0,transform:"scale(1) translateY(40px)",pointerEvents:"none"}}[s],transition:`opacity 600ms ${i}, transform 600ms ${i}`},children:(0,a.jsxs)("div",{className:o?"relative w-full max-h-full overflow-hidden rounded-2xl md:absolute md:inset-0 md:max-h-none md:rounded-none":"absolute inset-0",children:[(0,a.jsx)("div",{className:"absolute inset-0",style:{background:"radial-gradient(ellipse at 50% 35%, #f5f3f0 0%, #eae7e3 40%, #dfdcd8 100%)"}}),(0,a.jsx)("div",{className:"absolute inset-0 opacity-30",style:{background:"radial-gradient(circle at 25% 20%, rgba(255,230,235,0.35) 0%, transparent 50%), radial-gradient(circle at 75% 80%, rgba(215,225,255,0.25) 0%, transparent 50%)"}}),(0,a.jsx)("div",{className:o?"relative z-10 w-full h-auto md:h-full flex items-center justify-center":"relative z-10 w-full h-full flex items-center justify-center",children:(0,n.isValidElement)(e)?(0,n.cloneElement)(e,{isActive:"active"===s}):e})]})},t)})})]})})})}},29282:(e,t,r)=>{"use strict";r.d(t,{A:()=>v});var a=r(37876),n=r(14232),i=(r(98477),r(48230)),s=r.n(i),l=r(49279),o=r(60516),c=r(72031);function d(e,t){if(!e)return 1;let r=parseFloat(getComputedStyle(e).getPropertyValue(t).trim());return Number.isFinite(r)&&r>0?r:1}var u=r(71370),p=r(91258),m=r(2526);
1let g="cubic-bezier(0.22, 0.61, 0.36, 1)",x=[.22,.61,.36,1];function h(){let e=document.querySelector(".iyp-section");if(!e)return 1;let t=parseFloat(getComputedStyle(e).getPropertyValue("--iyp-scale").trim());return Number.isFinite(t)&&t>0?t:1}let f=[{id:"sprinkles",src:"/images/website-v2/sticker-sprinkles-donut.png",alt:"Donut sticker with 'You're the Sprinkles to my Doughnut' banner",x:-428,y:-8,w:176,rotate:-8},{id:"lips",src:"/images/website-v2/sticker-red-lips.png",alt:"Red lips sticker",x:-319,y:-52,w:169,rotate:-6},{id:"white-cat",src:"/images/website-v2/sticker-persian-cat-marigold.png",alt:"White Persian cat sticker with marigold flowers",x:-326,y:63,w:188,rotate:-3},{id:"corgi",src:"/images/website-v2/sticker-corgi.png",alt:"Corgi sticker",x:-204,y:30,w:192,rotate:-2,zIndex:30},{id:"witch",src:"/images/website-v2/sticker-witch-cat.png",alt:"Witch cat sticker",x:196,y:-74,w:162,rotate:6},{id:"yosemite",src:"/images/website-v2/sticker-yosemite-park.png",alt:"Yosemite National Park sticker",x:209,y:91,w:157,rotate:-17},{id:"fox",src:"/images/website-v2/sticker-fox-student.png",alt:"Fox student sticker",x:427,y:-8,w:185,rotate:-5},{id:"donut-char",src:"/images/website-v2/sticker-pink-donut-character.png",alt:"Pink donut character 'DID YOU SAY DONUTS?' sticker",x:286,y:28,w:206,rotate:4},{id:"swordfish",src:"/images/website-v2/sticker-orange-swordfish.png",alt:"Orange swordfish sticker",x:300,y:-66,w:164,rotate:14}];function v(e){let{templates:t,heading:r}=e;return(0,a.jsxs)("section",{className:"iyp-section relative w-full py-16 md:py-24 px-6 overflow-hidden",children:[(0,a.jsx)("style",{dangerouslySetInnerHTML:{__html:` 2 @keyframes iyp-phone-glow { 3 0%, 100% { opacity: 0.55; } 4 50% { opacity: 0.8; } 5 } 6 /* Stickers + physics: desktop (lg) only. */ 7 .iyp-section { --iyp-scale: 0.85; } 8 @media (min-width: 1280px) { .iyp-section { --iyp-scale: 1; } } 9 `}}),(0,a.jsxs)("div",{className:"max-w-[1280px] mx-auto w-full min-w-0 px-2 flex flex-col items-center gap-10 md:gap-14",children:[r??(0,a.jsx)(j,{}),(0,a.jsx)(_,{templates:t}),(0,a.jsx)(R,{})]})]})}let b={hidden:{},visible:{transition:{staggerChildren:.05,delayChildren:.05}}},y={hidden:{opacity:0,y:14},visible:{opacity:1,y:0,transition:{duration:.5,ease:x}}},w="Endless creativity".split(" "),k="in your pocket.".split(" ");function j(){return(0,a.jsxs)(l.P.h2,{variants:b,initial:"hidden",whileInView:"visible",viewport:{once:!0,margin:"-80px"},className:"text-2xl md:text-3xl lg:text-[36px] font-semibold leading-[1.22] tracking-[-0.02em] text-center max-w-3xl w-full px-2",children:[w.map((e,t)=>(0,a.jsx)(l.P.span,{variants:y,className:"inline-block mr-[0.25em] text-fg-primary",children:e},`d-${t}`)),k.map((e,t)=>(0,a.jsx)(l.P.span,{variants:y,className:(0,o.cn)("inline-block text-fg-tertiary",t<k.length-1&&"mr-[0.25em]"),children:e},`m-${t}`))]})}function _(e){let{templates:t}=e,r=(0,n.useRef)(null),[i,s]=(0,n.useState)("idle"),[l,c]=(0,n.useState)(!1),[x,v]=(0,n.use
9State)(()=>f.map(e=>({...e}))),[b,y]=(0,n.useState)(null),[w,k]=(0,n.useState)(null),j=(0,n.useRef)(null),_=(0,n.useRef)(null);(0,n.useEffect)(()=>{},[x,l]);let N=(0,n.useRef)(!1);(0,n.useEffect)(()=>{let e=r.current;if(!e)return;let t=[],a=()=>{t.forEach(clearTimeout),t=[]};if(l)return void s("done");let n=new IntersectionObserver(e=>{let[r]=e;if(r.isIntersecting){if(a(),N.current)return void s("done");s("idle"),t=[setTimeout(()=>s("phone"),200),setTimeout(()=>s("stickers"),800),setTimeout(()=>{N.current=!0,s("done")},2600)]}else N.current||(a(),s("idle"))},{threshold:.35});return n.observe(e),()=>{n.disconnect(),a()}},[l]);let M=(0,n.useCallback)(e=>{k(e),setTimeout(()=>k(null),1500)},[]);(0,n.useEffect)(()=>{},[l,x,b,M]);let C=(0,n.useCallback)((e,t)=>{if(!l)return;e.preventDefault(),e.stopPropagation(),y(t);let r=x[t];j.current={idx:t,startX:e.clientX,startY:e.clientY,origX:r.x,origY:r.y};let a=h(),n=e=>{let t=j.current;if(!t)return;let r=(e.clientX-t.startX)/a,n=(e.clientY-t.startY)/a;v(e=>{let a=[...e],i={...a[t.idx]};return i.x=Math.round(t.origX+r),i.y=Math.round(t.origY+n),a[t.idx]=i,a})},i=()=>{j.current=null,window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",i)};window.addEventListener("mousemove",n),window.addEventListener("mouseup",i)},[l,x]),P=(0,n.useCallback)((e,t)=>{if(!l)return;e.stopPropagation();let r=e.deltaY<0?8:-8;v(e=>{let a=[...e],n={...a[t]};return n.w=Math.max(40,Math.round(n.w+r)),a[t]=n,a})},[l]),R=(0,n.useCallback)((e,t)=>{if(!l)return;e.preventDefault(),e.stopPropagation(),y(t);let r=x[t];_.current={idx:t,startX:e.clientX,origW:r.w};let a=h(),n=e=>{let t=_.current;if(!t)return;let r=(e.clientX-t.startX)/a;v(e=>{let a=[...e],n={...a[t.idx]};return n.w=Math.max(40,Math.round(t.origW+r)),a[t.idx]=n,a})},i=()=>{_.current=null,window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",i)};window.addEventListener("mousemove",n),window.addEventListener("mouseup",i)},[l,x]),F=(0,n.useCallback)(e=>{l&&e.target===e.currentTarget&&y(null)},[l]),L=(0,m.A)(),I=(0,u.z)(),$=(0,p.jk)("lg",{initialValue:!0}),z=L&&!$,D="done"===i&&!l&&!I&&z,{setStickerRef:X,onPointerDown:Y}=function(e){let{items:t,active:r,stageRef:a,scaleVar:i="--sticker-scale",allowOverflow:s=!1}=e,l=(0,n.useRef)([]),o=(0,n.useRef)([]);(0,n.useEffect)(()=>{o.current=t.map(()=>({dx:0,dy:0,vx:0,vy:0,rotDelta:0,vRot:0,isDragging:!1}))},[t]),(0,n.useEffect)(()=>{if(!r)return;let e=null,n=()=>{let r=o.current,c=a.current;if(c&&r.length===t.length){let e=c.offsetWidth/2,a=c.offsetHeight/2,n=d(c,i),o=.001*performance.now();for(let i=0;i<r.length;i++){let c=r[i],d=t[i];if(l.current[i]&&!c.isDragging){let t=-(6e-4*c.dx),r=-(6e-4*c.dy),l=-(.012*c.rotDelta),u=.7*i,p=.003*Math.sin(.55*o+u),m=.003*Math.cos(.47*o+1.3*u),g=.0025*Math.sin(.38*o+.8*u);if(c.vx=(c.vx+t+p)*.984,c.vy=(c.vy+r+m)*.984,c.vRot=(c.vRot+l+g)*.95,c.dx+=c.vx,c.dy+=c.vy,c.rotDelta+=c.vRot,!s){let t=d.w/2,r=e/n-t,i=a/n-t,s=d.x+c.dx,l=d.y+c.dy;s>r&&(c.dx=r-d.x,c.vx=-(.7*Math.abs(c.vx))),s<-r&&(c.dx=-r-d.x,c.vx=.7*Math.abs(c.vx)),l>i&&(c.dy=i-d.y,c.vy=-(.7*Math.abs(c.vy))),l<-i&&(c.dy=-i-d.y,c.vy=.7*Math.abs(c.vy))}}}for(let e=0;e<r.length;e++){let a=r[e],n=t[e];for(let i=e+1;i<r.length;i++){let e=r[i],s=t[i],l=n.x+a.dx-(s.x+e.dx),o=n.y+a.dy-(s.y+e.dy),c=Math.hypot(l,o),d=.42*n.w+.42*s.w;if(c<=0||c>=d)continue;let u=l/c,p=o/c,m=a.vx-e.vx,g=a.vy-e.vy,x=m*u+g*p,h=a.isDragging?1/0:n.w*n.w,f=e.isDragging?1/0:s.w*s.w,v=h===1/0?0:1/h,b=f===1/0?0:1/f,y=v+b;if(x<0&&y>0){let t=-1.6*x/y;a.vx+=t*u*v,a.vy+=t*p*v,e.vx-=t*u*b,e.vy-=t*p*b;let r=-(m*p)+g*u;a.vRot+=.06*r,e.vRot-=.06*r}let w=d-c;if(y>0){let t=w*v/y,r=w*b/y;a.dx+=u*t,a.dy+=p*t,e.dx-=u*r,e.dy-=p*r}}}for(let e=0;e<r.length;e++){let t=r[e],a=l.current[e];a&&(a.style.transform=`translate(calc(var(${i}, 1) * ${t.dx.toFixed(2)}px), calc(var(${i}, 1) * ${t.dy.toFixed(2)}px)) rotate(${t.rotDelta.toFixed(2)}deg)`)}}e=requestAnimationFrame(n)};return e=requestAnimationFrame(n),()=>{null!=e&&cancelAnimationFrame(e)}},[r,t,a,i,s]);let c=(0,n.useCallback)((e,t)=>{if(!r)return;let n=l.current[t],s=o.current[t],c=a.current;if(!n||!s)return;e.preventDefault(),e.stopPropagation();try{n.setPointerCapture(e.pointerId)}catch{}n.style.cursor="grabbing",s.isDragging=!0,s.vx=0,s.vy=0,s.vRot=0;let u=d(c,i),p=e.clientX,m=e.clientY,g=s.dx,x=s.dy,h=e.clientX,f=e.clientY,v=performance.now(),b=e=>{let t=(e.clientX-p)/u,r=(e.clientY-m)/u;s.dx=g+t,s.dy=x+r;let a=performance.now(),n=Math.max(a-v,8);s.vx=(e.clientX-h)/u*(16/n),s.vy=(e.clientY-f)/u*(16/n),h=e.clientX,f=e.clientY,v=a},y=()=>{s.isDragging=!1;let t=Math.hypot(s.vx,s.vy);if(t<1.5){let e=.08*Math.min(1,(1.5-t)/1.5);s.vx+=-s.dx*e,s.vy+=-s.dy*e}s.vRot=.5*s.vx;try{n.releasePointerCapture(e.pointerId)}catch{}n.style.cursor="grab",window.removeEventListener("pointermove",b),window.removeEventListener("pointerup",y),window.removeEventListener("pointercancel",
9y)};window.addEventListener("pointermove",b),window.addEventListener("pointerup",y),window.addEventListener("pointercancel",y)},[r,a,i]);return{setStickerRef:(0,n.useCallback)((e,t)=>{l.current[e]=t},[]),onPointerDown:c}}({items:x,active:D,stageRef:r,scaleVar:"--iyp-scale",allowOverflow:!1}),A="phone"===i||"stickers"===i||"done"===i,H=z&&("stickers"===i||"done"===i);return null!=b&&b<x.length&&x[b],(0,a.jsxs)(a.Fragment,{children:[null,(0,a.jsxs)("div",{ref:r,onMouseDown:F,className:(0,o.cn)("relative w-full overflow-hidden","h-[360px] md:h-[440px] lg:h-[460px]",l&&"outline outline-2 outline-dashed outline-blue-400/40"),children:[(0,a.jsx)(S,{items:x,visible:H,showLayer:z||l,editMode:l,selected:b,onStickerMouseDown:C,onStickerWheel:P,onResizeHandleDown:R,physicsActive:D,setStickerRef:X,onPhysicsPointerDown:Y}),(0,a.jsx)("div",{className:"absolute left-1/2 top-10 md:top-14 lg:top-16 z-20",style:{opacity:+!!A,transform:A?"translateX(-50%) translateY(0) scale(1)":"translateX(-50%) translateY(40px) scale(0.85)",transformOrigin:"center top",transition:`opacity 600ms ${g}, transform 700ms ${g}`},children:(0,a.jsx)(E,{templates:t,reduceMotion:I})})]})]})}let N=["Cards & Invites","Stickers","T-shirt","Poster","Social Media Post","Art","Logo","Memes","Monogram","Mockups","Mobile Wallpaper","Seamless Patterns","EBook Cover"],M={"Cards & Invites":"/images/hero-images/birthday-crocodile-greeting-card.png",Stickers:"/images/hero-images/chef-octopus-cartoon-sticker.png","T-shirt":"/images/hero-images/panda-play-tshirt-mockup.png",Poster:"/images/hero-images/miata-1991-retro-car-poster.png","Social Media Post":"/images/hero-images/mothers-day-social-media-post.jpg",Art:"/images/hero-images/abstract-sunset-digital-artwork.png",Logo:"/images/hero-images/be-a-kind-human-sticker.png",Memes:"/images/hero-images/slay-queen-classical-painting-sticker.png",Monogram:"/images/hero-images/monochrome-portrait-illustration.png",Mockups:"/images/website-v2/merch-tshirt.png","Mobile Wallpaper":"/images/hero-images/phone-mockup-floral-wallpaper.png","Seamless Patterns":"/images/hero-images/red-lips-pop-art-sticker.png","EBook Cover":"/images/hero-images/skeleton-rider-flames-artwork.png",default:"/images/hero-images/abstract-sunset-digital-artwork.png"};function E(e){let{templates:t,reduceMotion:r}=e;return(0,a.jsxs)("div",{className:(0,o.cn)("relative w-[min(280px,78vw)] md:w-[min(300px,42vw)] lg:w-[340px]","rounded-[44px] md:rounded-[50px]","bg-[#111]","p-[7px] md:p-[9px]","shadow-[0_40px_80px_-20px_rgba(0,0,0,0.35),0_16px_32px_-10px_rgba(0,0,0,0.2)]"),children:[(0,a.jsx)("div",{"aria-hidden":!0,className:"absolute -inset-8 -z-[1] rounded-[80px] pointer-events-none",style:{background:"radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.6) 0%, transparent 65%)",filter:r?void 0:"blur(30px)",animation:r?"none":"iyp-phone-glow 6s ease-in-out infinite",display:r?"none":void 0}}),(0,a.jsxs)("div",{className:"relative rounded-[38px] md:rounded-[43px] bg-[#F1F0EF] overflow-hidden aspect-[9/19.5]",children:[(0,a.jsx)("div",{className:"absolute left-1/2 -translate-x-1/2 top-2 md:top-2.5 w-[90px] md:w-[100px] h-[24px] md:h-[28px] rounded-full bg-black z-30"}),(0,a.jsx)("div",{className:"absolute inset-0 pt-[128px] md:pt-[140px] lg:pt-[148px] px-2 md:px-2.5",children:(0,a.jsx)("div",{className:"flex flex-wrap gap-y-[6px] gap-x-[5px] justify-center",children:N.map(e=>(0,a.jsx)(C,{name:e,artwork:function(e,t){let r=t.find(t=>t.tag.toLowerCase()===e.toLowerCase());return r?.image??M[e]??M.default}(e,t)},e))})}),(0,a.jsxs)("div",{className:"absolute inset-x-0 top-0 z-20 px-4 md:px-5 pt-10 md:pt-12 pb-2.5 backdrop-blur-md",style:{background:"linear-gradient(to top, #F1F0EF 0%, #F1F0EF 65%, rgba(241,240,239,0.6) 100%)"},children:[(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsx)("h3",{className:"text-[22px] md:text-[26px] font-bold text-black leading-none tracking-tight",children:"Create"}),(0,a.jsx)("div",{className:"w-7 h-7 md:w-8 md:h-8 rounded-full overflow-hidden bg-[#EFEEEC]",children:(0,a.jsx)("img",{src:"/images/website-v2/avatar-profile.png",alt:"User profile avatar in the Playground app",draggable:!1,
9className:"w-full h-full object-cover scale-[1.4]"})})]}),(0,a.jsxs)("div",{className:"mt-2.5 md:mt-3 flex items-center gap-2 px-3 py-2 md:py-2.5 rounded-full bg-white",children:[(0,a.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",className:"shrink-0 text-[#B1AAA1]","aria-hidden":!0,children:[(0,a.jsx)("circle",{cx:"6",cy:"6",r:"4.5",stroke:"currentColor",strokeWidth:"1.3"}),(0,a.jsx)("path",{d:"M9.5 9.5L12 12",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"})]}),(0,a.jsx)("span",{className:"text-[11px] md:text-xs text-[#B1AAA1] font-medium",children:"Search Playground"})]})]})]})]})}function C(e){let{name:t,artwork:r}=e;return(0,a.jsxs)("div",{className:(0,o.cn)("relative w-[calc(50%-3px)]","h-[95px] md:h-[108px] lg:h-[116px]","rounded-[20px] md:rounded-[22px] lg:rounded-[24px] bg-[#F1F0EF] overflow-hidden","px-3 md:px-3.5 pt-2 md:pt-2.5"),children:[(0,a.jsx)("img",{src:r,alt:"",draggable:!1,"aria-hidden":!0,className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[160%] h-[160%] object-cover opacity-25 blur-[12px]"}),(0,a.jsx)("span",{className:"relative text-[11px] md:text-[12px] lg:text-[13px] font-semibold text-black leading-tight tracking-tight",children:t}),(0,a.jsx)("div",{className:(0,o.cn)("absolute left-1/2 -translate-x-1/2 rotate-6","bottom-[-36px] md:bottom-[-40px] lg:bottom-[-44px]","w-[80px] h-[96px] md:w-[92px] md:h-[110px] lg:w-[100px] lg:h-[120px]","rounded-[10px] md:rounded-[11px] lg:rounded-[12px] overflow-hidden bg-white","shadow-[0_3px_12px_rgba(0,0,0,0.2)]"),children:(0,a.jsx)("img",{src:r,alt:`${t} design example`,draggable:!1,className:"absolute inset-0 w-full h-full object-cover"})})]})}function S(e){let{items:t,visible:r,showLayer:n,editMode:i,selected:s,onStickerMouseDown:l,onStickerWheel:c,onResizeHandleDown:d,physicsActive:u,setStickerRef:p,onPhysicsPointerDown:m}=e,g=i?null:function(e){let t=e.map((e,t)=>({i:t,d:Math.hypot(e.x,e.y)})).sort((e,t)=>e.d-t.d),r=Array(e.length).fill(0);return t.forEach((e,t)=>{r[e.i]=t}),r}(t);return(0,a.jsx)("div",{className:(0,o.cn)("absolute inset-0 z-10 pointer-events-none",n?"block":"hidden"),children:t.map((e,t)=>(0,a.jsx)(P,{sticker:e,index:t,visible:i||r,editMode:i,isSelected:s===t,delayMs:i?0:(g?.[t]??0)*90,onMouseDown:l,onWheel:c,onResizeHandleDown:d,physicsActive:u,setRef:p,onPhysicsPointerDown:m},e.id))})}function P(e){let{sticker:t,index:r,visible:n,editMode:i,isSelected:s,delayMs:l,onMouseDown:c,onWheel:d,onResizeHandleDown:u,physicsActive:p,setRef:m,onPhysicsPointerDown:x}=e,h=n?`translate(-50%, -50%) translate(calc(var(--iyp-scale, 1) * ${t.x}px), calc(var(--iyp-scale, 1) * ${t.y}px)) rotate(${t.rotate}deg) scale(1)`:"translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0)";return(0,a.jsxs)("div",{onMouseDown:e=>c(e,r),onWheel:e=>d(e,r),onPointerDown:p&&!i?e=>x(e,r):void 0,className:(0,o.cn)("absolute left-1/2 top-1/2",i&&"pointer-events-auto select-none cursor-grab",p&&!i&&"pointer-events-auto select-none cursor-grab active:cursor-grabbing"),style:{opacity:+!!n,zIndex:i&&s?9999:t.zIndex,outline:i&&s?"2px solid #3B82F6":void 0,outlineOffset:i&&s?2:void 0,transform:h,transformOrigin:"center",transition:i||p?"none":`opacity 500ms ${g} ${l}ms, transform 850ms cubic-bezier(0.34, 1.45, 0.5, 1) ${l}ms`,willChange:p?"transform, opacity":void 0,touchAction:p&&!i?"none":void 0},children:[(0,a.jsx)("div",{ref:e=>m(r,e),style:{transform:"translate(0, 0) rotate(0deg)",willChange:p?"transform":void 0},children:(0,a.jsx)("img",{src:t.src,alt:t.alt,draggable:!1,style:{display:"block",width:`calc(var(--iyp-scale, 1) * ${t.w}px)`,height:"auto",filter:"drop-shadow(0 10px 20px rgba(0,0,0,0.12)) drop-shadow(0 4px 8px rgba(0,0,0,0.08))"}})}),i&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{style:{position:"absolute",bottom:-18,left:0,fontSize:10,fontFamily:"monospace",background:s?"#3B82F6":"rgba(0,0,0,0.7)",color:"#fff",padding:"1px 5px",borderRadius:3,whiteSpace:"nowrap"},children:t.id}),s&&(0,a.jsx)("div",{onMouseDown:e=>u(e,r),style:{position:"absolute",bottom:-5,right:-5,width:12,height:12,background:"#3B82F6",borderRadius:2,cursor:"nwse-resize",border:"2px s
9olid #fff"}})]})]})}function R(){return(0,a.jsxs)(l.P.div,{initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-60px"},transition:{duration:.6,ease:x,delay:.15},className:"w-full flex flex-col md:flex-row items-center justify-center gap-8 md:gap-10",children:[(0,a.jsx)($,{}),(0,a.jsx)(D,{})]})}let F="#FFB800",L={hidden:{},visible:{transition:{staggerChildren:.06,delayChildren:.1}}},I={hidden:{opacity:0,y:12,scale:.92},visible:{opacity:1,y:0,scale:1,transition:{duration:.4,ease:x}}};function $(){return(0,a.jsxs)(s(),{href:c.nC,target:"_blank",rel:"noopener noreferrer","aria-label":"Rated 4.9 out of 5 from over 5,400 App Store ratings",className:(0,o.cn)("group inline-flex flex-col items-center gap-2","transition-transform duration-300 ease-out","hover:-translate-y-0.5"),children:[(0,a.jsxs)("div",{className:"flex items-baseline gap-2",children:[(0,a.jsx)("span",{className:"text-3xl md:text-[40px] font-bold tracking-tight text-fg-primary leading-none",children:"4.9"}),(0,a.jsx)("span",{className:"text-sm md:text-base font-medium text-fg-secondary leading-none",children:"/ 5"})]}),(0,a.jsx)(l.P.div,{"aria-hidden":!0,variants:L,initial:"hidden",whileInView:"visible",viewport:{once:!0,margin:"-60px"},className:"flex items-center gap-[3px] md:gap-1",style:{color:F},children:Array.from({length:5}).map((e,t)=>(0,a.jsx)(l.P.span,{variants:I,className:"inline-flex",children:(0,a.jsx)(z,{size:18,style:{filter:`drop-shadow(0 1px 2px ${F}55)`}})},t))}),(0,a.jsx)("span",{className:"text-xs md:text-sm font-medium text-fg-tertiary tracking-tight",children:"Based on 5,400+ App Store ratings"})]})}function z(e){let{size:t=12,style:r}=e;return(0,a.jsx)("svg",{viewBox:"0 0 12 12",width:t,height:t,fill:"currentColor","aria-hidden":!0,style:r,children:(0,a.jsx)("path",{d:"M6 .9l1.55 3.14 3.45.5-2.5 2.44.59 3.45L6 8.8 2.91 10.43l.59-3.45L1 4.54l3.45-.5L6 .9z"})})}function D(){return(0,a.jsxs)(s(),{href:c.nC,target:"_blank",rel:"noopener noreferrer",className:(0,o.cn)("group inline-flex items-center gap-2.5 md:gap-3 px-5 md:px-6 py-3 md:py-3.5 rounded-xl","bg-fg-primary text-fg-inverse-primary","shadow-[0_8px_24px_-6px_rgba(0,0,0,0.3)]","hover:scale-[1.03] hover:shadow-[0_12px_28px_-6px_rgba(0,0,0,0.36)]","transition-all duration-300 ease-out"),children:[(0,a.jsx)("svg",{viewBox:"0 0 24 28",fill:"currentColor","aria-hidden":!0,className:"shrink-0 w-7 h-8 md:w-8 md:h-9",children:(0,a.jsx)("path",{d:"M17.05 14.42c-.03-3 2.45-4.45 2.57-4.52-1.4-2.05-3.58-2.33-4.35-2.36-1.85-.19-3.62 1.09-4.56 1.09-.94 0-2.4-1.07-3.94-1.04-2.03.03-3.9 1.18-4.94 3-2.11 3.65-.54 9.04 1.51 12 .99 1.45 2.18 3.08 3.72 3.02 1.5-.06 2.06-.97 3.87-.97 1.81 0 2.31.97 3.91.94 1.62-.03 2.65-1.48 3.63-2.94 1.15-1.69 1.62-3.33 1.65-3.42-.04-.02-3.17-1.22-3.2-4.8zm-3.15-8.81c.81-1 1.37-2.4 1.21-3.78-1.18.05-2.6.79-3.44 1.78-.75.88-1.42 2.3-1.24 3.66 1.31.1 2.66-.66 3.47-1.66z"})}),(0,a.jsxs)("div",{className:"flex flex-col leading-none gap-0.5",children:[(0,a.jsx)("span",{className:"text-[10px] md:text-xs opacity-80 tracking-tight",children:"Download on the"}),(0,a.jsx)("span",{className:"text-lg md:text-xl font-semibold leading-tight tracking-tight",children:"App Store"})]})]})}},58618:(e,t,r)=>{"use strict";r.d(t,{$:()=>i,U:()=>s});var a=r(37876),n=r(60516);let i="relative z-10 flex flex-col items-center w-full max-w-4xl mx-auto h-full min-h-0 px-4 pt-10 pb-6 sm:px-6 sm:pt-12 sm:pb-8 md:pt-14 md:pb-10 gap-3 sm:gap-4";function s(e){let{title:t,description:r,className:i}=e;return(0,a.jsxs)("div",{className:(0,n.cn)("w-full text-center flex flex-col gap-2 shrink-0",i),children:[(0,a.jsx)("h3",{className:"text-xl sm:text-2xl md:text-3xl lg:text-4xl font-semibold text-fg-primary leading-tight tracking-tight",children:t}),(0,a.jsx)("p",{className:"text-sm md:text-base text-fg-secondary max-w-xl mx-auto leading-relaxed",children:r})]})}},63672:(e,t,r)=>{"use strict";r.d(t,{e:()=>u});var a=r(37876),n=r(14232),i=r(48230),s=r.n(i),l=r(60516),o=r(58618);let c="cubic-bezier(0.22, 0.61, 0.36, 1)",d=[{id:"fallback-poster",title:"Retro car poster",image:"/images/hero-images/miata-1991-retro-car-poster.png",tag:"Poster",url:"/design/c/poster",aspectRatio:2/3},{id:"fallback-tshirt",title:"Panda tshirt",image:"/images/hero-images/panda-play-tshirt-mockup.png",tag:"Tshirt",url:"/design/c/t-shirt",aspectRatio:1},{id:"fallback-sticker",title:"Chef octopus sticker",image:"/images/hero-images/chef-octopus-cartoon-sticker.png",tag:"Sticker",url:"/design/c/stickers",aspectRatio:1},{id:"fallback-logo",title:"Slay queen sticker",image:"/images/hero-images/slay-queen-classical-painting-sticker.png",tag:"Logo",url:"/design/c/logo",aspectRatio:1},{id:"fallback-illustration",title:"Fox student illustration",image:"/images/hero-images/fox-student-character-illustration.png",tag:"Illustration",url:"/design/c/art",aspectRatio:1}];function u(e){let{templates:t=[],title:r="Start from something that's already beautiful",description:i="Thousands of templates across 24 categories, designed to customize, not just copy.",ctaHref:l="/design/",ctaLabel:u="Explore Templates"}=e,g=t.length>
90?t:d,[x,h]=(0,n.useState)(0),[f,v]=(0,n.useState)(!1);(0,n.useEffect)(()=>{if(f||g.length<=1)return;let e=setInterval(()=>h(e=>(e+1)%g.length),2600);return()=>clearInterval(e)},[f,g.length]),(0,n.useEffect)(()=>{x>=g.length&&h(0)},[x,g.length]);let b=g[x]?.image??"";return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("style",{dangerouslySetInnerHTML:{__html:` 10 @keyframes stagger-fade-in { 11 from { opacity: 0; transform: translateY(12px) scale(0.95); } 12 to { opacity: 1; transform: translateY(0) scale(1); } 13 } 14 `}}),(0,a.jsx)(p,{image:b}),(0,a.jsxs)("div",{className:o.$,children:[(0,a.jsx)(o.U,{title:r,description:i}),(0,a.jsx)("div",{className:"flex-1 min-h-0 w-full flex items-center justify-center",children:(0,a.jsx)(m,{items:g,focusIdx:x,onFocus:h,onHoverStart:()=>v(!0),onHoverEnd:()=>v(!1)})}),(0,a.jsxs)(s(),{href:l,target:"_blank",rel:"noopener noreferrer",className:"self-center shrink-0 inline-flex items-center gap-1.5 rounded-full bg-bg-secondary/60 px-4 py-2 text-sm font-medium text-fg-secondary transition-colors duration-200 hover:bg-bg-secondary hover:text-fg-primary",style:{animation:`stagger-fade-in 600ms ${c} 700ms both`},children:[u,(0,a.jsx)("span",{"aria-hidden":!0,className:"opacity-50",children:"â"})]})]})]})}function p(e){let{image:t}=e,[r,i]=(0,n.useState)(t),[s,o]=(0,n.useState)(t),[c,d]=(0,n.useState)(!0),u=(0,n.useRef)(!0);return(0,n.useEffect)(()=>{if(u.current){u.current=!1;return}c?(o(t),d(!1)):(i(t),d(!0))},[t]),(0,a.jsxs)("div",{className:"absolute inset-0 overflow-hidden pointer-events-none",children:[r?(0,a.jsx)("img",{src:r,alt:"","aria-hidden":!0,className:(0,l.cn)("absolute inset-[-25%] w-[150%] h-[150%] object-cover blur-3xl scale-125 transform-gpu","transition-opacity duration-700 ease-out",c?"opacity-50":"opacity-0")}):null,s?(0,a.jsx)("img",{src:s,alt:"","aria-hidden":!0,className:(0,l.cn)("absolute inset-[-25%] w-[150%] h-[150%] object-cover blur-3xl scale-125 transform-gpu","transition-opacity duration-700 ease-out",c?"opacity-0":"opacity-50")}):null,(0,a.jsx)("div",{className:"absolute inset-0 bg-white/30"})]})}function m(e){let{items:t,focusIdx:r,onFocus:i,onHoverStart:s,onHoverEnd:o}=e,d=(0,n.useRef)(null),[u,p]=(0,n.useState)(0),[m,x]=(0,n.useState)(!1),h=(0,n.useRef)(null),f=(0,n.useRef)(0),v=(0,n.useRef)(0),b=(0,n.useCallback)(()=>{let e=d.current;if(!e)return 260;let t=parseFloat(getComputedStyle(e).getPropertyValue("--slot").trim());return Number.isFinite(t)&&t>0?t:260},[]),y=(0,n.useCallback)(e=>{0!==e&&0!==t.length&&i(((r+e)%t.length+t.length)%t.length)},[r,t.length,i]),w=(0,n.useCallback)(e=>{if("mouse"===e.pointerType&&0!==e.button)return;let t=b();h.current={pointerId:e.pointerId,startX:e.clientX,startY:e.clientY,lastX:e.clientX,moved:!1,slotPx:t},s()},[s,b]),k=(0,n.useCallback)(e=>{let t=h.current;if(!t||t.pointerId!==e.pointerId)return;let r=e.clientX-t.startX,a=e.clientY-t.startY;if(!t.moved){if(6>Math.abs(r)&&6>Math.abs(a))return;if(Math.abs(r)<=Math.abs(a)){h.current=null,o();return}t.moved=!0,x(!0);try{e.target.setPointerCapture?.(e.pointerId)}catch{}}t.lastX=e.clientX,p(r)},[o]),j=(0,n.useCallback)(e=>{let t=h.current;if(!t||t.pointerId!==e.pointerId)return;let r=t.lastX-t.startX;if(h.current=null,t.moved){let e=-r/t.slotPx,a=0===e?0:e>0?1:-1,n=Math.abs(e),i=0===a?0:Math.max(1,Math.floor(n+.8200000000000001));y(a*i)}p(0),x(!1),o()},[y,o]);return(0,n.useEffect)(()=>{let e,t=d.current;if(!t)return;let r=t=>{if(!(Math.abs(t.deltaX)>Math.abs(t.deltaY)||t.shiftKey))return;let r=t.shiftKey&&Math.abs(t.deltaX)<Math.abs(t.deltaY)?t.deltaY:t.deltaX;if(1>Math.abs(r))return;t.preventDefault(),void 0!==e&&window.clearTimeout(e),e=window.setTimeout(()=>{v.current=0},180);let a=performance.now();if(a-f.current<650||(v.current+=r,140>Math.abs(v.current)))return;f.current=a;let n=v.current>0?1:-1;v.current=0,y(n)};return t.addEventListener("wheel",r,{passive:!1}),()=>{t.removeEventListener("wheel",r),void 0!==e&&window.clearTimeout(e)}},[y]),(0,a.jsx)("div",{ref:d,className:(0,l.cn)("relative w-full h-full min-h-[200px] max-h-[min(48svh,520px)]","[--slot:160px] sm:[--slot:220px] md:[--slot:260px] lg:[--slot:340px] xl:[--slot:390px]","touch-pan-y select-none",m?"cursor-grabbing":"cursor-grab"),style:{animation:`stagger-fade-in 600ms ${c} 200ms both`},onMouseEnter:s,onMouseLeave:o,onPointerDown:w,onPointerMove:k,onPointerUp:j,onPointerCancel:j,children:t.map((e,n)=>{let s=function(e,t,r){let a=e-t,n=r/2;return a>n&&(a-=r),a<-n&&(a+=r),a}(n,r,t.length),l=function(e){let t=Math.abs(e);if(0===t)return{scale:1,rotate:0,opacity:1,zIndex:30};let r=e>0?1:-1;return 1===t?{scale:.62,rotate:-(3*r),opacity:.9,zIndex:20}:2===t?{scale:.42,rotate:-(6*r),opacity:.5,zIndex:10}:{scale:.35,rotate:0,opacity:0,zIndex:0}}(s),o=0===s,c=2>=Math.abs(s);return(0,a.jsx)(g,{template:e,offset:s,slot:l,isCenter:o,visible:c,dragOffset:u,isDragging:m,onClick:()=>i(n)},e.id)})})}function g(e){let{template:t,offset:r,slot:n,isCenter:i,visible:s,dragOffset:o,isDragging:c,onClick:d}=e,u=Math.min(Math.max(t.aspectRatio>0?t.aspectRatio:1,.58),1.1),p=n.scale*(u<=.75?1:u>
14=1?.82:1-(u-.75)/.25*.18);return(0,a.jsxs)("a",{href:t.url,target:"_blank",rel:"noopener noreferrer",onClick:e=>{if(Math.abs(o)>4)return void e.preventDefault();i||(e.preventDefault(),d())},draggable:!1,"aria-hidden":!s,tabIndex:s?0:-1,className:"absolute top-1/2 left-1/2 h-[82%] md:h-[84%] lg:h-[86%] cursor-pointer transform-gpu",style:{aspectRatio:u,transform:`translate(-50%, -50%) translateX(calc(var(--slot) * ${r} + ${o}px)) scale(${p}) rotate(${n.rotate}deg)`,opacity:n.opacity,zIndex:n.zIndex,pointerEvents:s?"auto":"none",transition:c?"none":s?"transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 700ms ease-out":"opacity 400ms ease-out",willChange:"transform, opacity",backfaceVisibility:"hidden"},children:[i?(0,a.jsx)("img",{src:t.image,alt:"","aria-hidden":!0,className:"absolute inset-0 w-full h-full object-cover rounded-[22px] blur-2xl scale-110 opacity-75 pointer-events-none transform-gpu",draggable:!1}):null,(0,a.jsxs)("div",{className:(0,l.cn)("relative w-full h-full rounded-[22px] overflow-hidden bg-white","border-4 border-white","transition-shadow duration-500",i?"shadow-[0_24px_64px_0_rgba(0,0,0,0.22)]":"shadow-[0_12px_36px_0_rgba(0,0,0,0.14)]"),children:[(0,a.jsx)("img",{src:t.image,alt:t.title,className:"w-full h-full object-cover",draggable:!1}),(0,a.jsxs)("div",{className:"absolute top-3 right-3 overflow-hidden rounded-full shadow-[0_4px_24px_0_rgba(0,0,0,0.12)]",children:[(0,a.jsx)("span",{"aria-hidden":!0,className:"absolute inset-0 backdrop-blur-[24px] bg-[rgba(241,240,239,0.85)] mix-blend-luminosity pointer-events-none rounded-full"}),(0,a.jsx)("span",{className:"relative block px-3 py-1 sm:px-4 sm:py-1.5 text-sm sm:text-base font-semibold text-fg-primary tracking-[-0.32px] whitespace-nowrap",children:t.tag})]})]})]})}},71370:(e,t,r)=>{"use strict";r.d(t,{j:()=>s,z:()=>l});var a=r(14232),n=r(2526),i=r(91258);function s(){let[e,t]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let e=window.matchMedia("(prefers-reduced-motion: reduce)");t(e.matches);let r=()=>t(e.matches);return e.addEventListener("change",r),()=>e.removeEventListener("change",r)},[]),e}function l(){let e=(0,n.A)(),t=s(),r=(0,i.jk)("lg");return!!e&&(t||r)}},79726:(e,t,r)=>{"use strict";r.d(t,{u:()=>d});var a=r(37876),n=r(49279),i=r(2526),s=r(71370);let l=[.16,1,.3,1];function o(e){let{value:t,delay:r}=e,i=Array.from({length:10+t+1},(e,t)=>t%10),s=i.length-1;return(0,a.jsx)("span",{className:"inline-block overflow-hidden align-baseline tabular-nums",style:{height:"1.15em",width:"0.58em"},"aria-hidden":!0,children:(0,a.jsx)(n.P.span,{className:"flex flex-col items-center will-change-transform",initial:{y:0},animate:{y:`-${1.15*s}em`},transition:{delay:r,duration:1.35,ease:l},children:i.map((e,t)=>(0,a.jsx)("span",{className:"block w-full text-center",style:{height:"1.15em",lineHeight:"1.15em"},children:e},t))})})}function c(){return(0,a.jsxs)("span",{className:"inline-flex items-baseline text-fg-primary font-bold tabular-nums",children:[(0,a.jsx)(o,{value:1,delay:.95}),(0,a.jsx)(o,{value:3,delay:1.1}),(0,a.jsx)(n.P.span,{className:"inline-block",initial:{opacity:0,y:"0.35em"},animate:{opacity:1,y:0},transition:{delay:1.45,duration:.4,ease:l},children:"m+"})]})}function d(){let e=(0,i.A)(),t=(0,s.z)();return!e||t?(0,a.jsx)("span",{className:"text-fg-primary font-bold tabular-nums",children:"13m+"}):(0,a.jsx)(c,{})}},87324:e=>{e.exports={"dotted-grid":"Hero_dotted-grid__gZFkK","gradient-text":"Hero_gradient-text__AUhUO","gradient-pan":"Hero_gradient-pan__8jITT","gradient-hover":"Hero_gradient-hover__SI9JK","hero-motion-container":"Hero_hero-motion-container__pkABM","hero-motion-title":"Hero_hero-motion-title__06KVg","hero-fade-up":"Hero_hero-fade-up__cCg5j","hero-motion-subtitle":"Hero_hero-motion-subtitle__VCehU","animate-rotate-left":"Hero_animate-rotate-left__VyArM","rotate-scale-in-left":"Hero_rotate-scale-in-left__qVgLg","animate-rotate-right":"Hero_animate-rotate-right__gg1_8","rotate-scale-in-right":"Hero_rotate-scale-in-right__LL1JB","wipe-grow-in":"Hero_wipe-grow-in__qBhwM","tools-card":"Hero_tools-card__xb3iE","card-fade-up":"Hero_card-fade-up__cJR30"}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.