Skip to content

Instantly share code, notes, and snippets.

@hatsumatsu

hatsumatsu/k03.js

Created December 11, 2023 10:41
Show Gist options
  • Save hatsumatsu/7a1405b4d770100957bc63c9450671a5 to your computer and use it in GitHub Desktop.
Save hatsumatsu/7a1405b4d770100957bc63c9450671a5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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
}
}
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment