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[544296,["/_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"],"ItemStyles"] 62:I[8513,["/_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"],"ScrollArea"] 63:I[8513,["/_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"],"ScrollBar"] 64: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"] 65:T2bdc,"use client"; import { useEffect, useRef, type ReactNode } from "react"; import { animate, useMotionValue } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; // A click glides rather than teleports, so you see which way the divider // went; short enough that it never feels like waiting. const GLIDE_MS = 200; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const STEP = 0.05; // Horizontal travel before a touch counts as a drag; anything less stays a // tap, and vertical movement is left to the page via pan-y. const SLOP = 4; // Tags sit in the outer ~20% of the frame. They start fading at 35% visible // and are gone by 20%, before the divider can reach them. const TAG_FADE_START = 0.35; const TAG_FADE_END = 0.2; const clamp = (v: number) => Math.min(Math.max(v, 0), 1); const tagOpacity = (visible: number) => clamp((visible - TAG_FADE_END) / (TAG_FADE_START - TAG_FADE_END)); const percent = (v: number) => Math.round(v * 100); const valueText = (v: number) => `${percent(v)}% before, ${100 - percent(v)}% after`; type Drag = { id: number; startX: number; // Where on the handle it was grabbed, so the handle doesn't jump to // center itself under the pointer. offset: number; rect: DOMRect; active: boolean; }; export function CompareSlider({ before, after, initial = 0.5, label = "Comparison position", className, }: { before: ReactNode; after: ReactNode; initial?: number; label?: string; className?: string; }) { const reduceMotion = useReducedMotion(); const pos = useMotionValue(initial); const target = useRef(initial); const glideEnd = useRef(0); const drag = useRef(null); const rootRef = useRef(null); const afterRef = useRef(null); const dividerRef = useRef(null); const handleRef = useRef(null); const beforeTagRef = useRef(null); const afterTagRef = useRef(null); // Writes straight to the DOM so dragging never re-renders React. useEffect( () => pos.on("change", (v) => { afterRef.current?.style.setProperty( "clip-path", `inset(0 0 0 ${v * 100}%)`, ); dividerRef.current?.style.setProperty( "transform", `translateX(${v * 100}%)`, ); beforeTagRef.current?.style.setProperty("opacity", `${tagOpacity(v)}`); afterTagRef.current?.style.setProperty( "opacity", `${tagOpacity(1 - v)}`, ); handleRef.current?.setAttribute("aria-valuenow", `${percent(v)}`); handleRef.current?.setAttribute("aria-valuetext", valueText(v)); }), [pos], ); const moveTo = (next: number, glide: boolean) => { target.current = next; if (reduceMotion) return pos.jump(next); const now = performance.now(); if (glide) { glideEnd.current = now + GLIDE_MS; animate(pos, next, { duration: GLIDE_MS / 1000, ease: EASE_OUT }); return; } // Dragging during a glide retargets it to land on the pointer when the // glide would have ended, instead of snapping mid-flight. One frame or // less left is not worth animating. const remaining = glideEnd.current - now; if (remaining > 16) { animate(pos, next, { duration: remaining / 1000, ease: EASE_OUT }); } else { pos.jump(next); } }; const at = (clientX: number, d: Drag) => clamp((clientX - d.offset - d.rect.left) / d.rect.width); const start = (d: Drag) => { d.active = true; rootRef.current?.setAttribute("data-dragging", ""); }; const end = () => { drag.current = null; rootRef.current?.removeAttribute("data-dragging"); }; const tag = "pointer-events-none absolute top-4 rounded-full bg-background px-3 py-1 text-[13px] font-medium text-muted-foreground shadow-raised"; return (

{ // Ignore a second finger while one is already dragging. if (e.button !== 0 || drag.current) return; // Skips the mouse's default focus handling so the handle can take // focus below, and keeps text from being selected. e.preventDefault(); const rect = e.currentTarget.getBoundingClientRect(); const onHandle = !!handleRef.current?.contains(e.target as Node); const d: Drag = { id: e.pointerId, startX: e.clientX, offset: onHandle ? e.clientX - (rect.left + pos.get() * rect.width) : 0, rect, active: false, }; drag.current = d; e.currentTarget.setPointerCapture(e.pointerId); handleRef.current?.focus({ preventScroll: true }); if (onHandle) { start(d); } else if (e.pointerType !== "touch") { // A mouse press is intent, so glide right away. A touch waits to // see whether it is a tap, a drag or a scroll. start(d); moveTo(at(e.clientX, d), true); } }} onPointerMove={(e) => { const d = drag.current; if (!d || e.pointerId !== d.id) return; if (!d.active) { if (Math.abs(e.clientX - d.startX) < SLOP) return; start(d); moveTo(at(e.clientX, d), true); return; } moveTo(at(e.clientX, d), false); }} onPointerUp={(e) => { const d = drag.current; if (!d || e.pointerId !== d.id) return; // A tap that never became a drag. if (!d.active) moveTo(at(e.clientX, d), true); end(); }} onPointerCancel={(e) => { if (drag.current?.id === e.pointerId) end(); }} >

{before}

{after}

Before After {/* Full width so its translateX percentage matches the clip inset. */}

{ const next = { ArrowLeft: target.current - STEP, ArrowDown: target.current - STEP, ArrowRight: target.current + STEP, ArrowUp: target.current + STEP, Home: 0, End: 1, }[e.key]; if (next === undefined) return; e.preventDefault(); // Occasional, so it glides exactly like a click. moveTo(clamp(next), true); }} >

); } const ICON = { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", } as const; // The same file card twice. Before: square corners, a border faking depth, // one flat text style, cramped spacing. After: concentric radii (28px outer // = 12px inner + 16px padding), a layered shadow instead of a border, a muted // secondary line with tabular numbers, and room to breathe. function FileCard({ polished }: { polished: boolean }) { return (

{polished && ( )}

Brand guidelines.pdf

2.4 MB · Updated 3h ago

{polished && ( // 2px stroke to match the medium-weight label beside it. )} Download

); } export default function CompareSliderDemo() { return ( } after={} /> ); } 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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L60",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L61",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L64",null,{"files":[{"path":"components/compare-slider.tsx","content":"$65","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]