51: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/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"],"RegistryDependencies"] 52: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"] 53:T2ab0,'use client'; import clsx from 'clsx'; import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react'; import type { CSSProperties, HTMLAttributes } from 'react'; import './styles/laptop.css'; // The screen geometry; its default CSS width is half the pixel width. const PANEL_WIDTH = 3456; const PANEL_HEIGHT = 2234; // The case in millimetres, as the stylesheet draws it: 355.7 wide and 248 deep, a 9.855 mm // base under a 5.5 mm lid. Its corners are rounded to 6.2 mm in plan, measured from a // photograph of the underside. The case's left edge and the deck sit at these points of the // drawing. const WIDTH = 355.7; const DEPTH = 248; const RADIUS = 6.2; const LEFT = 11.65; const DECK = 241.2; // The base and how far its bottom edge rolls under, which rounds its ends seen from in front. const BASE = 9.855; const ROLL = 3.6; // Flat facets per rounded corner, and how far each overlaps the next so no seam opens. const FACETS = 6; const OVERLAP = 0.15; // Key widths in keyboard units, from the function row at the hinge to the bottom row, whose // arrow keys are drawn separately. const KEY_ROWS = [ [1.5, ...Array.from({ length: 12 }, () => 1), 1], [...Array.from({ length: 13 }, () => 1), 1.5], [1.5, ...Array.from({ length: 12 }, () => 1), 1], [1.75, ...Array.from({ length: 11 }, () => 1), 1.75], [2.25, ...Array.from({ length: 10 }, () => 1), 2.25], [1, 1, 1, 1.25, 5, 1.25, 1], ]; type FacetStyle = CSSProperties & Record<'--lg-laptop-turn', string>; const mm = (value: number) => `calc(${Number(value.toFixed(4))} * var(--lg-laptop-u))`; const radians = (degrees: number) => (degrees * Math.PI) / 180; // How much darker a facet turned this far from facing you looks. const turn = (degrees: number) => `${Math.round((1 - Math.cos(radians(degrees))) * 45)}%`; // How tall the base looks at a turn of its corner, as its bottom edge rolls under, as a share // of its full height. const roll = (degrees: number) => `${(((BASE - ROLL * (1 - Math.cos(radians(degrees)))) / BASE) * 100).toFixed(2)}%`; const chord = (from: number, to: number) => 2 * RADIUS * Math.sin(radians(Math.abs(to - from) / 2)) + OVERLAP; // A facet of the base's front corners, standing upright. Angles run in plan: 0 faces you, 90 // faces left and -90 faces right. It is drawn from its end at the larger angle. const baseFacet = (centre: number, from: number, to: number): FacetStyle => { const start = radians(Math.max(from, to)); const middle = (from + to) / 2; return { '--lg-laptop-turn': turn(middle), clipPath: `polygon(0 0, 100% 0, 100% ${roll(Math.min(from, to))}, 0 ${roll(Math.max(from, to))})`, transform: `translate3d(${mm(centre - RADIUS * Math.sin(start))}, ${mm(DECK)}, ${mm(DEPTH - RADIUS + RADIUS * Math.cos(start))}) rotateY(${-middle}deg)`, width: mm(chord(from, to)), }; }; // A facet of the lid's top corners, in the plane of the screen, standing back into the lid. // Angles run in that plane: -90 faces up, -180 faces left and 0 faces right. const lidFacet = (centre: number, from: number, to: number): FacetStyle => { const start = radians(Math.max(from, to)); const middle = (from + to) / 2; return { '--lg-laptop-turn': turn(middle + 90), transform: `translate(${mm(centre + RADIUS * Math.cos(start))}, ${mm(RADIUS + RADIUS * Math.sin(start))}) rotateZ(${middle - 90}deg) rotateX(-90deg)`, width: mm(chord(from, to)), }; }; const sweep = ( facet: (centre: number, from: number, to: number) => FacetStyle, centre: number, from: number, by: number, ) => Array.from({ length: FACETS }, (_, index) => facet(centre, from + (by * index) / FACETS, from + (by * (index + 1)) / FACETS), ); const BASE_FACETS = [ ...sweep(baseFacet, LEFT + RADIUS, 0, 90), ...sweep(baseFacet, LEFT + WIDTH - RADIUS, 0, -90), ]; const LID_FACETS = [ ...sweep(lidFacet, RADIUS, -90, -90), ...sweep(lidFacet, WIDTH - RADIUS, -90, 90), ]; // The longest transition an element is styled with, delay included, in milliseconds. It is // 0 when motion is reduced. const transitionTime = (element: Element) => { const style = getComputedStyle(element); const delays = style.transitionDelay.split(','); return Math.max( ...style.transitionDuration .split(',') .map( (duration, index) => (parseFloat(duration) + parseFloat(delays[index % delays.length])) * 1000, ), ); }; /** The keyboard, drawn on the deck: six rows of keys and the inverted-T arrows. */ function Keyboard() { return ( {KEY_ROWS.map((row, rowIndex) => ( {row.map((units, index) => ( ))} {rowIndex === KEY_ROWS.length - 1 ? ( ) : null} ))} ); } export type GlassLaptopFinish = 'black' | 'silver'; export type GlassLaptopProps = HTMLAttributes & { /** The case colour. */ finish?: GlassLaptopFinish; /** A faint reflection across the glass. Turn it off for flat screenshots. */ glare?: boolean; /** Whether the lid is up. Changing it opens or closes the lid. */ open?: boolean; /** * The width in CSS pixels the screen lays its content out at before scaling it to fit. * Defaults to 1728, half the screen geometry's pixel width. */ resolution?: number; }; /** * A laptop mockup drawn in CSS 3D with no images or WebGL. Open, it faces you; shut, the * view rises to show the closed case from above, and moves back down as the lid opens. * Children fill the screen at the chosen resolution and the notch sits over them. * Anything the children portal out, such as a menu or dialog, * opens on the page unscaled. * * The screen lights only once the lid is up and the view has settled, and goes dark * before the lid closes. The children render only while it is lit, so they are never laid * out on a moving or tilted screen. Reduced motion opens and closes it at once. */ export const GlassLaptop = forwardRef( ( { children, className, finish = 'black', glare = true, open = true, resolution = 1728, ...rest }, forwardedRef, ) => { const [lit, setLit] = useState(open); const rigRef = useRef(null); const lidRef = useRef(null); const screenRef = useRef(null); const displayRef = useRef(null); const shutterRef = useRef(null); // Lights the screen once the lid and the view have come to rest, and turns it off once it // has faded to black, before the lid starts to close. useEffect(() => { const moving = open ? [lidRef.current, rigRef.current] : [shutterRef.current]; const elements = moving.filter((element) => element !== null); if (elements.length === 0) return; const timer = window.setTimeout( () => setLit(open), Math.max(...elements.map(transitionTime)), ); return () => window.clearTimeout(timer); }, [open]); // Scales the content to the screen before the first paint and on every resize. The // computed width keeps the fraction of a pixel that clientWidth rounds away. useLayoutEffect(() => { const screen = screenRef.current; const display = displayRef.current; if (!screen || !display) return; const fit = () => { const width = parseFloat(getComputedStyle(screen).width); display.style.setProperty('--lg-laptop-scale', String(width / resolution)); display.dataset.fitted = ''; }; fit(); const observer = new ResizeObserver(fit); observer.observe(screen); return () => observer.disconnect(); }, [resolution]); return (

