60: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/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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"RegistryDependencies"] 61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T546e,import { useEffect, useId, useRef, useState, type CSSProperties, type KeyboardEvent } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"; /** One folder per tab, front of the rack first. `tab` is typed on the label; `band` is the colour stripe on it. */ const studio = { name: "Vale Street Studio", drawer: "Shoot files", hint: "Press a tab to flip to that file" }; const files = [ { tab: "Citrus", band: "#f07d1a", ref: "041", set: "Studio 2, orange cove", light: "One hard key, no fill", photo: "https://images.pexels.com/photos/18505997/pexels-photo-18505997.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#e8791c", alt: "A woman in a white top lying on an orange floor among scattered oranges, holding half an orange up to one eye", notes: "The whole set is painted the colour of the fruit, so only the white top and the skin read. Shoot from the ladder. Keep six spare oranges for the cut halves.", }, { tab: "Cobalt", band: "#2f63d6", ref: "042", set: "Studio 1, blue paper", light: "Soft top light, floor flagged", photo: "https://images.pexels.com/photos/30755172/pexels-photo-30755172.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#1f5fae", alt: "A woman in pale blue denim crouching with her arms crossed against a deep blue backdrop", notes: "Tone on tone: washed denim against nine metres of cobalt paper. Hair goes up as high as it will stand. Leave the floor seam in, because it gives the frame a horizon.", }, { tab: "Halo", band: "#f2c21b", ref: "043", set: "Studio 3, grey wall", light: "Snooted spot, yellow gel", photo: "https://images.pexels.com/photos/8542206/pexels-photo-8542206.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#b58a12", alt: "A figure in a black hat and a beige suit standing in front of a glowing yellow circle of light", notes: "One spot with a yellow gel makes the sun. The subject stands a metre off the wall so that the shadow falls inside the circle. The hat brim stays level in every frame.", }, { tab: "Mesa", band: "#b5482a", ref: "044", set: "Red quarry, east track", light: "Open shade, last hour", photo: "https://images.pexels.com/photos/15047595/pexels-photo-15047595.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#b9b4a8", alt: "A woman in a long white dress sitting on pale ground in front of a red sandstone outcrop", notes: "Drive out for the last hour, when the rock turns from orange to brick. The dress is spread wide and pinned to the ground. Bring water, boards and a broom for the footprints.", }, { tab: "Ember", band: "#e2341d", ref: "045", set: "Studio 2, red wall", light: "Two heads, bare bulbs", photo: "https://images.pexels.com/photos/39325164/pexels-photo-39325164.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#e2401a", alt: "A woman in an orange vest and a lime skirt seated against a saturated red and orange wall", notes: "A neon vest, a lime skirt and a wall mixed two shades hotter than either. Bare bulbs for a hard shine on the skin. The white arm wraps stay on: they are the styling.", }, ]; // Two sets of measurements in pixels: one for desks, one for phones. const WIDE = { fw: 640, fh: 344, tabW: 126, tabH: 32, m: 16, photoW: 204, photoH: 266, title: 50, text: 14.5, lead: 22.5, mono: 11, label: 11.5, wide: true }; const SLIM = { fw: 300, fh: 326, tabW: 66, tabH: 28, m: 9, photoW: 104, photoH: 138, title: 30, text: 12.5, lead: 18.5, mono: 9.5, label: 9, wide: false }; type Dims = typeof WIDE; const GAP = 26; // distance between one folder's hinge and the next, going back const PITCH = 27; // how far the camera looks down on the desk, in degrees const LEAN = 8; // standing folders lean back on the rest this much const flat = (i: number) => -(87.5 - 2.4 * i); // a tipped folder lies on the ones in front of it const svgUrl = (body: string, w: number, h: number) => `url("data:image/svg+xml;utf8,${encodeURIComponent(``)}")`; const FIBRE = svgUrl(``, 260, 260); const BRUSHED = svgUrl(``, 500, 200); const MANILA = "#e6c98f"; /** A folder dropped on the pile: it falls faster and faster, lands, and hops once. */ const fall = (t: number) => (t < 0.7 ? Math.pow(t / 0.7, 2.2) : 1 - 0.035 * Math.sin(((t - 0.7) / 0.3) * Math.PI)); function Clip({ className, style }: { className?: string; style?: CSSProperties }) { return ( ); } function Label({ i, d, active, focused }: { i: number; d: Dims; active: boolean; focused: boolean }) { const f = files[i]; return ( {f.tab} ); } function Folder({ i, d, tipped, wait, reduce, active, shaded, covered, focused, uid, onPick, onKey, onFocus, setRef }: { i: number; d: Dims; tipped: boolean; wait: number; reduce: boolean; active: boolean; shaded: boolean; covered: boolean; focused: boolean; uid: string; onPick: () => void; onKey: (e: KeyboardEvent) => void; onFocus: (e: { on: boolean; el: HTMLElement }) => void; setRef: (el: HTMLButtonElement | null) => void }) { const f = files[i]; const n = files.length; const angle = useMotionValue(tipped ? flat(i) : LEAN); const frontDim = useTransform(angle, [LEAN, -60], [0, 0.5]); const was = useRef(tipped); useEffect(() => { if (was.current === tipped || reduce) { was.current = tipped; angle.set(tipped ? flat(i) : LEAN); return; } was.current = tipped; const run = tipped ? animate(angle, flat(i), { duration: 0.62, delay: wait, ease: fall }) : animate(angle, LEAN, { type: "spring", stiffness: 150, damping: 19, delay: wait }); return () => run.stop(); }, [tipped, reduce, wait, angle, i]); const tl = (i * (d.fw - d.tabW)) / (n - 1); const cut = 9; const H = d.fh + d.tabH; const shapeFront = `polygon(0 ${d.tabH}px, ${tl}px ${d.tabH}px, ${tl + cut}px 0, ${tl + d.tabW - cut}px 0, ${tl + d.tabW}px ${d.tabH}px, 100% ${d.tabH}px, 100% 100%, 0 100%)`; const shapeBack = `polygon(0 0, 100% 0, 100% ${d.fh}px, ${tl + d.tabW}px ${d.fh}px, ${tl + d.tabW - cut}px 100%, ${tl + cut}px 100%, ${tl}px ${d.fh}px, 0 ${d.fh}px)`; const face = { backfaceVisibility: "hidden" as const, WebkitBackfaceVisibility: "hidden" as const }; return ( {/* front: the folder with its sheet and print clipped on */}

