4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T1936,"use client"; import { useId } from "react"; /* * Side Folder – a glassy folder turned on its side, in a single self-contained file. * Three documents peek out to the right from behind a frosted front pocket with a tab on its edge. * Hover the folder: the pocket swings forward and every document slides out on its own. * The artwork scales with its container and keeps a 3 : 2 frame. */ export type SideFolderProps = { className?: string; /** Accessible description of the scene */ label?: string; }; /* Front pocket on a 380 × 520 grid: a narrow top part and a wider tab towards the bottom */ const FRONT = "M40 0H290Q330 0 330 40V318Q330 338 344 348L364 362Q380 372 380 396V480Q380 520 340 520H40Q0 520 0 480V40Q0 0 40 0Z"; const LINES = [78, 180, 140, 175, 126, 168, 110]; /* A mask (unlike clip-path: url()) also cuts the frosted blur to the pocket shape, and scales with the box */ const MASK = `url("data:image/svg+xml,${encodeURIComponent( ``, )}") 0 0 / 100% 100% no-repeat`; export function SideFolder({ className, label = "Blue folder on its side, with three documents peeking out behind a frosted front pocket", }: SideFolderProps) { const id = "ui-sf" + useId().replace(/[^a-zA-Z0-9_-]/g, ""); return (

{/* React 19 hoists this into once, no matter how many instances render */}

); } /* ---------- Styles ---------- */ const css = /* css */ ` .ui-sf { --ui-sf-ease: cubic-bezier(0.2, 0.85, 0.25, 1); position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; container-type: inline-size; } /* The folder is drawn on a 440 × 520 grid; cqw keeps every detail in proportion */ .ui-sf-icon { position: absolute; left: 50%; top: 50%; width: 37%; aspect-ratio: 440 / 520; container-type: inline-size; perspective: 260cqw; perspective-origin: 40% 50%; transform: translate(-50%, -50%); transition: transform 0.6s var(--ui-sf-ease); } .ui-sf-icon:hover { transform: translate(-50%, -50%) scale(1.03); } .ui-sf-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ui-sf-back { filter: drop-shadow(0 5.4cqw 6.4cqw rgba(60, 130, 180, 0.28)) drop-shadow(0 1.8cqw 2.7cqw rgba(60, 130, 180, 0.16)) drop-shadow(0 0.45cqw 0.9cqw rgba(60, 130, 180, 0.1)); } /* Documents, in the 1.15 scaled space of the stack */ .ui-sf-doc { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 3px 4px rgba(0, 30, 60, 0.18)); transition: transform 0.55s var(--ui-sf-ease); } .ui-sf-doc--top { transform: translate(83px, 43px) rotate(3deg); } .ui-sf-doc--bottom { transform: translate(78px, 68px) rotate(4deg); } .ui-sf-doc--middle { transform: translate(73px, 56px) rotate(-2deg); } .ui-sf-icon:hover .ui-sf-doc--top { transform: translate(100px, 35px) rotate(6deg); } .ui-sf-icon:hover .ui-sf-doc--bottom { transform: translate(93px, 75px) rotate(7deg); } .ui-sf-icon:hover .ui-sf-doc--middle { transform: translate(95px, 54px) rotate(0deg); } /* Pocket: hinged on its left edge, it swings its right edge towards you on hover */ .ui-sf-front { position: absolute; left: 0; top: 0; width: 86.3636%; height: 100%; -webkit-mask: ${MASK}; mask: ${MASK}; background: linear-gradient(180deg, rgba(0, 40, 75, 0) 76%, rgba(0, 40, 75, 0.26) 100%), linear-gradient(160deg, rgba(132, 214, 248, 0.45) 0%, rgba(69, 170, 220, 0.45) 100%); -webkit-backdrop-filter: blur(4.5cqw) saturate(1.1); backdrop-filter: blur(4.5cqw) saturate(1.1); transform-origin: 0 50%; transition: transform 0.6s var(--ui-sf-ease); } .ui-sf-front svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .ui-sf-icon:hover .ui-sf-front { transform: translateZ(3cqw) rotateY(-12deg); } @media (prefers-reduced-motion: reduce) { .ui-sf-icon, .ui-sf-doc, .ui-sf-front { transition: none; } } `; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"illustrations/side-folder/side-folder.tsx","content":"$50","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]