{BASE_FACETS.map((style, index) => ( ))}

{LID_FACETS.map((style, index) => ( ))}

{lit ? children : null}

{glare ? : null}

); }, ); GlassLaptop.displayName = 'GlassLaptop'; 54:T4e49,/* Glass Laptop: a laptop mockup in CSS 3D. Every length is a multiple of --lg-laptop-u, one millimetre of the real machine: the case is 355.7 wide and 248 deep with corners rounded to 6.2 in plan, the display 345.6 by 223.4 behind 3.5 of black glass, and the notch 37 by 6.4. The eye sits 4 m away and 7 cm above the deck, so open, the lid faces you, the base's front edge is 6.5% wider than the lid (the 379 the figure is drawn to) and the deck is a sliver. Shut, the whole rig tips towards you, so the case is seen from above. */ @property --lg-laptop-u { syntax: ''; inherits: true; initial-value: 0px; } /* Preserve Tailwind's order even when the laptop loads before global CSS. */ @layer properties; @layer theme, base, components, utilities; @layer components { .lg-laptop { /* Black. */ --lg-laptop-metal-light: #55555a; --lg-laptop-metal: #2d2d30; --lg-laptop-metal-dark: #1d1d1f; --lg-laptop-metal-deep: #101011; --lg-laptop-edge: rgb(255 255 255 / 0.24); --lg-laptop-shell-light: #424246; --lg-laptop-shell: #2c2c2f; --lg-laptop-shell-dark: #1f1f22; --lg-laptop-deck-back: #1d1d20; --lg-laptop-deck: #313135; --lg-laptop-deck-front: #444449; --lg-laptop-well: #070708; --lg-laptop-key: #161618; --lg-laptop-grille: rgb(0 0 0 / 0.55); --lg-laptop-pad: rgb(255 255 255 / 0.04); --lg-laptop-cover: #0d0d0e; --lg-laptop-glass: #060607; container-type: inline-size; margin: 0; } .lg-laptop[data-finish='silver'] { --lg-laptop-metal-light: #fbfbfc; --lg-laptop-metal: #dadbdd; --lg-laptop-metal-dark: #b3b5b8; --lg-laptop-metal-deep: #85878b; --lg-laptop-edge: rgb(255 255 255 / 0.95); --lg-laptop-shell-light: #f3f4f5; --lg-laptop-shell: #dadbdd; --lg-laptop-shell-dark: #c2c3c6; --lg-laptop-deck-back: #a3a5a9; --lg-laptop-deck: #cbccd0; --lg-laptop-deck-front: #e1e2e4; --lg-laptop-well: #0b0b0c; --lg-laptop-key: #19191b; --lg-laptop-grille: rgb(0 0 0 / 0.32); --lg-laptop-pad: rgb(255 255 255 / 0.22); --lg-laptop-cover: #2c2d2f; } .lg-laptop-body { --lg-laptop-u: calc(100cqi / 379); position: relative; isolation: isolate; aspect-ratio: 379 / 257.5; perspective: calc(4034 * var(--lg-laptop-u)); perspective-origin: 50% calc(170.8 * var(--lg-laptop-u)); } /* Everything that moves with the view. It turns about the middle of the base. */ .lg-laptop-rig { position: absolute; inset: 0; transform-origin: calc(189.5 * var(--lg-laptop-u)) calc(246 * var(--lg-laptop-u)) calc(124 * var(--lg-laptop-u)); transform-style: preserve-3d; } /* ------------------------------------------------------------------ lid */ /* The hinge runs along the back of the deck, 3.2 mm under the lid, so the lid shuts flat onto the deck. */ .lg-laptop-lid { position: absolute; top: 0; left: calc(11.65 * var(--lg-laptop-u)); width: calc(355.7 * var(--lg-laptop-u)); height: calc(238 * var(--lg-laptop-u)); transform-origin: 50% calc(241.2 * var(--lg-laptop-u)); transform-style: preserve-3d; } .lg-laptop-lid-face { position: absolute; inset: 0; border-radius: calc(6.2 * var(--lg-laptop-u)) calc(6.2 * var(--lg-laptop-u)) calc(2.4 * var(--lg-laptop-u)) calc(2.4 * var(--lg-laptop-u)); /* Only a 1.55 mm band of aluminium shows round the glass; its top edge faces the light. */ background: linear-gradient( var(--lg-laptop-metal-light), var(--lg-laptop-metal) 1.5%, var(--lg-laptop-metal-dark) ); box-shadow: inset 0 1px 0 var(--lg-laptop-edge), inset 1px 0 0 rgb(255 255 255 / 0.07), inset -1px 0 0 rgb(255 255 255 / 0.07), inset 0 -1px 0 rgb(0 0 0 / 0.35); backface-visibility: hidden; } /* The outer shell, 5.5 mm behind the glass. Shut, it is the top of the case: lit towards the front, with a soft sheen. */ .lg-laptop-lid-back { position: absolute; inset: 0; border-radius: calc(6.2 * var(--lg-laptop-u)); background: radial-gradient(120% 70% at 30% 0%, rgb(255 255 255 / 0.07), transparent 60%), linear-gradient( var(--lg-laptop-shell-light), var(--lg-laptop-shell) 40%, var(--lg-laptop-shell-dark) ); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05); transform: translateZ(calc(-5.5 * var(--lg-laptop-u))) rotateY(180deg); backface-visibility: hidden; } /* The lid's top edge between its rounded corners: it faces up while the lid is open and towards you once it is shut. */ .lg-laptop-lid-edge { position: absolute; top: calc(-5.5 * var(--lg-laptop-u)); left: calc(6.05 * var(--lg-laptop-u)); width: calc(343.6 * var(--lg-laptop-u)); height: calc(5.5 * var(--lg-laptop-u)); background: linear-gradient( var(--lg-laptop-metal-light), var(--lg-laptop-metal) 55%, var(--lg-laptop-metal-dark) ); box-shadow: inset 0 1px 0 var(--lg-laptop-edge); transform-origin: 50% 100%; transform: rotateX(90deg); backface-visibility: hidden; } /* The rounded top corners, as flat facets placed by the component. Each dims as it turns away from the front. */ .lg-laptop-lid-facet { position: absolute; top: 0; left: 0; height: calc(5.5 * var(--lg-laptop-u)); background: linear-gradient( to top, color-mix(in srgb, var(--lg-laptop-metal-light), #000 var(--lg-laptop-turn)), color-mix(in srgb, var(--lg-laptop-metal), #000 var(--lg-laptop-turn)) 55%, color-mix(in srgb, var(--lg-laptop-metal-dark), #000 var(--lg-laptop-turn)) ); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--lg-laptop-edge), transparent var(--lg-laptop-turn)); transform-origin: 0 0; backface-visibility: hidden; } .lg-laptop-glass { position: absolute; inset: calc(1.55 * var(--lg-laptop-u)); overflow: hidden; border-radius: calc(4.65 * var(--lg-laptop-u)) calc(4.65 * var(--lg-laptop-u)) var(--lg-laptop-u) var(--lg-laptop-u); background: var(--lg-laptop-glass); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.7); } /* The panel: rounded at the top only, like the real one. */ .lg-laptop-screen { position: absolute; top: calc(3.5 * var(--lg-laptop-u)); left: calc(3.5 * var(--lg-laptop-u)); width: calc(345.6 * var(--lg-laptop-u)); height: calc(223.4 * var(--lg-laptop-u)); overflow: hidden; isolation: isolate; border-radius: calc(2 * var(--lg-laptop-u)) calc(2 * var(--lg-laptop-u)) 0 0; background: #000; } .lg-laptop-display { position: absolute; top: 0; left: 0; transform-origin: 0 0; scale: var(--lg-laptop-scale); } /* Until the first measurement the content would show at full size. */ .lg-laptop-display:not([data-fitted]) { visibility: hidden; } /* The panel switched off: the same black as the glass around it. */ .lg-laptop-shutter { position: absolute; inset: 0; background: var(--lg-laptop-glass); pointer-events: none; } /* The notch reaches 6.4 mm into the panel, with tiny inverse corners where it meets it. */ .lg-laptop-notch { position: absolute; z-index: 1; top: calc(3 * var(--lg-laptop-u)); left: 50%; width: calc(37 * var(--lg-laptop-u)); height: calc(6.9 * var(--lg-laptop-u)); translate: -50% 0; border-radius: 0 0 calc(2 * var(--lg-laptop-u)) calc(2 * var(--lg-laptop-u)); background: var(--lg-laptop-glass); } .lg-laptop-notch::before, .lg-laptop-notch::after { content: ''; position: absolute; top: calc(0.5 * var(--lg-laptop-u)); width: calc(0.8 * var(--lg-laptop-u)); height: calc(0.8 * var(--lg-laptop-u)); } .lg-laptop-notch::before { right: 100%; background: radial-gradient( circle at 0 100%, transparent calc(0.8 * var(--lg-laptop-u) - 0.5px), var(--lg-laptop-glass) calc(0.8 * var(--lg-laptop-u)) ); } .lg-laptop-notch::after { left: 100%; background: radial-gradient( circle at 100% 100%, transparent calc(0.8 * var(--lg-laptop-u) - 0.5px), var(--lg-laptop-glass) calc(0.8 * var(--lg-laptop-u)) ); } /* Centred in the black between the lid's edge and the bottom of the notch. */ .lg-laptop-camera { position: absolute; top: calc(0.85 * var(--lg-laptop-u)); left: 50%; width: calc(2.2 * var(--lg-laptop-u)); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 36% 34%, rgb(255 255 255 / 0.4) 0 5%, transparent 9%), radial-gradient(circle, #26304f 0 14%, #0d1020 30%, #040406 46%, #1b1b1f 58%, #0b0b0c 70%); } /* A reflection of the light above. It slides down the glass as the lid rises. */ .lg-laptop-glare { position: absolute; z-index: 2; inset: 0; background: linear-gradient( 112deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025) 34%, transparent 46% ); pointer-events: none; } /* ----------------------------------------------------------------- base */ /* The lid's aluminium wraps the hinge at each end; a black cover runs between. Under the chin the ends are in shade, so they stay darker than the lid and fade into the cover. It turns with the lid, so it tucks away under the case when the lid is shut. */ .lg-laptop-hinge { position: absolute; top: calc(236.8 * var(--lg-laptop-u)); left: calc(0.3 * var(--lg-laptop-u)); width: calc(355.1 * var(--lg-laptop-u)); height: calc(4.8 * var(--lg-laptop-u)); border-radius: 0 0 calc(2.4 * var(--lg-laptop-u)) calc(2.4 * var(--lg-laptop-u)); background: linear-gradient(rgb(0 0 0 / 0.55), rgb(255 255 255 / 0.05) 45%, rgb(0 0 0 / 0.5)), linear-gradient( 90deg, var(--lg-laptop-metal-dark) 4%, var(--lg-laptop-cover) 5% 95%, var(--lg-laptop-metal-dark) 96% ); backface-visibility: hidden; } /* The deck, laid flat from the hinge to the front edge: speakers either side of the keyboard, then the trackpad. The lid shades it near the hinge. */ .lg-laptop-deck { position: absolute; top: calc(241.2 * var(--lg-laptop-u)); left: calc(11.65 * var(--lg-laptop-u)); width: calc(355.7 * var(--lg-laptop-u)); height: calc(248 * var(--lg-laptop-u)); border-radius: calc(6.2 * var(--lg-laptop-u)); background: linear-gradient(rgb(0 0 0 / 0.5), transparent 8%), linear-gradient( var(--lg-laptop-deck-back), var(--lg-laptop-deck) 30%, var(--lg-laptop-deck-front) ); box-shadow: inset 0 calc(-0.5 * var(--lg-laptop-u)) 0 rgb(255 255 255 / 0.12); transform-origin: 50% 0; transform: rotateX(90deg); } .lg-laptop-speaker { position: absolute; top: calc(16 * var(--lg-laptop-u)); width: calc(24 * var(--lg-laptop-u)); height: calc(107 * var(--lg-laptop-u)); background: radial-gradient( circle, var(--lg-laptop-grille) calc(0.3 * var(--lg-laptop-u)), transparent calc(0.42 * var(--lg-laptop-u)) ) 0 0 / calc(1.35 * var(--lg-laptop-u)) calc(1.35 * var(--lg-laptop-u)); } .lg-laptop-speaker[data-side='left'] { left: calc(15 * var(--lg-laptop-u)); } .lg-laptop-speaker[data-side='right'] { right: calc(15 * var(--lg-laptop-u)); } /* Six rows of 18.4 mm keys, 1.8 mm apart, in a recessed well. */ .lg-laptop-keyboard { position: absolute; top: calc(14 * var(--lg-laptop-u)); left: calc(44.4 * var(--lg-laptop-u)); display: flex; flex-direction: column; gap: calc(1.8 * var(--lg-laptop-u)); width: calc(266.9 * var(--lg-laptop-u)); height: calc(110.4 * var(--lg-laptop-u)); padding: calc(0.9 * var(--lg-laptop-u)); border-radius: calc(2.4 * var(--lg-laptop-u)); background: var(--lg-laptop-well); box-shadow: inset 0 0 0 calc(0.3 * var(--lg-laptop-u)) rgb(0 0 0 / 0.4); } .lg-laptop-key-row, .lg-laptop-arrows { display: flex; flex: 1 1 0; gap: calc(1.8 * var(--lg-laptop-u)); } .lg-laptop-arrows { flex-grow: 3; } .lg-laptop-key { flex: 1 1 0; border-radius: calc(1.1 * var(--lg-laptop-u)); background: var(--lg-laptop-key); box-shadow: inset 0 calc(0.25 * var(--lg-laptop-u)) 0 rgb(255 255 255 / 0.07); } /* The inverted-T arrows: left and right at half height, up and down stacked between. */ .lg-laptop-key--half { align-self: flex-end; height: calc(50% - 0.45 * var(--lg-laptop-u)); } .lg-laptop-arrow-stack { display: flex; flex: 1 1 0; flex-direction: column; gap: calc(0.9 * var(--lg-laptop-u)); } .lg-laptop-trackpad { position: absolute; top: calc(133 * var(--lg-laptop-u)); left: calc(97.85 * var(--lg-laptop-u)); width: calc(160 * var(--lg-laptop-u)); height: calc(99 * var(--lg-laptop-u)); border-radius: calc(4 * var(--lg-laptop-u)); background: var(--lg-laptop-pad); box-shadow: inset 0 0 0 calc(0.3 * var(--lg-laptop-u)) rgb(0 0 0 / 0.18); } /* The scoop seen from above: a shallow dip at the front edge. */ .lg-laptop-deck-scoop { position: absolute; bottom: 0; left: 50%; width: calc(47.9 * var(--lg-laptop-u)); height: calc(4 * var(--lg-laptop-u)); translate: -50% 0; border-radius: calc(2 * var(--lg-laptop-u)) calc(2 * var(--lg-laptop-u)) 0 0; background: linear-gradient(to top, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.04)); } /* The base's front edge between its rounded corners. */ .lg-laptop-front { position: absolute; top: calc(241.2 * var(--lg-laptop-u)); left: calc(17.7 * var(--lg-laptop-u)); width: calc(343.6 * var(--lg-laptop-u)); height: calc(9.855 * var(--lg-laptop-u)); /* Lit along the top edge, darker as it curves under. */ background: linear-gradient( var(--lg-laptop-metal-light), var(--lg-laptop-metal) 14% 45%, var(--lg-laptop-metal-dark) 82%, var(--lg-laptop-metal-deep) ); box-shadow: inset 0 1px 0 var(--lg-laptop-edge); transform: translateZ(calc(248 * var(--lg-laptop-u))); } /* The scoop that lifts the lid: a shallow slot, in shadow, with a lit lip. */ .lg-laptop-scoop { position: absolute; top: 0; left: 50%; width: calc(47.9 * var(--lg-laptop-u)); height: calc(2.44 * var(--lg-laptop-u)); translate: -50% 0; border-radius: 0 0 calc(2.44 * var(--lg-laptop-u)) calc(2.44 * var(--lg-laptop-u)); background: linear-gradient(rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.16)); box-shadow: inset 0 -1px 0 var(--lg-laptop-edge); } /* The front feet. */ .lg-laptop-front::before, .lg-laptop-front::after { content: ''; position: absolute; top: 100%; width: calc(18.8 * var(--lg-laptop-u)); height: calc(1.13 * var(--lg-laptop-u)); border-radius: 0 0 calc(1.9 * var(--lg-laptop-u)) calc(1.9 * var(--lg-laptop-u)); background: #0b0b0c; } .lg-laptop-front::before { left: calc(18.35 * var(--lg-laptop-u)); } .lg-laptop-front::after { right: calc(18.35 * var(--lg-laptop-u)); } /* The base's rounded front corners, as upright facets placed by the component. Their bottoms are cut to rise as they turn to the side, where the bottom edge rolls under. */ .lg-laptop-base-facet { position: absolute; top: 0; left: 0; height: calc(9.855 * var(--lg-laptop-u)); background: linear-gradient( color-mix(in srgb, var(--lg-laptop-metal-light), #000 var(--lg-laptop-turn)), color-mix(in srgb, var(--lg-laptop-metal), #000 var(--lg-laptop-turn)) 14% 45%, color-mix(in srgb, var(--lg-laptop-metal-dark), #000 var(--lg-laptop-turn)) 82%, var(--lg-laptop-metal-deep) ); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lg-laptop-edge), transparent var(--lg-laptop-turn)); transform-origin: 0 0; backface-visibility: hidden; } /* --------------------------------------------------------------- shadows */ /* The shadow on the ground, which the view sees more of from above. */ .lg-laptop-ground { position: absolute; top: calc(252.3 * var(--lg-laptop-u)); left: calc(-13.35 * var(--lg-laptop-u)); width: calc(405.7 * var(--lg-laptop-u)); height: calc(300 * var(--lg-laptop-u)); background: radial-gradient(closest-side, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.12) 60%, transparent); transform-origin: 50% 0; transform: rotateX(90deg) translateY(calc(-26 * var(--lg-laptop-u))); } /* Where the base meets the ground. */ .lg-laptop-ground::after { content: ''; position: absolute; top: calc(26 * var(--lg-laptop-u)); left: calc(25 * var(--lg-laptop-u)); width: calc(355.7 * var(--lg-laptop-u)); height: calc(248 * var(--lg-laptop-u)); border-radius: calc(6.2 * var(--lg-laptop-u)); background: rgb(0 0 0 / 0.25); box-shadow: 0 0 calc(5 * var(--lg-laptop-u)) calc(1.5 * var(--lg-laptop-u)) rgb(0 0 0 / 0.3); } /* The soft shadow under the open machine, drawn flat for the view from in front. */ .lg-laptop-shadow { position: absolute; z-index: -1; top: calc(248 * var(--lg-laptop-u)); left: -3%; width: 106%; height: calc(18 * var(--lg-laptop-u)); background: radial-gradient(closest-side, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.12) 55%, transparent); } .lg-laptop-shadow::after { content: ''; position: absolute; top: calc(7 * var(--lg-laptop-u)); left: 5%; width: 90%; height: calc(4 * var(--lg-laptop-u)); background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), transparent); } /* ---------------------------------------------------------------- motion */ /* Opening, the lid lifts slowly off the deck and glides upright while the view sinks and moves in to face it. The screen lights once both have come to rest. Closing, the screen goes dark first, then the lid comes down as the view rises. Only transforms and opacity move, so the compositor runs it. */ .lg-laptop-rig { transition: transform 2.4s cubic-bezier(0.4, 0, 0.12, 1); } .lg-laptop-lid { transition: transform 2s cubic-bezier(0.6, 0, 0.2, 1); } .lg-laptop-glare { transition: translate 2s cubic-bezier(0.6, 0, 0.2, 1); } .lg-laptop-shadow { transition: opacity 2.4s cubic-bezier(0.4, 0, 0.12, 1); } .lg-laptop-shutter { transition: opacity 0.35s ease-in; } .lg-laptop[data-screen='on'] .lg-laptop-shutter { opacity: 0; transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 0.1s; } .lg-laptop[data-lid='closed'] .lg-laptop-rig { transform: translateY(calc(-105 * var(--lg-laptop-u))) translateZ(calc(-380 * var(--lg-laptop-u))) rotateX(-28deg); transition: transform 2.2s cubic-bezier(0.45, 0, 0.25, 1) 0.35s; } .lg-laptop[data-lid='closed'] .lg-laptop-lid { transform: rotateX(-90deg); transition: transform 1.6s cubic-bezier(0.55, 0, 0.35, 1) 0.3s; } .lg-laptop[data-lid='closed'] .lg-laptop-glare { translate: 0 -40%; transition: translate 1.6s cubic-bezier(0.55, 0, 0.35, 1) 0.3s; } .lg-laptop[data-lid='closed'] .lg-laptop-shadow { opacity: 0; transition: opacity 1.4s ease 0.35s; } /* Reduced motion puts the lid and the view straight where they are going. */ [data-lg-reduce-motion='1'] .lg-laptop :is(.lg-laptop-rig, .lg-laptop-lid, .lg-laptop-glare, .lg-laptop-shadow, .lg-laptop-shutter) { transition: none; } @media (prefers-reduced-motion: reduce) { .lg-laptop[data-lid] :is(.lg-laptop-rig, .lg-laptop-lid, .lg-laptop-glare, .lg-laptop-shadow, .lg-laptop-shutter) { transition: none; } } /* Reduced transparency takes the reflection off the screen. */ [data-lg-reduce-transparency='1'] .lg-laptop-glare { display: none; } @media (prefers-reduced-transparency: reduce) { .lg-laptop-glare { display: none; } } } 50:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}]]}],["$","$L51",null,{"namespace":"@glassyui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/glassyui/glass-laptop.tsx","content":"$53","type":"registry:ui","target":"components/glassyui/glass-laptop.tsx"},{"path":"registry/glassyui/styles/laptop.css","content":"$54","type":"registry:file","target":"components/glassyui/styles/laptop.css"}],"className":"h-[70svh] min-h-80"}]]}]