1 line
11 KiB
JavaScript
1 line
11 KiB
JavaScript
try{!function(){var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},a=(new e.Error).stack;a&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[a]="38158b1e-b3a4-4694-a15c-c5cc0e7b1071",e._sentryDebugIdIdentifier="sentry-dbid-38158b1e-b3a4-4694-a15c-c5cc0e7b1071")}()}catch(e){}(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8974],{16175:(e,a,t)=>{"use strict";t.d(a,{A:()=>i});var n=t(95155),l=t(1633),s=t(52927);function i(e){let{children:a,className:t,variants:i=s.tE}=e;return(0,n.jsx)(l.P.div,{className:t,variants:i,children:a})}},52927:(e,a,t)=>{"use strict";t.d(a,{bK:()=>l,tE:()=>n});let n={hidden:{opacity:0,y:24,filter:"blur(2px)"},show:{opacity:1,y:0,filter:"blur(0px)",transition:{duration:.6,ease:[.2,.8,.2,1]}}},l=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.12;return{hidden:{},show:{transition:{delayChildren:e,staggerChildren:a}}}}},59434:(e,a,t)=>{"use strict";t.d(a,{cn:()=>s});var n=t(52596),l=t(39688);function s(){for(var e=arguments.length,a=Array(e),t=0;t<e;t++)a[t]=arguments[t];return(0,l.QP)((0,n.$)(a))}},61537:(e,a,t)=>{"use strict";t.d(a,{A:()=>i});var n=t(95155),l=t(1633),s=t(52927);function i(e){let{children:a,className:t,delay:i=0,stagger:r=.12,initial:o="hidden",variants:c}=e;return(0,n.jsx)(l.P.section,{className:t,variants:null!=c?c:(0,s.bK)(i,r),initial:o,whileInView:"show",viewport:{once:!0,amount:.15,margin:"0px 0px -10% 0px"},children:a})}},77334:(e,a,t)=>{"use strict";t.r(a),t.d(a,{default:()=>v});var n=t(95155),l=t(12115),s=t(80131),i=t(76231),r=t(59434),o=t(46896),c=t(1633),d=t(60760),u=t(21463);let m=e=>{let{firstImage:a="",secondImage:t="",className:s,firstImageClassName:i,secondImageClassname:o,initialSliderPercentage:m=50,slideMode:p="hover",showHandlebar:h=!0,autoplay:b=!1,autoplayDuration:x=5e3,aspectRatio:v="16:9"}=e,[y,g]=(0,l.useState)(m),[w,j]=(0,l.useState)(!1),N=(0,l.useRef)(null),[k,z]=(0,l.useState)(!1),C=(0,l.useRef)(null),_=(0,l.useCallback)(()=>{if(!b)return;let e=Date.now(),a=()=>{let t=(Date.now()-e)%(2*x)/x;g(t<=1?100*t:(2-t)*100),C.current=setTimeout(a,16)};a()},[b,x]),F=(0,l.useCallback)(()=>{C.current&&(clearTimeout(C.current),C.current=null)},[]);(0,l.useEffect)(()=>(_(),()=>F()),[_,F]);let I=(0,l.useCallback)(e=>{"drag"===p&&j(!0)},[p]),A=(0,l.useCallback)(()=>{"drag"===p&&j(!1)},[p]),P=(0,l.useCallback)(e=>{if(N.current&&("hover"===p||"drag"===p&&w)){let a=N.current.getBoundingClientRect(),t=(e-a.left)/a.width*100;requestAnimationFrame(()=>{g(Math.max(0,Math.min(100,t)))})}},[p,w]),S=(0,l.useCallback)(e=>I(e.clientX),[I]),E=(0,l.useCallback)(()=>A(),[A]),M=(0,l.useCallback)(e=>P(e.clientX),[P]),D=(0,l.useCallback)(e=>{b||I(e.touches[0].clientX)},[I,b]),q=(0,l.useCallback)(()=>{b||A()},[A,b]),T=(0,l.useCallback)(e=>{b||P(e.touches[0].clientX)},[P,b]);return(0,n.jsxs)("div",{ref:N,className:(0,r.cn)("w-full",s),style:{position:"relative",cursor:"drag"===p?"grab":"col-resize"},onMouseMove:M,onMouseLeave:function(){z(!1),"hover"===p&&g(m),"drag"===p&&j(!1),_()},onMouseEnter:function(){z(!0),F()},onMouseDown:S,onMouseUp:E,onTouchStart:D,onTouchEnd:q,onTouchMove:T,children:[(0,n.jsx)(d.N,{initial:!1,children:(0,n.jsxs)(c.P.div,{className:"h-full w-px absolute top-0 m-auto z-30 bg-gradient-to-b from-transparent from-[5%] to-[95%] via-indigo-500 to-transparent",style:{left:"".concat(y,"%"),top:"0",zIndex:40},transition:{duration:0},children:[(0,n.jsx)("div",{className:"w-36 h-full [mask-image:radial-gradient(100px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-indigo-400 via-transparent to-transparent z-20 opacity-50"}),(0,n.jsx)("div",{className:"w-10 h-1/2 [mask-image:radial-gradient(50px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-cyan-100 via-transparent to-transparent z-10 opacity-100"}),(0,n.jsx)("div",{className:"w-10 h-3/4 top-1/2 -translate-y-1/2 absolute -right-10 [mask-image:radial-gradient(100px_at_left,white,transparent)]",children:(0,n.jsx)(f,{background:"transparent",minSize:.4,maxSize:1,particleDensity:0,className:"w-full h-full",particleColor:"#FFFFFF"})}),h&&(0,n.jsx)("div",{className:"h-5 w-5 rounded-md top-1/2 -translate-y-1/2 bg-white z-30 -right-2.5 absolute flex items-center justify-center shadow-[0px_-1px_0px_0px_#FFFFFF40]",children:(0,n.jsx)(u.A,{className:"h-4 w-4 text-black"})})]})}),(0,n.jsx)("div",{className:"overflow-hidden w-full h-full relative z-20 pointer-events-none",children:(0,n.jsx)(d.N,{initial:!1,children:a?(0,n.jsx)(c.P.div,{className:(0,r.cn)("absolute inset-0 z-20 rounded-2xl shrink-0 w-full h-full select-none overflow-hidden",i),style:{clipPath:"inset(0 ".concat(100-y,"% 0 0)")},transition:{duration:0},children:(0,n.jsx)("img",{alt:"first image",src:a,className:(0,r.cn)("absolute inset-0 z-20 rounded-2xl shrink-0 w-full h-full select-none",i),draggable:!1})}):null})}),(0,n.jsx)(d.N,{initial:!1,children:t?(0,n.jsx)(c.P.img,{className:(0,r.cn)("absolute top-0 left-0 z-[19] rounded-2xl w-full h-full select-none",o),alt:"second image",src:t,draggable:!1}):null})]})},f=l.memo(e=>{let{id:a,className:t,background:d,minSize:u,maxSize:m,speed:f,particleColor:p,particleDensity:h}=e,[b,x]=(0,l.useState)(!1);(0,l.useEffect)(()=>{(0,s.iC)(async e=>{await (0,i.m)(e)}).then(()=>{x(!0)})},[]);let v=(0,o.s)(),y=async e=>{e&&v.start({opacity:1,transition:{duration:1}})},g=(0,l.useId)();return(0,n.jsx)(c.P.div,{animate:v,className:(0,r.cn)("opacity-0",t),children:b&&(0,n.jsx)(s.Ay,{id:a||g,className:(0,r.cn)("h-full w-full"),particlesLoaded:y,options:{background:{color:{value:d||"#0d47a1"}},fullScreen:{enable:!1,zIndex:1},fpsLimit:120,interactivity:{events:{onClick:{enable:!0,mode:"push"},onHover:{enable:!1,mode:"repulse"},resize:!0},modes:{push:{quantity:4},repulse:{distance:200,duration:.4}}},particles:{bounce:{horizontal:{value:1},vertical:{value:1}},collisions:{absorb:{speed:2},bounce:{horizontal:{value:1},vertical:{value:1}},enable:!1,maxSpeed:50,mode:"bounce",overlap:{enable:!0,retries:0}},color:{value:p||"#ffffff",animation:{h:{count:0,enable:!1,speed:1,decay:0,delay:0,sync:!0,offset:0},s:{count:0,enable:!1,speed:1,decay:0,delay:0,sync:!0,offset:0},l:{count:0,enable:!1,speed:1,decay:0,delay:0,sync:!0,offset:0}}},effect:{close:!0,fill:!0,options:{},type:{}},groups:{},move:{angle:{offset:0,value:90},attract:{distance:200,enable:!1,rotate:{x:3e3,y:3e3}},center:{x:50,y:50,mode:"percent",radius:0},decay:0,distance:{},direction:"none",drift:0,enable:!0,gravity:{acceleration:9.81,enable:!1,inverse:!1,maxSpeed:50},path:{clamp:!0,delay:{value:0},enable:!1,options:{}},outModes:{default:"out"},random:!1,size:!1,speed:{min:.1,max:1},spin:{acceleration:0,enable:!1},straight:!1,trail:{enable:!1,length:10,fill:{}},vibrate:!1,warp:!1},number:{density:{enable:!0,width:400,height:400},limit:{mode:"delete",value:0},value:h||120},opacity:{value:{min:.1,max:1},animation:{count:0,enable:!0,speed:f||4,decay:0,delay:0,sync:!1,mode:"auto",startValue:"random",destroy:"none"}},reduceDuplicates:!1,shadow:{blur:0,color:{value:"#000"},enable:!1,offset:{x:0,y:0}},shape:{close:!0,fill:!0,options:{},type:"circle"},size:{value:{min:u||1,max:m||3},animation:{count:0,enable:!1,speed:5,decay:0,delay:0,sync:!1,mode:"auto",startValue:"random",destroy:"none"}},stroke:{width:0},zIndex:{value:0,opacityRate:1,sizeRate:1,velocityRate:1},destroy:{bounds:{},mode:"none",split:{count:1,factor:{value:3},rate:{value:{min:4,max:9}},sizeOffset:!0}},roll:{darken:{enable:!1,value:0},enable:!1,enlighten:{enable:!1,value:0},mode:"vertical",speed:25},tilt:{value:0,animation:{enable:!1,speed:0,decay:0,sync:!1},direction:"clockwise",enable:!1},twinkle:{lines:{enable:!1,frequency:.05,opacity:1},particles:{enable:!1,frequency:.05,opacity:1}},wobble:{distance:5,enable:!1,speed:{angle:50,move:10}},life:{count:0,delay:{value:0,sync:!1},duration:{value:0,sync:!1}},rotate:{value:0,animation:{enable:!1,speed:0,decay:0,sync:!1},direction:"clockwise",path:!1},orbit:{animation:{count:0,enable:!1,speed:1,decay:0,delay:0,sync:!1},enable:!1,opacity:1,rotation:{value:45},width:1},links:{blink:!1,color:{value:"#fff"},consent:!1,distance:100,enable:!1,frequency:1,opacity:1,shadow:{blur:5,color:{value:"#000"},enable:!1},triangles:{enable:!1,frequency:1},width:1,warp:!1},repulse:{value:0,enabled:!1,distance:1,duration:1,factor:1,speed:1}},detectRetina:!0}})})});var p=t(61537),h=t(16175),b=t(32810);function x(e){let{children:a}=e;return(0,l.useEffect)(()=>{let e=new b.A({lerp:.1,duration:1.5,smoothTouch:!0});return requestAnimationFrame(function a(t){e.raf(t),requestAnimationFrame(a)}),()=>{e.destroy()}},[]),(0,n.jsx)(n.Fragment,{children:a})}function v(){return(0,n.jsx)(x,{children:(0,n.jsxs)("main",{className:"min-h-screen",children:[(0,n.jsxs)("section",{className:"relative h-screen overflow-hidden",children:[(0,n.jsxs)("div",{className:"absolute inset-0",children:[(0,n.jsx)("video",{"data-autoplay":!0,autoPlay:!0,loop:!0,muted:!0,playsInline:!0,poster:"/images/Splash.jpg",preload:"metadata",className:"w-full h-full object-cover",children:(0,n.jsx)("source",{src:"/videos/reel.mp4",type:"video/mp4"})}),(0,n.jsx)("div",{className:"absolute inset-0 bg-black/50"})]}),(0,n.jsx)("div",{className:"relative z-10 h-full flex items-center justify-center",children:(0,n.jsxs)("div",{className:"max-w-3xl mx-auto text-center",children:[(0,n.jsx)(c.P.div,{initial:{opacity:0,y:30},animate:{opacity:1,y:0},transition:{duration:1,ease:"easeOut",delay:.2},children:(0,n.jsx)("h1",{className:"text-4xl sm:text-6xl md:text-8xl font-bold mb-6 md:mb-8 tracking-tight",children:(0,n.jsx)("span",{className:"bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80",children:"Biohazard VFX"})})}),(0,n.jsx)(c.P.div,{initial:{opacity:0,y:30},animate:{opacity:1,y:0},transition:{duration:1,ease:"easeOut",delay:.4},children:(0,n.jsx)("p",{className:"text-base sm:text-lg md:text-xl text-white/40 mb-8 leading-relaxed font-light tracking-wide max-w-xl mx-auto px-4",children:"Innovative VFX Studio."})})]})})]}),(0,n.jsx)("section",{"aria-label":"Before and After",className:"py-8 md:py-12",children:(0,n.jsx)("div",{className:"mx-80 max-w-9xl px-4",children:(0,n.jsx)(p.A,{children:(0,n.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center",children:[(0,n.jsxs)(h.A,{className:"order-2 md:order-1",children:[(0,n.jsx)("h2",{className:"text-3xl md:text-4xl font-bold ",children:"Before / After"}),(0,n.jsx)("p",{className:"text-2xl text-muted-foreground",children:"Biohazard VFX is a coordinated team of visual researchers specialized in crafting exceptional commercials music videos, tv shows and movies."})]}),(0,n.jsx)(h.A,{className:"order-1 md:order-2",children:(0,n.jsx)("div",{className:"w-full aspect-video md:aspect-[16/9]",children:(0,n.jsx)(m,{firstImage:"/images/beforeafter/Before.jpg",secondImage:"/images/beforeafter/After.jpg",slideMode:"drag",showHandlebar:!0,initialSliderPercentage:55,className:"w-full h-full rounded-2xl",firstImageClassName:"object-cover",secondImageClassname:"object-cover"})})})]})})})})]})})}},94938:(e,a,t)=>{Promise.resolve().then(t.bind(t,77334))}},e=>{e.O(0,[1633,4277,3878,4850,8441,2691,7358],()=>e(e.s=94938)),_N_E=e.O()}]); |