https://pika.style/_next/static/chunks/pages/templates/stacked-mobile-app-screenshot-9941c24d623ac6a9.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2597],{41817:(e,t,s)=>{"use strict";s.r(t),s.d(t,{__N_SSG:()=>_,default:()=>T});var a=s(75038),i=s(76430),r=s(2272),n=s(73982),o=s(71623),l=s(93646),d=s(50876),c=s(28276),g=s(14661),m=s(41075),x=s(8557),p=s(89934),h=s(97181),u=s(63166),y=s(94548),f=s(60509),v=s(34530),j=s(1433),k=s(61498);let b=({canvasRef:e,options:t,image:s,outputSize:n,setImage:j,setOptions:b})=>{let w,{isPro:S,c_HandleNonPro:N}=(0,i.useContext)(r.A),[A,R]=(0,i.useState)(),[C,z]=(0,i.useState)(),_=s?.first&&s?.second&&s?.third,T=({type:e})=>{if(!S)return void N({text:"Upgrade to Pro to add shapes in canvas"});let t={id:+new Date,type:"rectangle",opacity:1,background:"#c489f8",zIndex:30,blur:0,borderWidth:2,borderColor:"#9f54f4"},s={...t,id:+new Date,type:"circle"},a={...t,id:+new Date,type:"highlight"},i={...t,id:+new Date,type:"square"};switch(e){case"rectangle":z(e=>e?.length?[...e,t]:[t]);break;case"circle":z(e=>e?.length?[...e,s]:[s]);break;case"square":z(e=>e?.length?[...e,i]:[i]);break;case"highlight":z(e=>e?.length?[...e,a]:[a])}},E=[{key:"first-image",onDrop:e=>j(t=>({...t,first:e})),src:s?.first||"/templates/demo-images/iphone-2.png",layoutClass:t?.layout?.tw?.first},{key:"second-image",onDrop:e=>j(t=>({...t,second:e})),src:s?.second||"/templates/demo-images/iphone-1.png",layoutClass:t?.layout?.tw?.second},{key:"third-image",onDrop:e=>j(t=>({...t,third:e})),src:s?.third||"/templates/demo-images/iphone-3.png",layoutClass:t?.layout?.tw?.third}];return(0,a.jsxs)("div",{className:"flex flex-col w-full",children:[(0,a.jsx)(c.ER,{children:(0,a.jsxs)("div",{className:"ml-auto flex items-center space-x-4",children:[(0,a.jsx)(c.sc,{shapesStack:C,setShapesStack:z,trigger:(0,a.jsx)(v.ms,{trigger:(0,a.jsx)(v.$n,{variant:"secondary",suffix:(0,a.jsx)(m.A,{size:15}),className:(0,o.A)("text-sm focus:z-10",C?.length?"rounded-r-none! ":""),children:(0,a.jsx)("span",{className:"hidden md:inline-flex mr-1",children:"Add"})}),items:[{icon:(0,a.jsx)(x.A,{size:15}),title:(0,a.jsx)(a.Fragment,{children:"Rectangle"}),onClick:()=>T({type:"rectangle"})},{icon:(0,a.jsx)(p.A,{size:15}),title:(0,a.jsx)(a.Fragment,{children:"Circle"}),onClick:()=>T({type:"circle"})},{icon:(0,a.jsx)(h.A,{size:15}),title:(0,a.jsx)(a.Fragment,{children:"Square"}),onClick:()=>T({type:"square"})},{icon:(0,a.jsx)(u.A,{size:15}),title:(0,a.jsx)(a.Fragment,{children:"Highlight"}),onClick:()=>T({type:"highlight"})}]}),listTrigger:(0,a.jsx)(v.m_,{text:"Manage Layers",children:(0,a.jsx)(v.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,a.jsx)(y.A,{size:14})})})}),(0,a.jsx)(c.RT,{textStack:A,setTextStack:R,trigger:(0,a.jsx)(v.$n,{variant:"secondary",prefix:(0,a.jsx)(f.A,{size:15}),className:(0,o.A)("text-sm focus:z-10",A?.length?"rounded-r-none! ":""),children:(0,a.jsx)("span",{className:"hidden md:inline-flex ml-1",children:"Text"})}),listTrigger:(0,a.jsx)(v.m_,{text:"Manage layers",children:(0,a.jsx)(v.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,a.jsx)(y.A,{size:14})})})})]})}),(0,a.jsxs)("div",{ref:e,style:((w={}).aspectRatio=t?.canvasAspectRatio?.value,w.transform=`scale(${n?.canvasScale||1})`,t?.background?.active==="custom-color")?{...w,backgroundImage:(0,k.Bu)(t?.background)}:t?.background?.active==="image"?{...w,backgroundImage:`url(${t?.background?.image?.baseData}) `,backgroundPosition:"center",backgroundSize:"cover",backgroundRepeat:"no-repeat"}:w,className:(0,o.A)("canvas overflow-hidden p-[10%] duration-100 flex items-center justify-center max-w-full origin-top relative",t?.background?.active==="gradient"&&t?.background?.gradientDirection?.tw,t?.background?.active==="gradient"&&t?.background?.gradient,t?.canvasAspectRatio?.value!=="auto"&&"useAutoHeight"),children:[(0,a.jsx)(l.Mt,{options:t}),(0,a.jsx)(l.Mx,{options:t}),(0,a.jsx)(l.$P,{textStack:A,setTextStack:R,options:t,setOptions:e=>b(t=>({...t,imageText:{...t.imageText,...e}}))}),(0,a.jsx)(l.E_,{shapesStack:C,setShapesStack:z,options:t}),(0,a.jsx)("div",{className:(0,o.A)("grid duration-100 gap-x-[6%] w-full flex-wrap max-w-full",!_&&"grid-cols-3"),style:{gridTemplateColumns:`${_&&s?.first?"1fr":""} ${_&&s?.second?"1fr":""} ${_&&s?.third?"1fr":""}`,transform:`scale(${t?.imageScale||90}%) translateX(${t?.positionX||0}%) translateY(${t?.positionY||0}%)`},children:E?.map((e,s)=>(0,a.jsxs)("div",{id:e?.key+s,className:(0,o.A)(e?.layoutClass,"duration-100 relative"),children:[(0,a.jsx)(l.xH,{onDrop:t=>{S?e?.onDrop(t?.baseData):N({text:"Upgrade to Pro to add screenshot to this template"})}}