Shoot file {f.ref} {d.wide ? : null}

{f.tab}

{/* back: what you see when it lies on the pile, with the label repeated so the tab still reads */}

{/* the control sits on the tab itself and goes over with the folder */} ); } export default function ManilaFolderTabs() { const reduce = !!useReducedMotion(); const uid = useId(); const wrapRef = useRef(null); const tabs = useRef<(HTMLButtonElement | null)[]>([]); const [slim, setSlim] = useState(false); const [scale, setScale] = useState(1); const [sel, setSel] = useState({ now: 2, was: 2 }); const [focus, setFocus] = useState(-1); const idle = useRef({ touched: false, paused: false }); const d = slim ? SLIM : WIDE; const n = files.length; const rad = Math.PI / 180; const tall = d.fh + d.tabH; const W = d.fw + 64; const floorY = 58 + Math.round(tall * Math.cos((PITCH - LEAN) * rad) + (n - 1) * GAP * Math.sin(PITCH * rad)); const H = floorY + Math.round(tall * Math.sin((PITCH + 3) * rad) * 1.2) + 26; const baseW = d.fw + 56; const baseD = (n - 1) * GAP + 74; useEffect(() => { const wrap = wrapRef.current; if (!wrap) return; const measure = () => { const w = wrap.clientWidth; const narrow = w < 780; setSlim(narrow); setScale(Math.min(narrow ? 1.5 : 1, (w - 6) / ((narrow ? SLIM : WIDE).fw + 56))); }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); // until someone touches it, a hand flips through the rack useEffect(() => { if (reduce) return; const s = idle.current; const t = window.setInterval(() => { if (s.touched || s.paused || document.hidden) return; setSel((v) => ({ now: (v.now + 1) % n, was: v.now })); }, 3400); return () => window.clearInterval(t); }, [reduce, n]); const pick = (i: number, focusIt = false) => { idle.current.touched = true; setSel((v) => (v.now === i ? v : { now: i, was: v.now })); if (focusIt) tabs.current[i]?.focus(); }; const onKey = (i: number) => (e: KeyboardEvent) => { const to = e.key === "ArrowRight" || e.key === "ArrowDown" ? (i + 1) % n : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (i + n - 1) % n : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : -1; if (to < 0) return; e.preventDefault(); pick(to, true); }; const steel = { background: "#aab1b7", backgroundImage: `linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 40%, rgba(0,0,0,0.25)), ${BRUSHED}` }; return (

(idle.current.paused = true)} onPointerLeave={() => (idle.current.paused = false)} className="relative mx-auto w-full max-w-[1100px]" style={{ height: Math.round(H * scale) + (slim ? 96 : 70) }}>

{studio.name}: {studio.drawer}

`${uid}-t${i}`).join(" ")} />

{/* shadow on the desk, under the rack and under the pile */}

0 ? 1 : 0 }} /> {/* the rack: a brushed steel base and an angled rest behind */}

{files.map((_, i) => { const tipped = i < sel.now; const wait = sel.now > sel.was ? Math.max(0, i - sel.was) * 0.11 : Math.max(0, sel.was - 1 - i) * 0.11; return ( sel.now} covered={i + 1 < sel.now} focused={focus === i} uid={uid} onPick={() => pick(i)} onKey={onKey(i)} setRef={(el) => (tabs.current[i] = el)} onFocus={({ on, el }) => { idle.current.paused = on; setFocus((v) => (on ? (el.matches(":focus-visible") ? i : v) : v === i ? -1 : v)); }} /> ); })}

{studio.name}: {studio.drawer} {studio.hint}

); } 5f:["$","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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/manila-file-folder-tabs-in-a-steel-desk-rack-that-tip-forward-like-records-in-a-crate-to-show-the-chosen-file.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]