k03.js

"use strict";
(self.webpackChunk_N_E = self.webpackChunk_N_E || []).push([[25], {
    2025: function(e, r, t) {
        t.r(r),
        t.d(r, {
            default: function() {
                return S
            }
        });
        var n = t(5893)
          , u = t(7294)
          , i = t(8016)
          , o = t(5029)
          , s = t(1314)
          , l = t(8212)
          , a = t(8889)
          , c = t(1163)
          , v = t(990)
          , f = t(6718);
        let d = (e,r)=>{
            let {viewport: t, size: n} = r
              , [i,o] = (0,
            u.useState)(null)
              , [s,l] = (0,
            u.useState)(null)
              , [a,c] = (0,
            u.useState)(null);
            return (0,
            u.useEffect)(()=>{
                if (!e)
                    return;
                let r = e.getBoundingClientRect()
                  , u = r.width / n.width * t.width
                  , i = r.height / n.height * t.height
                  , s = r.y + window.scrollY
                  , a = -(s / n.height) * t.height
                  , v = -i / 2 + t.height / 2
                  , f = -(r.x / n.width) * t.width
                  , d = u / 2 - t.width / 2;
                o(r),
                l({
                    x: d - f,
                    y: v + a
                }),
                c({
                    x: u,
                    y: i
                })
            }
            , [e, n, t]),
            {
                bounds: i,
                positions: s,
                scales: a
            }
        }
        ;
        var m = t(5626)
          , p = t(1609)
          , x = t.n(p);
        let h = {
            currentProject: {
                top: .15,
                right: .04
            },
            nextProject: {
                bottom: .2
            }
        }
          , g = function(e, r, t) {
            let n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0;
            return {
                targetScale: {
                    x: e,
                    y: r
                },
                targetPosition: {
                    y: t,
                    x: n
                }
            }
        };
        var y = e=>{
            let {positionScroll: r, scroll: t, viewport: n, size: u, type: i, isScrolling: o} = e
              , {width: s, height: l} = n;
            if ("currentProject" === i) {
                let e = .45 * s
                  , t = e / 1.6
                  , n = o ? r + .5 * l - .5 * t - h.currentProject.top * l : l / 2 - t / 2 - h.currentProject.top * l
                  , u = s / 2 - e / 2 - h.currentProject.right * s;
                return g(e, t, n, u)
            }
            if ("nextProject" === i) {
                let e = .45 * s
                  , n = e / 1.6
                  , i = n / 1.3
                  , a = o ? r - t.limit / u.height * l - .5 * l + .5 * i + h.nextProject.bottom * l : l / 2 - n / 2 + 200;
                return g(e / 1.3, i, a)
            }
        }
          , w = t(2911)
          , P = t(5769)
          , _ = t(9477)
          , j = t(1334)
          , V = e=>{
            let {index: r, project: t, projectImageRefs: i} = e
              , o = (0,
            m.Z)(t.coverImage).url()
              , [l,a] = (0,
            u.useState)(null)
              , p = i[r]
              , {viewport: h, size: g, ...V} = (0,
            w.z)()
              , {scroll: b, ...S} = (0,
            s.uW)()
              , {bounds: T, positions: C, scales: H} = d(p, {
                viewport: h,
                size: g
            })
              , z = (0,
            c.useRouter)()
              , k = x()(l)
              , E = !x()(l)
              , M = t.slug.current === (null == l ? void 0 : l.nextProjectSlug)
              , q = (0,
            P.m)(o)
              , I = (0,
            u.useRef)()
              , U = (0,
            u.useRef)()
              , L = (0,
            u.useRef)({
                current: 0,
                next: 0
            })
              , O = (0,
            u.useRef)(!1)
              , F = (0,
            u.useMemo)(()=>({
                uTime: {
                    value: 0
                },
                uTexture: {
                    value: null
                },
                uVelocity: {
                    value: 0
                },
                uViewportSizes: {
                    value: new _.Vector2(0,0)
                },
                uVisible: {
                    value: 0
                },
                uProgress: {
                    value: 0
                },
                uHover: {
                    value: 0
                },
                uHover2: {
                    value: 0
                }
            }), []);
            (0,
            u.useEffect)(()=>{
                F.uViewportSizes.value.set(h.width, h.height),
                F.uTexture.value = q
            }
            , [h, q, F]),
            (0,
            j.M4)("Project Image", {
                progress: {
                    value: F.uProgress.value,
                    min: 0,
                    max: 1,
                    step: .01,
                    onChange: e=>{
                        U.current.uniforms.uProgress.value = e
                    }
                }
            }, {
                collapsed: !0
            });
            let R = ()=>{
                v.p8.killTweensOf([U.current.uniforms.uHover, U.current.uniforms.uHover2]),
                v.p8.to(U.current.uniforms.uHover, {
                    value: 1,
                    duration: .2,
                    ease: "power2.out"
                }),
                v.p8.to(U.current.uniforms.uHover2, {
                    value: 1,
                    duration: 1,
                    ease: "power2.out"
                })
            }
              , D = ()=>{
                v.p8.killTweensOf([U.current.uniforms.uHover, U.current.uniforms.uHover2]),
                v.p8.to(U.current.uniforms.uHover, {
                    value: 0,
                    duration: 1
                }),
                v.p8.to(U.current.uniforms.uHover2, {
                    value: 0,
                    duration: .5
                })
            }
            ;
            (0,
            u.useEffect)(()=>{
                if (k && p)
                    return p.addEventListener("mouseenter", R),
                    p.addEventListener("mouseleave", D),
                    ()=>{
                        p.removeEventListener("mouseenter", R),
                        p.removeEventListener("mouseleave", D)
                    }
            }
            , [k, p]),
            (0,
            u.useEffect)(()=>{
                a(z.query)
            }
            , []);
            let G = (0,
            u.useCallback)(()=>{
                if (O.current)
                    return;
                let e = b.y / g.height * h.height;
                if (k && T) {
                    let r = C.y + e
                      , t = C.x;
                    I.current.position.x = t,
                    I.current.position.y = r,
                    I.current.scale.x = H.x,
                    I.current.scale.y = H.y,
                    U.current.uniforms.uVisible.value = 1
                } else if (E) {
                    if (M) {
                        let {targetScale: r, targetPosition: t} = y({
                            positionScroll: e,
                            scroll: b,
                            viewport: h,
                            size: g,
                            type: "nextProject",
                            isScrolling: !0
                        });
                        I.current.position.x = t.x,
                        I.current.position.y = t.y,
                        I.current.scale.y = r.y,
                        I.current.scale.x = r.x
                    } else {
                        let {targetScale: r, targetPosition: t} = y({
                            positionScroll: e,
                            scroll: b,
                            viewport: h,
                            size: g,
                            type: "currentProject",
                            isScrolling: !0
                        });
                        I.current.position.x = t.x,
                        I.current.position.y = t.y,
                        I.current.scale.x = r.x,
                        I.current.scale.y = r.y
                    }
                }
            }
            , [l, k, E, T, h])
              , Z = ()=>{
                k ? L.current.next = S.__lenis.velocity : E && (L.current.next = 0),
                L.current.current = (0,
                f.Z)(L.current.current, L.current.next, .1)
            }
            ;
            (0,
            w.A)((e,r)=>{
                G(),
                C && H && T && (O.current || Z(),
                U.current && (U.current.uniforms.uTime.value += r,
                U.current.uniforms.uVelocity.value = L.current.current))
            }
            );
            let N = ()=>{
                O.current = !0,
                L.current.next = 0,
                v.p8.killTweensOf(U.current.uniforms.uVisible),
                v.p8.to(U.current.uniforms.uVisible, {
                    value: 0,
                    duration: .8,
                    ease: "power1.in",
                    onStart: ()=>{
                        a(z.query)
                    }
                    ,
                    onComplete: ()=>{
                        O.current = !1
                    }
                })
            }
              , W = ()=>{
                O.current = !0,
                L.current.next = 0;
                let {targetScale: e, targetPosition: r} = y({
                    viewport: h,
                    type: "currentProject"
                });
                v.p8.to(I.current.position, {
                    x: r.x,
                    y: r.y,
                    duration: 1.7,
                    ease: "power2.inOut",
                    onStart: ()=>{
                        a(z.query),
                        S.__lenis.isLocked = !0
                    }
                }),
                v.p8.to(I.current.scale, {
                    x: e.x,
                    y: e.y,
                    duration: 2.2,
                    ease: "power2.inOut",
                    onComplete: ()=>{
                        O.current = !1,
                        S.__lenis.isLocked = !1
                    }
                }),
                v.p8.killTweensOf([U.current.uniforms.uVisible, U.current.uniforms.uHover, U.current.uniforms.uHover2]);
                let t = v.p8.timeline();
                t.to(U.current.uniforms.uProgress, {
                    value: 1,
                    duration: 1,
                    ease: "power2.in"
                }),
                t.to(U.current.uniforms.uProgress, {
                    value: 0,
                    duration: 2.2,
                    delay: .5
                }),
                v.p8.set(U.current.uniforms.uVisible, {
                    value: 1
                }),
                v.p8.to(U.current.uniforms.uHover, {
                    value: 0,
                    duration: 1,
                    delay: .2
                }),
                v.p8.to(U.current.uniforms.uHover2, {
                    value: 0,
                    duration: 2,
                    delay: .2
                })
            }
              , Y = ()=>{
                O.current = !0,
                L.current.next = 0;
                let e = v.p8.timeline();
                v.p8.killTweensOf(U.current.uniforms.uVisible),
                e.to(U.current.uniforms.uVisible, {
                    value: 0,
                    duration: .8,
                    ease: "power1.in",
                    onStart: ()=>{
                        a(z.query)
                    }
                    ,
                    onComplete: ()=>{
                        O.current = !1
                    }
                }),
                e.to(U.current.uniforms.uVisible, {
                    delay: 1,
                    value: 1
                })
            }
              , A = ()=>{
                O.current = !0;
                let e = v.p8.timeline();
                e.to(U.current.uniforms.uVisible, {
                    value: 0,
                    duration: .5,
                    onStart: ()=>{
                        a(z.query)
                    }
                    ,
                    onComplete: ()=>{
                        O.current = !1
                    }
                })
            }
              , B = e=>{
                e.pathname.includes("project") ? t.slug.current === e.query.slug ? W() : t.slug.current === e.query.nextProjectSlug ? Y() : N() : A()
            }
            ;
            return (0,
            u.useEffect)(()=>{
                B(z)
            }
            , [z]),
            (0,
            n.jsxs)("mesh", {
                ref: I,
                scale: 0,
                renderOrder: 1,
                children: [(0,
                n.jsx)("planeGeometry", {
                    args: [1, 1, 80, 80]
                }), (0,
                n.jsx)("shaderMaterial", {
                    depthTest: !1,
                    ref: U,
                    uniforms: F,
                    vertexShader: "#define GLSLIFY 1\nuniform float uVelocity;\nuniform float uVisible;\nuniform float uProgress;\nuniform float uTime;\nuniform vec2 uViewportSizes;\n\nvarying vec2 vUv;\n\nfloat M_PI = 3.1415926535897932384626433832795;\n\nfloat circle(vec2 uv, vec2 disc_center, float disc_radius, float border_size) {\n        uv -= disc_center;\n        float dist = sqrt(dot(uv, uv));\n        return smoothstep(disc_radius+border_size, disc_radius-border_size, dist);\n}\n\nvoid main()\n{\n	vec3 newPosition = position;\n\n	// Circle  Waves\n	float circleTest = circle(uv, vec2(0.5), 1. * uProgress - 0.3, 0.3);\n	float circleStroke = sin(circleTest * 2. * M_PI) * 0.1;\n\n	// Simple waves\n	float freq = 3.5;\n	float speed = 3.;\n	float amp = .2;\n	float waves = sin(uv.y * freq + uTime * speed) * amp * uProgress;\n\n	// Crop\n	newPosition.y = newPosition.y * uVisible - uVisible * 0.5;\n	newPosition.y += 0.5;\n\n  	vec4 finalPosition = modelViewMatrix * vec4(newPosition, 1.0);\n	finalPosition.z += waves;\n	// Curve Distort\n	float ampCurve = 0.006;\n	finalPosition.z += sin(finalPosition.y / uViewportSizes.y  * M_PI + M_PI / 2.0) * abs(uVelocity * ampCurve);\n\n    gl_Position = projectionMatrix * finalPosition;\n\n	vUv = uv;\n}",
                    fragmentShader: "#define GLSLIFY 1\nuniform float uVelocity;\nuniform float uProgress;\nuniform float uVisible;\nuniform float uTime;\nuniform float uHover;\nuniform float uHover2;\nuniform sampler2D uTexture;\n\nvarying vec2 vUv;\n\nfloat circleSDF(vec2 st) {\n    return length(st-.5)*2.;\n}\n\nfloat aastep(float threshold, float value) {\n    #ifdef GL_OES_standard_derivatives\n    float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value)));\n    return smoothstep(threshold-afwidth, threshold+afwidth, value);\n    #else\n    return step(threshold, value);\n    #endif\n}\n\nfloat stroke(float x, float size, float w) {\n    float d = aastep(size, x+w*.5) - aastep(size, x-w*.5);\n    return clamp(d, 0., 1.);\n}\n\nfloat M_PI = 3.1415926535897932384626433832795;\n\nfloat circle(vec2 uv, vec2 disc_center, float disc_radius, float border_size) {\n        uv -= disc_center;\n        float dist = sqrt(dot(uv, uv));\n        return smoothstep(disc_radius+border_size, disc_radius-border_size, dist);\n}\n\nvoid main()	{\n	vec3 color = vec3(1., 0., 0.);\n	vec2 newUV = vUv; \n\n	// Circle waves\n	float circleTest = circle(vUv, vec2(0.5), 1. * uProgress - 0.3, 0.3);\n	float circleStroke = sin(circleTest * 2. * M_PI);\n\n	// Simple waves\n	float split = smoothstep(uProgress * 1.1, uProgress + 0.1, vUv.y);\n	float waves = sin(vUv.y * 10. + uTime * 10.);\n	color = vec3(split * waves);\n\n	// newUV.y += uVelocity * 0.002;\n	// newUV.x *= uVisible;\n	newUV.y *= uVisible;\n	float tempValue = 1.;\n	vec3 texture = texture2D(uTexture, newUV).rgb;\n	vec3 negativeTexture = 1. - texture;\n	vec3 finalTexture = vec3(0.); \n	finalTexture.r = mix(texture.r, negativeTexture.r, uHover);\n	finalTexture.g = mix(texture.g, negativeTexture.g, uHover2);\n	finalTexture.b = mix(texture.b, negativeTexture.b, uHover2);\n\n    gl_FragColor = vec4(finalTexture, 1.);\n    // gl_FragColor = vec4(color, 1.);\n}",
                    transparent: !0
                }, "rnd" + Math.random())]
            })
        }
          , b = function(e) {
            let {projects: r} = e
              , {isProjectImagesVisible: t} = (0,
            u.useContext)(i._)
              , [o,s] = (0,
            u.useState)([]);
            return ((0,
            u.useEffect)(()=>{
                if (!t)
                    return;
                let e = document.querySelectorAll(".projectImgContainer");
                s(e)
            }
            , [t]),
            r) ? r.map((e,t)=>(0,
            n.jsx)(V, {
                index: t,
                project: e,
                allProjects: r,
                projectImageRefs: o
            }, e._id)) : null
        }
          , S = function(e) {
            let {mainRef: r, projects: t, isHomePage: c} = e
              , {is3d: v} = (0,
            u.useContext)(i._);
            return v ? (0,
            n.jsxs)(n.Fragment, {
                children: [(0,
                n.jsx)("div", {
                    className: "canvasProjects",
                    children: (0,
                    n.jsx)(o.Xz, {
                        eventSource: r,
                        eventPrefix: "client",
                        children: (0,
                        n.jsx)(b, {
                            projects: t
                        })
                    })
                }), (0,
                n.jsx)(s.sc, {
                    eventSource: r,
                    eventPrefix: "client",
                    scaleMultiplier: .01,
                    camera: {
                        fov: 33,
                        near: .1,
                        far: 300
                    },
                    shadows: !0,
                    style: {
                        pointerEvents: "none",
                        minWidth: "100vw",
                        minHeight: "100vh"
                    },
                    children: (0,
                    n.jsxs)("group", {
                        visible: c,
                        children: [(0,
                        n.jsx)(l.Z, {}), (0,
                        n.jsx)(a.Z, {})]
                    })
                })]
            }) : null
        }
    }
}]);