4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T19e8,'use client' import React, { useEffect, useRef, useState } from 'react' import { AnimatePresence, motion } from 'motion/react' import { categories, ease, galleryImages } from '../lib/data' import { CustomCursor } from './custom-cursor' import { GlassDock } from './glass-dock' import { HorizontalGallery } from './horizontal-gallery' import { LightboxModal } from './lightbox-modal' import { VerticalGallery } from './vertical-gallery' import { LensWebGLLayer } from './lens-webgl-layer' import { useCustomCursor } from '../hooks/use-custom-cursor' import { useHorizontalDrag } from '../hooks/use-horizontal-drag' import { useLightbox } from '../hooks/use-lightbox' export function ClientPage() { const [loading, setLoading] = useState(true) const [mode, setMode] = useState<'vertical' | 'horizontal'>('vertical') const [layoutAnimating, setLayoutAnimating] = useState(false) const [headerHidden, setHeaderHidden] = useState(false) const [categoryIndex, setCategoryIndex] = useState(0) const [hoveredIndex, setHoveredIndex] = useState(null) const verticalRef = useRef(null) const lastScrollTop = useRef(0) const { cursorActive, setCursorActive, cursorLabel, setCursorLabel, cursorX, cursorY } = useCustomCursor() const { horizontalRef, horizontalButtonRefs, horizontalTarget, onHorizontalWheel, beginDrag, endDrag, cancelDrag } = useHorizontalDrag({ active: mode === 'horizontal', onOpenImage: (idx) => openImage(idx), }) const { lightboxIndex, fixedPhase, fixedDirection, fixedNavIdle, fixedBackdropRef, fixedFrameRef, imageButtonRefs, openImage, closeImage, moveImage, scheduleFixedIdle, } = useLightbox({ mode, verticalRef, horizontalRef, horizontalButtonRefs, horizontalTarget, onCursorStateChange: (active, label) => { setCursorActive(active) setCursorLabel(label) }, }) const currentCategory = categories[categoryIndex] ?? categories[0] const isFixed = lightboxIndex !== null const navPreviewIndex = hoveredIndex ?? lightboxIndex const navImage = navPreviewIndex === null ? currentCategory.thumb : galleryImages[navPreviewIndex] const navSubLabel = isFixed ? 'Gallery' : hoveredIndex === null ? 'Category' : 'Details' const navTitle = isFixed ? `${(lightboxIndex ?? 0) + 1} — ${galleryImages.length}` : hoveredIndex === null ? 'Details' : 'Gallery' useEffect(() => { const timer = window.setTimeout(() => setLoading(false), 1050) return () => window.clearTimeout(timer) }, []) const toggleMode = () => { if (layoutAnimating) return setLayoutAnimating(true) window.setTimeout(() => { setMode((current) => (current === 'vertical' ? 'horizontal' : 'vertical')) window.setTimeout(() => setLayoutAnimating(false), 80) }, 600) } const onVerticalScroll = () => { const element = verticalRef.current if (!element) return const current = element.scrollTop setHeaderHidden(current > 40 && current > lastScrollTop.current) lastScrollTop.current = current } const handleImageHover = (active: boolean, index: number) => { setCursorActive(active) setCursorLabel('Zoom') if (fixedPhase !== 'closed') return if (active) { setHoveredIndex(index) } else { window.setTimeout(() => { setHoveredIndex((current) => (current === index ? null : current)) }, 160) } } return (

{mode === 'vertical' ? ( { imageButtonRefs.current[idx] = node }} lightboxIndex={lightboxIndex} onScroll={onVerticalScroll} onOpenImage={openImage} onHover={handleImageHover} /> ) : ( { horizontalButtonRefs.current[idx] = node }} lightboxIndex={lightboxIndex} onWheel={onHorizontalWheel} onPointerDown={beginDrag} onPointerUp={endDrag} onPointerCancel={cancelDrag} onOpenImage={openImage} onHover={handleImageHover} /> )}

