--- /** * MacbookScroll — a laptop that opens as the reader scrolls through the * section: the lid starts folded back and squashed, then un-tilts to * upright while the whole screen scales up and slides down over the base. * The headline above it drifts up and fades out in sync. * * Everything except the scroll progress is static, server-rendered markup: * the keypad (rows below), the speaker grilles, the trackpad and the hinge * are plain HTML/CSS. A custom element (`nular-macbook-scroll`) tracks * scroll progress against the viewport via the shared `scroll-progress` * util (anchors `[0, 0] -> [1, 0]`: the section's own height is the whole * runway) and writes it out as CSS custom properties consumed by the * stylesheet. No animation library, no client-built DOM. * * The section needs its full height (200vh plus padding, as below) for the * open-up sequence to play through. */ interface Props { /** Image URL painted on the laptop screen (omitted renders a blank screen). */ src?: string; /** Alt text for the screen image; leave empty when the shot is decorative. */ alt?: string; /** Plain-text headline above the laptop (ignored if the `title` slot is filled). */ title?: string; /** Fade the bottom of the base into the page background. */ showGradient?: boolean; /** Additional classes for the outer scroll section. */ class?: string; } const { src, alt = '', title = 'This laptop is pure CSS. Scroll to open it.', showGradient = false, class: className, } = Astro.props; const hasBadge = Astro.slots.has('badge'); type Glyph = | 'brightness-down' | 'brightness-up' | 'grid' | 'search' | 'mic' | 'moon' | 'rewind' | 'skip-forward' | 'fast-forward' | 'volume-mute' | 'volume-low' | 'volume-high' | 'chevron-up' | 'globe' | 'command' | 'option' | 'caret-left' | 'caret-right' | 'caret-up' | 'caret-down'; /** Inline 24x24 glyphs; every icon on a key cap is decorative. */ const ICONS: Record = { 'brightness-down': '', 'brightness-up': '', grid: '', search: '', mic: '', moon: '', rewind: '', 'skip-forward': '', 'fast-forward': '', 'volume-mute': '', 'volume-low': '', 'volume-high': '', 'chevron-up': '', globe: '', command: '', option: '', 'caret-left': '', 'caret-right': '', 'caret-up': '', 'caret-down': '', }; /** One half of a two-line modifier cap (fn / control / option / command). */ interface CapPart { icon?: Glyph; text?: string; } /** A single key cap. Every field is optional so the template stays flat. */ interface Cap { /** Stacked, centered text lines — a letter, or a shifted symbol pair. */ lines?: string[]; /** Small centered icon (function row and arrow cluster). */ icon?: Glyph; /** Label rendered under the icon on the function row. */ sub?: string; /** Two-part modifier cap: top row, bottom row, and the top row's side. */ stack?: { top: CapPart; bottom: CapPart; topAlign: 'start' | 'end' }; /** The round status light closing the function row. */ led?: boolean; /** Width override; caps default to 1.5rem. */ width?: string; /** Height override; caps default to 1.5rem. */ height?: string; /** Corner the label hugs on the wide caps (esc/tab/shift vs delete/return). */ align?: 'start' | 'end'; } const letters = (chars: string[]): Cap[] => chars.map((char) => ({ lines: [char] })); const pairs = (rows: string[][]): Cap[] => rows.map((lines) => ({ lines })); const FUNCTION_ROW: Cap[] = [ { lines: ['esc'], width: '2.5rem', align: 'start' }, { icon: 'brightness-down', sub: 'F1' }, { icon: 'brightness-up', sub: 'F2' }, { icon: 'grid', sub: 'F3' }, { icon: 'search', sub: 'F4' }, { icon: 'mic', sub: 'F5' }, { icon: 'moon', sub: 'F6' }, { icon: 'rewind', sub: 'F7' }, { icon: 'skip-forward', sub: 'F8' }, { icon: 'fast-forward', sub: 'F9' }, { icon: 'volume-mute', sub: 'F10' }, { icon: 'volume-low', sub: 'F11' }, { icon: 'volume-high', sub: 'F12' }, { led: true }, ]; const NUMBER_ROW: Cap[] = [ ...pairs([ ['~', '`'], ['!', '1'], ['@', '2'], ['#', '3'], ['$', '4'], ['%', '5'], ['^', '6'], ['&', '7'], ['*', '8'], ['(', '9'], [')', '0'], ['—', '_'], ['+', '='], ]), { lines: ['delete'], width: '2.5rem', align: 'end' }, ]; const QWERTY_ROW: Cap[] = [ { lines: ['tab'], width: '2.5rem', align: 'start' }, ...letters(['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P']), ...pairs([ ['{', '['], ['}', ']'], ['|', '\\'], ]), ]; const HOME_ROW: Cap[] = [ { lines: ['caps lock'], width: '2.8rem', align: 'start' }, ...letters(['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L']), ...pairs([ [':', ';'], ['"', "'"], ]), { lines: ['return'], width: '2.85rem', align: 'end' }, ]; const BOTTOM_ROW: Cap[] = [ { lines: ['shift'], width: '3.65rem', align: 'start' }, ...letters(['Z', 'X', 'C', 'V', 'B', 'N', 'M']), ...pairs([ ['<', ','], ['>', '.'], ['?', '/'], ]), { lines: ['shift'], width: '3.65rem', align: 'end' }, ]; const MODIFIER_ROW: Cap[] = [ { stack: { top: { text: 'fn' }, bottom: { icon: 'globe' }, topAlign: 'end' } }, { stack: { top: { icon: 'chevron-up' }, bottom: { text: 'control' }, topAlign: 'end', }, }, { stack: { top: { icon: 'option' }, bottom: { text: 'option' }, topAlign: 'end', }, }, { width: '2rem', stack: { top: { icon: 'command' }, bottom: { text: 'command' }, topAlign: 'end', }, }, { width: '8.2rem' }, { width: '2rem', stack: { top: { icon: 'command' }, bottom: { text: 'command' }, topAlign: 'start', }, }, { stack: { top: { icon: 'option' }, bottom: { text: 'option' }, topAlign: 'start', }, }, ]; const ROWS: Cap[][] = [ FUNCTION_ROW, NUMBER_ROW, QWERTY_ROW, HOME_ROW, BOTTOM_ROW, MODIFIER_ROW, ]; const ARROW_TOP: Glyph = 'caret-up'; const ARROW_BOTTOM: Glyph[] = ['caret-left', 'caret-down', 'caret-right']; const capStyle = (cap: Cap): string | undefined => { const vars = [ cap.width ? `--nmb-cap-w:${cap.width}` : '', cap.height ? `--nmb-cap-h:${cap.height}` : '', ].filter(Boolean); return vars.length ? vars.join(';') : undefined; }; const iconAttrs = { class: 'nui-mbs-icon', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round' as const, 'stroke-linejoin': 'round' as const, 'aria-hidden': 'true' as const, }; ---

{title}

{src &&

}

{ ROWS.map((row, rowIndex) => (

{row.map((cap) => (

{cap.lines?.map((line) => {line})} {cap.icon && ( )} {cap.sub && {cap.sub}} {cap.stack && ( <> {cap.stack.top.icon && ( )} {cap.stack.top.text && ( {cap.stack.top.text} )} {cap.stack.bottom.icon && ( )} {cap.stack.bottom.text && ( {cap.stack.bottom.text} )} )} {cap.led && ( )}

))} {rowIndex === ROWS.length - 1 && (

{ARROW_BOTTOM.map((glyph) => (

))}

)}

)) }

{showGradient &&

Installation

Install dependencies

Add these files

Configuration

Use it