1b:I[55681,["/_next/static/immutable/chunks/1q7k1nvjizi_i.js","/_next/static/immutable/chunks/19landlw60_cl.js","/_next/static/immutable/chunks/1d2_ynpuj2eev.js","/_next/static/immutable/chunks/23k1rfrg9ssqm.js","/_next/static/immutable/chunks/2-5dryfi9zs6k.js","/_next/static/immutable/chunks/3sar0pp0k94or.js"],"default"] 1c:T4265,"use client"; import type React from "react"; import { useEffect, useRef } from "react"; import { animate, mix, motionValue, stagger, transform } from "motion/react"; import "./thermal-dial.css"; /** * Thermal Dial — a temperature card you set by turning its dial. * * Grab the card and drag round the ring: the reading follows on a hand-rolled * spring that overshoots and settles, the lit ticks carry a slow travelling * wave with a brighter comet at their head, and the heat at the foot of the * card rises and breathes with the number — cold blue through amber to a * summer red. The digits roll one slot at a time, and the season above them * swaps letter by letter through a blur. * * Drag, scroll, or focus it and use the arrow keys (Shift for fives, Home and * End for the ends of the scale). */ export type ThermalDialProps = { /** The reading it settles on after its opening sweep. */ defaultValue?: number; min?: number; max?: number; /** How wide the card is drawn, in px; it never exceeds 80% of the viewport. */ size?: number; theme?: "light" | "dark"; /** A line under the card saying how to use it. */ hint?: boolean; /** Fired when the reading is set, with the season it falls in. */ onChange?: (value: number, season: string) => void; }; const N = 96; // ticks const A0 = -115; // sweep, degrees from 12 o'clock, clockwise const A1 = 115; const GAP_HALF = (360 - (A1 - A0)) / 2; const CX = 220; // dial geometry in the 440 × 458 card space const CY = 322; const R = 166; const NEEDLE_TOP = CY - R - 16; const NEEDLE_LEN = 100; const SVGNS = "http://www.w3.org/2000/svg"; const seasonFor = (v: number) => (v < 5 ? "Winter" : v < 16 ? "Autumn" : v < 26 ? "Spring" : "Summer"); /* the heat palette: cold blue → amber → summer red, by absolute temperature */ const stops = [-9, 8, 22, 38, 70]; const c1 = transform(stops, ["#1d4ed8", "#0e7490", "#c2410c", "#e01e0b", "#b3071f"]); const c2 = transform(stops, ["#3b82f6", "#22d3ee", "#f59e0b", "#ff6410", "#ff3d1a"]); const c3 = transform(stops, ["#bfdbfe", "#a5f3fc", "#fde68a", "#ffc24a", "#ffb347"]); export default function ThermalDial({ defaultValue = 38, min = -9, max = 70, size = 340, theme = "dark", hint = true, onChange, }: ThermalDialProps) { const rootRef = useRef(null); const cardRef = useRef(null); const svgRef = useRef(null); const ticksRef = useRef(null); const needleRef = useRef(null); const washRef = useRef(null); const bloomRef = useRef(null); const haloRef = useRef(null); const seasonRef = useRef(null); const leadRef = useRef(null); const mainRef = useRef(null); const hintRef = useRef(null); /* read live inside the engine, so changing them never rebuilds it */ const onChangeRef = useRef(onChange); onChangeRef.current = onChange; const glowK = useRef(theme === "light" ? 0.5 : 1); useEffect(() => { glowK.current = theme === "light" ? 0.5 : 1; }, [theme]); useEffect(() => { const root = rootRef.current!; const card = cardRef.current!; const dial = svgRef.current!; const ticksG = ticksRef.current!; const needle = needleRef.current!; const wash = washRef.current!; const bloom = bloomRef.current!; const halo = haloRef.current!; const seasonEl = seasonRef.current!; const leadDigit = leadRef.current!; const mainDigit = mainRef.current!; const hintEl = hintRef.current; const MIN = min; const MAX = max; const START = Math.min(MAX, Math.max(MIN, defaultValue)); const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches; let alive = true; const cleanups: (() => void)[] = []; const clamp = (v: number, a = MIN, b = MAX) => Math.min(b, Math.max(a, v)); const toAngle = (v: number) => A0 + ((v - MIN) / (MAX - MIN)) * (A1 - A0); /* ── the tick ring ── */ ticksG.replaceChildren(); const ticks: { el: SVGLineElement; tf: number; edge: number; len: number; op: string }[] = []; for (let i = 0; i < N; i++) { const tf = i / (N - 1); const a = A0 + tf * (A1 - A0); const line = document.createElementNS(SVGNS, "line"); line.setAttribute("x1", String(CX)); line.setAttribute("x2", String(CX)); line.setAttribute("y1", String(CY - R)); line.setAttribute("stroke-width", "1.2"); line.setAttribute("transform", `rotate(${a.toFixed(2)} ${CX} ${CY})`); ticksG.appendChild(line); /* both ends of the arc dissolve into the heat */ const edge = 1 - Math.pow(Math.abs(a) / 120, 4); ticks.push({ el: line, tf, edge, len: -1, op: "" }); } /* ── digits: each slot rolls on its own ── */ let shownInt: number | null = null; function roll(el: HTMLElement, ch: string, dir: number) { if (el.textContent === ch) return; el.textContent = ch; if (reduce || !dir) return; animate(el, { y: [dir * 22, 0] }, { type: "spring", stiffness: 600, damping: 34 }); animate(el, { opacity: [0.35, 1], filter: ["blur(5px)", "blur(0px)"] }, { duration: 0.24, ease: "easeOut" }); } function setDigits(n: number, dir: number) { const s = String(Math.abs(n)); const lead = (n < 0 ? "−" : "") + s.slice(0, -1); // everything but the last digit roll(leadDigit, lead, dir); roll(mainDigit, s[s.length - 1], dir); } /* ── the season: letters stagger in and out through a blur ── */ let seasonName: string | null = null; let seasonTimer: ReturnType | undefined; const OUT_MS = 160; function letters(word: string) { seasonEl.replaceChildren( ...[...word].map((ch) => Object.assign(document.createElement("span"), { textContent: ch })), ); return seasonEl.querySelectorAll("span"); } function lettersIn(word: string) { const fresh = letters(word); if (reduce) return; animate(fresh, { y: [14, 0], scale: [0.9, 1] }, { type: "spring", stiffness: 420, damping: 26, delay: stagger(0.03) }); animate(fresh, { opacity: [0, 1], filter: ["blur(8px)", "blur(0px)"] }, { duration: 0.35, delay: stagger(0.03), ease: "easeOut" }); } /* * Timers, not awaited promises: an interrupted animation never resolves, * which could leave the label blank or stale. Sweeping past several * seasons quickly settles into a single swap to the last one. */ function setSeason(name: string) { if (name === seasonName) return; const first = seasonName === null; seasonName = name; clearTimeout(seasonTimer); if (first || reduce) return lettersIn(name); const old = seasonEl.querySelectorAll("span"); animate(old, { y: -10, opacity: 0, filter: "blur(6px)" }, { duration: OUT_MS / 1000, delay: stagger(0.015), ease: "easeIn" }); seasonTimer = setTimeout(() => { if (alive && seasonName === name) lettersIn(name); }, OUT_MS + old.length * 15); } cleanups.push(() => clearTimeout(seasonTimer)); /* ── the reading: a hand-rolled spring, and a free-running wave clock ── */ let target = reduce ? START : MIN; let cur = target; let vel = 0; let wave = 0; let lastColorAt: number | null = null; const glowIn = motionValue(reduce ? 1 : 0); // the bloom's intro fade function render() { const f = clamp((cur - MIN) / (MAX - MIN), 0, 1); if (lastColorAt === null || Math.abs(cur - lastColorAt) > 0.05) { root.style.setProperty("--pdial-c1", c1(cur)); root.style.setProperty("--pdial-c2", c2(cur)); root.style.setProperty("--pdial-c3", c3(cur)); lastColorAt = cur; } /* the band: lit ticks are longer, carry the wave, and brighten toward the head */ const amp = reduce ? 0 : 0.8 + f * 1.6; for (let i = 0; i < N; i++) { const tk = ticks[i]; const on = tk.tf <= f + 0.001; const behind = f - tk.tf; const comet = on && behind < 0.12 ? (1 - behind / 0.12) * 7 : 0; const undulate = on ? Math.sin(wave + i * 0.5) * amp : 0; const len = (on ? 12 : 9) + comet + undulate; const op = ((on ? 0.42 + (1 - clamp(behind * 2.2, 0, 1)) * 0.58 : 0.26) * tk.edge).toFixed(3); if (Math.abs(len - tk.len) > 0.04) { tk.el.setAttribute("y2", (CY - R - len).toFixed(2)); tk.len = len; } if (op !== tk.op) { tk.el.setAttribute("stroke-opacity", op); tk.op = op; } } needle.setAttribute("transform", `rotate(${toAngle(cur).toFixed(2)} ${CX} ${CY})`); /* heat rises and breathes with the reading */ const breathe = reduce ? 1 : 1 + Math.sin(wave * 0.5) * 0.015; wash.style.transform = `scaleY(${(mix(0.62, 1.05, f) * breathe).toFixed(4)})`; const g = glowIn.get() * glowK.current; bloom.style.opacity = (g * mix(0.4, 0.95, f) * breathe).toFixed(3); halo.style.opacity = (g * mix(0.2, 0.6, f)).toFixed(3); const r = Math.round(cur); if (r !== shownInt) { const dir = shownInt === null ? 0 : Math.sign(r - shownInt); shownInt = r; setDigits(r, dir); const name = seasonFor(r); setSeason(name); card.setAttribute("aria-valuenow", String(r)); card.setAttribute("aria-valuetext", `${r} degrees, ${name}`); } } let raf = 0; let last = performance.now(); function tick(now: number) { /* * Real elapsed time in 60fps frames, integrated in small steps, so a * throttled or busy tab still lands on time instead of in slow motion. */ let frames = Math.min(60, (now - last) / 16.67); last = now; wave += frames * 0.055; if (reduce) { cur = target; } else { const k = 0.16; // stiffness const d = 0.76; // damping while (frames > 0) { const dt = Math.min(1, frames); frames -= dt; vel += (target - cur) * k * dt; vel *= Math.pow(d, dt); cur += vel * dt; } if (Math.abs(target - cur) < 0.02 && Math.abs(vel) < 0.02) { cur = target; vel = 0; } } render(); raf = requestAnimationFrame(tick); } cleanups.push(() => cancelAnimationFrame(raf)); let reported = START; const setTarget = (v: number) => { target = clamp(Math.round(v)); if (target !== reported) { reported = target; onChangeRef.current?.(target, seasonFor(target)); } }; /* ── the intro: the card arrives, and the reading sweeps up from the bottom ── */ let introTimer: ReturnType | undefined; function intro() { if (!alive) return; last = performance.now(); raf = requestAnimationFrame(tick); if (reduce) { card.style.opacity = "1"; if (hintEl) hintEl.style.opacity = "1"; return; } animate(card, { scale: [0.88, 1], y: [36, 0] }, { type: "spring", stiffness: 140, damping: 18 }); animate(card, { opacity: [0, 1], filter: ["blur(18px)", "blur(0px)"] }, { duration: 0.65, ease: "easeOut" }); animate(ticks.map((t) => t.el), { opacity: [0, 1] }, { duration: 0.3, delay: stagger(0.006, { startDelay: 0.2, from: "center" }) }); animate(needle, { opacity: [0, 1] }, { duration: 0.4, delay: 0.45 }); animate(glowIn, 1, { duration: 1.4, delay: 0.3, ease: "easeOut" }); if (hintEl) animate(hintEl, { opacity: [0, 1], y: [6, 0] }, { duration: 0.6, delay: 1.4, ease: "easeOut" }); introTimer = setTimeout(() => { if (alive) target = START; }, 380); } cleanups.push(() => clearTimeout(introTimer)); /* the faces first, capped, so a slow font never holds it back */ void Promise.race([document.fonts.ready, new Promise((r) => setTimeout(r, 700))]).then(intro); /* ── drag round the ring ── */ let dragging = false; function valueFromPointer(e: PointerEvent) { const b = dial.getBoundingClientRect(); const x = ((e.clientX - b.left) / b.width) * 440 - CX; const y = ((e.clientY - b.top) / b.height) * 458 - CY; let a = (Math.atan2(x, -y) * 180) / Math.PI; // 0 = up, clockwise positive if (a > A1) a = a < A1 + GAP_HALF ? A1 : A0; // snap across the gap if (a < A0) a = a > A0 - GAP_HALF ? A0 : A1; return MIN + ((a - A0) / (A1 - A0)) * (MAX - MIN); } const onDown = (e: PointerEvent) => { if (e.button !== 0 && e.pointerType === "mouse") return; dragging = true; card.dataset.dragging = "true"; card.setPointerCapture(e.pointerId); setTarget(valueFromPointer(e)); }; const onMove = (e: PointerEvent) => { if (dragging) setTarget(valueFromPointer(e)); }; const release = () => { if (!dragging) return; dragging = false; card.dataset.dragging = "false"; }; /* wheel and keys step whole degrees */ const onWheel = (e: WheelEvent) => { e.preventDefault(); setTarget(target - Math.sign(e.deltaY)); }; const onKey = (e: KeyboardEvent) => { const step = e.shiftKey ? 5 : 1; const map: Record = { ArrowUp: step, ArrowRight: step, ArrowDown: -step, ArrowLeft: -step }; if (e.key in map) setTarget(target + map[e.key]); else if (e.key === "Home") setTarget(MIN); else if (e.key === "End") setTarget(MAX); else return; e.preventDefault(); }; card.addEventListener("pointerdown", onDown); card.addEventListener("pointermove", onMove); card.addEventListener("pointerup", release); card.addEventListener("pointercancel", release); card.addEventListener("wheel", onWheel, { passive: false }); card.addEventListener("keydown", onKey); cleanups.push(() => { card.removeEventListener("pointerdown", onDown); card.removeEventListener("pointermove", onMove); card.removeEventListener("pointerup", release); card.removeEventListener("pointercancel", release); card.removeEventListener("wheel", onWheel); card.removeEventListener("keydown", onKey); }); return () => { alive = false; cleanups.forEach((fn) => fn()); }; // the engine is built once per range; everything else is read through refs // eslint-disable-next-line react-hooks/exhaustive-deps }, [min, max]); return (

