https://pika.style/_next/static/chunks/pages/templates/google-pixel-mockup-f4af57c68390ba7a.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5654],{53085:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/templates/google-pixel-mockup",function(){return s(78560)}])},78560:(e,t,s)=>{"use strict";s.r(t),s.d(t,{__N_SSG:()=>P,default:()=>T});var i=s(75038),a=s(76430),r=s(2272),n=s(73982),o=s(71623),l=s(93646),c=s(14661),d=s(28276),x=s(12075),m=s(50876),g=s(34530),p=s(41075),u=s(8557),h=s(89934),y=s(97181),f=s(63166),b=s(94548),v=s(60509),j=s(1433),k=s(61498);let w=({canvasRef:e,options:t,image:s,outputSize:n,setImage:j,isSaving:w,setOptions:S})=>{let N,{isPro:A,c_HandleNonPro:R}=(0,a.useContext)(r.A),[z,C]=(0,a.useState)(),[_,P]=(0,a.useState)(),T=({type:e})=>{if(!A)return void R({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"},i={...t,id:+new Date,type:"highlight"},a={...t,id:+new Date,type:"square"};switch(e){case"rectangle":P(e=>e?.length?[...e,t]:[t]);break;case"circle":P(e=>e?.length?[...e,s]:[s]);break;case"square":P(e=>e?.length?[...e,a]:[a]);break;case"highlight":P(e=>e?.length?[...e,i]:[i])}};return(0,i.jsxs)("div",{className:"flex flex-col w-full",children:[(0,i.jsx)(d.ER,{children:(0,i.jsxs)("div",{className:"ml-auto flex items-center space-x-3",children:[(0,i.jsx)(d.sc,{shapesStack:_,setShapesStack:P,trigger:(0,i.jsx)(g.ms,{trigger:(0,i.jsx)(g.$n,{variant:"secondary",suffix:(0,i.jsx)(p.A,{size:15}),className:(0,o.A)("text-sm focus:z-10",_?.length?"rounded-r-none! ":""),children:(0,i.jsx)("span",{className:"hidden md:inline-flex mr-1",children:"Add"})}),items:[{icon:(0,i.jsx)(u.A,{size:15}),title:(0,i.jsx)(i.Fragment,{children:"Rectangle"}),onClick:()=>T({type:"rectangle"})},{icon:(0,i.jsx)(h.A,{size:15}),title:(0,i.jsx)(i.Fragment,{children:"Circle"}),onClick:()=>T({type:"circle"})},{icon:(0,i.jsx)(y.A,{size:15}),title:(0,i.jsx)(i.Fragment,{children:"Square"}),onClick:()=>T({type:"square"})},{icon:(0,i.jsx)(f.A,{size:15}),title:(0,i.jsx)(i.Fragment,{children:"Highlight"}),onClick:()=>T({type:"highlight"})}]}),listTrigger:(0,i.jsx)(g.m_,{text:"Manage Layers",children:(0,i.jsx)(g.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,i.jsx)(b.A,{size:14})})})}),(0,i.jsx)(d.RT,{textStack:z,setTextStack:C,trigger:(0,i.jsx)(g.$n,{variant:"secondary",prefix:(0,i.jsx)(v.A,{size:15}),className:(0,o.A)("text-sm focus:z-10",z?.length?"rounded-r-none! ":""),children:(0,i.jsx)("span",{className:"hidden md:inline-flex ml-1",children:"Text"})}),listTrigger:(0,i.jsx)(g.m_,{text:"Manage layers",children:(0,i.jsx)(g.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,i.jsx)(b.A,{size:14})})})})]})}),(0,i.jsxs)("div",{ref:e,style:((N={}).aspectRatio=t?.canvasAspectRatio?.value,N.transform=`scale(${n?.canvasScale||1})`,t?.canvasAspectRatio?.key==="aspect-app-store"&&(N.maxWidth="642px"),t?.canvasAspectRatio?.key==="aspect-app-store-5-8"&&(N.maxWidth="585px"),t?.canvasAspectRatio?.key==="aspect-app-store-5-5"&&(N.maxWidth="621px"),t?.canvasAspectRatio?.key==="aspect-app-store-4-7"&&(N.maxWidth="375px"),t?.background?.active==="custom-color")?{...N,backgroundImage:(0,k.Bu)(t?.background)}:t?.background?.active==="image"?{...N,backgroundImage:`url(${t?.background?.image?.baseData}) `,backgroundPosition:"center",backgroundSize:"cover",backgroundRepeat:"no-repeat"}:N,className:(0,o.A)("canvas overflow-hidden duration-100 flex items-center justify-center origin-top w-full max-w-full self-center",t?.background?.active==="gradient"&&t?.background?.gradientDirection?.tw,t?.background?.active==="gradient"&&t?.background?.gradient,t?.canvasAspectRatio?.value!=="auto"&&"useAutoHeight"),children:[w?A?"":(0,i.jsx)(x.yQ,{}):"",(0,i.jsx)(l.Mt,{options:t}),(0,i.jsx)(l.Mx,{options:t}),(0,i.jsx)(l.$P,{textStack:z,setTextStack:C,options:t,setOptions:e=>S(t=>({...t,imageText:{...t.imageText,...e}}))}),(0,i.jsx)(l.E_,{shapesStack:_,setShapesStack:P,options:t}),(0,i.jsxs)("div",{className:(0,o.A)(t?.layout?.tw?.first,"duration-100 relative"),children:[(0,i.jsx)(l.xH,{onDrop:e=>j(t=>({...t,first:e?.baseData}))}),(0,i.jsx)("div",{style:{transform:`scale(${t?.imageScale||90}%) translateX(${t?.positionX||0}%) translateY(${t?.positionY||0}%)`}

