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