https://vibeeffect.ai/_next/static/chunks/5797-859a6b9061b296f7.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5797],{25474:function(e,t,a){a.d(t,{ComparisonSlider:function(){return b}});var r=a(83890),i=a(58496),s=a(12022),n=a(21952),c=a(29552),l=a(12187),o=a(14833);let d="undefined"!=typeof navigator&&/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),f=d?.15:.08,p=d?500:250;function u(e,t){try{e.currentTime=t}catch(e){}}function b(e){let{beforeVideo:t,afterVideo:a,accentColor:d="#D9FF00",isActive:b=!0,beforePoster:m,afterPoster:x}=e,h=(0,i.useRef)(null),[v,g]=(0,i.useState)(!1),[y,j]=(0,i.useState)(!1),w=(0,s.c)(50),N=(0,n.H)(w,e=>"inset(0 ".concat(100-e,"% 0 0)")),{beforeRef:E,afterRef:k,isReady:S}=function(e){let{beforeSrc:t,afterSrc:a,isActive:r=!0,startAtSeconds:s=0}=e,n=(0,i.useRef)(null),c=(0,i.useRef)(null),[l,o]=(0,i.useState)(!1),[d,b]=(0,i.useState)(!1),m=""!==t&&""!==a,x=m&&l&&d,h=(0,i.useMemo)(()=>"".concat(t,"|||").concat(a),[t,a]);return(0,i.useEffect)(()=>{if(o(!1),b(!1),!m)return;let e=n.current,t=c.current;if(e&&t&&(e.pause(),t.pause(),u(e,s),u(t,s),r)){e.preload="auto",t.preload="auto";try{e.load(),t.load()}catch(e){}}},[h,s,r,m]),(0,i.useEffect)(()=>{if(!m)return;let e=n.current,t=c.current;if(!e||!t)return;let a=()=>{e.readyState>=HTMLMediaElement.HAVE_FUTURE_DATA&&o(!0)},r=()=>{t.readyState>=HTMLMediaElement.HAVE_FUTURE_DATA&&b(!0)};return e.addEventListener("canplay",a),e.addEventListener("canplaythrough",a),e.addEventListener("loadeddata",a),t.addEventListener("canplay",r),t.addEventListener("canplaythrough",r),t.addEventListener("loadeddata",r),a(),r(),()=>{e.removeEventListener("canplay",a),e.removeEventListener("canplaythrough",a),e.removeEventListener("loadeddata",a),t.removeEventListener("canplay",r),t.removeEventListener("canplaythrough",r),t.removeEventListener("loadeddata",r)}},[h,m]),(0,i.useEffect)(()=>{let e=n.current,t=c.current;if(!e||!t)return;let a=null,i=()=>{e.pause(),t.pause()},l=async()=>{if(r&&x){u(e,s),u(t,s);try{await e.play(),await t.play()}catch(e){}}},o=()=>{a||(a=setInterval(()=>{r&&x&&!e.paused&&e.readyState>=HTMLMediaElement.HAVE_CURRENT_DATA&&(Math.abs(e.currentTime-t.currentTime)>f&&u(t,e.currentTime),!e.paused&&t.paused&&t.play(),e.paused&&!t.paused&&t.pause())},p))},d=()=>{a&&(clearInterval(a),a=null)},b=()=>{if("hidden"===document.visibilityState){i(),d();return}"visible"===document.visibilityState&&r&&x&&(l(),o())};return document.addEventListener("visibilitychange",b),r?x&&(l(),o()):(i(),d()),()=>{d(),document.removeEventListener("visibilitychange",b),i()}},[h,r,x,s]),{beforeRef:n,afterRef:c,isReady:x}}({beforeSrc:b||y?t:"",afterSrc:b||y?a:"",isActive:b});b&&!y&&j(!0);let A=(e=>{let t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?"".concat(parseInt(t[1],16),",").concat(parseInt(t[2],16),",").concat(parseInt(t[3],16)):"0,255,255"})(d);return(0,r.jsxs)("div",{ref:h,className:"group relative aspect-[9/16] w-full cursor-ew-resize overflow-hidden rounded-xl border border-white/[0.06] bg-black",children:[y&&!S&&(0,r.jsx)("div",{className:"absolute inset-0 z-30 flex items-center justify-center bg-black/80 backdrop-blur-sm",children:(0,r.jsxs)("div",{className:"flex flex-col items-center gap-3",children:[(0,r.jsx)("div",{className:"h-8 w-8 animate-spin rounded-full border-2 border-t-transparent",style:{borderColor:"".concat(d,"40"),borderTopColor:"transparent"}}),(0,r.jsx)("span",{className:"text-xs text-zinc-400",children:"Loading videos..."})]})}),!y&&(0,r.jsx)("div",{className:"absolute inset-0 z-30 flex items-center justify-center bg-black/60",children:(0,r.jsx)("div",{className:"flex flex-col items-center gap-2",children:(0,r.jsx)("span",{className:"text-sm text-zinc-400",children:"Scroll to play"})})}),(0,r.jsx)("video",{ref:k,className:"absolute inset-0 h-full w-full object-cover",src:b||y?a:void 0,poster:x,muted:!0,playsInline:!0,loop:!0,preload:b?"auto":"none"}),(0,r.jsx)("div",{className:"absolute top-3 right-3 z-10",children:(0,r.jsx)("span",{className:"rounded-full px-3 py-1 text-xs font-semibold backdrop-blur-sm",style:{backgroundColor:"".concat(d,"1A"),color:d,border:"1px solid ".concat(d,"4D")},children:"After"})}),(0,r.jsx)("div",{className:"pointer-events-none absolute top-12 right-3 z-10",children:(0,r.jsx)(l.Z,{className:"h-4 w-4 animate-pulse",style:{color:d}})}),(0,r.jsxs)(c.E.div,{className:"absolute inset-0 z-10",style:{clipPath:N},children:[(0,r.jsx)("video",{ref:E,className:"h-full w-full object-cover",src:b||y?t:void 0,poster:m,muted:!0,playsInl