1),(0,a.jsx)(g.A,{tiltAngleXManual:t?.imageTilt?.angleX||0,tiltAngleYManual:t?.imageTilt?.angleY||0,style:{filter:`drop-shadow(${d.C[t?.imageShadow]?.css})`,borderRadius:`${t?.mobileFrame?.value!=="none"?"50":t?.imageRoundness}px`},className:(0,o.A)("flex",t?.mobileFrame?.value==="none"&&"overflow-hidden"),children:(0,a.jsx)(l.mL,{options:t,src:e?.src,children:(0,a.jsx)("img",{alt:"Screenshot",src:e?.src})})})]},e?.key+s))})]})]})};var w=s(36791),S=s(12075);let N=({options:e,setOptions:t})=>(0,a.jsxs)("div",{className:"w-full px-4 py-2",children:[(0,a.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center",children:"Layout"}),(0,a.jsx)("div",{className:"flex flex-wrap ",children:[{key:"style-1",tw:{first:"",second:"",third:""}},{key:"style-2",tw:{first:"translate-y-[-10%] relative",second:"",third:"translate-y-[10%] relative"}},{key:"style-3",tw:{first:"translate-y-[10%] relative",second:"translate-y-[-10%] relative",third:"translate-y-[10%] relative"}},{key:"style-4",tw:{first:"translate-y-[-10%] relative",second:"translate-y-[10%] relative",third:"translate-y-[-10%] relative"}},{key:"style-5",tw:{first:"translate-y-[-15%] relative rotate-[8deg]",second:"translate-y-[5%] translate-x-[-4%] relative rotate-[8deg]",third:"translate-y-[-5%] relative rotate-[8deg]"}},{key:"style-6",tw:{first:"translate-y-[-5%] relative rotate-[-8deg]",second:"translate-y-[2%] translate-x-[4%] relative rotate-[-8deg]",third:"translate-y-[-15%] relative rotate-[-8deg]"}},{key:"style-7",tw:{first:"scale-[1.05]",second:"scale-[0.95]",third:"scale-[1.05]"}},{key:"style-8",tw:{first:"",second:"scale-[1.1]",third:""}},{key:"style-9",tw:{first:"rotate-[-8deg] relative right-[-7%]",second:"scale-[1.2] relative z-2",third:"rotate-[8deg] z-0 relative right-[7%]"}}].map(s=>(0,a.jsxs)("div",{className:(0,o.A)("mt-2 whitespace-nowrap cursor-pointer text-center border rounded-xl grid grid-cols-3 p-2 relative w-12 h-10 items-center justify-center mr-2",{"hover:border-pink-500 text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 bg-white border-gray-300 dark:hover:border-pink-500/80":s.key!=e?.layout.key},{"bg-pink-100 text-pink-500  border-pink-500 dark:bg-pink-500/10 dark:border-pink-500/80 dark:text-pink-400":s.key===e?.layout.key}),onClick:()=>t(e=>({...e,layout:s})),children:[(0,a.jsx)("div",{className:(0,o.A)("w-2 h-4 rounded-sm dark:bg-gray-900 bg-white border shadow",s?.tw?.first,s.key===e?.layout.key?"dark:border-pink-500 border-pink-400":"border-gray-300 dark:border-gray-500")}),(0,a.jsx)("div",{className:(0,o.A)("w-2 h-4 rounded-sm dark:bg-gray-900 bg-white border shadow",s?.tw?.second,s.key===e?.layout.key?"dark:border-pink-500 border-pink-400":"border-gray-300 dark:border-gray-500")}),(0,a.jsx)("div",{className:(0,o.A)("w-2 h-4 rounded-sm dark:bg-gray-900 bg-white border shadow",s?.tw?.third,s.key===e?.layout.key?"dark:border-pink-500 border-pink-400":"border-gray-300 dark:border-gray-500")})]},s.key))})]}),A=({options:e,setOptions:t,image:s,setImage:o,saveImage:l,copyImage:d,canEdit:c,imageRef:g})=>{let{c_Session:m,c_OpenPricing:x}=(0,i.useContext)(r.A);return c?(0,a.jsx)(n.E,{children:(0,a.jsxs)("div",{className:"w-full",children:[(0,a.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Screenshot options"}),(0,a.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,a.jsxs)("div",{className:"w-full items-center py-2 px-4 flex",children:[(0,a.jsx)("div",{className:"relative text-sm font-semibold dark:text-white",children:"Add Images"}),(0,a.jsxs)("div",{className:"flex items-center space-x-4 ml-auto py-1",children:[(0,a.jsx)(v.m_,{text:`${s?.first?"Replace":"Add"} first image`,children:(0,a.jsx)(w.Z4,{image:s?.first,setImage:e=>o(t=>({...t,first:e})),id:"firstImage"})}),(0,a.jsx)(v.m_,{text:`${s?.second?"Replace":"Add"} second image`,children:(0,a.jsx)(w.Z4,{image:s?.second,setImage:e=>o(t=>({...t,second:e})),id:"secondImage"})}),(0,a.jsx)(v.m_,{text:`${s?.third?"Replace":"Add"} third image`,children:(0,a.jsx)(w.Z4,{image:s?.third,setImage:e=>o(t=>({...t,third:e})),id:"thirdImage"})})]})]}),(0,a.jsx)(N,{options:e,setOptions:t}),(0,a.jsx)(w.sB,{options:e,setOptions:e=>t(t=>({...t,mobileFrame:e}))}),(0,a.jsx)(v.Ap,{min:30,max:150,stepValue:e?.imageScale,value:e?.imageScale||80,label:"Size",onCh

1ange:e=>t(t=>({...t,imageScale:e}))}),(0,a.jsx)(v.Ap,{min:0,max:24,label:"Roundness",defaultValue:10,value:e?.imageRoundness,stepValue:e?.imageRoundness,onChange:e=>t(t=>({...t,imageRoundness:e}))}),(0,a.jsx)(v.Ap,{min:0,max:10,label:"Shadow",stepValue:e?.imageShadow,value:e?.imageShadow,onChange:e=>t(t=>({...t,imageShadow:e}))}),(0,a.jsxs)("div",{className:"flex w-full divide-x divide-gray-200 dark:divide-gray-800",children:[(0,a.jsx)(w.Ru,{options:e,setOptions:e=>t(t=>({...t,imageTilt:e}))}),(0,a.jsx)(w.yX,{options:e,setOptions:t})]})]}),(0,a.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Canvas options"}),(0,a.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,a.jsx)(w.qU,{hideSizes:["aspect-adapt"],options:e,setOptions:e=>t(t=>({...t,canvasAspectRatio:e}))}),(0,a.jsx)(w.VS,{options:e,setOptions:t}),(0,a.jsx)(w.gE,{options:e,setOptions:t}),(0,a.jsx)(w.aR,{options:e,setOptions:t})]}),(0,a.jsx)(S.CR,{allowScaling:!0,saveImage:l,copyImage:d,imageRef:g})]})}):(0,a.jsx)(n.E,{children:(0,a.jsxs)("div",{className:"min-h-[400px] flex items-center justify-center w-full overflow-hidden relative p-5",children:[(0,a.jsx)("div",{className:"absolute inset-0 w-full h-full opacity-[0.05] dark:opacity-10 pointer-events-none",style:{background:'url("/illustrations/13.png")'}}),(0,a.jsxs)("div",{className:"flex flex-col",children:[(0,a.jsx)("div",{className:"text-center relative",children:(0,a.jsx)("p",{children:"Add your screenshots and customize this template by upgrading to Pika Pro"})}),(0,a.jsx)(v.$n,{className:"mt-6 rounded-xl",variant:"primary",onClick:()=>{if(!m||!c)return void x({newTab:!0})},children:"⚡️ Get Pika Pro"})]})]})})};var R=s(72651),C=s(7880),z=s.n(C),_=!0;let T=e=>{let{currentTemplate:t}=e,s=(0,i.useRef)(),o=(0,i.useRef)(),{c_Session:l,c_SetStats:d,isPro:c}=(0,i.useContext)(r.A),[g,m]=(0,i.useState)(!1),[x,p]=(0,i.useState)({w:null,h:null,canvasScale:1,vw:null,vh:null}),[h,u]=(0,i.useState)({}),y=t?.isPaid&&c,[f,k]=(0,i.useState)({layout:{key:"style-8",tw:{first:"",second:"scale-[1.1]",third:""}},background:{active:"custom-color",gradientDirection:{css:"to top right",tw:"bg-linear-to-tr"},gradient:"from-[#5e88da] to-[#e3f0ff]",customColor:{colorStart:"#fff5f5",colorEnd:"#fbbfee"},image:""},canvasAspectRatio:{name:"Square (1:1)",value:"1 / 1",key:"aspect-square"},imageTilt:{angleX:0,angelY:0},watermark:{socials:{text:"",link:"yourwebsite.com",twitter:"handle",facebook:"",linkedin:"",youtube:"",instagram:""},logo:"",bgColor:"bg-gray-800/30",position:"bottom-0 justify-center",active:!1},imageScale:100,imageShadow:4,customShadow:{active:!1,x:0,y:0,blur:25,spread:12,color:"#0f0f0f66"},positionX:0,positionY:0,imageRoundness:8,canvasRoundness:8,imageText:{active:!1,positionX:0,positionY:0,iconSize:80,textWidth:100,lineHeight:1.1,textColor:"#111",textAlignment:"center",size:1,position:"top",title:"Add your heading here",subTitle:"→ Go to Add Text to tweak this text\n→ You can add multi-line subtext here\n→You can also add a custom icon or logo here"},mobileFrame:{variantName:"Red",title:"iPhone 14 / Red",value:"iphone-14-red"},pattern:{value:"gridLines",name:"Grid",opacity:40,shapeSize:32,blending:"overlay",linesIntensity:24,patternIntensity:30,patternRotation:0,gridColor:"#111111",blur:0,positions:0,colors:1}});(0,i.useEffect)(()=>(C(),u({first:"/templates/demo-images/iphone-2.png",second:"/templates/demo-images/iphone-1.png",third:"/templates/demo-images/iphone-2.png"}),window.addEventListener("resize",C),()=>window.removeEventListener("resize",C)),[]);let w=async({customScale:e="1x",format:t="png",fileNamePrefix:i}={})=>{let r;if(m(e=>(r=e,e)),r)return;let n=j.oR.loading((0,a.jsxs)(a.Fragment,{children:["Exporting image in ",(0,a.jsx)("span",{className:"uppercase ml-1",children:t}),"..."]}));m(!0),(0,R.vq)("template_save",{key:l?.email??""}),(0,R.i6)({ref:s?.current,format:t,customScale:e,fileNamePrefix:i,onSuccess:()=>{j.oR.success("Image exported!",{id:n}),N(),m(!1),l&&d({type:"template",exportType:"save",isPro:c})},onError:e=>{j.oR.error("Something went wrong, please try again",{id:n}),m(!1)}})},N=()=>{setTimeout(()=>{o?.current((0,R.Oe)({x:.1,y:.3})),o?.current((0,R.Oe)({x:.7,y:.9})),o?.current((0,R.Oe)({x:.8,y:.9})),o?.current((0,R.Oe)({x:.6,y:.9}))},300)},C=()=>

1{let{innerWidth:e,innerHeight:t}=window;p(s=>({...s,vw:e,vh:t}))},_=()=>{setTimeout(()=>{p(e=>({...e,w:s?.current?.offsetWidth*window?.devicePixelRatio,h:s?.current?.offsetHeight*window?.devicePixelRatio,canvasScale:s?.current?.offsetHeight>x?.vh-100?1/(s?.current?.offsetHeight/(x?.vh-50)):1}))},300)};return(0,i.useEffect)(()=>{_()},[x?.vw,x?.vh,f,h]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(z(),{className:"fixed w-full h-full pointer-events-none z-200",onInit:({confetti:e})=>o.current=e}),(0,a.jsx)(n.S,{options:f,setOptions:k,metaTitle:t?.metaTitle,name:t?.title,metaDescription:t?.metaDescription??t?.description,content:(0,a.jsx)(b,{options:f,setOptions:k,image:h,setImage:u,canvasRef:s,outputSize:x,updateOutputSize:_,isSaving:g,isPro:c}),info:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(S.Ax,{currentTemplate:t}),(0,a.jsx)(()=>{let e=[{title:"Add screenshots",content:(0,a.jsxs)("div",{children:[(0,a.jsxs)("p",{children:["On the right side of the editor, you'll see the very first option to be ",(0,a.jsx)("strong",{children:'"Add Images"'}),". You can click on the ",(0,a.jsx)(v.iM,{children:"+"})," buttons to add your mobile app or website screenshots"]}),(0,a.jsx)("br",{}),(0,a.jsx)("p",{children:"Although this template works best with 3 screenshots, you can play with even one or two screenshots depending upon your use case"}),(0,a.jsx)("br",{}),(0,a.jsxs)("p",{children:[(0,a.jsx)("strong",{children:"Note that"})," this template is optimized for mobile screenshots, so it would work best with iPhone or Android screenshots"]})]}),gradientClass:"from-green-600 to-teal-700"},{title:"Design your screenshot",content:(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{children:"Use the customization options to beautify your screenshot as you like. This template has multiple layouts to chose from to achieve different looks"}),(0,a.jsx)("br",{}),(0,a.jsx)("p",{children:"You can also select frame including one for iPhone 14 Pro, change background gradient color, add custom text or icon, add tilt-effect and more"})]}),gradientClass:"from-blue-500 to-indigo-700"},{title:"Export your image",content:(0,a.jsxs)("div",{children:[(0,a.jsxs)("p",{children:["Use shortcut ",(0,a.jsx)(v.iM,{children:"⌘+C"}),"/"," ",(0,a.jsx)(v.iM,{children:"Ctrl+C"})," to copy beautified image as PNG file to clipboard or ",(0,a.jsx)(v.iM,{children:"⌘+S"}),"/",(0,a.jsx)(v.iM,{children:"Ctrl+S"}),"to save it to your system. You can also save image in JPEG format"]}),(0,a.jsx)("br",{}),(0,a.jsxs)("p",{children:["Pro users can export images in size upto 4K resolution using the"," ",(0,a.jsx)(v.iM,{children:"2x"})," in the output size"]})]}),gradientClass:"from-orange-500 to-pink-700"}];return(0,a.jsx)(v.mc,{width:"1080px",className:"flex items-center justify-center mt-5 relative",children:(0,a.jsxs)("div",{className:"",children:[(0,a.jsx)("h2",{className:"text-2xl md:text-4xl text-center font-black mb-2 dark:text-white max-w-[800px] mx-auto font-inter",children:"How to design mobile feature images?"}),(0,a.jsx)("p",{className:"text-lg mb-12 text-center",children:"3 simple steps to design perfect looking App feature and responsive website images"}),(0,a.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-10",children:e?.map((e,t)=>(0,a.jsxs)("div",{className:"flex flex-col items-center md:items-start justify-center md:justify-start",children:[(0,a.jsx)("div",{className:"\n                    flex items-center justify-center text-black/60 dark:text-gray-300 shadow-[0_0_44px_6px_#ff89c299] dark:shadow-[0_0_44px_2px_#dc2b81ba] mb-4 w-8 h-8 rounded-lg bg-linear-to-r bg-white dark:bg-black text-sm font-code font-semibold",children:t+1}),(0,a.jsx)("div",{className:"font-semibold my-4 dark:text-white text-xl",children:e?.title}),(0,a.jsx)("div",{className:"text-gray-700 dark:text-gray-200",children:e.content})]},e.title+t))})]})})},{}),(0,a.jsx)(S.S2,{slug:t?.slug})]}),sidebar:(0,a.jsx)(A,{options:f,setOptions:k,image:h,setImage:u,copyImage:({customScale:e="1x"}={})=>{let t,a=navigator?.userAgent?.indexOf("Firefox")<0;if(m(e=>(t=e,e)),t)return;let i=j.oR.loading("Copying image...");m(!0),(0,R.vq)("template_save",{key:l?.email??""}),(0,R.yq)({ref:s?.current,customScale:e,onSuccess:()=>{j.oR.success("Image copied to clipboard",{id:i}),N(),m(!1),l&&d({type:"template",exportType:"copy",isPro:c})},onError:e=>{console.log("Err",e),a?j.oR.error("Something went wrong, please try again",{id:i}):j.oR.error("Firefox doesn't support copying image, please use save",{id:i}),m(!1)}})},saveImage:w,currentTemplate:t,canEdit:y,updateOutputSize:_,imageRef:s?.current})})]})}},74787:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/templates/stacked-mobile-app-screenshot",function(){return s(41817)}])}},e=>{e.O(0,[4558,8689,407,7880,9539,303,1958,3771,5642,5198,6845,2075,2909,4510,636,6593,8792],()=>e(e.s=74787)),_N_E=e.O()}]);