{ setCursorActive(active) if (label) setCursorLabel(label) scheduleFixedIdle() }} /> {loading && (

Immersive Lens

Loading WebGL Scene

)}

) } 4e:Tc26,'use client' import React, { useRef, type RefObject } from 'react' import { motion } from 'motion/react' import { galleryImageSizes } from './lens-webgl-layer' import { ease } from '../lib/data' export interface GalleryImageProps { index: number scrollRef: RefObject onOpen: () => void onHover: (active: boolean, index: number) => void registerRef: (node: HTMLButtonElement | null, index: number) => void isFixed: boolean } export function GalleryImage({ index, scrollRef, onOpen, onHover, registerRef, isFixed }: GalleryImageProps) { const targetRef = useRef(null) const sourceSize = galleryImageSizes[index] ?? [2560, 1707] return ( { targetRef.current = node registerRef(node, index) }} type="button" onClick={onOpen} onMouseEnter={() => onHover(true, index)} onMouseLeave={() => onHover(false, index)} initial={{ opacity: 0, y: 72, filter: 'blur(8px)' }} whileInView={{ opacity: 1, y: 0, filter: 'blur(0px)' }} viewport={{ root: scrollRef, once: true, amount: 0.08 }} transition={{ duration: 1.05, ease }} animate={{ opacity: isFixed ? 0 : 1 }} style={{ aspectRatio: `${sourceSize[0]} / ${sourceSize[1]}` }} className="group relative block w-full cursor-zoom-in bg-transparent" > {`Work ${String(index + 1).padStart(2, '0')}`} ) } export interface VerticalGalleryProps { scrollRef: RefObject onScroll: () => void images: readonly string[] lightboxIndex: number | null onOpenImage: (index: number) => void registerRef: (node: HTMLButtonElement | null, index: number) => void onHover: (active: boolean, index: number) => void } export function VerticalGallery({ scrollRef, onScroll, images, lightboxIndex, onOpenImage, registerRef, onHover, }: VerticalGalleryProps) { return (

{images.map((src, index) => ( onOpenImage(index)} registerRef={registerRef} isFixed={lightboxIndex === index} onHover={onHover} /> ))}

) } 4f:T9f5,'use client' /* eslint-disable @next/next/no-img-element */ import React, { type PointerEvent as ReactPointerEvent, type RefObject, type WheelEvent as ReactWheelEvent, } from 'react' import { motion } from 'motion/react' import { ease } from '../lib/data' export interface HorizontalGalleryProps { horizontalRef: RefObject images: readonly string[] lightboxIndex: number | null onWheel: (event: ReactWheelEvent) => void onPointerDown: (event: ReactPointerEvent) => void onPointerUp: (event: ReactPointerEvent) => void onPointerCancel: (event: ReactPointerEvent) => void registerRef: (node: HTMLButtonElement | null, index: number) => void onOpenImage: (index: number) => void onHover: (active: boolean, index: number) => void } export function HorizontalGallery({ horizontalRef, images, lightboxIndex, onWheel, onPointerDown, onPointerUp, onPointerCancel, registerRef, onOpenImage, onHover, }: HorizontalGalleryProps) { return (

{images.map((src, index) => { return ( registerRef(node, index)} type="button" onClick={() => onOpenImage(index)} onMouseEnter={() => onHover(true, index)} onMouseLeave={() => onHover(false, index)} initial={{ opacity: 0, x: 40 }} animate={{ opacity: lightboxIndex === index ? 0 : 1, x: 0 }} transition={{ duration: 0.8, ease }} className="group relative mr-[clamp(24px,4vw,60px)] block shrink-0 cursor-zoom-in bg-transparent" style={{ width: 'clamp(280px, 38vw, 560px)', aspectRatio: '16 / 10', }} > {`Work ${String(index + 1).padStart(2, '0')}`} ) })}

) } 50:T23cc,'use client' /* eslint-disable @next/next/no-img-element */ import React from 'react' import { AnimatePresence, motion } from 'motion/react' import { ease, glass } from '../lib/data' export function GlassSheen() { return ( <> ) } export interface GlassDockProps { fixedNavIdle: boolean isFixed: boolean lightboxIndex: number | null hoveredIndex: number | null mode: 'vertical' | 'horizontal' totalImages: number fixedDirection: number navImage: string navSubLabel: string navTitle: string onClose: () => void onOpenImage: (index: number) => void onToggleMode: () => void onMoveImage: (direction: number) => void } export function GlassDock({ fixedNavIdle, isFixed, lightboxIndex, hoveredIndex, mode, totalImages, fixedDirection, navImage, navSubLabel, navTitle, onClose, onOpenImage, onToggleMode, onMoveImage, }: GlassDockProps) { return (

{hoveredIndex !== null && !isFixed && ( )}

) } 51:Tb07,'use client' /* eslint-disable @next/next/no-img-element */ import React, { type RefObject } from 'react' import { AnimatePresence, motion } from 'motion/react' export interface LightboxModalProps { lightboxIndex: number | null fixedDirection: number images: readonly string[] fixedBackdropRef: RefObject fixedFrameRef: RefObject onClose: () => void onMove: (direction: number) => void onHoverControl: (active: boolean, label?: string) => void } export function LightboxModal({ lightboxIndex, fixedDirection, images, fixedBackdropRef, fixedFrameRef, onClose, onMove, onHoverControl, }: LightboxModalProps) { return ( {lightboxIndex !== null && (

)} ) } 52:T458,'use client' import React from 'react' import { motion, type MotionValue } from 'motion/react' import { ease, glass } from '../lib/data' export interface CustomCursorProps { cursorX: MotionValue cursorY: MotionValue cursorActive: boolean cursorLabel: string } export function CustomCursor({ cursorX, cursorY, cursorActive, cursorLabel }: CustomCursorProps) { return ( ) } 53:T538d,'use client' import gsap from 'gsap' import { useEffect, useRef, type RefObject } from 'react' import { ClampToEdgeWrapping, Color, LinearFilter, LinearMipmapLinearFilter, Mesh, PerspectiveCamera, PlaneGeometry, Scene, ShaderMaterial, SRGBColorSpace, Texture, TextureLoader, Vector2, Vector3, WebGLRenderer, } from 'three' const workImageData = [ { colors: ['#F0E6EB', '#B05A49', '#E9C88F', '#30334A'], size: [2560, 1791] }, { colors: ['#8FAAD7', '#B0CDF2', '#D4ECFC', '#7089B6'], size: [2560, 1707] }, { colors: ['#D0AE93', '#FAEDCE', '#D5CDCA', '#8C7874'], size: [2560, 1708] }, { colors: ['#EDF5F8', '#C8D5DA', '#2A2728', '#B6AAB0'], size: [2560, 1707] }, { colors: ['#EDEDEE', '#332D2D', '#CDB7AC', '#534B4B'], size: [2560, 1707] }, { colors: ['#FAF7EE', '#EBCA94', '#D5D0CF', '#CFAA78'], size: [2560, 1708] }, { colors: ['#524F4A', '#75706A', '#979287', '#B6B3A8'], size: [2560, 1708] }, { colors: ['#4D4C48', '#757167', '#959288', '#B7B3A7'], size: [2560, 1708] }, { colors: ['#4D4B46', '#D8D3C8', '#777066', '#B9B2A7'], size: [2560, 1707] }, { colors: ['#8999A7', '#F3EACF', '#4F4C34', '#D0C9B2'], size: [2048, 2560] }, { colors: ['#F3FBFE', '#B7C6D3', '#59564D', '#ECD8B5'], size: [2560, 1708] }, { colors: ['#D3E5F0', '#AFC8DC', '#7193B0', '#B4CFE6'], size: [2560, 1708] }, { colors: ['#EDEDEE', '#CFD0D2', '#B0B2B1', '#B78D16'], size: [2560, 1707] }, { colors: ['#D0C8B6', '#B7AA94', '#988569', '#E8E5D8'], size: [2560, 1708] }, { colors: ['#E8EBEB', '#B5B6AC', '#4E4C4A', '#727268'], size: [2560, 1708] }, { colors: ['#D4D4CD', '#B5B5AC', '#322F2D', '#91928F'], size: [2560, 1708] }, { colors: ['#4E453A', '#D0D0CF', '#726854', '#B4B1AD'], size: [2560, 1707] }, { colors: ['#F4F4F4', '#D6D1CC', '#CDD28E', '#AAB370'], size: [2560, 1708] }, { colors: ['#F5F5F2', '#AD9271', '#6C4E34', '#D4CBB3'], size: [2560, 1707] }, { colors: ['#FCFAEF', '#E9D7AF', '#301308', '#D2B88B'], size: [2560, 1707] }, { colors: ['#B2906C', '#916E4F', '#704B34', '#D1B48D'], size: [2560, 1707] }, { colors: ['#F6F4F2', '#DACFC9', '#8E786B', '#AE988C'], size: [2560, 1440] }, { colors: ['#FAF9F6', '#736B67', '#554F4D', '#AC968B'], size: [2560, 1708] }, { colors: ['#020508', '#192835', '#4C6579', '#324657'], size: [2560, 1707] }, { colors: ['#EAEBF0', '#2E2E36', '#99AAB6', '#75868F'], size: [2560, 1706] }, { colors: ['#E9E9D4', '#CFCEB2', '#282A2C', '#B1AF91'], size: [2560, 1708] }, { colors: ['#F5F3EF', '#DAD6CB', '#D1B58F', '#B4956F'], size: [2560, 1707] }, { colors: ['#565147', '#FCFAF4', '#8F8876', '#AFA998'], size: [2560, 1707] }, { colors: ['#FAF8F3', '#545049', '#D5C8B3', '#B7A791'], size: [2560, 1707] }, { colors: ['#B4B4B1', '#95918C', '#EDE6D5', '#4F362A'], size: [2560, 1707] }, ] as const export const workImageSizes = workImageData.map(({ size }) => size) const vertexShader = /* glsl */ ` precision highp float; #ifndef DETAILS_QUALITY #define DETAILS_QUALITY 2 #endif varying vec2 vUv; varying float vTopFade; uniform vec2 iResolution; uniform vec2 uSize; uniform float uEffectsStrength; uniform float uEffectsHorizontalProgress; uniform float uEffectsHorizontalStrength; uniform float uEffectsHorizontalWaveSmooth; uniform float uEffectsHorizontalWaveSpacing; uniform float uRollTopBend; uniform float uRollTopFade; uniform float uRollTopFadeStart; uniform float uRollTopRadius; uniform float uRollTopRange; uniform float uRollTopReturn; uniform float uRollTopStart; uniform float uRollTopWaveAmp; uniform float uRollTopWaveFreq; uniform float uRollTopWaveSmooth; uniform float uRollTopWaveSpacing; uniform float uEffectsWaveSmooth; uniform float uEffectsWaveSpacing; uniform float uScrollPos; uniform float uVelocity; void main() { vUv = uv; vec3 nPos = position.xyz; float rollPower = max( max(abs(uRollTopBend), abs(uRollTopFade)), max(abs(uRollTopRadius), abs(uRollTopWaveAmp)) ); vTopFade = 0.0; if ( rollPower > 0.00001 ) { vec4 worldPosition = modelMatrix * vec4(position, 1.0); float topThreshold = (iResolution.y * 0.5) - (iResolution.y * uRollTopStart); float topRange = max(iResolution.y * uRollTopRange, 1.0); float band = clamp((worldPosition.y - topThreshold) / topRange, 0.0, 1.0); float rollMask = smoothstep(0.0, 1.0, band); float rollEnter = smoothstep(0.0, 0.42, band); float rollReturn = smoothstep(0.44, 0.92, band); float curlEnter = sin(rollEnter * PI * 0.5); float curlReturn = sin(rollReturn * PI); float sCurve = (curlEnter * 0.92) - (curlReturn * uRollTopReturn * 0.48); float lift = smoothstep(0.62, 0.98, band) * uRollTopBend * 0.18; float waveMask = sin(band * PI); float wavePhase = ( (nPos.x / max(uSize.x * 0.5, 1.0)) * PI * uRollTopWaveFreq / max(uRollTopWaveSpacing, 0.001) - uScrollPos * 0.01 ); float primaryWave = sin(wavePhase); #if DETAILS_QUALITY <= 0 float smoothWave = primaryWave; #else float secondaryWave = sin(wavePhase * 0.52 - 0.95); float tertiaryWave = sin(wavePhase * 0.31 + 1.2); float smoothWave = (primaryWave * 0.68) + (secondaryWave * 0.22) + (tertiaryWave * 0.10); #endif float surfaceWave = mix(primaryWave, smoothWave, clamp(uRollTopWaveSmooth, 0.0, 1.0)) * uRollTopWaveAmp * waveMask; nPos.y += lift; nPos.z -= sCurve * uRollTopRadius * rollMask; nPos.z += surfaceWave; vTopFade = pow(smoothstep(uRollTopFadeStart, 1.0, band), 0.7) * uRollTopFade; } vec4 mvPosition = modelViewMatrix * vec4(nPos, 1.0); float horizontalProgress = clamp(uEffectsHorizontalProgress, 0.0, 1.0); if ( horizontalProgress < 0.999 && abs(uVelocity) > 0.00001 && abs(uEffectsStrength) > 0.00001 ) { float flutterPhase = ( (mvPosition.y / max(iResolution.y, 1.0)) * PI * 2.0 / max(uEffectsWaveSpacing, 0.001) - uScrollPos / max(iResolution.y, 1.0) ); float baseWave = sin(flutterPhase); #if DETAILS_QUALITY <= 0 float smoothFlutter = baseWave; #else float detailWave = sin(flutterPhase * 0.48 - 1.1); float flutterWaveTertiary = sin(flutterPhase * 0.26 + 1.6); float smoothFlutter = (baseWave * 0.72) + (detailWave * 0.20) + (flutterWaveTertiary * 0.08); #endif float flutter = mix(baseWave, smoothFlutter, clamp(uEffectsWaveSmooth, 0.0, 1.0)); mvPosition.z += flutter * uVelocity * uEffectsStrength * 12.0 * (1.0 - horizontalProgress); } if ( horizontalProgress > 0.001 && abs(uVelocity) > 0.00001 && abs(uEffectsHorizontalStrength) > 0.00001 ) { float horizontalPhase = ( (mvPosition.x / max(iResolution.x, 1.0)) * PI * 2.0 / max(uEffectsHorizontalWaveSpacing, 0.001) - uScrollPos / max(iResolution.x, 1.0) ); float horizontalWave = sin(horizontalPhase); #if DETAILS_QUALITY <= 0 float smoothHorizontalWave = horizontalWave; #else float horizontalDetailWave = sin(horizontalPhase * 0.42 - 0.8); float horizontalTertiaryWave = sin(horizontalPhase * 0.24 + 1.35); float smoothHorizontalWave = (horizontalWave * 0.68) + (horizontalDetailWave * 0.22) + (horizontalTertiaryWave * 0.10); #endif float horizontalFlutter = mix(horizontalWave, smoothHorizontalWave, clamp(uEffectsHorizontalWaveSmooth, 0.0, 1.0)); mvPosition.z += horizontalFlutter * uVelocity * uEffectsHorizontalStrength * 12.0 * horizontalProgress; } gl_Position = projectionMatrix * mvPosition; } ` const fragmentShader = /* glsl */ ` precision highp float; #ifndef DETAILS_QUALITY #define DETAILS_QUALITY 2 #endif varying vec2 vUv; varying float vTopFade; uniform sampler2D tDiffuse; uniform vec2 uUvScale; uniform float uAlpha; uniform float uEffectsAberration; uniform float uEffectsBlurFade; uniform float uEffectsBlurHorizontal; uniform float uEffectsBlurVelocity; uniform float uEffectsHorizontalProgress; uniform vec3 uColorA; uniform vec3 uColorB; uniform vec3 uColorC; uniform vec3 uColorD; uniform float uImageMix; uniform float uVelocity; void main() { if ( uAlpha <= 0.00001 ) { gl_FragColor = vec4(0.0); return; } vec2 uvCover = vUv * uUvScale + (1.0 - uUvScale) * 0.5; vec2 uvGradient = uvCover; vec2 res = vec2(1.0, 1.0); float dist = distance(vec2(res.x * 0.5, res.y * 0.5), uvGradient.xy) * 2.0; vec3 grad = mix( mix(uColorA, uColorB, uvGradient.x), mix(uColorC, uColorD, uvGradient.y), dist * 0.5 ); float alphaBase = uAlpha * (1.0 - vTopFade); if ( uImageMix <= 0.00001 ) { gl_FragColor = vec4(grad, alphaBase); return; } float horizontalProgress = clamp(uEffectsHorizontalProgress, 0.0, 1.0); float fadeBlur = clamp(vTopFade * uEffectsBlurFade, 0.0, 0.08); float velocityBlur = clamp(abs(uVelocity) * uEffectsBlurVelocity * (1.0 - horizontalProgress), 0.0, 0.08); float horizontalBlur = clamp(abs(uVelocity) * uEffectsBlurHorizontal * horizontalProgress, 0.0, 0.08); float blurAmount = fadeBlur + velocityBlur + horizontalBlur; float velocityDir = sign(uVelocity); vec2 blurOffset = vec2(horizontalBlur, fadeBlur + velocityBlur); vec2 aberrationOffset = vec2(uEffectsAberration * vTopFade, 0.0); vec4 c = texture2D(tDiffuse, uvCover); vec3 image = c.rgb; if ( blurAmount > 0.00001 ) { vec2 dir = blurOffset * (velocityDir == 0.0 ? 1.0 : velocityDir); vec3 sampleCenter = c.rgb; #if DETAILS_QUALITY <= 0 vec3 sampleNearA = texture2D(tDiffuse, uvCover - dir * 0.7).rgb; vec3 sampleNearB = texture2D(tDiffuse, uvCover + dir * 0.7).rgb; vec3 blurred = ( sampleCenter * 0.44 + sampleNearA * 0.28 + sampleNearB * 0.28 ); image = blurred; #else vec3 sampleNearA = texture2D(tDiffuse, uvCover - dir * 0.5).rgb; vec3 sampleNearB = texture2D(tDiffuse, uvCover + dir * 0.5).rgb; vec3 sampleFarA = texture2D(tDiffuse, uvCover - dir).rgb; vec3 sampleFarB = texture2D(tDiffuse, uvCover + dir).rgb; vec3 blurred = ( sampleCenter * 0.32 + sampleNearA * 0.24 + sampleNearB * 0.24 + sampleFarA * 0.10 + sampleFarB * 0.10 ); float chromaMix = clamp(vTopFade, 0.0, 1.0); if ( chromaMix > 0.00001 && abs(uEffectsAberration) > 0.00001 ) { vec3 chroma = vec3( texture2D(tDiffuse, uvCover + aberrationOffset).r, blurred.g, texture2D(tDiffuse, uvCover - aberrationOffset).b ); image = mix(blurred, chroma, chromaMix); } else { image = blurred; } #endif } vec3 rgb = mix(grad, image, uImageMix); float alpha = mix(1.0, c.a, uImageMix) * alphaBase; gl_FragColor = vec4(rgb, alpha); } ` type UniformValue = { value: T } type WorkMaterialUniforms = { iResolution: UniformValue tDiffuse: UniformValue uEffectsAberration: UniformValue uAlpha: UniformValue uEffectsBlurFade: UniformValue uEffectsBlurHorizontal: UniformValue uEffectsBlurVelocity: UniformValue uEffectsHorizontalProgress: UniformValue uEffectsHorizontalStrength: UniformValue uEffectsHorizontalWaveSmooth: UniformValue uEffectsHorizontalWaveSpacing: UniformValue uColorA: UniformValue uColorB: UniformValue uColorC: UniformValue uColorD: UniformValue uImageMix: UniformValue uUvScale: UniformValue uRollTopBend: UniformValue uRollTopFade: UniformValue uRollTopFadeStart: UniformValue uRollTopRadius: UniformValue uRollTopRange: UniformValue uRollTopReturn: UniformValue uRollTopStart: UniformValue uRollTopWaveAmp: UniformValue uRollTopWaveFreq: UniformValue uRollTopWaveSmooth: UniformValue uRollTopWaveSpacing: UniformValue uEffectsWaveSmooth: UniformValue uEffectsWaveSpacing: UniformValue uScrollPos: UniformValue uSize: UniformValue uEffectsStrength: UniformValue uVelocity: UniformValue } type WorkMesh = { mesh: Mesh material: ShaderMaterial & { uniforms: WorkMaterialUniforms } geometry: PlaneGeometry width: number height: number requested: boolean texture: Texture | null } function colorVector(value: string) { const color = new Color(value) return new Vector3(color.r, color.g, color.b) } function calculateUvScale(sourceWidth: number, sourceHeight: number, width: number, height: number) { const sourceRatio = sourceWidth / Math.max(sourceHeight, 1) const targetRatio = width / Math.max(height, 1) return new Vector2(Math.min(targetRatio / sourceRatio, 1), Math.min(sourceRatio / targetRatio, 1)) } export function WorkWebGLLayer({ active, hiddenIndex, images, imageRefs, scrollRef, }: { active: boolean hiddenIndex: number | null images: readonly string[] imageRefs: RefObject<(HTMLButtonElement | null)[]> scrollRef: RefObject }) { const layerRef = useRef(null) const activeRef = useRef(active) const hiddenIndexRef = useRef(hiddenIndex) useEffect(() => { activeRef.current = active }, [active]) useEffect(() => { hiddenIndexRef.current = hiddenIndex }, [hiddenIndex]) useEffect(() => { const layer = layerRef.current if (!layer) return const renderer = new WebGLRenderer({ alpha: true, antialias: true, depth: true, stencil: true, }) renderer.sortObjects = false renderer.autoClear = false renderer.outputColorSpace = SRGBColorSpace renderer.setClearColor(0xffffff, 0) renderer.domElement.style.display = 'block' renderer.domElement.style.width = '100%' renderer.domElement.style.height = '100%' layer.appendChild(renderer.domElement) const scene = new Scene() const camera = new PerspectiveCamera(45, 1, 1, 10000) const loader = new TextureLoader() loader.setCrossOrigin('anonymous') const meshes: WorkMesh[] = [] let width = 1 let height = 1 let frame = 0 let scrollPosition = scrollRef.current?.scrollTop ?? 0 let previousScrollPosition = scrollPosition let velocity = 0 let velocityTarget = 0 let disposed = false const resizeRenderer = () => { width = window.innerWidth height = window.innerHeight const devicePixelRatio = Number(window.devicePixelRatio) || 1 const dpr = Math.round(Math.min(Math.max(devicePixelRatio, 1), 2) * 10) / 10 renderer.setPixelRatio(dpr) renderer.setSize(width, height, false) camera.aspect = width / Math.max(height, 1) camera.position.set(0, 0, 0) camera.position.z = height / Math.tan((45 * Math.PI) / 360) / 2 camera.lookAt(0, 0, 0) camera.updateProjectionMatrix() meshes.forEach(({ material }) => { material.uniforms.iResolution.value.set(width, height) }) } images.forEach((_, index) => { const data = workImageData[index] ?? workImageData[0] const geometry = new PlaneGeometry(1, 1, 24, 48) const material = new ShaderMaterial({ defines: { PI: Math.PI, DETAILS_QUALITY: 2, }, uniforms: { iResolution: { value: new Vector2(width, height) }, tDiffuse: { value: null }, uEffectsAberration: { value: 0.018 }, uAlpha: { value: 1 }, uEffectsBlurFade: { value: 0.03 }, uEffectsBlurHorizontal: { value: 0.001 }, uEffectsBlurVelocity: { value: 0.0008 }, uEffectsHorizontalProgress: { value: 0 }, uEffectsHorizontalStrength: { value: 0.1 }, uEffectsHorizontalWaveSmooth: { value: 0.72 }, uEffectsHorizontalWaveSpacing: { value: 1.72 }, uColorA: { value: colorVector(data.colors[0]) }, uColorB: { value: colorVector(data.colors[1]) }, uColorC: { value: colorVector(data.colors[2]) }, uColorD: { value: colorVector(data.colors[3]) }, uImageMix: { value: 0 }, uUvScale: { value: new Vector2(1, 1) }, uRollTopBend: { value: 48 }, uRollTopFade: { value: 1 }, uRollTopFadeStart: { value: 0.3 }, uRollTopRadius: { value: 500 }, uRollTopRange: { value: 0.3 }, uRollTopReturn: { value: 0.3 }, uRollTopStart: { value: 0.13 }, uRollTopWaveAmp: { value: 36 }, uRollTopWaveFreq: { value: 1.45 }, uRollTopWaveSmooth: { value: 0.68 }, uRollTopWaveSpacing: { value: 1.22 }, uEffectsWaveSmooth: { value: 0.72 }, uEffectsWaveSpacing: { value: 1.28 }, uScrollPos: { value: 0 }, uSize: { value: new Vector2(1, 1) }, uEffectsStrength: { value: 0.03 }, uVelocity: { value: 0 }, } satisfies WorkMaterialUniforms, vertexShader, fragmentShader, transparent: true, depthTest: false, depthWrite: false, }) as ShaderMaterial & { uniforms: WorkMaterialUniforms } const mesh = new Mesh(geometry, material) mesh.frustumCulled = false scene.add(mesh) meshes.push({ mesh, material, geometry, width: 1, height: 1, requested: false, texture: null, }) }) const requestTexture = (index: number) => { const item = meshes[index] const imageUrl = images[index] if (!item || item.requested || disposed || !imageUrl) return item.requested = true loader.load( imageUrl, (texture: any) => { if (disposed) { texture.dispose() return } texture.colorSpace = SRGBColorSpace texture.wrapS = ClampToEdgeWrapping texture.wrapT = ClampToEdgeWrapping texture.minFilter = LinearMipmapLinearFilter texture.magFilter = LinearFilter texture.generateMipmaps = true texture.needsUpdate = true item.texture = texture item.material.uniforms.tDiffuse.value = texture gsap.to(item.material.uniforms.uImageMix, { value: 1, duration: 1, delay: 0.15, ease: 'power2.out', }) }, undefined, () => { item.requested = false }, ) } const render = () => { const scrollElement = scrollRef.current const currentScrollPosition = scrollElement?.scrollTop ?? scrollPosition velocityTarget = Math.max(-120, Math.min(currentScrollPosition - previousScrollPosition, 120)) previousScrollPosition = currentScrollPosition scrollPosition = currentScrollPosition velocity += (velocityTarget - velocity) * 0.12 meshes.forEach((item, index) => { const element = imageRefs.current?.[index] if (!element || !activeRef.current) { item.mesh.visible = false return } const rect = element.getBoundingClientRect() const inLoadRange = rect.bottom >= -height * 0.35 && rect.top <= height * 1.35 const inRenderRange = rect.bottom >= -700 && rect.top <= height + 700 item.mesh.visible = inRenderRange && hiddenIndexRef.current !== index if (!inRenderRange) return if (inLoadRange) requestTexture(index) const itemWidth = Math.max(rect.width, 1) const itemHeight = Math.max(rect.height, 1) if (Math.abs(item.width - itemWidth) > 0.1 || Math.abs(item.height - itemHeight) > 0.1) { const nextGeometry = new PlaneGeometry(itemWidth, itemHeight, 24, 48) item.geometry.dispose() item.geometry = nextGeometry item.mesh.geometry = nextGeometry item.width = itemWidth item.height = itemHeight item.material.uniforms.uSize.value.set(itemWidth, itemHeight) const sourceSize = workImageData[index]?.size ?? [itemWidth, itemHeight] item.material.uniforms.uUvScale.value.copy( calculateUvScale(sourceSize[0], sourceSize[1], itemWidth, itemHeight), ) } item.mesh.position.set(rect.left - width * 0.5 + itemWidth * 0.5, height * 0.5 - rect.top - itemHeight * 0.5, 0) item.mesh.scale.set(1, 1, 1) item.material.uniforms.uVelocity.value = velocity item.material.uniforms.uScrollPos.value = scrollPosition }) renderer.clear() if (activeRef.current) renderer.render(scene, camera) frame = window.requestAnimationFrame(render) } resizeRenderer() window.addEventListener('resize', resizeRenderer) frame = window.requestAnimationFrame(render) return () => { disposed = true window.cancelAnimationFrame(frame) window.removeEventListener('resize', resizeRenderer) meshes.forEach((item) => { gsap.killTweensOf(item.material.uniforms.uImageMix) scene.remove(item.mesh) item.geometry.dispose() item.material.dispose() item.texture?.dispose() }) renderer.dispose() renderer.domElement.remove() } }, [imageRefs, images, scrollRef]) return (

) } export const LensWebGLLayer = WorkWebGLLayer export const galleryImageSizes = workImageSizes 54:T1124,'use client' import { useEffect, useRef, type PointerEvent as ReactPointerEvent, type WheelEvent as ReactWheelEvent } from 'react' export interface UseHorizontalDragOptions { active: boolean onOpenImage: (index: number) => void } export function useHorizontalDrag({ active, onOpenImage }: UseHorizontalDragOptions) { const horizontalRef = useRef(null) const horizontalButtonRefs = useRef<(HTMLButtonElement | null)[]>([]) const horizontalTarget = useRef(0) const horizontalVelocity = useRef(0) const horizontalRaf = useRef(null) const dragState = useRef({ active: false, startX: 0, scrollLeft: 0, distance: 0, lastX: 0, lastTime: 0, pressedIndex: null as number | null, }) useEffect(() => { if (!active) return const element = horizontalRef.current if (!element) return horizontalTarget.current = element.scrollLeft const update = () => { if (!dragState.current.active) { horizontalTarget.current += horizontalVelocity.current horizontalVelocity.current *= 0.92 } const max = Math.max(element.scrollWidth - element.clientWidth, 0) horizontalTarget.current = Math.max(0, Math.min(horizontalTarget.current, max)) element.scrollLeft += (horizontalTarget.current - element.scrollLeft) * 0.105 horizontalRaf.current = window.requestAnimationFrame(update) } horizontalRaf.current = window.requestAnimationFrame(update) return () => { if (horizontalRaf.current !== null) { window.cancelAnimationFrame(horizontalRaf.current) } horizontalRaf.current = null } }, [active]) useEffect(() => { const onMove = (event: PointerEvent) => { if (dragState.current.active && horizontalRef.current) { const now = performance.now() const elapsed = Math.max(now - dragState.current.lastTime, 8) const delta = dragState.current.lastX - event.clientX dragState.current.distance = Math.abs(event.clientX - dragState.current.startX) horizontalTarget.current = dragState.current.scrollLeft - (event.clientX - dragState.current.startX) * 1.05 horizontalVelocity.current = (delta / elapsed) * 16 dragState.current.lastX = event.clientX dragState.current.lastTime = now } } window.addEventListener('pointermove', onMove) return () => window.removeEventListener('pointermove', onMove) }, []) const onHorizontalWheel = (event: ReactWheelEvent) => { horizontalTarget.current += (event.deltaY + event.deltaX) * 1.08 horizontalVelocity.current += Math.sign(event.deltaY + event.deltaX) * Math.min(Math.abs(event.deltaY + event.deltaX) * 0.02, 0.68) * 18.5 } const beginDrag = (event: ReactPointerEvent) => { const target = event.target instanceof Element ? event.target.closest('[data-horizontal-work-index]') : null const pressedIndex = Number(target?.dataset.horizontalWorkIndex) dragState.current = { active: true, startX: event.clientX, scrollLeft: event.currentTarget.scrollLeft, distance: 0, lastX: event.clientX, lastTime: performance.now(), pressedIndex: Number.isInteger(pressedIndex) ? pressedIndex : null, } horizontalTarget.current = event.currentTarget.scrollLeft horizontalVelocity.current = 0 event.currentTarget.setPointerCapture(event.pointerId) } const endDrag = (event: ReactPointerEvent) => { const { distance, pressedIndex } = dragState.current dragState.current.active = false horizontalVelocity.current = Math.max(-68, Math.min(horizontalVelocity.current * 1.85, 68)) if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId) } if (distance < 6 && pressedIndex !== null) onOpenImage(pressedIndex) } const cancelDrag = (event: ReactPointerEvent) => { dragState.current.active = false dragState.current.pressedIndex = null if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId) } } return { horizontalRef, horizontalButtonRefs, horizontalTarget, onHorizontalWheel, beginDrag, endDrag, cancelDrag, } } 55:T237a,'use client' import { useCallback, useEffect, useRef, useState } from 'react' import gsap from 'gsap' import { galleryImages } from '../lib/data' import { galleryImageSizes } from '../components/lens-webgl-layer' function setFixedBackdropMask(element: HTMLDivElement, progress: number, direction: 1 | -1) { const clamped = Math.max(0, Math.min(progress, 1)) const arcProgress = Math.sin(clamped * Math.PI) const aspectScale = Math.max(0.35, Math.min(window.innerWidth / Math.max(window.innerHeight, 1), 1)) const edgePoints = Array.from({ length: 21 }, (_, index) => { const x = index / 20 const arc = Math.sin(x * Math.PI) * 0.1 * aspectScale * arcProgress const edge = Math.max(0, Math.min(clamped + arc, 1)) return `${x * 100}% ${(1 - edge) * 100}%` }) const polygon = direction > 0 ? `polygon(${edgePoints.join(',')},100% 100%,0% 100%)` : `polygon(0% 0%,100% 0%,${edgePoints.reverse().join(',')})` element.style.clipPath = polygon ;(element.style as any).webkitClipPath = polygon } export interface UseLightboxOptions { mode: 'vertical' | 'horizontal' verticalRef: React.RefObject horizontalRef: React.RefObject horizontalButtonRefs: React.RefObject<(HTMLButtonElement | null)[]> horizontalTarget: React.RefObject onCursorStateChange?: (active: boolean, label: string) => void } export function useLightbox({ mode, verticalRef, horizontalRef, horizontalButtonRefs, horizontalTarget, onCursorStateChange, }: UseLightboxOptions) { const [lightboxIndex, setLightboxIndex] = useState(null) const [fixedPhase, setFixedPhase] = useState<'closed' | 'opening' | 'open' | 'closing'>('closed') const [fixedDirection, setFixedDirection] = useState(1) const [fixedNavIdle, setFixedNavIdle] = useState(false) const fixedBackdropRef = useRef(null) const fixedFrameRef = useRef(null) const imageButtonRefs = useRef<(HTMLButtonElement | null)[]>([]) const fixedSourceRect = useRef(null) const fixedScrollPosition = useRef(0) const fixedIdleTimer = useRef(null) const scheduleFixedIdle = useCallback(() => { if (fixedIdleTimer.current) window.clearTimeout(fixedIdleTimer.current) setFixedNavIdle(false) fixedIdleTimer.current = window.setTimeout(() => { setFixedNavIdle(true) onCursorStateChange?.(false, 'Zoom') }, 2000) }, [onCursorStateChange]) const getFixedTargetRect = useCallback((index: number) => { const sourceSize = galleryImageSizes[index] ?? [2560, 1707] const ratio = sourceSize[0] / sourceSize[1] const horizontalPadding = window.innerWidth <= 640 ? 20 : 60 const verticalPadding = window.innerWidth <= 640 ? 20 : 60 const maxWidth = Math.min(1080, window.innerWidth - horizontalPadding * 2) const maxHeight = window.innerHeight - verticalPadding * 2 const width = Math.min(maxWidth, maxHeight * ratio) const height = width / ratio return { left: (window.innerWidth - width) / 2, top: (window.innerHeight - height) / 2, width, height, } }, []) const openImage = useCallback( (index: number) => { if (fixedPhase !== 'closed') return const sourceButton = mode === 'vertical' ? imageButtonRefs.current[index] : horizontalButtonRefs.current?.[index] const source = sourceButton fixedScrollPosition.current = mode === 'vertical' ? (verticalRef.current?.scrollTop ?? 0) : (horizontalRef.current?.scrollLeft ?? 0) fixedSourceRect.current = source?.getBoundingClientRect() ?? null setLightboxIndex(index) setFixedDirection(1) setFixedPhase('opening') onCursorStateChange?.(false, 'Close') }, [fixedPhase, horizontalButtonRefs, horizontalRef, mode, onCursorStateChange, verticalRef], ) const closeImage = useCallback(() => { if (lightboxIndex === null || fixedPhase === 'closing' || fixedPhase === 'closed') return setFixedPhase('closing') setFixedNavIdle(false) if (fixedIdleTimer.current) window.clearTimeout(fixedIdleTimer.current) const sourceButton = mode === 'vertical' ? imageButtonRefs.current[lightboxIndex] : horizontalButtonRefs.current?.[lightboxIndex] const source = sourceButton const scrollContainer = mode === 'vertical' ? verticalRef.current : horizontalRef.current if (source && scrollContainer) { if (mode === 'vertical') { scrollContainer.scrollTop = fixedScrollPosition.current } else { scrollContainer.scrollLeft = fixedScrollPosition.current if (horizontalTarget) horizontalTarget.current = fixedScrollPosition.current } } window.requestAnimationFrame(() => { const target = source?.getBoundingClientRect() ?? fixedSourceRect.current const frame = fixedFrameRef.current const backdrop = fixedBackdropRef.current if (!frame || !backdrop || !target) { setLightboxIndex(null) setFixedPhase('closed') onCursorStateChange?.(false, 'Zoom') return } const backdropProgress = { value: 0 } setFixedBackdropMask(backdrop, 0, -1) gsap .timeline({ defaults: { overwrite: true }, onComplete: () => { setLightboxIndex(null) setFixedPhase('closed') onCursorStateChange?.(false, 'Zoom') }, }) .to( frame, { left: target.left, top: target.top, width: target.width, height: target.height, duration: 1, ease: 'power3.inOut', }, 0, ) .to( backdropProgress, { value: 1, duration: 1.05, ease: 'power3.inOut', onUpdate: () => setFixedBackdropMask(backdrop, backdropProgress.value, -1), }, 0, ) }) }, [ fixedPhase, horizontalButtonRefs, horizontalRef, horizontalTarget, lightboxIndex, mode, onCursorStateChange, verticalRef, ]) const moveImage = useCallback( (direction: number) => { if (fixedPhase !== 'open') return setFixedDirection(direction) setLightboxIndex((current) => current === null ? current : (current + direction + galleryImages.length) % galleryImages.length, ) scheduleFixedIdle() }, [fixedPhase, scheduleFixedIdle], ) // GSAP opening animation useEffect(() => { if (lightboxIndex === null || fixedPhase !== 'opening' || !fixedFrameRef.current || !fixedBackdropRef.current) return const source = fixedSourceRect.current ?? imageButtonRefs.current[lightboxIndex]?.getBoundingClientRect() const target = getFixedTargetRect(lightboxIndex) if (!source) return const backdropProgress = { value: 0 } gsap.killTweensOf([fixedBackdropRef.current, fixedFrameRef.current]) gsap.set(fixedBackdropRef.current, { opacity: 1 }) setFixedBackdropMask(fixedBackdropRef.current, 0, 1) gsap.set(fixedFrameRef.current, { left: source.left, top: source.top, width: source.width, height: source.height, }) gsap .timeline({ defaults: { overwrite: true }, onComplete: () => { setFixedPhase('open') scheduleFixedIdle() }, }) .to( backdropProgress, { value: 1, duration: 1.05, ease: 'power3.inOut', onUpdate: () => { if (fixedBackdropRef.current) { setFixedBackdropMask(fixedBackdropRef.current, backdropProgress.value, 1) } }, }, 0, ) .to( fixedFrameRef.current, { ...target, duration: 1, ease: 'power3.inOut', }, 0, ) }, [fixedPhase, getFixedTargetRect, lightboxIndex, scheduleFixedIdle]) // Keyboard navigation and pointermove idle reset useEffect(() => { const onMove = () => { if (lightboxIndex !== null) scheduleFixedIdle() } const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') { if (lightboxIndex !== null) closeImage() } if (lightboxIndex !== null && event.key === 'ArrowLeft') moveImage(-1) if (lightboxIndex !== null && event.key === 'ArrowRight') moveImage(1) } window.addEventListener('pointermove', onMove) window.addEventListener('keydown', onKey) return () => { window.removeEventListener('pointermove', onMove) window.removeEventListener('keydown', onKey) if (fixedIdleTimer.current) window.clearTimeout(fixedIdleTimer.current) } }, [closeImage, lightboxIndex, moveImage, scheduleFixedIdle]) return { lightboxIndex, setLightboxIndex, fixedPhase, fixedDirection, fixedNavIdle, fixedBackdropRef, fixedFrameRef, imageButtonRefs, openImage, closeImage, moveImage, scheduleFixedIdle, } } 56:T9ac,export interface CategoryItem { label: string image: string thumb: string colors: readonly string[] } export interface GalleryImage { url: string title: string category: string location?: string camera?: string } export type LayoutMode = 'vertical' | 'horizontal' export type LightboxPhase = 'closed' | 'opening' | 'open' | 'closing' export const ease = [0.104, 0.204, 0.492, 1] as const export const glass = 'bg-black/75 backdrop-blur-[4px] shadow-[inset_0_0_0_1px_rgba(255,255,255,.08),inset_1.8px_3px_0_-2px_rgba(255,255,255,.45),inset_-2px_-2px_0_-2px_rgba(255,255,255,.4),inset_-3px_-8px_1px_-6px_rgba(255,255,255,.3),inset_-.3px_-1px_4px_rgba(0,0,0,.09),0_1px_5px_rgba(0,0,0,.08),0_6px_16px_rgba(0,0,0,.12),0_6px_12px_rgba(0,0,0,.12)]' export const categories: readonly CategoryItem[] = [ { label: 'Work', image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2560&q=85', thumb: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=400&q=80', colors: ['#F3ECF3', '#D9C6DB', '#D694AD', '#AD7092'], }, { label: 'Fashion', image: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=2560&q=85', thumb: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=400&q=80', colors: ['#DBD1D0', '#282824', '#E9C797', '#D0A975'], }, { label: 'Journey', image: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=2560&q=85', thumb: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=400&q=80', colors: ['#D7F3FD', '#B4D0E8', '#8DB5D9', '#6B99C5'], }, ] as const export const galleryImages = [ 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2560&q=85', 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=2560&q=85', 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=2560&q=85', 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=2560&q=85', 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2560&q=85', 'https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=2560&q=85', 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=2560&q=85', ] as const 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}],["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}]]}],["$","$L4b",null,{"namespace":"@spaceui","registryDependencies":[]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/registry/templates/immersive-lens/index.tsx","content":"'use client'\n\nexport const instant = false\n\nimport { ClientPage } from './components/client-page'\n\nexport { ClientPage }\nexport { ClientPage as ImmersiveLensTemplate }\nexport { ClientPage as WorkPageClient }\nexport { ClientPage as WorkWebGLTemplate }\n\nexport default ClientPage\n","type":"registry:page","target":"index.tsx"},{"path":"src/registry/templates/immersive-lens/app/page.tsx","content":"import type { Metadata } from 'next'\nimport { ClientPage } from '../components/client-page'\n\nexport const metadata: Metadata = {\n title: 'Immersive Lens Portfolio',\n description: 'Full-page immersive photography template with Three.js WebGL distortion and GSAP lightbox.',\n}\n\nexport default function Page() {\n return \n}\n","type":"registry:page","target":"app/portfolio/page.tsx"},{"path":"src/registry/templates/immersive-lens/app/layout.tsx","content":"import type { Metadata } from 'next'\n\nexport const metadata: Metadata = {\n title: 'Immersive Lens Portfolio',\n description: 'Full-page immersive photography template with Three.js WebGL distortion and GSAP lightbox.',\n}\n\nexport default function Layout({ children }: { children: React.ReactNode }) {\n return (\n

\n {children}\n

\n )\n}\n","type":"registry:page","target":"app/portfolio/layout.tsx"},{"path":"src/registry/templates/immersive-lens/app/loading.tsx","content":"export default function Loading() {\n return (\n

Immersive Lens

Loading WebGL Scene

\n )\n}\n","type":"registry:page","target":"app/portfolio/loading.tsx"},{"path":"src/registry/templates/immersive-lens/components/client-page.tsx","content":"$4d","type":"registry:component","target":"components/immersive-lens/client-page.tsx"},{"path":"src/registry/templates/immersive-lens/components/vertical-gallery.tsx","content":"$4e","type":"registry:component","target":"components/immersive-lens/vertical-gallery.tsx"},{"path":"src/registry/templates/immersive-lens/components/horizontal-gallery.tsx","content":"$4f","type":"registry:component","target":"components/immersive-lens/horizontal-gallery.tsx"},{"path":"src/registry/templates/immersive-lens/components/glass-dock.tsx","content":"$50","type":"registry:component","target":"components/immersive-lens/glass-dock.tsx"},{"path":"src/registry/templates/immersive-lens/components/lightbox-modal.tsx","content":"$51","type":"registry:component","target":"components/immersive-lens/lightbox-modal.tsx"},{"path":"src/registry/templates/immersive-lens/components/custom-cursor.tsx","content":"$52","type":"registry:component","target":"components/immersive-lens/custom-cursor.tsx"},{"path":"src/registry/templates/immersive-lens/components/lens-webgl-layer.tsx","content":"$53","type":"registry:component","target":"components/immersive-lens/lens-webgl-layer.tsx"},{"path":"src/registry/templates/immersive-lens/hooks/use-custom-cursor.ts","content":"'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useMotionValue, useSpring } from 'motion/react'\n\nexport function useCustomCursor() {\n const [cursorActive, setCursorActive] = useState(false)\n const [cursorLabel, setCursorLabel] = useState('Zoom')\n\n const mouseX = useMotionValue(0)\n const mouseY = useMotionValue(0)\n const cursorX = useSpring(mouseX, { stiffness: 600, damping: 48, mass: 0.22 })\n const cursorY = useSpring(mouseY, { stiffness: 600, damping: 48, mass: 0.22 })\n\n useEffect(() => {\n const onMove = (event: PointerEvent) => {\n mouseX.set(event.clientX)\n mouseY.set(event.clientY)\n }\n\n window.addEventListener('pointermove', onMove)\n return () => window.removeEventListener('pointermove', onMove)\n }, [mouseX, mouseY])\n\n return {\n cursorActive,\n setCursorActive,\n cursorLabel,\n setCursorLabel,\n cursorX,\n cursorY,\n mouseX,\n mouseY,\n }\n}\n","type":"registry:hook","target":"hooks/immersive-lens/use-custom-cursor.ts"},{"path":"src/registry/templates/immersive-lens/hooks/use-horizontal-drag.ts","content":"$54","type":"registry:hook","target":"hooks/immersive-lens/use-horizontal-drag.ts"},{"path":"src/registry/templates/immersive-lens/hooks/use-lightbox.ts","content":"$55","type":"registry:hook","target":"hooks/immersive-lens/use-lightbox.ts"},{"path":"src/registry/templates/immersive-lens/lib/data.ts","content":"$56","type":"registry:lib","target":"lib/immersive-lens/data.ts"}],"className":"h-[70svh] min-h-80"}]]}]