1ine:!0,loop:!0,preload:b?"auto":"none"}),(0,r.jsx)("div",{className:"absolute top-3 left-3",children:(0,r.jsx)("span",{className:"rounded-full border border-zinc-700 bg-zinc-900/90 px-3 py-1 text-xs font-medium text-zinc-400 backdrop-blur-sm",children:"Before"})}),(0,r.jsx)("div",{className:"pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/10"})]}),(0,r.jsxs)(c.E.div,{className:"absolute top-0 bottom-0 z-20 flex cursor-ew-resize items-center",style:{left:(0,n.H)(w,e=>"".concat(e,"%")),x:"-50%"},drag:"x",dragConstraints:{left:0,right:0},dragElastic:0,dragMomentum:!1,onDrag:(e,t)=>{if(!h.current)return;let a=h.current.getBoundingClientRect(),r=Math.max(5,Math.min(95,(t.point.x-a.left)/a.width*100));w.set(r)},onDragStart:()=>g(!0),onDragEnd:()=>g(!1),children:[(0,r.jsx)("div",{className:"h-full w-0.5 transition-all duration-200",style:{backgroundColor:v?d:"rgba(255,255,255,0.6)",boxShadow:v?"0 0 20px rgba(".concat(A,",0.5), 0 0 40px rgba(").concat(A,",0.3)"):"0 0 10px rgba(0,0,0,0.5)"}}),(0,r.jsx)(c.E.div,{className:"absolute top-1/2 left-1/2 flex h-12 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-lg border backdrop-blur-md transition-colors",style:{backgroundColor:v?d:"rgba(0,0,0,0.8)",borderColor:v?d:"rgba(255,255,255,0.2)",boxShadow:v?"0 0 30px rgba(".concat(A,",0.4)"):"0 4px 20px rgba(0,0,0,0.5)"},whileHover:{scale:1.1},whileTap:{scale:.95},children:(0,r.jsx)(o.Z,{className:"h-5 w-5 transition-colors",style:{color:v?"black":"rgba(255,255,255,0.8)"}})}),(0,r.jsx)("div",{className:"pointer-events-none absolute top-[calc(50%+40px)] left-1/2 -translate-x-1/2",children:(0,r.jsxs)("div",{className:"flex items-center gap-1 text-xs text-white/60",children:[(0,r.jsx)("span",{children:"◀"}),(0,r.jsx)("span",{children:"▶"})]})})]}),(0,r.jsx)(c.E.div,{className:"pointer-events-none absolute inset-0 z-25 flex items-center justify-center bg-black/40 backdrop-blur-[2px]",initial:{opacity:1},animate:{opacity:0},transition:{delay:2,duration:.5},children:(0,r.jsx)("div",{className:"flex items-center gap-2 rounded-full border border-white/20 bg-black/60 px-4 py-2 backdrop-blur-md",children:(0,r.jsx)("span",{className:"text-sm font-medium text-white/80",children:"◀ Drag to compare ▶"})})})]})}},5797:function(e,t,a){a.r(t),a.d(t,{ShowcaseGallery:function(){return u}});var r=a(83890),i=a(58496),s=a(20944),n=a(29552),c=a(25474);let l=["Marketing","Sport","Music","DIY"],o=[{category:"Marketing",beforeVideo:"https://cdn.vibeeffect.ai/vibeeffect/uploads/videos/f185799f39781305f2fa909028f90abd88b264e85f78acd313c1a72752f740e5.mp4",afterVideo:"https://cdn.vibeeffect.ai/vibeeffect/uploads/videos/e49d90ed173310c1912208510f57ba29104c094b727a02fb40f1c4a8e3c2e412.mp4",prompt:"Make marketing video more engaging",description:"Marketing video with AI-generated overlays",accentColor:"#D9FF00"},{category:"Sport",beforeVideo:"https://cdn.vibeeffect.ai/vibeeffect/uploads/videos/82c480a12af3fd9c06d727285aaf6fc8b444598dee4ee8e0996a10503d0b1681.mp4",afterVideo:"https://cdn.vibeeffect.ai/vibeeffect/uploads/videos/91237bc2ea1cae1bbcb0cb2b7c8f0a0c04a1575e2712a4e02c56e666b9b09b29.mp4",prompt:"Add energy burst effects tracking the action",description:"Sports highlight with AI-powered motion effects",accentColor:"#D9FF00"},{category:"Music",beforeVideo:"https://cdn.vibeeffect.ai/vibeeffect/uploads/videos/9d4d2948be093a07f852e45636e359fa13b331b3fd7a3040f0c917cd7c4448aa.mp4",afterVideo:"https://cdn.vibeeffect.ai/vibeeffect/uploads/videos/7d46035d3ee9f23c634af537cad9b87880bd59c3def6ab079eec899cc011e2fa.mp4",prompt:"Add beat-synced visual effects with neon glow",description:"Music video with AI-generated motion graphics",accentColor:"#D9FF00"},{category:"DIY",beforeVideo:"https://cdn.vibeeffect.ai/vibeeffect/uploads/videos/d46cd881fc3c2c148a790afd19f404374cbf7aafdafe98f0cc576da26a89284b.mp4",afterVideo:"https://cdn.vibeeffect.ai/vibeeffect/uploads/videos/d8ad013a0299b8f8064d9aff57aa01abb83a64db6ccbef14a00da2fed39005e3.mp4",prompt:"Add step-by-step annotations with dynamic highlights",description:"DIY tutorial with AI-enhanced visual guides",accentColor:"#D9FF00"}],d={hidden:{opacity:0}

1,visible:{opacity:1,transition:{staggerChildren:.1}}},f={hidden:{opacity:0,y:30},visible:{opacity:1,y:0,transition:{duration:.6,ease:[.16,1,.3,1]}}};function p(e){let{showcase:t,isActive:a}=e,l=(0,i.useRef)(null),o=(0,s.Y)(l,{once:!1,amount:.6,margin:"-10% 0px -10% 0px"});return(0,r.jsxs)(n.E.div,{ref:l,variants:f,children:[(0,r.jsx)(c.ComparisonSlider,{beforeVideo:t.beforeVideo,afterVideo:t.afterVideo,accentColor:t.accentColor,isActive:a&&o}),(0,r.jsxs)("p",{className:"mt-4 text-sm text-zinc-400",children:[(0,r.jsxs)("span",{className:"text-zinc-300",children:['"',t.prompt,'"']})," —"," ",t.description]})]})}function u(){let[e,t]=(0,i.useState)("Marketing"),a=(0,i.useRef)(null),c=(0,s.Y)(a,{once:!0,amount:.1}),u=o.filter(t=>t.category===e);return(0,r.jsx)("section",{ref:a,className:"relative z-10 px-6 py-24 md:px-12",children:(0,r.jsx)(n.E.div,{className:"mx-auto max-w-6xl",variants:d,initial:"hidden",animate:c?"visible":"hidden",children:(0,r.jsxs)("div",{className:"mx-auto flex max-w-4xl flex-col items-center gap-10 lg:flex-row lg:items-center lg:gap-16",children:[(0,r.jsxs)(n.E.div,{className:"flex-shrink-0 text-center lg:w-[240px] lg:text-left",variants:f,children:[(0,r.jsx)("h2",{className:"mb-4 text-2xl font-bold text-white md:text-3xl",children:"See It In Action"}),(0,r.jsx)("p",{className:"text-base text-zinc-400 md:text-lg",children:"Before and after. Drag to compare."})]}),(0,r.jsxs)("div",{className:"flex w-full flex-1 flex-col",children:[(0,r.jsx)(n.E.div,{className:"mx-auto mb-4 flex w-full max-w-[420px] flex-wrap justify-center gap-2",variants:f,children:l.map(a=>{let i=e===a;return(0,r.jsx)(n.E.button,{onClick:()=>t(a),className:"rounded-full px-4 py-2 text-sm font-medium transition-all ".concat(i?"border-spark-lime/50 bg-spark-lime/10 text-spark-lime border":"border border-white/[0.08] bg-white/[0.03] text-zinc-400 hover:border-white/[0.15] hover:text-zinc-200"),whileHover:{scale:1.02},whileTap:{scale:.98},children:a},a)})}),(0,r.jsx)("div",{className:"mx-auto w-full max-w-[420px]",children:u.map((e,t)=>(0,r.jsx)(p,{showcase:e,isActive:!0},"".concat(e.category,"-").concat(t)))})]})]})})})}}}]);