{/* the dial: ticks and needle, in the same 440 × 458 space as the card */}

{hint && (
Drag around the dial to set the temperature
)}

); } 1d:T210b,/* =========================================================================== Thermal Dial. The card is 440 × 458 in dial units, drawn at --pdial-w wide; every length on it is a fraction of that width, so it scales as one object. The heat palette — --pdial-c1 to --pdial-c3 — is rewritten live from the reading. =========================================================================== */ .pdial { --pdial-w: 340px; --pdial-h: calc(var(--pdial-w) * 458 / 440); --pdial-c1: #e3260f; --pdial-c2: #ff6a1a; --pdial-c3: #ffc457; --pdial-font-head: var(--font-manrope, "Manrope"), system-ui, sans-serif; --pdial-font-body: "Inter", system-ui, sans-serif; /* dark: the reference */ --pdial-card-top: #161616; --pdial-card-mid: #0b0b0b; --pdial-card-bot: #060606; --pdial-card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.035), 0 50px 100px -40px rgba(0, 0, 0, 1); --pdial-rim-top: rgba(255, 255, 255, 0.42); --pdial-rim-mid: rgba(255, 255, 255, 0.07); --pdial-ink: #ffffff; --pdial-label-top: #f4f4f4; --pdial-label-bot: #c6c6c6; --pdial-lead-1: #ffffff; --pdial-lead-2: rgba(255, 214, 200, 0.72); --pdial-lead-3: rgba(255, 190, 170, 0.16); --pdial-main-1: #ffffff; --pdial-main-2: #ffe1d7; --pdial-digit-sep: rgba(0, 0, 0, 0.6); --pdial-wash-op: 1; --pdial-hint: rgba(255, 255, 255, 0.5); position: relative; display: inline-flex; flex-direction: column; align-items: center; font-family: var(--pdial-font-body); user-select: none; -webkit-user-select: none; } /* light: the same object, daylight version */ .pdial[data-theme="light"] { --pdial-card-top: #fdfcfa; --pdial-card-mid: #f6f4f0; --pdial-card-bot: #efece7; --pdial-card-shadow: 0 0 0 1px rgba(40, 25, 10, 0.06), 0 1px 2px rgba(40, 25, 10, 0.06), 0 40px 70px -35px rgba(80, 45, 20, 0.45); --pdial-rim-top: rgba(255, 255, 255, 1); --pdial-rim-mid: rgba(255, 255, 255, 0.4); --pdial-ink: #141414; --pdial-label-top: #1a1a1a; --pdial-label-bot: #4a4744; --pdial-lead-1: #161616; --pdial-lead-2: rgba(70, 30, 15, 0.62); --pdial-lead-3: rgba(120, 40, 15, 0.14); --pdial-main-1: #141414; --pdial-main-2: #3d1a10; --pdial-digit-sep: rgba(255, 255, 255, 0.85); --pdial-wash-op: 0.78; --pdial-hint: rgba(20, 20, 20, 0.5); } .pdial__wrap { position: relative; } .pdial__card { position: relative; width: var(--pdial-w); height: var(--pdial-h); border-radius: calc(var(--pdial-w) * 0.3); background: radial-gradient(130% 80% at 50% 0%, var(--pdial-card-top) 0%, var(--pdial-card-mid) 45%, var(--pdial-card-bot) 100%); box-shadow: var(--pdial-card-shadow); opacity: 0; touch-action: none; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; transition: background 0.35s ease, box-shadow 0.35s ease; } .pdial__card[data-dragging="true"] { cursor: grabbing; } .pdial__card:focus-visible .pdial__rim { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pdial-ink) 45%, transparent); } /* the hairline rim: lit along the top, warm along the bottom */ .pdial__rim { position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, var(--pdial-rim-top) 0%, var(--pdial-rim-mid) 22%, var(--pdial-rim-mid) 52%, color-mix(in srgb, var(--pdial-c2) 70%, transparent) 84%, var(--pdial-c3) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .pdial__clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } /* heat rising from the floor, kept to the lower third */ .pdial__wash { position: absolute; inset: 0; opacity: var(--pdial-wash-op); background: radial-gradient(62% 22% at 50% 102%, #fff3d2 0%, color-mix(in srgb, var(--pdial-c3) 80%, transparent) 40%, transparent 80%), linear-gradient( 0deg, var(--pdial-c3) 0%, var(--pdial-c2) 8%, var(--pdial-c1) 19%, color-mix(in srgb, var(--pdial-c1) 38%, transparent) 29%, transparent 40% ); filter: blur(calc(var(--pdial-w) * 0.016)); transform-origin: 50% 100%; } /* daylight: the same heat, a touch softer and warmer so dark digits stay crisp */ .pdial[data-theme="light"] .pdial__wash { filter: blur(calc(var(--pdial-w) * 0.02)) saturate(0.88) brightness(1.1); } /* the lower side walls catch the light too */ .pdial__walls { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--pdial-wash-op); box-shadow: inset 0 calc(var(--pdial-w) * -0.02) calc(var(--pdial-w) * 0.04) calc(var(--pdial-w) * -0.012) color-mix(in srgb, var(--pdial-c3) 80%, white), inset calc(var(--pdial-w) * 0.016) calc(var(--pdial-w) * -0.05) calc(var(--pdial-w) * 0.05) calc(var(--pdial-w) * -0.03) color-mix(in srgb, var(--pdial-c2) 80%, transparent), inset calc(var(--pdial-w) * -0.016) calc(var(--pdial-w) * -0.05) calc(var(--pdial-w) * 0.05) calc(var(--pdial-w) * -0.03) color-mix(in srgb, var(--pdial-c2) 80%, transparent); } .pdial__bloom, .pdial__halo { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; } .pdial__bloom { right: 8%; bottom: calc(var(--pdial-h) * -0.08); left: 8%; height: calc(var(--pdial-h) * 0.22); background: radial-gradient(closest-side, color-mix(in srgb, var(--pdial-c3) 85%, white), color-mix(in srgb, var(--pdial-c2) 80%, transparent) 55%, transparent); filter: blur(calc(var(--pdial-w) * 0.07)); } .pdial__halo { inset: 45% -4% -2% -4%; background: radial-gradient(60% 50% at 50% 80%, color-mix(in srgb, var(--pdial-c2) 45%, transparent), transparent 70%); filter: blur(calc(var(--pdial-w) * 0.08)); } .pdial__dial { position: absolute; inset: 0; width: 100%; height: 100%; } .pdial__ticks { stroke: var(--pdial-ink); } .pdial__season { position: absolute; top: 15.5%; right: 0; left: 0; margin: 0; font-family: var(--pdial-font-head); font-size: calc(var(--pdial-w) * 0.094); font-weight: 800; line-height: 1; letter-spacing: 0.09em; /* balances the trailing letter-space so the word sits centred */ text-indent: 0.09em; text-align: center; } .pdial__season span { display: inline-block; /* * background-clip: text only paints inside the box, so the box is padded to * keep descenders (the g in Spring) whole, and the space handed back. */ margin: -0.1em 0 -0.24em; padding: 0.1em 0 0.24em; background: linear-gradient(180deg, var(--pdial-label-top) 30%, var(--pdial-label-bot) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; will-change: transform, filter, opacity; } .pdial__value { position: absolute; top: 46%; right: 0; left: 0; display: flex; justify-content: center; } .pdial__num { display: flex; align-items: flex-start; font-family: var(--pdial-font-head); font-size: calc(var(--pdial-w) * 0.45); font-weight: 500; line-height: 1; letter-spacing: 0; } .pdial__slot { position: relative; display: inline-block; } .pdial__slot > span { display: inline-block; -webkit-background-clip: text; background-clip: text; color: transparent; } /* the tens digit sits a touch larger and lower, sinking into the heat */ .pdial__lead { z-index: 0; margin-right: -0.07em; transform: translateY(0.1em) scale(1.08); transform-origin: 100% 0; } .pdial__lead > span { background-image: linear-gradient(180deg, var(--pdial-lead-1) 0%, var(--pdial-lead-1) 42%, var(--pdial-lead-2) 70%, var(--pdial-lead-3) 100%); } .pdial__main { z-index: 1; filter: drop-shadow(calc(var(--pdial-w) * -0.006) 0 calc(var(--pdial-w) * 0.012) var(--pdial-digit-sep)); } .pdial__main > span { background-image: linear-gradient(180deg, var(--pdial-main-1) 0%, var(--pdial-main-1) 58%, var(--pdial-main-2) 100%); } .pdial__degree { position: absolute; top: 0.13em; right: -0.15em; width: 0.072em; height: 0.072em; border: 0.011em solid var(--pdial-ink); border-radius: 50%; opacity: 0.92; } .pdial__hint { margin: calc(var(--pdial-w) * 0.22) 0 0; color: var(--pdial-hint); font-size: 12px; font-weight: 500; letter-spacing: 0.025em; text-align: center; opacity: 0; } @media (prefers-reduced-motion: reduce) { .pdial__card { transition: none; } } 13:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Thermal Dial — Pin UI\",\"description\":\"A thermal dial that undulates with heat and rolls through the seasons. Grab the dial and drag: 96 radial ticks undulate with a travelling wave and trailing comet while the needle sweeps. The season title staggers through a blur, the numbers roll per digit, and the ambient wash breathes with dynamic \",\"url\":\"https://www.pinui.xyz/components/thermal-dial\",\"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\":\"Thermal Dial\",\"item\":\"https://www.pinui.xyz/components/thermal-dial\"}]}"}}]],["$","$L1b",null,{"entry":{"slug":"thermal-dial","category":"cards","name":"Thermal Dial","isNew":true,"tagline":"A thermal dial that undulates with heat and rolls through the seasons.","blurb":"Grab the dial and drag: 96 radial ticks undulate with a travelling wave and trailing comet while the needle sweeps. The season title staggers through a blur, the numbers roll per digit, and the ambient wash breathes with dynamic temperature gradient colors.","highlights":["Travelling wave ticks","Seasons blur swap","Dynamic heat wash","Drag or scroll to dial"],"clip":"/clips/loop/thermal-dial.mp4?v=2","poster":"/clips/loop/thermal-dial.jpg?v=2","hero":false,"sound":false,"zoom":1,"stage":"#ebe9e5","clipStage":"#050706","spill":true,"stageDark":"#060606","usage":"import ThermalDial from \"@/components/library/ThermalDial\";\n\n console.log(value, season)} />","props":[{"name":"defaultValue","type":"number","fallback":"38","note":"The reading it sweeps up to and settles on when it first appears."},{"name":"min","type":"number","fallback":"-9","note":"The bottom of the scale."},{"name":"max","type":"number","fallback":"70","note":"The top of the scale."},{"name":"size","type":"number","fallback":"340","note":"How wide the card is drawn, in px. Everything on it scales with it; it never exceeds 80% of the viewport."},{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"dark\"","note":"Obsidian with an ember glow, or the same card in daylight porcelain."},{"name":"hint","type":"boolean","fallback":"true","note":"The line under the card saying how to use it."},{"name":"onChange","type":"(value, season) => void","note":"Fired whenever the reading is set, with the season it falls in."}],"files":[{"name":"ThermalDial.tsx","lang":"tsx"},{"name":"thermal-dial.css","lang":"css"}],"info":{"credit":{"label":"bencho.dev","href":"https://bencho.dev/"},"paragraphs":["A hardware-inspired thermal dial. Grab the card and drag along its circumference to set the reading; the needle tracks your pointer on a damped spring that overshoots and settles with natural inertia, while mouse wheel and arrow keys step through whole degrees.","The radial ring is 96 ticks that carry an undulating wave and a brighter comet at the head. The digits roll individually with blur transitions, the season name changes with staggered letter-by-letter blurs, and the bottom heat wash blends through five dynamic color stops from deep arctic blue to scorching crimson."]},"origin":{"label":"Temp"}},"panes":[{"name":"ThermalDial.tsx","lang":"tsx","code":"$1c"},{"name":"thermal-dial.css","lang":"css","code":"$1d"}],"registryUrl":"https://www.pinui.xyz/r/thermal-dial.json"}]]

Thermal Dial — Pin UI Component