16:I[55681,["/_next/static/chunks/3g8_hmyztl7nn.js","/_next/static/chunks/3c_hwa5j8basr.js","/_next/static/chunks/3p5f5impi5ygx.js","/_next/static/chunks/3y7r-aox_bllu.js","/_next/static/chunks/21nqn21c9a8d1.js"],"default"] 17:T7d72,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { animate, hover, press, useAnimationFrame, useReducedMotion } from "motion/react"; import "./session-list.css"; /* ------------------------------------------------------------------ props -- */ export type SessionBlock = { label: string; seconds: number }; export type SessionListProps = { /** Corner radius of the card, 0–40px. */ corner?: number; /** * How many blocks of the plan are listed. Strings are accepted too, so the * documented `rows="4"` form works as well as `rows={4}`. */ rows?: 2 | 3 | 4 | "2" | "3" | "4"; /** The session itself. Each block is as wide on the track as it is long. */ plan?: SessionBlock[]; /** Show the fast-forward buttons under the card. */ speedControl?: boolean; /** Fired when a block hands over to the next one. */ onBlockChange?: (index: number, block: SessionBlock) => void; }; const DEFAULT_PLAN: SessionBlock[] = [ { label: "Preparation", seconds: 25 * 60 + 4 }, { label: "Warm up", seconds: 12 * 60 + 30 }, { label: "Main set", seconds: 18 * 60 }, { label: "Cool down", seconds: 6 * 60 + 45 }, ]; /** 1 = real time: one second on screen is one second of the session. */ const SPEEDS = [1, 10, 60]; /** How often the model is advanced, whether or not frames are running. */ const TICK_MS = 100; /** How long 00:00 is held before the next block opens. */ const HANDOVER_MS = 380; /** How long the finished card rests before it replays. */ const REST_MS = 2600; /** One period of the diagonal hatch, in px. */ const HATCH = 9.9; const clamp = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v)); const mmss = (s: number) => { const t = Math.max(0, Math.ceil(s - 1e-6)); return `${String(Math.floor(t / 60)).padStart(2, "0")}:${String(t % 60).padStart(2, "0")}`; }; /** The session total runs past an hour, so it gets an hour field. */ const hms = (s: number) => { const t = Math.max(0, Math.round(s)); const h = Math.floor(t / 3600); const head = h ? `${h}:${String(Math.floor((t % 3600) / 60)).padStart(2, "0")}` : String(Math.floor(t / 60)).padStart(2, "0"); return `${head}:${String(t % 60).padStart(2, "0")}`; }; const spoken = (s: number) => { const t = Math.max(0, Math.ceil(s - 1e-6)); const m = Math.floor(t / 60); return `${m ? `${m} min ` : ""}${t % 60} sec`; }; type Slot = { roll: HTMLSpanElement; front: HTMLSpanElement; back: HTMLSpanElement; value: string }; /* -------------------------------------------------------------- component -- */ /** * A session broken into blocks, counting down. * * One number drives the whole card: `elapsed`, the seconds spent in the session * so far. The live block, the time left on it, the playhead's position and * every block's state are all read back out of that number, so they cannot * disagree — the clock lands on 00:00 on the same tick the playhead reaches * the end of its block, and that is what hands over to the next one. * * The model is held in refs rather than React state on purpose. It advances ten * times a second, and a re-render per tick would both waste the work and fight * the animations for control of the same properties. React owns the shape of * the card; the clock owns what is written into it. */ export default function SessionList({ corner = 40, rows = 4, plan: rawPlan = DEFAULT_PLAN, speedControl = true, onBlockChange, }: SessionListProps) { const reduced = useReducedMotion(); const radius = clamp(corner, 0, 40); const cellCorner = Math.max(5, Math.round(radius * 0.3)); /* the plan, with each block's place on the timeline worked out once */ const rowCount = clamp(Number(rows) || 4, 2, 4); const plan = useRef<(SessionBlock & { start: number; end: number })[]>([]); const total = useRef(0); if (plan.current.length !== rowCount || plan.current[0]?.label !== rawPlan[0]?.label) { let cursor = 0; plan.current = rawPlan.slice(0, rowCount).map((block) => { const start = cursor; cursor += block.seconds; return { ...block, start, end: cursor }; }); total.current = cursor; } const blocks = plan.current; const [speed, setSpeed] = useState(SPEEDS[0]); /* --- the model, none of it in React state ------------------------------ */ const elapsed = useRef(0); const playing = useRef(true); const finished = useRef(false); const liveIndex = useRef(0); const shownIndex = useRef(-1); const hoverIndex = useRef(null); const lastFrame = useRef(0); const holdClock = useRef(false); const speedRef = useRef(SPEEDS[0]); /* the pill's own position, chasing the playhead on a spring integrated here */ const tipX = useRef(null); const tipV = useRef(0); const restTimer = useRef | undefined>(undefined); const handoverTimer = useRef | undefined>(undefined); const entranceTimer = useRef | undefined>(undefined); const hatchLoop = useRef | null>(null); /* --- DOM ---------------------------------------------------------------- */ const cardRef = useRef(null); const headBlockRef = useRef(null); const clockRef = useRef(null); const captionRef = useRef(null); const checkRef = useRef(null); const tickPathRef = useRef(null); const iconTickRef = useRef(null); const iconReplayRef = useRef(null); const trackRef = useRef(null); const tipLayerRef = useRef(null); const tipRef = useRef(null); const tipIndexRef = useRef(null); const tipLabelRef = useRef(null); const tipTimeRef = useRef(null); const tipArrowRef = useRef(null); const playheadRef = useRef(null); const cellRefs = useRef<(HTMLButtonElement | null)[]>([]); const slots = useRef<(Slot | null)[]>([]); const spring = useCallback( (stiffness: number, damping: number, mass = 1) => reduced ? ({ duration: 0 } as const) : ({ type: "spring", stiffness, damping, mass } as const), [reduced], ); /* everything below is derived — never stored twice */ const blockAt = useCallback( (t: number) => { for (let i = blocks.length - 1; i >= 0; i -= 1) if (t >= blocks[i].start) return i; return 0; }, [blocks], ); const leftOn = useCallback( (i: number) => blocks[i].end - clamp(elapsed.current, blocks[i].start, blocks[i].end), [blocks], ); const progressIn = useCallback( (i: number) => clamp((elapsed.current - blocks[i].start) / blocks[i].seconds, 0, 1), [blocks], ); /* --- the clock ---------------------------------------------------------- */ const setClock = useCallback((text: string) => { [...text].forEach((ch, i) => { const slot = slots.current[i]; if (!slot || slot.value === ch) return; const previous = slot.value; slot.value = ch; /* the value is written first and the roller's resting position shows it, so the clock is correct even if the slide never runs */ slot.front.textContent = ch; slot.back.textContent = previous; animate( slot.roll, { transform: ["translateY(-1em)", "translateY(0em)"] }, { duration: 0.26, ease: [0.22, 1, 0.36, 1] }, ); }); }, []); const drawClock = useCallback(() => { if (holdClock.current) return; setClock(finished.current ? "00:00" : mmss(leftOn(liveIndex.current))); }, [leftOn, setClock]); const drawHead = useCallback(() => { const cell = cellRefs.current[liveIndex.current]; const head = playheadRef.current; if (!cell || !head) return; head.style.transform = `translateX(${cell.offsetLeft + 4 + progressIn(liveIndex.current) * (cell.offsetWidth - 2)}px)`; head.style.opacity = finished.current ? "0" : playing.current ? "1" : "0.35"; }, [progressIn]); /* --- painting ----------------------------------------------------------- */ /* Motion draws the movement while the resting style is written at the same time, so a card in a tab that stopped rendering still reads correctly. */ const paintCells = useCallback( (animated = true) => { const spec = animated && !reduced ? { duration: 0.35, ease: [0.22, 1, 0.36, 1] as const } : { duration: 0 }; cellRefs.current.forEach((cell, i) => { if (!cell) return; const done = finished.current || i < liveIndex.current; const live = !finished.current && i === liveIndex.current; const fill = cell.querySelector("[data-fill]"); const hatch = cell.querySelector("[data-hatch]"); const ring = cell.querySelector("[data-ring]"); const mark = cell.querySelector("[data-done]"); if (!fill || !hatch || !ring || !mark) return; const fillTo = done ? 1 : live ? 0.6 : 0; animate(fill, { opacity: fillTo }, spec); animate(hatch, { opacity: live ? 1 : 0 }, spec); animate(ring, { opacity: live ? 1 : 0 }, spec); animate(mark, { opacity: done ? 1 : 0 }, spec); if (mark.firstElementChild) { animate(mark.firstElementChild, { scale: done ? 1 : 0.6 }, animated ? spring(520, 24) : { duration: 0 }); } fill.style.opacity = String(fillTo); hatch.style.opacity = live ? "1" : "0"; ring.style.opacity = live ? "1" : "0"; mark.style.opacity = done ? "1" : "0"; cell.setAttribute("aria-current", live ? "step" : "false"); }); }, [reduced, spring], ); /* where the pill wants to point: the playhead while the session runs, or the middle of whichever block the cursor is previewing */ const tipTargetX = useCallback(() => { const i = hoverIndex.current ?? liveIndex.current; const cell = cellRefs.current[i]; const track = trackRef.current; if (!cell || !track) return 0; const inside = hoverIndex.current !== null || finished.current ? cell.offsetLeft + cell.offsetWidth / 2 : cell.offsetLeft + 5 + progressIn(i) * (cell.offsetWidth - 2); return track.offsetLeft + inside; }, [progressIn]); const placeTip = useCallback( (seconds = 0, snap = false) => { const tip = tipRef.current; const card = cardRef.current; const arrow = tipArrowRef.current; if (!tip || !card || !arrow) return; const centre = tipTargetX(); const width = tip.offsetWidth; const style = getComputedStyle(card); const bounds = card.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight); const target = clamp(centre - width / 2, 0, Math.max(0, bounds - width)); if (snap || tipX.current === null || reduced) { tipX.current = target; tipV.current = 0; } else { /* fixed sub-steps, so the spring is stable whatever the tick rate is */ let left = Math.min(0.25, seconds); while (left > 0) { const h = Math.min(1 / 120, left); left -= h; tipV.current += ((target - tipX.current) * 260 - tipV.current * 30) * h; tipX.current += tipV.current * h; } } tip.style.transform = `translateX(${tipX.current}px)`; arrow.style.left = `${clamp(centre - tipX.current - 5, 10, Math.max(10, width - 20))}px`; }, [reduced, tipTargetX], ); /* the pill always describes one block: the live one, or the hovered one */ const showTip = useCallback( (i: number, { preview = false, animated = true }: { preview?: boolean; animated?: boolean } = {}) => { const tip = tipRef.current; if (!tip) return; const from = tip.offsetWidth; if (tipIndexRef.current) tipIndexRef.current.textContent = String(i + 1); if (tipLabelRef.current) tipLabelRef.current.textContent = blocks[i].label; if (tipTimeRef.current) { tipTimeRef.current.textContent = mmss(blocks[i].seconds); tipTimeRef.current.hidden = !preview; } tip.style.width = "auto"; const to = tip.offsetWidth; if (animated && !reduced && to !== from) { animate(tip, { width: [`${from}px`, `${to}px`] }, spring(400, 36)); } if (animated && !reduced && i !== shownIndex.current) { if (tipLabelRef.current) animate(tipLabelRef.current, { opacity: [0, 1], y: [7, 0] }, { duration: 0.24, ease: "easeOut" }); if (tipIndexRef.current) animate(tipIndexRef.current, { scale: [0.4, 1], opacity: [0, 1] }, spring(600, 22)); } shownIndex.current = i; if (!animated) placeTip(0, true); }, [blocks, placeTip, reduced, spring], ); const setCaption = useCallback( (text: string) => { const el = captionRef.current; if (!el || el.textContent?.trim() === text) return; /* the words change first; the fade is dressing */ el.textContent = text; if (!reduced) animate(el, { opacity: [0, 1], y: [7, 0] }, { duration: 0.24, ease: "easeOut" }); }, [reduced], ); /* --- transitions --------------------------------------------------------- */ const celebrate = useCallback(() => { /* a spring takes two keyframes, not three: the pop is the overshoot on the way back from the peak, not a middle frame */ if (checkRef.current) animate(checkRef.current, { scale: [1.22, 1] }, spring(500, 15)); if (tickPathRef.current) { animate( tickPathRef.current, { pathLength: [0, 1], opacity: [0.35, 1] }, reduced ? { duration: 0 } : { duration: 0.42, ease: [0.22, 1, 0.36, 1] }, ); } }, [reduced, spring]); const swapBadge = useCallback( (mode: "tick" | "replay") => { const toReplay = mode === "replay"; if (checkRef.current) { const title = toReplay ? "Replay the session" : "Finish this block now"; checkRef.current.title = title; checkRef.current.setAttribute("aria-label", title); } const tick = iconTickRef.current; const replay = iconReplayRef.current; if (!tick || !replay) return; animate(tick, { opacity: toReplay ? 0 : 1, scale: toReplay ? 0.6 : 1 }, spring(480, 26)); animate(replay, { opacity: toReplay ? 1 : 0, scale: toReplay ? 1 : 0.6 }, spring(480, 26)); tick.style.opacity = toReplay ? "0" : "1"; replay.style.opacity = toReplay ? "1" : "0"; }, [spring], ); const enterBlock = useCallback( (i: number, celebrated = false) => { liveIndex.current = i; paintCells(); setCaption(`Left for ${blocks[i].label.toLowerCase()}`); if (hoverIndex.current === null) { showTip(i); if (tipRef.current && !reduced) animate(tipRef.current, { scale: [0.92, 1] }, spring(520, 20)); } if (celebrated) celebrate(); drawClock(); drawHead(); onBlockChange?.(i, blocks[i]); }, [blocks, celebrate, drawClock, drawHead, onBlockChange, paintCells, reduced, setCaption, showTip, spring], ); const restart = useCallback(() => { clearTimeout(restTimer.current); clearTimeout(handoverTimer.current); holdClock.current = false; finished.current = false; playing.current = true; elapsed.current = 0; swapBadge("tick"); if (tipRef.current) { animate(tipRef.current, { opacity: 1 }, { duration: reduced ? 0 : 0.2 }); tipRef.current.style.opacity = "1"; } enterBlock(0); if (reduced) return; cellRefs.current.forEach((cell, i) => { if (cell) animate(cell, { scaleY: [0.82, 1] }, { ...spring(500, 26), delay: i * 0.05 }); }); }, [enterBlock, reduced, spring, swapBadge]); const setFinished = useCallback(() => { clearTimeout(handoverTimer.current); holdClock.current = false; finished.current = true; playing.current = false; elapsed.current = total.current; liveIndex.current = blocks.length - 1; paintCells(); drawClock(); drawHead(); setCaption(`Session complete · ${hms(total.current)} total`); celebrate(); swapBadge("replay"); if (hoverIndex.current === null) { showTip(blocks.length - 1); if (tipRef.current) { animate(tipRef.current, { opacity: [1, 0.35] }, { duration: reduced ? 0 : 0.3 }); tipRef.current.style.opacity = "0.35"; } } if (!reduced) { cellRefs.current.forEach((cell, i) => { if (cell) animate(cell, { scale: [1.04, 1] }, { ...spring(520, 22), delay: i * 0.05 }); }); } clearTimeout(restTimer.current); restTimer.current = setTimeout(restart, REST_MS); }, [blocks.length, celebrate, drawClock, drawHead, paintCells, reduced, restart, setCaption, showTip, spring, swapBadge]); /* a block runs out: the clock lands on 00:00 and rests there for a beat, then the next block's full length rolls in */ const handOver = useCallback( (next: number) => { clearTimeout(handoverTimer.current); holdClock.current = true; setClock("00:00"); handoverTimer.current = setTimeout( () => { holdClock.current = false; drawClock(); }, reduced ? 0 : HANDOVER_MS, ); enterBlock(next, true); }, [drawClock, enterBlock, reduced, setClock], ); /* jump to the start of a block — the clock, the playhead and every block state follow from the new `elapsed`, so nothing can drift out of step */ const goTo = useCallback( (i: number) => { clearTimeout(restTimer.current); clearTimeout(handoverTimer.current); holdClock.current = false; const next = clamp(i, 0, blocks.length); if (next >= blocks.length) { setFinished(); return; } finished.current = false; playing.current = true; elapsed.current = blocks[next].start; swapBadge("tick"); if (tipRef.current) { animate(tipRef.current, { opacity: 1 }, { duration: reduced ? 0 : 0.2 }); tipRef.current.style.opacity = "1"; } enterBlock(next); }, [blocks, enterBlock, reduced, setFinished, swapBadge], ); const setPlaying = useCallback( (next: boolean) => { if (finished.current) { restart(); return; } playing.current = next; if (hatchLoop.current) { if (next) hatchLoop.current.play(); else hatchLoop.current.pause(); } setCaption( next ? `Left for ${blocks[liveIndex.current].label.toLowerCase()}` : `Paused · ${mmss(leftOn(liveIndex.current))} left on ${blocks[liveIndex.current].label.toLowerCase()}`, ); drawHead(); }, [blocks, drawHead, leftOn, restart, setCaption], ); /* --- the loop ------------------------------------------------------------ `step` is idempotent: it consumes whatever real time has passed since it last ran, so it can be driven by anything. A timer drives it, because a countdown has to keep counting where animation frames are throttled; the frame loop rides along for a smooth playhead when it is running. */ const step = useCallback(() => { const now = performance.now(); const dt = Math.min(1000, Math.max(0, now - lastFrame.current)); lastFrame.current = now; if (playing.current && !finished.current && dt > 0) { elapsed.current = Math.min(total.current, elapsed.current + (dt / 1000) * speedRef.current); const i = blockAt(elapsed.current); if (elapsed.current >= total.current) setFinished(); else if (i !== liveIndex.current) handOver(i); else { drawHead(); drawClock(); } } placeTip(dt / 1000); }, [blockAt, drawClock, drawHead, handOver, placeTip, setFinished]); const stepRef = useRef(step); stepRef.current = step; useAnimationFrame(() => stepRef.current()); useEffect(() => { lastFrame.current = performance.now(); const ticker = setInterval(() => stepRef.current(), TICK_MS); return () => clearInterval(ticker); }, []); /* --- entrance ------------------------------------------------------------ */ useEffect(() => { paintCells(false); showTip(0, { animated: false }); drawClock(); drawHead(); swapBadge("tick"); if (!reduced) { hatchLoop.current = animate( Array.from(cardRef.current?.querySelectorAll("[data-hatch]") ?? []), { backgroundPositionX: ["0px", `${HATCH}px`] }, { duration: 1.1, ease: "linear", repeat: Number.POSITIVE_INFINITY }, ); } const onResize = () => { drawHead(); placeTip(0, true); }; /* a hidden tab must not fast-forward the session when it comes back */ const onVisible = () => { lastFrame.current = performance.now(); }; window.addEventListener("resize", onResize); document.addEventListener("visibilitychange", onVisible); return () => { window.removeEventListener("resize", onResize); document.removeEventListener("visibilitychange", onVisible); hatchLoop.current?.stop(); clearTimeout(restTimer.current); clearTimeout(handoverTimer.current); clearTimeout(entranceTimer.current); }; // the card is set up once, when it mounts // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { if (reduced) return; const card = cardRef.current; if (!card) return; const endEntrance = () => { clearTimeout(entranceTimer.current); const touched = [ card, checkRef.current, tipLayerRef.current, ...cellRefs.current, ...Array.from(headBlockRef.current?.children ?? []), ].filter(Boolean) as HTMLElement[]; touched.forEach((el) => { el.getAnimations().forEach((a) => a.cancel()); el.style.opacity = "1"; el.style.transform = "none"; }); paintCells(false); showTip(shownIndex.current < 0 ? liveIndex.current : shownIndex.current, { animated: false }); drawHead(); }; const play = () => { /* whatever the entrance is doing, 1.6s later the card is simply in its finished state — an animation frozen by a page that stopped rendering can never leave it half drawn */ clearTimeout(entranceTimer.current); entranceTimer.current = setTimeout(endEntrance, 1600); animate(card, { opacity: [0, 1], scale: [0.9, 1], y: [22, 0] }, spring(260, 24)); const head = Array.from(headBlockRef.current?.children ?? []) as HTMLElement[]; if (head.length) { animate(head, { opacity: [0, 1], y: [14, 0] }, { ...spring(340, 28), delay: (i: number) => 0.12 + i * 0.07 }); } if (checkRef.current) { animate(checkRef.current, { opacity: [0, 1], scale: [0.5, 1], rotate: [-25, 0] }, { ...spring(420, 18), delay: 0.24 }); } if (tickPathRef.current) { animate(tickPathRef.current, { pathLength: [0, 1] }, { duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1] }); } const cells = cellRefs.current.filter(Boolean) as HTMLElement[]; if (cells.length) { animate( cells, { opacity: [0, 1], scaleY: [0.55, 1], y: [10, 0] }, { ...spring(380, 26), delay: (i: number) => 0.2 + i * 0.06 }, ); } if (tipLayerRef.current) { animate(tipLayerRef.current, { opacity: [0, 1], scale: [0.7, 1], y: [10, 0] }, { ...spring(460, 20), delay: 0.52 }); } if (playheadRef.current) animate(playheadRef.current, { opacity: [0, 1] }, { duration: 0.4, delay: 0.64 }); }; /* an entrance played into a page nobody is looking at would only freeze half-way, so it waits for the page to be on screen */ if (document.visibilityState === "hidden") { const once = () => { if (document.visibilityState === "hidden") return; document.removeEventListener("visibilitychange", once); play(); }; document.addEventListener("visibilitychange", once); return () => document.removeEventListener("visibilitychange", once); } play(); // the entrance plays once, on mount // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /* --- the blocks ---------------------------------------------------------- */ /* * Hover and press go through Motion rather than React's pointer events. * `onPointerUp` never fires on an element the pointer has already left, so a * press that turns into a drag off the block would leave it shrunk; `press` * ends on pointer-up anywhere, and on cancel. */ useEffect(() => { if (reduced) return; const stops = cellRefs.current.flatMap((cell, i) => { if (!cell) return []; return [ hover(cell, () => { hoverIndex.current = i; animate(cell, { y: -2 }, spring(420, 28)); /* peek at that block without touching the session */ showTip(i, { preview: true }); return () => { animate(cell, { y: 0 }, spring(420, 28)); if (hoverIndex.current === i) { hoverIndex.current = null; showTip(liveIndex.current); } }; }), press(cell, () => { animate(cell, { scale: 0.955 }, spring(600, 30)); return () => animate(cell, { scale: 1 }, spring(500, 20)); }), ]; }); return () => stops.forEach((stop) => stop()); }, [blocks.length, reduced, showTip, spring]); /* --- keyboard ------------------------------------------------------------ */ function onKey(e: React.KeyboardEvent) { if (e.code === "Space") { e.preventDefault(); setPlaying(!playing.current); } else if (e.key === "ArrowRight") { goTo(liveIndex.current + 1); } else if (e.key === "ArrowLeft") { goTo(finished.current ? blocks.length - 1 : liveIndex.current - 1); } } /* --- render -------------------------------------------------------------- */ const clockText = mmss(blocks[0].seconds); return (

{[...clockText].map((ch, i) => ch === ":" ? ( : ) : ( { if (!el) { slots.current[i] = null; return; } const roll = el.firstElementChild as HTMLSpanElement; slots.current[i] = { roll, front: roll.children[0] as HTMLSpanElement, back: roll.children[1] as HTMLSpanElement, value: ch, }; }} > {ch} {ch} ), )}

Left for {blocks[0].label.toLowerCase()}

1 {blocks[0].label}

{blocks.map((block, i) => ( ))}

{speedControl && (

{SPEEDS.map((value) => ( ))}

)}

); } 18:T19f4,/* =========================================================================== Count down — a session broken into blocks --------------------------------------------------------------------------- Everything fluid is sized in `cqw` off the card itself rather than off the viewport, so the card keeps its proportions wherever it is placed — in a preview stage, a grid cell or a whole page — instead of only at the width it was drawn for. =========================================================================== */ .psess { --psess-card: #151515; --psess-muted: #8a8a8f; --psess-accent: #0a84ff; --psess-accent-deep: #0064d8; --psess-track: #0e2742; --psess-cell: #173a5e; --psess-cell-soft: #12314f; width: 100%; max-width: 312px; container-type: inline-size; font-family: Inter, "SF Pro Display", "Segoe UI", system-ui, sans-serif; color: #ffffff; text-align: left; } .psess *, .psess *::before, .psess *::after { box-sizing: border-box; } /* * `:where()` carries no specificity, so this reset sits *below* the component's * own class rules instead of above them. Written as a bare `.psess button` it * would outrank every single-class rule in this file and quietly strip the type * off the controls that set their own. */ .psess :where(button) { margin: 0; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .psess__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; width: 100%; padding: clamp(20px, 8.3cqw, 26px); overflow: hidden; background: var(--psess-card); box-shadow: 0 20px 45px -24px rgb(0 0 0 / 0.75); outline: none; user-select: none; } .psess__card:focus-visible { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25), 0 20px 45px -24px rgb(0 0 0 / 0.75); } /* --- header --------------------------------------------------------------- */ .psess__head { display: flex; align-items: flex-start; justify-content: space-between; } .psess__clock { display: flex; align-items: baseline; font-size: clamp(46px, 18.6cqw, 58px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: #ffffff; font-variant-numeric: tabular-nums; } .psess__colon { padding: 0 1px; } /* * A digit is a two-face roller: the glyph that is leaving slides up and out * while the one arriving takes its place. The resting position always shows * the current value, so the clock reads correctly even if no frame ever runs. */ .psess__digit { position: relative; display: inline-block; width: 0.6em; height: 1em; overflow: hidden; vertical-align: baseline; } .psess__roll { display: block; will-change: transform; } .psess__face { display: block; height: 1em; line-height: 1em; } .psess__caption { margin: clamp(6px, 2.9cqw, 9px) 0 0; font-size: clamp(13px, 4.8cqw, 15px); font-weight: 500; letter-spacing: -0.01em; color: var(--psess-muted); } .psess__check { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: clamp(34px, 12.2cqw, 38px); height: clamp(34px, 12.2cqw, 38px); margin-top: 3px; border-radius: 999px; background: var(--psess-accent); color: #ffffff; } .psess__check:focus-visible { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6); } .psess__check svg { grid-column: 1; grid-row: 1; width: clamp(16px, 5.8cqw, 18px); height: clamp(16px, 5.8cqw, 18px); } .psess__replay { opacity: 0; } /* --- the track ------------------------------------------------------------ */ .psess__lower { position: relative; } .psess__tipLayer { position: absolute; bottom: calc(100% + 11px); left: 0; right: 0; height: 34px; pointer-events: none; } .psess__tip { position: absolute; bottom: 0; left: 0; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 6px; border-radius: 10px; background: var(--psess-accent); } .psess__tipIndex { display: grid; flex: 0 0 auto; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: var(--psess-accent-deep); font-size: 11px; font-weight: 700; line-height: 1; color: #ffffff; } .psess__tipLabel { white-space: nowrap; font-size: clamp(13px, 4.65cqw, 14.5px); font-weight: 600; letter-spacing: -0.01em; color: #ffffff; } .psess__tipTime { white-space: nowrap; font-size: 13px; font-weight: 600; color: rgb(255 255 255 / 0.7); font-variant-numeric: tabular-nums; } .psess__tipTime[hidden] { display: none; } .psess__tipArrow { position: absolute; bottom: -4px; width: 10px; height: 10px; border-radius: 2px; background: var(--psess-accent); transform: rotate(45deg); } .psess__track { position: relative; display: flex; gap: 3px; padding: 4px; border-radius: 14px; background: var(--psess-track); } .psess__cell { position: relative; height: clamp(56px, 21.8cqw, 68px); min-width: 34px; overflow: hidden; background: var(--psess-cell-soft); } .psess__cell:focus-visible { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6); } .psess__fill, .psess__hatch, .psess__ring, .psess__done { position: absolute; inset: 0; opacity: 0; } .psess__fill { background: var(--psess-cell); } /* the live block is hatched, and the hatch scrolls while the session runs */ .psess__hatch { background-image: repeating-linear-gradient( -45deg, rgb(45 140 255 / 0.55) 0 2px, rgb(45 140 255 / 0) 2px 7px ); background-size: 9.9px 9.9px; } .psess__ring { box-shadow: inset 0 0 0 2px var(--psess-accent); pointer-events: none; } .psess__done { display: grid; place-items: center; pointer-events: none; } .psess__done svg { display: block; width: 15px; height: 15px; color: rgb(255 255 255 / 0.5); } /* where the session is, inside the live block */ .psess__head-line { position: absolute; top: 4px; bottom: 4px; left: 0; width: 2px; border-radius: 999px; background: #ffffff; pointer-events: none; } /* --- the speed control ---------------------------------------------------- */ .psess__speeds { display: flex; justify-content: center; gap: 6px; margin-top: 14px; } .psess__speed { padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.14); font-size: 12px; font-weight: 600; line-height: 1; color: #ffffff; transition: background-color 0.2s ease, color 0.2s ease; } .psess__speed--on { background: #ffffff; color: #0b1b2b; } e:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Count down — Pin UI\",\"description\":\"A session broken into blocks, counting down in real time. One number drives the whole card. The live block, the time left on it, the playhead and every block's state are read back out of the seconds elapsed, so they cannot disagree — the clock lands on 00:00 on the same tick the playhead reaches the\",\"url\":\"https://pinui.xyz/components/session-list\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://pinui.xyz/#components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Count down\",\"item\":\"https://pinui.xyz/components/session-list\"}]}"}}]],["$","$L16",null,{"entry":{"slug":"session-list","name":"Count down","tagline":"A session broken into blocks, counting down in real time.","blurb":"One number drives the whole card. The live block, the time left on it, the playhead and every block's state are read back out of the seconds elapsed, so they cannot disagree — the clock lands on 00:00 on the same tick the playhead reaches the end of its block, and that is what hands over to the next one.","highlights":["Real time by default","Blocks scaled to length","Keyboard driven","Survives a background tab"],"clip":"/clips/loop/session-list.mp4","poster":"/clips/loop/session-list.jpg","sound":false,"zoom":1.3,"stage":"#2d8cff","usage":"import SessionList from \"@/components/library/SessionList\";\n\n","props":[{"name":"corner","type":"number","fallback":"40","note":"Card radius, clamped to 0–40px. The blocks take 30% of it."},{"name":"rows","type":"2 | 3 | 4","fallback":"4","note":"How many blocks of the plan are listed. The string form, rows=\"4\", works too."},{"name":"plan","type":"SessionBlock[]","fallback":"four blocks","note":"Your own session. Each block is as wide on the track as it is long."},{"name":"speedControl","type":"boolean","fallback":"true","note":"The fast-forward buttons under the card."},{"name":"onBlockChange","type":"(i, block) => void","note":"Fired when one block hands over to the next."}],"files":[{"name":"SessionList.tsx","lang":"tsx"},{"name":"session-list.css","lang":"css"}],"info":{"paragraphs":["A session is a run of blocks, and the card counts down through them. Each block is drawn as wide on the track as it is long, so the row reads as a timeline rather than as four tabs — Preparation takes the most room because it takes the most time.","One number drives all of it. The live block, the time left on it, the playhead and every block's state are read back out of the seconds elapsed, so they cannot disagree: the clock lands on 00:00 on the same tick the playhead reaches the end of its block, and that is what hands over to the next one. Hover a block to peek at it without disturbing the session, click one to replay from there, or press the check to finish the live block early. Space pauses, the arrow keys step.","The clock runs in real time by default, so the countdown never skips a number; the speed control fast-forwards the same model without lying about the time."]},"origin":{"label":"Progress"}},"panes":[{"name":"SessionList.tsx","lang":"tsx","code":"$17"},{"name":"session-list.css","lang":"css","code":"$18"}],"registryUrl":"https://pinui.xyz/r/session-list.json"}]]

Count down — Pin UI Component