https://amicro.vercel.app/assets/ThreeDPage-CPBTVNGj.js

1import{r as o,a0 as e,a6 as D,ay as T,a7 as F,a1 as O,a2 as j,X as B,au as _,ah as A,e as K,f as k}from"./vendor-framework-BJVwPIGp.js";import{f as q,g as Y,C as z,h as M,i as X}from"./index-JxbPLTrQ.js";const m=[{id:"1",title:"SKETCH 01",src:"https://i.pinimg.com/736x/9a/63/20/9a632012291e49436b7695f50d8aa20e.jpg"},{id:"2",title:"SKETCH 02",src:"https://i.pinimg.com/736x/0c/e1/6e/0ce16e5cfb36927669b7421c670035e0.jpg"},{id:"3",title:"SKETCH 03",src:"https://i.pinimg.com/736x/63/16/b2/6316b20446639cd7f923882cc0d5b0a5.jpg"},{id:"4",title:"SKETCH 04",src:"https://i.pinimg.com/736x/8b/36/b9/8b36b9f128dd0a65dc260e323ac5e333.jpg"},{id:"5",title:"SKETCH 05",src:"https://i.pinimg.com/736x/10/b6/bf/10b6bfda558137d1fd3fe5089c36ad9c.jpg"},{id:"6",title:"SKETCH 06",src:"https://i.pinimg.com/736x/f9/a7/d1/f9a7d15098baeb3ea28d7232f4ac86ea.jpg"}];function H({pages:t=m,currentIndex:l,isFlipping:d,direction:x,onFlipComplete:u,settings:r,isIntro:i,onPrevPage:p,onNextPage:b}){const[c,f]=o.useState(l),[a,w]=o.useState({active:!1,from:0,to:0,dir:1}),n=i?.14:.45,h=i?"linear":[.33,1,.68,1];o.useEffect(()=>{l!==c&&w({active:!0,from:c,to:l,dir:x})},[l,c,x]);const v=()=>{f(a.to),w({active:!1,from:a.to,to:a.to,dir:1}),u&&u()},y=C=>(C%t.length+t.length)%t.length,N=()=>e.jsx("div",{className:"absolute inset-0 pointer-events-none opacity-40 mix-blend-multiply",style:{backgroundImage:'url("https://www.transparenttextures.com/patterns/cream-paper.png")'}}),s=({index:C})=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"absolute inset-0",style:{backgroundColor:r.paperColor}}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none",style:{padding:`${r.padding}px`},children:e.jsx("div",{className:"w-full h-full bg-cover bg-center bg-no-repeat shadow-inner",style:{backgroundImage:`url(${t[y(C)].src})`,borderRadius:`${r.imageRadius}px`,boxShadow:`0 4px ${r.shadowIntensity}px rgba(0,0,0,0.15)`}})}),e.jsx(N,{})]}),g="absolute inset-y-0 right-0 w-12 pointer-events-none mix-blend-multiply z-20",S="absolute inset-y-0 left-0 w-12 pointer-events-none mix-blend-multiply z-20",$={background:`linear-gradient(to left, rgba(0,0,0,${r.creaseOpacity/100}), rgba(0,0,0,${r.creaseOpacity/400}), transparent)`,boxShadow:"inset -4px 0 10px rgba(0,0,0,0.1)"},I={background:`linear-gradient(to right, rgba(0,0,0,${r.creaseOpacity/100}), rgba(0,0,0,${r.creaseOpacity/400}), transparent)`,boxShadow:"inset 4px 0 10px rgba(0,0,0,0.1)"},E=a.active?a.dir===1?a.from-1:a.to-1:c-1,L=a.active?a.dir===1?a.to:a.from:c,P=a.dir===1?a.from:a.to,R=a.dir===1?a.to-1:a.from-1;return e.jsx("div",{className:"relative w-full max-w-lg aspect-[16/10] mx-auto perspective-[2400px] select-none",children:e.jsxs(j.div,{className:"w-full h-full relative shadow-xl rounded-md",initial:{rotateX:12,rotateY:-10,rotateZ:-2,scale:.95},animate:{rotateX:6,rotateY:-4,rotateZ:0,scale:1},transition:{duration:1.2,ease:"easeOut"},style:{transformStyle:"preserve-3d"},children:[e.jsxs("div",{onClick:p,className:"absolute top-0 left-0 w-1/2 h-full overflow-hidden rounded-l-md border-y border-l border-r border-black/10 shadow-[2px_0_15px_rgba(0,0,0,0.2)] cursor-pointer group",title:"Click to turn page back",children:[e.jsx(s,{index:E}),e.jsx("div",{className:g,style:$}),e.jsx("div",{className:"absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-start pl-3",children:e.jsx(D,{className:"w-5 h-5 text-black/50 opacity-0 group-hover:opacity-100 transition-opacity"})})]}),e.jsxs("div",{onClick:b,className:"absolute top-0 right-0 w-1/2 h-full overflow-hidden rounded-r-md border-y border-r border-l border-black/10 shadow-[-2px_0_15px_rgba(0,0,0,0.2)] cursor-pointer group",title:"Click to turn page forward",children:[e.jsx(s,{index:L}),e.jsx("div",{className:S,style:I}),e.jsx("div",{className:"absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-end pr-3",children:e.jsx(F,{className:"w-5 h-5 text-black/50 opacity-0 group-hover:opacity-100 transition-opacity"})})]}),a.active&&e.jsxs(j.div,{className:"absolute top-0 w-1/2 h-full origin-left bg-[#fcfbf9] z-30",style:{left:"50%",transformStyle:"preserve-3d"},initial:{rotateY:a.dir===1?0:-180},animate:{rotateY:a.dir===1?-180:0},transition:{duration:n,ease:h},onAnimationComplete:v,children:[e.jsxs("div",{className:"absolute inset-0 backface-hidden overflow-hidden rounded-r-md border-y border-r border-l border-black/10",style:{backfaceVisibility:"hidden"},children:[e.jsx(s,{index:P}),e.jsx("div",{className:S,style:I}),e.jsx(j.div,{className:"absolute inset-0 bg-gradient-to-r from-transparent to-black",initial:{opacity:a.dir===1?0:.4}

1,animate:{opacity:a.dir===1?.4:0},transition:{duration:n,ease:h}})]}),e.jsxs("div",{className:"absolute inset-0 backface-hidden overflow-hidden rounded-l-md border-y border-l border-r border-black/10",style:{transform:"rotateY(180deg)",backfaceVisibility:"hidden"},children:[e.jsx(s,{index:R}),e.jsx("div",{className:g,style:$}),e.jsx(j.div,{className:"absolute inset-0 bg-gradient-to-l from-transparent to-black",initial:{opacity:a.dir===1?.4:0},animate:{opacity:a.dir===1?0:.4},transition:{duration:n,ease:h}})]})]})]})})}function V({theme:t="dark",compact:l=!1}){const[d,x]=o.useState(0),[u,r]=o.useState(1),[i,p]=o.useState(!1),[b,c]=o.useState(!1),[f,a]=o.useState(10),w=f>0;o.useEffect(()=>{if(f>0&&!i){const s=setTimeout(()=>{r(1),p(!0),x(g=>(g+1)%m.length),a(g=>g-1)},f===10?300:70);return()=>clearTimeout(s)}},[f,i]);const[n,h]=o.useState({padding:l?6:10,imageRadius:l?8:20,creaseOpacity:11,paperColor:"#fcfbf9",shadowIntensity:l?10:24}),v=()=>{i||(r(1),p(!0),x(s=>(s+1)%m.length))},y=()=>{i||(r(-1),p(!0),x(s=>(s-1+m.length)%m.length))},N=()=>{p(!1)};return e.jsxs("div",{className:"w-full flex flex-col items-center justify-center relative p-1 sm:p-2 font-sans",children:[e.jsx(H,{pages:m,currentIndex:d,isFlipping:i,direction:u,onFlipComplete:N,settings:n,isIntro:w,onPrevPage:y,onNextPage:v}),e.jsxs("div",{className:"flex items-center justify-between w-full max-w-lg mt-3 px-1",children:[e.jsxs("button",{onClick:y,disabled:i,className:`flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-medium transition-all cursor-pointer ${t==="dark"?"bg-white/10 hover:bg-white/20 text-white":"bg-neutral-200 hover:bg-neutral-300 text-black"}`,children:[e.jsx(D,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Prev"})]}),e.jsx("span",{className:`text-[11px] font-semibold tracking-widest uppercase ${t==="dark"?"text-neutral-400":"text-neutral-600"}`,children:m[d].title}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("button",{onClick:()=>c(!b),className:`p-1.5 rounded-full transition-all cursor-pointer ${t==="dark"?"bg-white/10 hover:bg-white/20 text-white":"bg-neutral-200 hover:bg-neutral-300 text-black"}`,title:"Book Settings",children:e.jsx(T,{className:"w-3.5 h-3.5"})}),e.jsxs("button",{onClick:v,disabled:i,className:`flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-medium transition-all cursor-pointer ${t==="dark"?"bg-white/10 hover:bg-white/20 text-white":"bg-neutral-200 hover:bg-neutral-300 text-black"}`,children:[e.jsx("span",{children:"Next"}),e.jsx(F,{className:"w-3.5 h-3.5"})]})]})]}),e.jsx(O,{children:b&&e.jsxs(j.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},className:`mt-3 w-full max-w-sm rounded-xl p-4 shadow-xl border ${t==="dark"?"bg-[#1e1e1e] border-white/15 text-white":"bg-white border-neutral-200 text-black"}`,children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsx("h4",{className:"text-[11px] font-bold uppercase tracking-wider text-neutral-400",children:"Book Controls"}),e.jsx("button",{onClick:()=>c(!1),className:"text-neutral-400 hover:text-white",children:e.jsx(B,{className:"w-3.5 h-3.5"})})]}),e.jsxs("div",{className:"space-y-3 text-[11px]",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex justify-between font-medium",children:[e.jsx("span",{children:"Image Padding"}),e.jsxs("span",{children:[n.padding,"px"]})]}),e.jsx("input",{type:"range",min:"0",max:"30",value:n.padding,onChange:s=>h({...n,padding:parseInt(s.target.value)}),className:"w-full cursor-pointer accent-white"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex justify-between font-medium",children:[e.jsx("span",{children:"Image Radius"}),e.jsxs("span",{children:[n.imageRadius,"px"]})]}),e.jsx("input",{type:"range",min:"0",max:"40",value:n.imageRadius,onChange:s=>h({...n,imageRadius:parseInt(s.target.value)}),className:"w-full cursor-pointer accent-white"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex justify-between font-medium",children:[e.jsx("span",{children:"Crease Opacity"}),e.jsxs("span",{children:[n.creaseOpacity,"%"]})]}),e.jsx("input",{type:"range",min:"0",max:"40",value:n.creaseOpacity,onChange:s=>h({...n,creaseOpacity:parseInt(s.target.value)}),className:"w-full cursor-pointer accent-white"})]})]})]})})]})}function J({theme:t,showToast:l,triggerHaptic:d,onNavigateHome:x}){const[u,r]=o.useState(null),i=o.useCallback((p,b,c)=>{navigator.clipboard.writeText(b).then(()=>{d&&d("success"),r(p),setTimeout(()=>r(null),2e3),l&&l(`Copied ${c} CLI command!`)}).catch(()=>{d&&d("error"),l&&l("Failed to copy command.")})},[l,d]);return e.jsxs("div",{className:"w-full max-w-[1240px] mx-auto px-4 sm:px-6 py-8 flex flex-col gap-10 font-sans",children:[e.jsx("div",{className:"flex items-center justify-between w-full",children:x&&e.jsxs("button",{onClick:x,className:`inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold transition-all cursor-pointer border ${t==="dark"?"bg-white/5 border-white/10 text-neutral-300 hover:bg-white/10 hover:text-white":"bg-neutral-100 border-neutral-200 text-neutral-700 hover:bg-neutral-200 hover:text-black"}`,children:[e.jsx(_,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Back"})]})}),e.jsxs("div",{className:"flex flex-col items-center text-center gap-4 max-w-2xl mx-auto",children:[e.jsxs("div",{className:`inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold tracking-wide uppercase ${t==="dark"?"bg-white/10 text-neutral-300 border border-white/10":"bg-neutral-200 text-neutral-700 border border-neutral-300"}`,children:[e.jsx(A,{className:"w-3.5 h-3.5 text-indigo-400"}),e.jsx("span",{children:"3D Motion Lab"})]}),e.jsx("h1",{className:"text-3xl sm:text-5xl font-bold tracking-tight",children:"3D Showcase"}),e.jsx("p",{className:`text-sm sm:text-base ${t==="dark"?"text-neutral-400":"text-neutral-600"}`,children:"High-performance 3D perspective flipbooks, CoverFlow carousels, depth stacks, and spatial card motion."})]}),e.jsxs("div",{className:`w-full rounded-[28px] p-6 sm:p-8 border flex flex-col items-center gap-6 shadow-2xl transition-all ${t==="dark"?"bg-[#181818] border-white/10 shadow-black/40":"bg-white border-neutral-200 shadow-neutral-200/50"}`,children:[e.jsxs("div",{className:"flex flex-col items-center text-center gap-1.5 max-w-lg",children:[e.jsx("span",{className:"text-[11px] font-bold tracking-widest uppercase text-indigo-400",children:"Featured 3D Component"}),e.jsx("h2",{className:"text-xl sm:text-2xl font-bold tracking-tight",children:"3D Dither Lab Book"}),e.jsx("p",{className:`text-xs sm:text-sm ${t==="dark"?"text-neutral-400":"text-neutral-600"}`,children:"Interactive 3D page flipping with cream paper texture overlays, customizable image padding, and real-time crease opacity depth controls."})]}),e.jsx("div",{className:"w-full flex items-center justify-center min-h-[320px] py-4",children:e.jsx(V,{theme:t})}),e.jsxs("div",{className:`w-full max-w-md flex items-center justify-between p-3 rounded-2xl border text-xs font-mono transition-all ${t==="dark"?"bg-[#121212] border-white/10 text-neutral-300":"bg-neutral-50 border-neutral-200 text-neutral-800"}`,children:[e.jsx("span",{className:"truncate pr-2 select-all",children:"npx @subhanhq/amicro@latest add dither-book"}),e.jsx("button",{onClick:()=>i("dither-book","npx @subhanhq/amicro@latest add dither-book","3D Dither Lab Book"),className:`p-2 rounded-xl transition-all cursor-pointer flex items-center justify-center ${u==="dither-book"?t==="dark"?"bg-emerald-500/20 text-emerald-400":"bg-emerald-100 text-emerald-600":t==="dark"?"bg-white/10 text-neutral-300 hover:text-white":"bg-neutral-200 text-neutral-700 hover:text-black"}`,children:e.jsx(q,{children:e.jsx(Y,{children:u==="dither-book"?e.jsx(K,{className:"w-4 h-4 text-emerald-500"}):e.jsx(k,{className:"w-4 h-4"})},u==="dither-book"?"check":"copy")})})]})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6 w-full",children:[e.jsxs("div",{className:`rounded-[24px] p-6 border flex flex-col items-center justify-between gap-4 transition-all ${t==="dark"?"bg-[#181818] border-white/5 hover:bg-[#1e1e1e]":"bg-white border-neutral-100 hover:shadow-lg"}`,children:[e.jsxs("div",{className:"text-center flex flex-col items-center gap-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("h3",{className:"text-sm font-semibold tracking-tight",children:"Interactive 3D Carousel"}),e.jsx("a",{href:"https://x.com/vivitseng_",target:"_blank",rel:"noopener noreferrer",className:"text-[10px] px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20 hover:bg-blue-500/20 transition-colors font-medium",children:"by vivi"})]}),e.jsx("p",{className:`text-xs ${t==="dark"?"text-neutral-400":"text-neutral-600"}`,children:"An interactive arc-based 3D motion carousel featuring smooth dot indicators and dynamic prev/next controls, inspired by vivi."})]}),e.jsx("div",{className:"w-full h-[220px] flex items-center justify-center overflow-hidden rounded-xl",children:e.jsx(z,{hovered:!0,className:"scale-[0.8] origin-center"})}),e.jsxs("button",{onClick:()=>i("card-carousel","npx @subhanhq/amicro@latest add card-carousel","Interactive 3D Carousel"),className:`w-full py-2 rounded-xl text-xs font-medium transition-all flex items-center justify-center gap-2 cursor-pointer border ${t==="dark"?"bg-white/5 border-white/10 text-neutral-300 hover:bg-white/10":"bg-neutral-100 border-neutral-200 text-neutral-700 hover:bg-neutral-200"}`,children:[e.jsx(k,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Copy CLI Code"})]})]}),e.jsxs("div",{className:`rounded-[24px] p-6 border flex flex-col items-center justify-between gap-4 transition-all ${t==="dark"?"bg-[#181818] border-white/5 hover:bg-[#1e1e1e]":"bg-white border-neutral-100 hover:shadow-lg"}`,children:[e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-sm font-semibold tracking-tight",children:"CoverFlow 3D Carousel"}),e.jsx("p",{className:`text-xs mt-1 ${t==="dark"?"text-neutral-400":"text-neutral-600"}`,children:"Premium 3D CoverFlow perspective path card deck."})]}),e.jsx("div",{className:"w-full h-[220px] flex items-center justify-center overflow-hidden rounded-xl",children:e.jsx(M,{hovered:!0,className:"scale-[0.8] origin-center"})}),e.jsxs("button",{onClick:()=>i("card-cover-flow","npx @subhanhq/amicro@latest add card-cover-flow","CoverFlow 3D"),

1className:`w-full py-2 rounded-xl text-xs font-medium transition-all flex items-center justify-center gap-2 cursor-pointer border ${t==="dark"?"bg-white/5 border-white/10 text-neutral-300 hover:bg-white/10":"bg-neutral-100 border-neutral-200 text-neutral-700 hover:bg-neutral-200"}`,children:[e.jsx(k,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Copy CLI Code"})]})]}),e.jsxs("div",{className:`rounded-[24px] p-6 border flex flex-col items-center justify-between gap-4 transition-all ${t==="dark"?"bg-[#181818] border-white/5 hover:bg-[#1e1e1e]":"bg-white border-neutral-100 hover:shadow-lg"}`,children:[e.jsxs("div",{className:"text-center",children:[e.jsx("h3",{className:"text-sm font-semibold tracking-tight",children:"Time Machine Depth Stack"}),e.jsx("p",{className:`text-xs mt-1 ${t==="dark"?"text-neutral-400":"text-neutral-600"}`,children:"Apple-style 3D perspective depth stack with timeline scrubber."})]}),e.jsx("div",{className:"w-full h-[220px] flex items-center justify-center overflow-hidden rounded-xl",children:e.jsx(X,{hovered:!0,className:"scale-[0.8] origin-center"})}),e.jsxs("button",{onClick:()=>i("card-time-machine","npx @subhanhq/amicro@latest add card-time-machine","Time Machine Stack"),className:`w-full py-2 rounded-xl text-xs font-medium transition-all flex items-center justify-center gap-2 cursor-pointer border ${t==="dark"?"bg-white/5 border-white/10 text-neutral-300 hover:bg-white/10":"bg-neutral-100 border-neutral-200 text-neutral-700 hover:bg-neutral-200"}`,children:[e.jsx(k,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Copy CLI Code"})]})]})]})]})}export{J as ThreeDPage};