16:I[54961,["/_next/static/immutable/chunks/10r1qlsoygogh.js","/_next/static/immutable/chunks/1_f1jqdld4ngu.js","/_next/static/immutable/chunks/19vifo6_mi-qi.js","/_next/static/immutable/chunks/3kb194ft35tsv.js","/_next/static/immutable/chunks/1kmzbl6k42gme.js","/_next/static/immutable/chunks/1ekzdpc_7chvz.js","/_next/static/immutable/chunks/3kscktpsmulhw.js","/_next/static/immutable/chunks/1wyf15k9llk8a.js"],"default"] 17:T336a,'use client'; import { useEffect, useMemo, useRef, useState } from 'react'; import { frameLoop, reducedMotion } from './frame-loop'; /** * FolderBurst — a desktop folder that throws its files open. Clicking the folder launches every file * as a little window that springs to its own spot around it, staggered and slightly tilted, then * settles flat. Windows can be dragged anywhere and spring after the pointer; clicking the folder * again pulls them back in, one after another. All motion is a damped spring per window, integrated * in seconds, so it feels the same at any refresh rate. */ export type FolderFile = { name: string; src: string; tall?: boolean }; export type FolderBurstProps = { folderName?: string; files?: FolderFile[]; background?: string; /** Folder colour (hex). */ tint?: string; /** Open on mount. */ defaultOpen?: boolean; /** Open and close on its own until someone interacts. */ autoPlay?: boolean; compact?: boolean; paused?: boolean; className?: string; }; const DEFAULT_FILES: FolderFile[] = [ { name: 'quiet-cove.jpg', src: '/media/gallery/image-05.webp' }, { name: 'blue-hour.jpg', src: '/media/gallery/image-07.webp', tall: true }, { name: 'dock-study.jpg', src: '/media/gallery/image-09.webp' }, { name: 'swans.jpg', src: '/media/gallery/image-10.webp', tall: true }, { name: 'wild-bouquet.jpg', src: '/media/gallery/image-11.webp' }, { name: 'robin.jpg', src: '/media/gallery/image-14.webp' }, { name: 'harbour-night.jpg', src: '/media/gallery/image-16.webp', tall: true }, { name: 'falls.jpg', src: '/media/gallery/image-06.webp' }, ]; /** Resting slots around the folder, in fractions of the stage (centre of each window). */ export const FOLDER_SLOTS = [ [0.2, 0.2], [0.39, 0.18], [0.6, 0.17], [0.8, 0.22], [0.83, 0.55], [0.62, 0.72], [0.36, 0.74], [0.15, 0.56], ] as const; export type Spring = { x: number; y: number; vx: number; vy: number; s: number; vs: number; r: number; vr: number; }; const K = 170, D = 2 * Math.sqrt(K) * 0.62; /** Advances one spring toward a target (x,y,scale,rotation); returns true while still moving. */ export function stepSpring( p: Spring, tx: number, ty: number, ts: number, tr: number, dt: number, k = K, d = D, ) { const ax = (tx - p.x) * k - p.vx * d, ay = (ty - p.y) * k - p.vy * d, as = (ts - p.s) * k - p.vs * d, ar = (tr - p.r) * k - p.vr * d; p.vx += ax * dt; p.vy += ay * dt; p.vs += as * dt; p.vr += ar * dt; p.x += p.vx * dt; p.y += p.vy * dt; p.s += p.vs * dt; p.r += p.vr * dt; return ( Math.abs(tx - p.x) + Math.abs(ty - p.y) > 0.3 || Math.abs(p.vx) + Math.abs(p.vy) > 2 || Math.abs(ts - p.s) > 0.002 || Math.abs(tr - p.r) > 0.05 || Math.abs(p.vs) > 0.01 ); } export default function FolderBurst({ folderName = 'Field notes', files = DEFAULT_FILES, background = '#e4ebf7', tint = '#6b8cff', defaultOpen = false, autoPlay = true, compact = false, paused = false, className = '', }: FolderBurstProps) { const root = useRef(null); const list = useMemo( () => (Array.isArray(files) && files.length ? files : DEFAULT_FILES).slice( 0, FOLDER_SLOTS.length, ), [files], ); const [open, setOpen] = useState(!!defaultOpen); const openRef = useRef(open); openRef.current = open; const pausedRef = useRef(paused); pausedRef.current = paused; const autoRef = useRef(autoPlay); autoRef.current = autoPlay; const flipRef = useRef(() => {}); const api = useRef<{ toggle: (next: boolean) => void; wake: () => void; touch: () => void; }>({ toggle: () => {}, wake: () => {}, touch: () => {} }); useEffect(() => { const host = root.current; if (!host) return; const wins = [...host.querySelectorAll('.fb-win')], folder = host.querySelector('.fb-folder')!; const springs: Spring[] = wins.map(() => ({ x: 0, y: 0, vx: 0, vy: 0, s: 0.15, vs: 0, r: 0, vr: 0, })); const placed: ([number, number] | null)[] = wins.map(() => null); const launched = wins.map(() => -1), state = wins.map(() => openRef.current); let clock = 0, touched = false, nextAuto = openRef.current ? 3.6 : 1.2, drag: { i: number; dx: number; dy: number; id: number } | null = null; const motion = reducedMotion(() => loop.wake()); const origin = () => { const b = host.getBoundingClientRect(), f = folder.getBoundingClientRect(); return [f.left - b.left + f.width / 2, f.top - b.top + f.height * 0.45] as const; }; const target = (i: number) => { const b = host.getBoundingClientRect(), slot = placed[i] ?? [ FOLDER_SLOTS[i][0] * b.width, FOLDER_SLOTS[i][1] * b.height, ]; return slot; }; const toggle = (next: boolean) => { const [ox, oy] = origin(); wins.forEach((_, i) => { const order = next ? i : wins.length - 1 - i; launched[i] = clock + order * 0.055; if (next && springs[i].s < 0.2) { springs[i].x = ox; springs[i].y = oy; springs[i].r = (i % 2 ? 1 : -1) * 12; } }); if (!next) placed.fill(null); loop.wake(); }; const loop = frameLoop( host, (dt) => { clock += dt; const [ox, oy] = origin(), still = motion.query.matches; let moving = false; wins.forEach((win, i) => { if (launched[i] >= 0 && clock >= launched[i]) { state[i] = openRef.current; launched[i] = -1; } const p = springs[i], armed = launched[i] < 0, out = state[i]; const [tx, ty] = out ? target(i) : [ox, oy], ts = out ? 1 : 0.12, tr = 0; if (drag?.i === i) { p.vx = p.vy = 0; } else if (still) { p.x = tx; p.y = ty; p.s = ts; p.r = tr; } else if (armed) moving = stepSpring(p, tx, ty, ts, tr, dt) || moving; else moving = true; const visible = out || p.s > 0.2; win.style.transform = `translate3d(${p.x.toFixed(1)}px,${p.y.toFixed(1)}px,0) translate(-50%,-50%) rotate(${p.r.toFixed(2)}deg) scale(${Math.max(0, p.s).toFixed(3)})`; win.style.opacity = visible ? String(Math.min(1, Math.max(0, (p.s - 0.12) / 0.3))) : '0'; win.style.pointerEvents = out ? 'auto' : 'none'; }); if (autoRef.current && !touched && !still && clock > nextAuto) { nextAuto = clock + (openRef.current ? 2.2 : 3.8); flipRef.current(); } return moving || !!drag || (autoRef.current && !touched && !still); }, () => pausedRef.current, ); api.current = { toggle, wake: () => loop.wake(), touch: () => { touched = true; }, }; const down = (event: PointerEvent) => { touched = true; const el = (event.target as HTMLElement).closest('.fb-win'); if (!el || !openRef.current) return; const i = wins.indexOf(el), b = host.getBoundingClientRect(); drag = { i, dx: event.clientX - b.left - springs[i].x, dy: event.clientY - b.top - springs[i].y, id: event.pointerId, }; el.setPointerCapture?.(event.pointerId); el.style.zIndex = String(10 + Math.floor(clock * 10)); el.dataset.drag = 'true'; loop.wake(); }; const move = (event: PointerEvent) => { if (!drag || event.pointerId !== drag.id) return; const b = host.getBoundingClientRect(), x = event.clientX - b.left - drag.dx, y = event.clientY - b.top - drag.dy; const p = springs[drag.i]; p.x = Math.min(b.width, Math.max(0, x)); p.y = Math.min(b.height, Math.max(0, y)); placed[drag.i] = [p.x, p.y]; }; const up = () => { if (!drag) return; delete wins[drag.i].dataset.drag; drag = null; loop.wake(); }; host.addEventListener('pointerdown', down); host.addEventListener('pointermove', move); host.addEventListener('pointerup', up); host.addEventListener('pointercancel', up); const resized = new ResizeObserver(() => { placed.fill(null); loop.wake(); }); resized.observe(host); const [ox, oy] = origin(); springs.forEach((p) => { p.x = ox; p.y = oy; }); if (openRef.current) toggle(true); host.dataset.ready = 'true'; loop.wake(); return () => { loop.dispose(); motion.dispose(); resized.disconnect(); host.removeEventListener('pointerdown', down); host.removeEventListener('pointermove', move); host.removeEventListener('pointerup', up); host.removeEventListener('pointercancel', up); delete host.dataset.ready; }; }, [list]); useEffect(() => { api.current.wake(); }, [paused, autoPlay]); const flip = () => { const next = !openRef.current; setOpen(next); openRef.current = next; api.current.toggle(next); }; flipRef.current = flip; return (

{list.map((file, i) => (

{String(file.name)} — *{String(file.name).slice(0, 24)}*

))}

); } const styles = ` .folder-burst{position:relative;width:100%;height:100%;min-height:280px;overflow:hidden;isolation:isolate;container-type:size;font-family:'Urbanist Variable',Urbanist,system-ui,sans-serif;touch-action:none;user-select:none} .fb-folder{position:absolute;left:0;right:0;top:0;bottom:10%;margin:auto;width:fit-content;height:fit-content;z-index:1;display:grid;justify-items:center;gap:6px;padding:8px 10px;border:0;border-radius:10px;background:transparent;cursor:pointer;color:#1d2433;font:500 clamp(9px,1.2cqw,12px)/1.1 inherit;transition:background .2s ease} .fb-folder:hover,.fb-folder:focus-visible{background:#ffffff80;outline:none} .fb-folder:focus-visible{box-shadow:0 0 0 2px var(--fb-tint)} .fb-folder svg{width:clamp(44px,7cqw,76px);height:auto;filter:drop-shadow(0 6px 10px rgba(30,50,110,.25))} .fb-win{position:absolute;left:0;top:0;z-index:2;margin:0;width:clamp(70px,13cqw,170px);background:#fdfdfc;border-radius:clamp(5px,.8cqw,9px);overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.05),0 20px 34px -18px rgba(25,40,80,.45);opacity:0;cursor:grab;will-change:transform} .fb-win[data-tall]{width:clamp(56px,10cqw,130px)} .fb-win[data-drag]{cursor:grabbing;box-shadow:0 1px 0 rgba(0,0,0,.05),0 34px 50px -20px rgba(25,40,80,.55)} .fb-win figcaption{display:flex;align-items:center;gap:3px;padding:4px 6px;font-size:clamp(6px,.9cqw,10px);color:#555;white-space:nowrap;overflow:hidden} .fb-win figcaption i{flex:none;width:6px;height:6px;border-radius:50%;background:#ff5f57} .fb-win figcaption i:nth-child(2){background:#febc2e}.fb-win figcaption i:nth-child(3){background:#28c840;margin-right:4px} .fb-win figcaption span{overflow:hidden;text-overflow:ellipsis} .fb-win img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;pointer-events:none} .fb-win[data-tall] img{aspect-ratio:3/4} @media (prefers-reduced-motion:reduce){.fb-folder{transition:none}} `; 18:Ta89,/** * Shared animation loop for Motiqo motion pieces. It runs `tick` on requestAnimationFrame only while * the host is on screen, the tab is visible and the caller is not paused; `tick` returns false when * there is nothing left to animate, and `wake()` starts it again. Time is passed in seconds, clamped * so a long stall never produces a jump. */ export type FrameLoop = { wake: () => void; dispose: () => void; readonly running: boolean; }; export function frameLoop( host: Element, tick: (dt: number, time: number) => boolean | void, blocked: () => boolean = () => false, ): FrameLoop { let raf = 0, last = 0, time = 0, onScreen = true, disposed = false; const allowed = () => !disposed && onScreen && !document.hidden && !blocked(); const frame = (now: number) => { raf = 0; const dt = last ? Math.min(0.05, Math.max(0, (now - last) / 1000)) : 1 / 60; last = now; time += dt; const more = tick(dt, time); if (more !== false && allowed()) raf = requestAnimationFrame(frame); else last = 0; }; const wake = () => { if (allowed()) { if (!raf) raf = requestAnimationFrame(frame); } else { if (raf) cancelAnimationFrame(raf); raf = 0; last = 0; } }; const seen = new IntersectionObserver(([entry]) => { onScreen = entry.isIntersecting; wake(); }); seen.observe(host); document.addEventListener('visibilitychange', wake); return { wake, dispose() { disposed = true; if (raf) cancelAnimationFrame(raf); raf = 0; seen.disconnect(); document.removeEventListener('visibilitychange', wake); }, get running() { return raf !== 0; }, }; } /** Subscribes to prefers-reduced-motion; returns the query and an unsubscribe function. */ export function reducedMotion(onChange: () => void) { const query = matchMedia('(prefers-reduced-motion: reduce)'); query.addEventListener('change', onChange); return { query, dispose: () => query.removeEventListener('change', onChange) }; } export const clampNumber = ( value: unknown, fallback: number, min: number, max: number, ) => { const n = typeof value === 'number' && Number.isFinite(value) ? value : fallback; return Math.min(max, Math.max(min, n)); }; export const isHex = (value: unknown): value is string => typeof value === 'string' && /^#[\da-f]{6}$/i.test(value); export const smooth = (t: number) => { const x = Math.min(1, Math.max(0, t)); return x * x * (3 - 2 * x); }; export const easeOutBack = (t: number) => { const x = Math.min(1, Math.max(0, t)), c = 1.70158; return 1 + (c + 1) * Math.pow(x - 1, 3) + c * Math.pow(x - 1, 2); }; b:["$","$L16",null,{"viewer":{"user":null,"pro":false,"plan":null,"renewsAt":null,"cancelAtPeriodEnd":false,"provider":null},"initialView":"preview","originalSource":{"folder-burst":[{"name":"folder-burst.tsx","code":"$17"},{"name":"frame-loop.ts","code":"$18"}]},"initialElement":"folder-burst","initialConfiguration":"$undefined","initialSaved":false,"initialTag":"","initialGroup":"$undefined","initialFree":false}]