1b:I[55681,["/_next/static/immutable/chunks/1q7k1nvjizi_i.js","/_next/static/immutable/chunks/2p8l3nuk8gk86.js","/_next/static/immutable/chunks/1d2_ynpuj2eev.js","/_next/static/immutable/chunks/2t_0d26z78zz9.js","/_next/static/immutable/chunks/1xn4tjfk8re4z.js","/_next/static/immutable/chunks/1mya-vf0cmc-s.js"],"default"] 1c:T2c2b,"use client"; import type React from "react"; import { useEffect, useRef, useState } from "react"; import { animate, useReducedMotion } from "motion/react"; import "./weather.css"; /* ------------------------------------------------------------------ props -- */ export type WeatherCondition = "clear" | "partly" | "rain"; export type WeatherDay = { /** Short day name, as it reads in the forecast. */ day: string; condition: WeatherCondition; /** What the main panel says once this day is picked. */ label: string; low: number; high: number; }; export type WeatherProps = { /** The city on the square, compact card. */ city?: string; /** The city once the card has opened out into the forecast. */ forecastCity?: string; /** Five days works best; the first is the one shown on arrival. */ days?: WeatherDay[]; /** Start opened out rather than as the square. */ defaultExpanded?: boolean; /** "light" sits on a pale page; "dark" swaps the shell and forecast to graphite for a dark one. */ theme?: "light" | "dark"; /** Fired when a day is picked from the forecast. */ onSelect?: (day: WeatherDay, index: number) => void; }; /* ------------------------------------------------------------------- data -- */ const DAYS: WeatherDay[] = [ { day: "Mon", condition: "clear", label: "Clear sky", low: 8, high: 24 }, { day: "Tue", condition: "partly", label: "Partly cloudy", low: 11, high: 25 }, { day: "Wed", condition: "rain", label: "Rain showers", low: 13, high: 22 }, { day: "Thu", condition: "partly", label: "Partly cloudy", low: 12, high: 23 }, { day: "Fri", condition: "partly", label: "Partly cloudy", low: 12, high: 23 }, ]; /* * The main panel takes the colour of the day on show. The hues live in the * stylesheet as tokens, so each theme can tune them for its own ground. */ const PANEL: Record = { clear: "var(--pwx-clear)", partly: "var(--pwx-partly)", rain: "var(--pwx-rain)", }; /* strong ease-out, for anything entering */ const EASE_OUT = [0.23, 1, 0.32, 1] as const; /* ------------------------------------------------------------------ icons -- */ /* the forecast's icons are in colour; the panel's are one ink, since they sit on colour */ function Rays({ mono }: { mono?: boolean }) { const lines = mono ? [ [16, 1.9, 16, 6.4], [16, 25.6, 16, 30.1], [1.9, 16, 6.4, 16], [25.6, 16, 30.1, 16], [6, 6, 9.2, 9.2], [22.8, 22.8, 26, 26], [6, 26, 9.2, 22.8], [22.8, 9.2, 26, 6], ] : [ [16, 2.4, 16, 6.2], [16, 25.8, 16, 29.6], [2.4, 16, 6.2, 16], [25.8, 16, 29.6, 16], [6.4, 6.4, 9.1, 9.1], [22.9, 22.9, 25.6, 25.6], [6.4, 25.6, 9.1, 22.9], [22.9, 9.1, 25.6, 6.4], ]; return ( {lines.map(([x1, y1, x2, y2], i) => ( ))} ); } const CLOUD = "a5.3 5.3 0 0 1-.5-10.6 7 7 0 0 1 13.2 1.6 4.6 4.6 0 0 1-.9 9z"; function Icon({ kind, mono }: { kind: WeatherCondition; mono?: boolean }) { const sun = mono ? "currentColor" : "#FFC800"; if (kind === "clear") { return ( ); } if (kind === "partly") { return ( ); } const top = mono ? 22.4 : 22.8; const drop = mono ? 25.2 : 25.4; return ( ); } /* --------------------------------------------------------------- odometer -- */ /** * The temperature. Each digit is a 0–9 strip in a clipping box; a new reading * only translates the strips, so the number rolls to its digits rather than * ticking through every value — and a second change mid-roll retargets from * wherever the strip has got to. */ function Odometer({ value, instant }: { value: number; instant: boolean }) { const digits = String(value).split(""); return ( {digits.map((digit, i) => ( ))} ); } /* -------------------------------------------------------------- component -- */ /** * A weather widget that opens out into a five-day forecast. * * One card, two states. Compact it is a square panel; opened, the panel shrinks * into a black shell and a dark forecast slides out beside it. Every dimension * is a custom property, so the two states — and the phone layout, where the * forecast stacks underneath — are the same few transitions with different * numbers, and a toggle mid-flight retargets instead of restarting. */ export default function Weather({ city = "Los Angeles", forecastCity = "Amsterdam", days = DAYS, defaultExpanded = false, theme = "light", onSelect, }: WeatherProps) { const reduced = useReducedMotion(); const rootRef = useRef(null); const [expanded, setExpanded] = useState(defaultExpanded); const [picked, setPicked] = useState(0); const [pressed, setPressed] = useState(false); /* the label on show, which trails the pick so the old one can blur out first */ const [label, setLabel] = useState(days[0]?.label ?? ""); const [swapping, setSwapping] = useState(false); /* the strips start at 0 and roll up to the first reading once the card lands */ const [temp, setTemp] = useState(0); const [instant, setInstant] = useState(true); const day = days[picked] ?? days[0]; /* the entrance: up and in, then the odometer rolls to its first reading */ useEffect(() => { const el = rootRef.current; if (!el) return; const first = days[0]?.high ?? 0; if (reduced) { setTemp(first); return; } const anim = animate( el, { opacity: [0, 1], transform: ["translateY(10px) scale(0.97)", "translateY(0px) scale(1)"] }, { duration: 0.3, ease: EASE_OUT }, ); /* the inline transform is cleared once it lands, so hover and press own it again */ anim.finished.then(() => { el.style.transform = ""; el.style.opacity = ""; }); /* let the zeroed strips paint, then allow the roll */ const frame = requestAnimationFrame(() => setInstant(false)); const roll = setTimeout(() => setTemp(first), 120); return () => { anim.stop(); cancelAnimationFrame(frame); clearTimeout(roll); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /* label: out fast, in behind the icon */ const swapTimer = useRef>(undefined); useEffect(() => () => clearTimeout(swapTimer.current), []); function toggle() { setExpanded((open) => !open); } function pick(i: number) { if (i === picked) return; const next = days[i]; setPicked(i); setTemp(next.high); clearTimeout(swapTimer.current); if (reduced) { setLabel(next.label); } else { setSwapping(true); swapTimer.current = setTimeout(() => { setLabel(next.label); setSwapping(false); }, 130); } onSelect?.(next, i); } return (

setPressed(true)} onPointerUp={() => setPressed(false)} onPointerCancel={() => setPressed(false)} onPointerLeave={() => setPressed(false)} > {/* ── the main panel: tap it to open or close the forecast ── */}

{ if (event.key === "Enter" || event.key === " ") { event.preventDefault(); toggle(); } }} >

{(["clear", "partly", "rain"] as const).map((kind) => ( ))} {label}

{city} {forecastCity}

{/* ── the dark forecast, parked outside the card until it opens ── */}

{days.map((d, i) => ( ))}

); } 1d:T2ed0,/* =========================================================================== Weather — a square widget that opens out into a five-day forecast. Every dimension is a custom property, so compact, expanded and the phone layout (where the forecast stacks underneath instead of beside) are the same transitions with different numbers. State lives in data attributes, so a toggle mid-flight retargets from wherever things are. =========================================================================== */ .pwx { /* light: the panel colours, the black shell and the forecast drawn on it */ --pwx-clear: #ffe500; --pwx-partly: #9ed0ff; --pwx-rain: #aab7c4; --pwx-shell: #000000; --pwx-shell-edge: transparent; --pwx-panel: #1c1c1e; --pwx-low: #5b5b60; --pwx-high: #8e8e93; --pwx-focus: rgba(0, 0, 0, 0.35); /* strong custom curves: the built-in easings are too weak */ --pwx-out: cubic-bezier(0.23, 1, 0.32, 1); --pwx-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* a small overshoot, enough to feel alive and not enough to wobble */ --pwx-bounce: cubic-bezier(0.34, 1.26, 0.44, 1); --card-w: 210px; --card-h: 210px; --card-r: 36px; --main-w: 210px; --main-h: 210px; --main-x: 0px; --main-y: 0px; --main-r: 36px; --content-scale: 0.636; --dark-w: 240px; --dark-h: 224px; --dark-x: 210px; /* parked outside the card */ --dark-y: 14px; --dur: 380ms; position: relative; display: block; width: var(--card-w); height: var(--card-h); overflow: hidden; border-radius: var(--card-r); /* * Compact, the main panel covers the card exactly — painting the black shell * underneath would leave a dark fringe along the rounded edge, so the shell * is only painted while expanded. It flips at the very end of the collapse, * by which point the panel already covers it. */ background: transparent; color: #000; text-align: left; font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; contain: layout paint; touch-action: manipulation; user-select: none; transition: width var(--dur) var(--pwx-bounce), height var(--dur) var(--pwx-bounce), border-radius var(--dur) var(--pwx-drawer), background-color 1ms linear var(--dur), box-shadow 1ms linear var(--dur), transform 120ms var(--pwx-out); } .pwx[data-state="expanded"] { --card-w: 540px; --card-h: 252px; --card-r: 36px; --main-w: 260px; --main-h: 224px; --main-x: 14px; --main-y: 14px; --main-r: 26px; --content-scale: 0.678; --dark-x: 286px; --dark-y: 14px; --dur: 460ms; background: var(--pwx-shell); box-shadow: inset 0 0 0 1px var(--pwx-shell-edge); transition: width var(--dur) var(--pwx-bounce), height var(--dur) var(--pwx-bounce), border-radius var(--dur) var(--pwx-drawer), background-color 1ms linear, box-shadow 1ms linear, transform 120ms var(--pwx-out); } /* * Dark: the same card for a dark page. A pure-black shell would vanish into * it, so the shell is graphite with a hairline edge, the forecast is lifted a * step above it, and the panel hues take their dark-mode values — a touch * warmer and deeper, so they glow rather than glare. */ .pwx[data-theme="dark"] { --pwx-clear: #ffd60a; --pwx-partly: #82c3ff; --pwx-rain: #98a6b5; --pwx-shell: #161618; --pwx-shell-edge: rgba(255, 255, 255, 0.08); --pwx-panel: #242427; --pwx-low: #6e6e74; --pwx-high: #a1a1a7; --pwx-focus: rgba(0, 0, 0, 0.45); } .pwx *, .pwx *::before, .pwx *::after { box-sizing: border-box; } /* ── the main panel ── */ .pwx__main { position: absolute; top: 0; left: 0; width: var(--main-w); height: var(--main-h); border-radius: var(--main-r); background: var(--pwx-clear); transform: translate3d(var(--main-x), var(--main-y), 0); cursor: pointer; outline: none; touch-action: manipulation; /* the colour change takes plain ease; the morph keeps its own curves */ transition: background-color 280ms ease, width var(--dur) var(--pwx-bounce), height var(--dur) var(--pwx-bounce), border-radius var(--dur) var(--pwx-drawer), transform var(--dur) var(--pwx-bounce); } .pwx__main:focus-visible { box-shadow: inset 0 0 0 3px var(--pwx-focus); } /* the content keeps its compact layout and is scaled — no font-size or padding animates */ .pwx__content { display: flex; width: 330px; height: 330px; flex-direction: column; justify-content: space-between; padding: 44px 36px 36px; transform-origin: top left; transform: scale(var(--content-scale)); transition: transform var(--dur) var(--pwx-bounce); } .pwx__icon { display: block; width: 26px; height: 26px; } /* ── the temperature odometer ── */ .pwx__temp { display: flex; align-items: flex-start; font-size: 112px; font-weight: 500; line-height: 0.86; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; } .pwx__odometer { display: flex; } .pwx__digit { display: block; height: 0.86em; overflow: hidden; /* tracking lives between the columns: inside a clipping box it would shave each glyph */ letter-spacing: normal; } .pwx__digit + .pwx__digit { margin-left: -0.045em; } .pwx__strip { display: block; transform: translateY(calc(var(--d) * -10%)); transition: transform 420ms var(--pwx-bounce) calc(var(--n) * 45ms); } .pwx__strip > span { display: block; height: 0.86em; } .pwx__odometer[data-instant="true"] .pwx__strip { transition: none; } /* ── the city ── */ .pwx__city { position: relative; height: 34px; } .pwx__cityLabel { position: absolute; bottom: 0; left: 0; font-size: 31px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; /* the outgoing one leaves fast and the incoming one waits: two words never overlap legibly */ opacity: 1; filter: blur(0); transition: opacity 120ms var(--pwx-out), filter 120ms var(--pwx-out); } .pwx__cityLabel[data-city="expanded"], .pwx[data-state="expanded"] .pwx__cityLabel[data-city="compact"] { opacity: 0; filter: blur(4px); } .pwx[data-state="expanded"] .pwx__cityLabel[data-city="expanded"], .pwx[data-state="compact"] .pwx__cityLabel[data-city="compact"] { opacity: 1; filter: blur(0); transition: opacity 200ms var(--pwx-out) 150ms, filter 200ms var(--pwx-out) 150ms; } /* ── the forecast ── */ .pwx__forecast { position: absolute; top: 0; left: 0; display: flex; width: var(--dark-w); height: var(--dark-h); flex-direction: column; justify-content: space-between; padding: 18px 16px; border-radius: 26px; background: var(--pwx-panel); opacity: 0; transform: translate3d(var(--dark-x), var(--dark-y), 0); transition: opacity 140ms var(--pwx-out), width var(--dur) var(--pwx-bounce), height var(--dur) var(--pwx-bounce), transform var(--dur) var(--pwx-bounce); } .pwx[data-state="expanded"] .pwx__forecast { opacity: 1; transition: opacity 200ms var(--pwx-out) 120ms, width var(--dur) var(--pwx-bounce), height var(--dur) var(--pwx-bounce), transform var(--dur) var(--pwx-bounce); } .pwx__row { display: flex; width: 100%; align-items: center; margin: 0 -6px; padding: 3px 6px; border: 0; border-radius: 10px; color: #fff; background: transparent; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.5; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; outline: none; touch-action: manipulation; opacity: 0; transform: translate3d(10px, 0, 0); transition: opacity 120ms var(--pwx-out), transform 120ms var(--pwx-out), background-color 160ms ease; } .pwx__row[aria-pressed="false"] { color: #d1d1d6; } .pwx__row[aria-pressed="true"] { background: rgba(255, 255, 255, 0.09); } .pwx__row:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); } @media (hover: hover) and (pointer: fine) { .pwx__row[aria-pressed="false"]:hover { background: rgba(255, 255, 255, 0.05); } } .pwx__day { width: 52px; } .pwx__rowIcon { display: flex; width: 36px; justify-content: center; } .pwx__low { width: 32px; margin-left: auto; color: var(--pwx-low); text-align: right; } .pwx__high { width: 44px; color: var(--pwx-high); text-align: right; } /* in on expand, 40ms apart; out together on collapse */ .pwx[data-state="expanded"] .pwx__row { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 260ms var(--pwx-out) calc(160ms + var(--i) * 40ms), transform 260ms var(--pwx-bounce) calc(160ms + var(--i) * 40ms), background-color 160ms ease; } /* ── the condition: three stacked icons, one on show ── */ .pwx__condition { position: relative; display: flex; height: 30px; align-items: center; padding-left: 38px; } .pwx__condIcon { position: absolute; left: 0; display: block; width: 26px; height: 26px; opacity: 0; transform: scale(0.9); filter: blur(3px); transition: opacity 120ms var(--pwx-out), transform 120ms var(--pwx-out), filter 120ms var(--pwx-out); } .pwx__condText { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; transition: opacity 120ms var(--pwx-out), filter 120ms var(--pwx-out); } .pwx__condText[data-swapping="true"] { opacity: 0; filter: blur(4px); } .pwx[data-condition="clear"] .pwx__condIcon[data-cond-icon="clear"], .pwx[data-condition="partly"] .pwx__condIcon[data-cond-icon="partly"], .pwx[data-condition="rain"] .pwx__condIcon[data-cond-icon="rain"] { opacity: 1; transform: scale(1); filter: blur(0); transition: opacity 200ms var(--pwx-out) 130ms, transform 240ms var(--pwx-drawer) 130ms, filter 200ms var(--pwx-out) 130ms; } /* ── press and hover ── */ /* a deliberate press is slower; the release snaps back at 120ms */ .pwx[data-pressed="true"] { transform: scale(0.985); transition: width var(--dur) var(--pwx-bounce), height var(--dur) var(--pwx-bounce), border-radius var(--dur) var(--pwx-drawer), transform 180ms var(--pwx-out); } @media (hover: hover) and (pointer: fine) { .pwx:hover { transform: translateY(-2px); } .pwx[data-pressed="true"]:hover { transform: translateY(-2px) scale(0.985); } } /* constant decorative motion is linear */ .pwx__rays { transform-box: fill-box; transform-origin: center; animation: pwx-spin 24s linear infinite; } @keyframes pwx-spin { to { transform: rotate(360deg); } } /* ── phone: the forecast stacks underneath and slides up instead of out ── */ @media (max-width: 580px) { .pwx { --card-w: 210px; --card-h: 210px; --main-w: 210px; --main-h: 210px; --content-scale: 0.636; --dark-w: 186px; --dark-h: 214px; --dark-x: 12px; --dark-y: 210px; /* parked just under the card */ } .pwx[data-state="expanded"] { --card-w: 210px; --card-h: 440px; --main-w: 186px; --main-h: 186px; --main-x: 12px; --main-y: 12px; --main-r: 26px; --content-scale: 0.56; --dark-x: 12px; --dark-y: 210px; } /* a 44px touch target per row */ .pwx__row { margin: 0 -8px; padding: 6px 8px; } .pwx__forecast { padding: 14px 16px; } } /* gentler, not still: keep the fades, drop the movement and the morph */ @media (prefers-reduced-motion: reduce) { .pwx__rays { animation: none; } .pwx, .pwx__main, .pwx__content, .pwx__forecast, .pwx__row, .pwx[data-state="expanded"] .pwx__forecast, .pwx[data-state="expanded"] .pwx__row { transition: opacity 200ms ease; } .pwx:hover, .pwx[data-pressed="true"], .pwx[data-pressed="true"]:hover { transform: translate3d(0, 0, 0); } .pwx__strip { transition: none; } } 13:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Weather — Pin UI\",\"description\":\"A weather square that opens out into a five-day forecast. One card, two states. Tap the square and it springs open into a black shell with the forecast sliding out beside it; pick a day and the panel takes its colour while the temperature rolls to the new reading, digit by digit. Every dimension is \",\"url\":\"https://www.pinui.xyz/components/weather\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.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://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Weather\",\"item\":\"https://www.pinui.xyz/components/weather\"}]}"}}]],["$","$L1b",null,{"entry":{"slug":"weather","category":"cards","name":"Weather","isNew":true,"tagline":"A weather square that opens out into a five-day forecast.","blurb":"One card, two states. Tap the square and it springs open into a black shell with the forecast sliding out beside it; pick a day and the panel takes its colour while the temperature rolls to the new reading, digit by digit. Every dimension is a custom property, so a tap mid-flight retargets from wherever the card has got to.","highlights":["Square to forecast","Rolling odometer","Recolours by day","Light and dark"],"clip":"/clips/loop/weather.mp4","poster":"/clips/loop/weather.jpg","hero":false,"sound":false,"zoom":1.15,"stage":"#ebebeb","stageDark":"#0e0e0f","wide":true,"usage":"import Weather from \"@/components/library/Weather\";\n\n console.log(day)} />","props":[{"name":"city","type":"string","fallback":"\"Los Angeles\"","note":"The city on the square, compact card."},{"name":"forecastCity","type":"string","fallback":"\"Amsterdam\"","note":"The city once the card has opened into the forecast."},{"name":"days","type":"WeatherDay[]","fallback":"Mon–Fri","note":"Day, condition, label, low and high. The first is shown on arrival."},{"name":"defaultExpanded","type":"boolean","fallback":"false","note":"Start opened out rather than as the square."},{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"A black shell for a pale page, or a graphite one with a hairline edge for a dark page."},{"name":"onSelect","type":"(day, index) => void","note":"Fired when a day is picked from the forecast."}],"files":[{"name":"Weather.tsx","lang":"tsx"},{"name":"weather.css","lang":"css"}],"info":{"paragraphs":["Shut, it is a yellow square: the condition, the temperature and the city. Tap it and the card widens into a black shell, the panel shrinks into its left side, and a dark five-day forecast slides out beside it, its rows arriving forty milliseconds apart. On a phone there is no room to go sideways, so the forecast stacks underneath and slides up instead — the same transitions with different numbers.","Pick a day and the panel takes its colour — yellow for sun, pale blue for cloud, slate for rain — while the condition swaps through a blur and the temperature rolls. Each digit is a strip of 0 to 9 behind a clipping box, so a new reading only slides the strips, and a second pick mid-roll carries on from wherever they are. Everything is a CSS transition on custom properties, so nothing ever snaps back to start."]},"origin":{"label":"Weather-UI","href":"https://github.com/Rachit315/Weather-UI"}},"panes":[{"name":"Weather.tsx","lang":"tsx","code":"$1c"},{"name":"weather.css","lang":"css","code":"$1d"}],"registryUrl":"https://www.pinui.xyz/r/weather.json"}]]

Weather — Pin UI Component