51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T78a,.scroll-expand { position: relative; width: 100%; height: 100%; } .scroll-expand--scroller { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; } .scroll-expand--scroller::-webkit-scrollbar { display: none; } .scroll-expand__track { position: relative; width: 100%; } .scroll-expand__stage { position: sticky; top: 0; width: 100%; overflow: hidden; --se-title-size: 4rem; } .scroll-expand__frame { position: absolute; inset: 0; clip-path: inset(21% 29% 21% 29% round 24px); will-change: clip-path; } .scroll-expand__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; transform-origin: center; user-select: none; -webkit-user-drag: none; } .scroll-expand__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.35)); opacity: 0; } .scroll-expand__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6%; opacity: 0; will-change: opacity, transform; } .scroll-expand__title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 6%; text-align: center; font-size: var(--se-title-size); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); pointer-events: none; will-change: opacity, transform; } .scroll-expand__hint { position: absolute; left: 0; right: 0; bottom: 1.25rem; text-align: center; font-size: 0.8125rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.55); pointer-events: none; will-change: opacity, transform; } 53:T1ecf,'use client'; import { useCallback, useEffect, useRef } from 'react'; import type { CSSProperties, ReactNode } from 'react'; import './ScrollExpand.css'; const clamp = (v: number, a: number, b: number): number => (v < a ? a : v > b ? b : v); const smoothstep = (edge0: number, edge1: number, x: number): number => { const t = clamp((x - edge0) / (edge1 - edge0 || 1e-6), 0, 1); return t * t * (3 - 2 * t); }; type ConfigKey = | 'startWidth' | 'startHeight' | 'startRadius' | 'endRadius' | 'mediaZoom' | 'scrollDistance' | 'holdDistance' | 'smoothing' | 'overlayScrim' | 'useWindowScroll' | 'enabled'; export interface ScrollExpandProps { src?: string; mediaType?: 'image' | 'video'; poster?: string; alt?: string; title?: string; scrollHint?: string; startWidth?: number; startHeight?: number; startRadius?: number; endRadius?: number; mediaZoom?: number; scrollDistance?: number; holdDistance?: number; smoothing?: number; overlayScrim?: number; useWindowScroll?: boolean; enabled?: boolean; children?: ReactNode; className?: string; style?: CSSProperties; [key: string]: unknown; } const ScrollExpand: React.FC = ({ src = '', mediaType = 'image', poster = '', alt = '', title = '', scrollHint = '', startWidth = 42, startHeight = 58, startRadius = 24, endRadius = 0, mediaZoom = 1.35, scrollDistance = 1.2, holdDistance = 0.35, smoothing = 0.1, overlayScrim = 0.45, useWindowScroll = false, enabled = true, children, className = '', style, ...rest }: ScrollExpandProps) => { const rootRef = useRef(null); const trackRef = useRef(null); const stageRef = useRef(null); const frameRef = useRef(null); const mediaRef = useRef(null); const titleRef = useRef(null); const overlayRef = useRef(null); const scrimRef = useRef(null); const hintRef = useRef(null); const propsRef = useRef>>( {} as Required> ); propsRef.current = { startWidth, startHeight, startRadius, endRadius, mediaZoom, scrollDistance, holdDistance, smoothing, overlayScrim, useWindowScroll, enabled }; const applyProgress = useCallback((p: number) => { const frame = frameRef.current; const media = mediaRef.current; if (!frame || !media) return; const c = propsRef.current; const e = smoothstep(0, 1, p); const w = c.startWidth + (100 - c.startWidth) * e; const h = c.startHeight + (100 - c.startHeight) * e; const ix = Math.max(0, (100 - w) / 2); const iy = Math.max(0, (100 - h) / 2); const r = c.startRadius + (c.endRadius - c.startRadius) * e; frame.style.clipPath = `inset(${iy}% ${ix}% ${iy}% ${ix}% round ${r}px)`; media.style.transform = `scale(${c.mediaZoom + (1 - c.mediaZoom) * e})`; if (scrimRef.current) scrimRef.current.style.opacity = `${c.overlayScrim * e}`; if (titleRef.current) { const out = smoothstep(0.4, 0.88, p); titleRef.current.style.opacity = `${1 - out}`; titleRef.current.style.transform = `translate3d(0, ${-28 * out}px, 0) scale(${1 + 0.06 * out})`; } if (hintRef.current) { const gone = smoothstep(0, 0.12, p); hintRef.current.style.opacity = `${1 - gone}`; hintRef.current.style.transform = `translate3d(0, ${8 * gone}px, 0)`; } if (overlayRef.current) { const inn = smoothstep(0.68, 1, p); overlayRef.current.style.opacity = `${inn}`; overlayRef.current.style.transform = `translate3d(0, ${18 * (1 - inn)}px, 0)`; } }, []); useEffect(() => { const root = rootRef.current; const track = trackRef.current; const stage = stageRef.current; if (!root || !track || !stage) return; const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; let raf = 0; let current = 0; let target = 0; let stageH = 0; let running = false; const measure = () => { const c = propsRef.current; stageH = c.useWindowScroll ? window.innerHeight : root.clientHeight; if (stageH <= 0) return; stage.style.height = `${stageH}px`; track.style.height = `${stageH * (1 + Math.max(0, c.scrollDistance) + Math.max(0, c.holdDistance))}px`; const w = root.clientWidth || stageH; stage.style.setProperty('--se-title-size', `${clamp(w * 0.075, 20, 84)}px`); }; const readProgress = () => { const c = propsRef.current; if (!c.enabled) return 1; const span = stageH * Math.max(0.01, c.scrollDistance); if (c.useWindowScroll) { const top = track.getBoundingClientRect().top; return clamp(-top / span, 0, 1); } return clamp(root.scrollTop / span, 0, 1); }; const tick = () => { const c = propsRef.current; const k = c.smoothing <= 0 ? 1 : 1 - Math.exp(-1 / (60 * c.smoothing)); current += (target - current) * k; if (Math.abs(target - current) < 0.0004) { current = target; running = false; } applyProgress(current); raf = running ? requestAnimationFrame(tick) : 0; }; const kick = () => { if (running) return; running = true; if (!raf) raf = requestAnimationFrame(tick); }; const onScroll = () => { target = readProgress(); if (propsRef.current.smoothing <= 0 || reduceMotion) { current = target; applyProgress(current); return; } kick(); }; const onResize = () => { measure(); target = readProgress(); current = target; applyProgress(current); }; measure(); target = readProgress(); current = target; applyProgress(current); const scroller = useWindowScroll ? window : root; scroller.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); const ro = new ResizeObserver(onResize); ro.observe(root); return () => { if (raf) cancelAnimationFrame(raf); scroller.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); ro.disconnect(); }; }, [applyProgress, useWindowScroll]); const media = mediaType === 'video' ? (