--- title: "Desktop-Style Homepage" summary: "The homepage as a desk: draggable cards that tilt with speed and remember their position, plus icons that open resizable windows." category: "layout (Pages & sections)" origin: "original" stack: ["html","css","javascript"] tags: ["desktop metaphor","draggable","windows","handmade"] demo: "https://zhuoqidev.com/design/demos/desk-home/" url: "https://zhuoqidev.com/en/design/desk-home/" license: "MIT" added: "2026-10-14" translation: "https://zhuoqidev.com/design/desk-home/index.md" --- # Desktop-Style Homepage > The homepage as a desk: draggable cards that tilt with speed and remember their position, plus icons that open resizable windows. ## What makes it work - **Tilts while dragged**: while a card is held and dragged, the script computes a `--tilt` from horizontal speed, and CSS has `.pin.dragging { rotate: calc(var(--tilt) * 1deg); scale: 1.035 }`. On release `--tilt` is removed, and the `rotate` transition uses a spring curve written with `linear()`, so the card wobbles once and straightens. - **Position remembered locally**: on release the position is saved to `localStorage`, horizontally as a "fraction of the desk width" and vertically in pixels, so cards stay on the desk when the window gets wider or narrower. "Tidy desk" clears it in one click. - **Desktop icons**: a mouse click selects (the name gets a blue background) and only a double-click opens; keyboard Enter and a finger tap open directly, as on a real desktop. - **Small windows**: drag the title bar to move, drag the bottom-right corner to resize; the red / yellow / green lights close / collapse / maximize, double-clicking the title bar also maximizes, and Esc closes. Collapse and maximize transition with the spring curve, while dragging follows the pointer with no transition. - **Stars**: a faint ring of stars twinkles on empty desk space and is "pushed away" when the mouse approaches; clicking empty space spawns a small star. - **Narrow screens**: below 720px all cards line up in one column, can't be dragged, and decorative elements are hidden. ## How to use it 1. Give the desk container `position: relative`, add `class="pin"` to each card, and for draggable ones also add `data-drag` and a unique `id` (used for saving the position). 2. Write each card's initial position in CSS, using something like `min(70%, calc(100% - card width))` for `left` so cards don't go off-screen on narrower displays. 3. Copy the "draggable cards" and "stars" sections of the script and change `KEY` (the storage key name). 4. For icons that open windows, write plain links: ``. In the example the window content comes from a `