1,children:(0,i.jsx)(c.A,{tiltAngleXManual:t?.imageTilt?.angleX||0,tiltAngleYManual:t?.imageTilt?.angleY||0,style:{filter:`drop-shadow(${m.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,i.jsx)(l.mL,{className:"scale-[2.4]",options:t,src:s?.first??"/templates/demo-images/iphone-3.png",children:(0,i.jsx)("img",{alt:"Screenshot",src:s?.first??"/templates/demo-images/iphone-3.png"})})})})]})]})]})};var S=s(36791),N=s(19297),A=s(72651);let R=({options:e,setOptions:t})=>{let{isPro:s,c_HandleNonPro:n,c_Session:l}=(0,a.useContext)(r.A);return(0,i.jsxs)("div",{className:"w-full px-4 py-2",children:[(0,i.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center",children:"Layout"}),(0,i.jsx)("div",{className:"flex flex-wrap",children:[{key:"style-1",tw:{first:""}},{key:"style-2",tw:{first:"rotate-[8deg]"},isPro:!0},{key:"style-3",tw:{first:"rotate-[-8deg]"},isPro:!0},{key:"style-4",tw:{first:"translate-x-[-40%]"},isPro:!0},{key:"style-5",tw:{first:"translate-x-[40%]"},isPro:!0},{key:"style-6",tw:{first:"translate-y-[30%]"},isPro:!0},{key:"style-7",tw:{first:"translate-y-[-30%]"},isPro:!0}].map(a=>(0,i.jsxs)("div",{className:"relative mr-3",onClick:()=>{if(a?.isPro&&!s){n({text:"Please upgrade to Pro to set custom layout styles"}),(0,A.u4)({event:"\uD83E\uDD16 Flow",meta:l?.email?`Template → Layout option → Signup modal(${l?.email})`:"Template → Layout option → Signup modal"});return}t(e=>({...e,layout:{key:a.key,tw:a.tw}}))},children:[(0,i.jsx)("div",{style:{aspectRatio:"9/16"},className:(0,o.A)("mt-2 whitespace-nowrap cursor-pointer text-center border rounded-md flex relative w-8 items-center justify-center overflow-hidden",{"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":a.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":a.key===e?.layout.key}),children:(0,i.jsx)("div",{className:(0,o.A)("w-5 h-10 dark:bg-gray-900 bg-white border shadow rounded",a?.tw?.first,a.key===e?.layout.key?"dark:border-pink-500 border-pink-400":"border-gray-300 dark:border-gray-700")})}),a?.isPro&&!s?(0,i.jsx)("div",{className:"w-[18px] h-[18px] rounded-full flex items-center justify-center absolute bottom-[-3px] right-[-4px] bg-gray-100 dark:bg-gray-700 border border-gray-300 z-10 text-gray-500 dark:text-gray-200 dark:border-gray-600",children:(0,i.jsx)(N.A,{size:12})}):""]},a.key))})]})},z=({options:e,setOptions:t,image:s,setImage:a,saveImage:r,copyImage:o,imageRef:l})=>(0,i.jsx)(n.E,{children:(0,i.jsxs)("div",{className:"w-full",children:[(0,i.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,i.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,i.jsxs)("div",{className:"w-full items-center py-2 px-4 flex",children:[(0,i.jsx)("div",{className:"relative text-sm font-semibold dark:text-white",children:"Add Image"}),(0,i.jsx)("div",{className:"flex items-center space-x-4 ml-auto py-1",children:(0,i.jsx)(g.m_,{text:`${s?.first?"Replace":"Add"} app screenshot`,children:(0,i.jsx)(S.Z4,{image:s?.first,setImage:e=>a(t=>({...t,first:e})),id:"firstImage"})})})]}),(0,i.jsx)(S.sB,{options:e,setOptions:e=>t(t=>({...t,mobileFrame:e}))}),(0,i.jsx)(R,{options:e,setOptions:t}),(0,i.jsx)(g.Ap,{min:30,max:150,stepValue:e?.imageScale,value:e?.imageScale||80,label:"Size",onChange:e=>t(t=>({...t,imageScale:e}))}),(0,i.jsx)(g.Ap,{min:0,max:24,disabled:e?.mobileFrame?.value!=="none",label:"Roundness",defaultValue:10,value:e?.imageRoundness,stepValue:e?.imageRoundness,onChange:e=>t(t=>({...t,imageRoundness:e}))}),(0,i.jsx)(g.Ap,{min:0,max:10,label:"Shadow",stepValue:e?.imageShadow,value:e?.imageShadow,onChange:e=>t(t=>({...t,imageShadow:e}))}),(0,i.jsxs)("div",{className:"flex w-full divide-x divide-gray-200 dark:divide-gray-800",children:[(0,i.jsx)(S.Ru,{options:e,setOptions:e=>t(t=>({...t,imageTilt:e}))}),(0,i.jsx)(S.yX,{options:e,setOptions:t})]})]}),(0,i.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,i.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,i.jsx)(S.qU,{hideSizes:["aspect-adapt"],options:e,setOptions:e=>t(t=>({...t,canvasAspectRatio:e}))}),(0,i.jsx)(S.VS,{options:e,setOptions:t}),(0,i.jsx)(S.gE,{options:e,setOptions:t}),(0,i.jsx)(S.aR,{options:e,setOptions:t})]}),(0,i.jsx)(x.CR,{allowScaling:!0,saveImage:r,copyImage:o,imageRef:l})]})});var C=s(7880),_=s.n(C),P=!0;let T=e=>{let{currentTemplate:t}=e,s=(0,a.useRef)(),o=(0,a.useRef)(),{c_Session:l,c_SetStats:c,isPro:d}=(0,a.useContext)(r.A),[m,p]=(0,a.useState)(!1),[u,h]=(0,a.useState)({w:null,h:null,canvasScale:1,vw:null,vh:null}),[y,f]=(0,a.useState)({}),[b,v]=(0,a.useState)({layout:{key:"style-1",tw:{first:"",second:"",third:""}},background:{active:"custom-color",gradientDirection:{tw:"bg-linear-to-b",css:"to bottom"},gradient:"from-[#3de5b3] via-[#fee899] to-[#fff7ef]",customColor:{colorStart:"#ebebeb",colorEnd:"#ebebeb"},image:""},canvasAspectRatio:{name:"Dribbble",value:"1.3 / 1",key:"aspect-dribbble",icon:"/size-icons/dribbble.png"},imageTilt:{angleX:0,angelY:0},watermark:{socials:{text:"",link:"yourwebsite.com",twitter:"handle",facebook:"",linkedin:"",youtube:"",instagram:""}

1,logo:"",bgColor:"bg-gray-800/30",position:"bottom-0 justify-center",active:!1},imageScale:41,imageShadow:7,positionX:0,positionY:0,imageRoundness:18,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:"Dark",title:"Pixel 5",value:"google-pixel-5-dark"},pattern:{value:"none",name:"None",opacity:24,shapeSize:52,blending:"luminosity",linesIntensity:3,patternIntensity:30,patternRotation:0,gridColor:"#ffffff",blur:0}}),k=async({customScale:e="1x",format:t="png",fileNamePrefix:a}={})=>{let r;if(p(e=>(r=e,e)),r)return;let n=j.oR.loading((0,i.jsxs)(i.Fragment,{children:["Exporting image in ",(0,i.jsx)("span",{className:"uppercase ml-1",children:t}),"..."]}));p(!0),(0,A.vq)("template_save",{key:l?.email??""}),(0,A.i6)({ref:s?.current,customScale:e,format:t,fileNamePrefix:a,onSuccess:()=>{j.oR.success("Image exported!",{id:n}),S(),p(!1),l&&c({type:"template",exportType:"save",isPro:d})},onError:e=>{j.oR.error("Something went wrong, please try again",{id:n}),p(!1)}})},S=()=>{setTimeout(()=>{o?.current((0,A.Oe)({x:.1,y:.3})),o?.current((0,A.Oe)({x:.7,y:.9})),o?.current((0,A.Oe)({x:.8,y:.9})),o?.current((0,A.Oe)({x:.6,y:.9}))},300)};(0,a.useEffect)(()=>(N(),f({first:"/templates/demo-images/iphone-3.png"}),window.addEventListener("resize",N),()=>window.removeEventListener("resize",N)),[]);let N=()=>{let{innerWidth:e,innerHeight:t}=window;h(s=>({...s,vw:e,vh:t}))};return(0,a.useEffect)(()=>{setTimeout(()=>{h(e=>({...e,w:s?.current?.offsetWidth*window?.devicePixelRatio,h:s?.current?.offsetHeight*window?.devicePixelRatio,canvasScale:s?.current?.offsetHeight>u?.vh-100?1/(s?.current?.offsetHeight/(u?.vh-120)):1}))},300)},[u?.vw,u?.vh,b,y]),(0,i.jsxs)("div",{children:[(0,i.jsx)(_(),{className:"fixed w-full h-full pointer-events-none z-200",onInit:({confetti:e})=>o.current=e}),(0,i.jsx)(n.S,{options:b,setOptions:v,metaTitle:t?.metaTitle,name:t?.title,metaDescription:t?.metaDescription??t?.description,content:(0,i.jsx)(w,{options:b,setOptions:v,image:y,setImage:f,canvasRef:s,outputSize:u,isSaving:m}),info:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(x.Ax,{currentTemplate:t}),(0,i.jsx)(()=>{let e=[{title:"Add your mobile screenshot",content:(0,i.jsxs)("div",{children:[(0,i.jsxs)("p",{children:["On the right side of the editor, you'll see the very first option to be ",(0,i.jsx)("strong",{children:'"Add Image"'}),". You can click on the ",(0,i.jsx)(g.iM,{children:"+"})," button to add your screenshot"]}),(0,i.jsx)("br",{}),(0,i.jsxs)("p",{children:[(0,i.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,i.jsxs)("div",{children:[(0,i.jsx)("p",{children:"Use the customization options to beautify your screenshot as you like"}),(0,i.jsx)("br",{}),(0,i.jsx)("p",{children:"You can 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,i.jsxs)("div",{children:[(0,i.jsxs)("p",{children:["Use shortcut ",(0,i.jsx)(g.iM,{children:"⌘+C"}),"/"," ",(0,i.jsx)(g.iM,{children:"Ctrl+C"})," to copy beautified image as PNG file to clipboard or ",(0,i.jsx)(g.iM,{children:"⌘+S"}),"/",(0,i.jsx)(g.iM,{children:"Ctrl+S"}),"to save it to your system. You can also save image in JPEG format"]}),(0,i.jsx)("br",{}),(0,i.jsxs)("p",{children:["Pro users can export images in size upto 4K resolution using the"," ",(0,i.jsx)(g.iM,{children:"2x"})," in the output size"]})]}),gradientClass:"from-orange-500 to-pink-700"}];return(0,i.jsx)(g.mc,{width:"1080px",className:"flex items-center justify-center mt-5 relative",children:(0,i.jsxs)("div",{className:"",children:[(0,i.jsx)("h2",{className:"text-2xl md:text-4xl text-center font-black mb-2 dark:text-white font-inter",children:"How to create App Store images using Pika?"}),(0,i.jsx)("p",{className:"text-lg mb-12 text-center",children:"3 simple steps to design perfect looking App Store screenshots"}),(0,i.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-10",children:e?.map((e,t)=>(0,i.jsxs)("div",{className:"flex flex-col items-center md:items-start justify-center md:justify-start",children:[(0,i.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,i.jsx)("div",{className:"font-semibold my-4 dark:text-white text-xl",children:e?.title}),(0,i.jsx)("div",{className:"text-gray-700 dark:text-gray-200",children:e.content})]},e.title+t))})]})})},{}),(0,i.jsx)(x.S2,{slug:t?.slug})]}),sidebar:(0,i.jsx)(z,{options:b,setOptions:v,image:y,setImage:f,copyImage:({customScale:e="1x"}={})=>{let t,i=navigator?.userAgent?.indexOf("Firefox")<0;if(p(e=>(t=e,e)),t)return;

1let a=j.oR.loading("Copying image...");p(!0),(0,A.vq)("template_save",{key:l?.email??""}),(0,A.yq)({ref:s?.current,customScale:e,onSuccess:()=>{j.oR.success("Image copied to clipboard",{id:a}),S(),p(!1),l&&c({type:"template",exportType:"copy",isPro:d})},onError:e=>{console.log("Err",e),i?j.oR.error("Something went wrong, please try again",{id:a}):j.oR.error("Firefox doesn't support copying image, please use save",{id:a}),p(!1)}})},saveImage:k,isPro:d,imageRef:s?.current})})]})}}},e=>{e.O(0,[4558,8689,407,7880,9539,303,1958,3771,5642,5198,6845,2075,2909,4510,636,6593,8792],()=>e(e.s=53085)),_N_E=e.O()}]);