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:T2875,'use client'; import { useEffect, useMemo, useRef, useState } from 'react'; /** * RosterRoll — an editorial index of people. Hovering a row rolls its name: the grey line slides up * and out while a darker copy rises from below, an arrow tucks in and a hairline underlines the row. * The picture panel answers with a slice wipe — the new picture drops in from the top edge over the * previous one. Filter chips collapse the list to a single discipline with a height animation. */ export type RosterPerson = { name: string; role: string; city: string; src: string }; export type RosterRollProps = { title?: string; people?: RosterPerson[]; background?: string; ink?: string; /** Step through the rows on its own until someone hovers the list. */ autoPlay?: boolean; compact?: boolean; paused?: boolean; className?: string; }; const g = (n: number) => `/media/gallery/image-${String(n).padStart(2, '0')}.webp`; const DEFAULT_PEOPLE: RosterPerson[] = [ { name: 'Ines Halvorsen', role: 'Art Director', city: 'Bergen', src: g(1) }, { name: 'Teo Marchetti', role: 'Motion Designer', city: 'Turin', src: g(2) }, { name: 'Ruth Adeyemi', role: 'Producer', city: 'Accra', src: g(13) }, { name: 'Kenji Arakawa', role: 'Motion Designer', city: 'Osaka', src: g(4) }, { name: 'Elio Brandt', role: 'Illustrator', city: 'Leipzig', src: g(7) }, { name: 'Samir Okonjo', role: 'Producer', city: 'Lisbon', src: g(15) }, { name: 'Mira Castell', role: 'Art Director', city: 'Valencia', src: g(18) }, { name: 'Jo Pellerin', role: 'Illustrator', city: 'Glasgow', src: g(14) }, ]; /** Distinct roles in first-seen order, prefixed with 'All'. */ export function rosterFilters(people: RosterPerson[]) { return ['All', ...new Set(people.map((p) => p.role))]; } export function rosterVisible(people: RosterPerson[], filter: string) { return people .map((p, i) => ({ p, i })) .filter(({ p }) => filter === 'All' || p.role === filter); } export default function RosterRoll({ title = 'The collective', people = DEFAULT_PEOPLE, background = '#f1f0eb', ink = '#141414', autoPlay = true, compact = false, paused = false, className = '', }: RosterRollProps) { const list = useMemo( () => (Array.isArray(people) && people.length ? people : DEFAULT_PEOPLE).slice(0, 12), [people], ); const filters = useMemo(() => rosterFilters(list), [list]); const [filter, setFilter] = useState('All'); const [active, setActive] = useState(0); const [shown, setShown] = useState<{ cur: number; prev: number; key: number }>({ cur: 0, prev: 0, key: 0, }); const touched = useRef(false); const visible = rosterVisible(list, filter); // The picture follows the active row with a wipe; rapid changes restart the wipe from the current frame. useEffect(() => { setShown((s) => s.cur === active ? s : { cur: active, prev: s.cur, key: s.key + 1 }, ); }, [active]); useEffect(() => { if (!visible.some((v) => v.i === active) && visible.length) setActive(visible[0].i); }, [filter]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { if ( !autoPlay || paused || touched.current || matchMedia('(prefers-reduced-motion: reduce)').matches ) return; const id = setInterval(() => { if (touched.current || document.hidden) return; setActive((a) => { const order = rosterVisible(list, filter).map((v) => v.i); const at = order.indexOf(a); return order[(at + 1) % order.length] ?? 0; }); }, 1500); return () => clearInterval(id); }, [autoPlay, paused, list, filter]); const person = list[active] ?? list[0]; return (

{String(title).slice(0, 32)} ^{({list.length})}

{!compact && ( )}

{person.name} No. {String(active + 1).padStart(2, '0')}

{`${person.name}, — {person.name} No. {String(active + 1).padStart(2, '0')}

); } const styles = ` .roster-roll{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;container-type:size;display:grid;grid-template-columns:1fr minmax(0,36%);grid-template-rows:auto 1fr;gap:clamp(8px,2cqh,20px) clamp(14px,3cqw,40px);padding:clamp(14px,3.4cqw,40px);box-sizing:border-box;font-family:'Urbanist Variable',Urbanist,system-ui,sans-serif} .roster-roll[data-compact]{grid-template-columns:1fr minmax(0,40%)} .rr-head{grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} .rr-title{margin:0;font-size:clamp(22px,min(5.4cqw,9cqh),64px);font-weight:500;letter-spacing:-.035em;line-height:1} .rr-title sup{font-size:.22em;margin-left:.3em;opacity:.55;letter-spacing:0} .rr-chips{display:flex;gap:4px;flex-wrap:wrap} .rr-chips button{border:0;border-radius:99px;padding:.45em .9em;background:#00000010;color:inherit;font:500 clamp(9px,1.05cqw,12px)/1 inherit;cursor:pointer;transition:background .3s ease,color .3s ease} .rr-chips button[aria-pressed=true]{background:#141414;color:#f1f0eb} .rr-chips button:focus-visible{outline:2px solid currentColor;outline-offset:2px} .rr-list{list-style:none;margin:0;padding:0;align-self:start;border-top:1px solid #00000014} .rr-row{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s cubic-bezier(.7,0,.2,1),opacity .4s ease} .rr-row[data-hidden]{grid-template-rows:0fr;opacity:0} .rr-row>button{min-height:0;overflow:hidden;position:relative;display:grid;grid-template-columns:2.2em 1fr 1fr 5em;align-items:center;width:100%;border:0;border-bottom:1px solid #00000012;background:none;color:inherit;font:inherit;text-align:left;padding:clamp(4px,1.1cqh,9px) 0;cursor:pointer} .rr-row>button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)} .rr-row[data-active]>button::after{transform:scaleX(1)} .rr-row>button:focus-visible{outline:2px solid currentColor;outline-offset:-2px} .rr-n{font-size:clamp(8px,.9cqw,10px);opacity:.45} .rr-name{display:block;height:1.15em;overflow:hidden;font-size:clamp(13px,min(2.3cqw,4.4cqh),26px);letter-spacing:-.02em;line-height:1.15} .rr-roll{display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.7,0,.2,1)} .rr-roll span{display:block;height:1.15em;white-space:nowrap} .rr-roll span:first-child{opacity:.42} .rr-roll b{font-weight:400;font-size:.7em;vertical-align:.12em} .rr-row[data-active] .rr-roll{transform:translateY(-1.15em)} .rr-role,.rr-city{font-size:clamp(8px,.95cqw,11px);opacity:.5;transition:opacity .4s ease} .rr-city{text-align:right} .rr-row[data-active] .rr-role,.rr-row[data-active] .rr-city{opacity:1} .rr-frame{position:relative;grid-row:2;grid-column:2;margin:0;align-self:start;aspect-ratio:4/5;max-height:100%;overflow:hidden;background:#ddd} .rr-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .rr-cur{clip-path:inset(0 0 100% 0);animation:rr-wipe .7s cubic-bezier(.7,0,.2,1) forwards} @keyframes rr-wipe{from{transform:translateY(-6%) scale(1.04)}to{clip-path:inset(0 0 0 0);transform:none}} .rr-frame figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:8px;color:#fff;font:500 clamp(8px,.9cqw,10px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;mix-blend-mode:difference} @container (max-width:640px){.rr-row>button{grid-template-columns:1.8em 1fr 3.6em}.rr-role{display:none}.rr-name{font-size:clamp(11px,3.4cqw,18px)}} @media (prefers-reduced-motion:reduce){.rr-roll,.rr-row,.rr-row>button::after{transition:none}.rr-cur{animation:none;clip-path: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":{"roster-roll":[{"name":"roster-roll.tsx","code":"$17"},{"name":"frame-loop.ts","code":"$18"}]},"initialElement":"roster-roll","initialConfiguration":"$undefined","initialSaved":false,"initialTag":"","initialGroup":"$undefined","initialFree":false}]