[{"id":"analytics-dashboard-overview","n":"001","title":"Analytics dashboard overview","summary":"Light analytics overview: four KPI tiles, a single-series area chart drawn as inline SVG with an animated stroke, a crosshair tooltip, a recent-events table and a sliding date-range segmented control.","platform":"web","type":"screen","styles":["minimal","soft"],"tags":["dashboard","analytics","chart","svg","table"]},{"id":"avatar-stack-presence","n":"002","title":"Avatar stack with presence","summary":"Overlapping initials avatars with a +N overflow chip, hover fans them apart, pulsing green presence dots, name/status tooltips, and a simulated join or leave every 4s.","platform":"web","type":"component","styles":["dark","minimal","soft"],"tags":["avatars","presence","collaboration","tooltip","realtime"]},{"id":"bento-feature-grid","n":"003","title":"Bento feature grid","summary":"Six feature cells of varied spans on a 4-column grid, each with a small live CSS illustration; hover lifts a cell 2px and brightens its hairline.","platform":"web","type":"layout","styles":["minimal","soft","paper"],"tags":["marketing","grid","features","landing"]},{"id":"ios-bottom-sheet-detents","n":"004","title":"Bottom sheet with three detents","summary":"A draggable places sheet over a CSS-drawn map that snaps to 120px, 430px and full-height detents with spring easing, a progress-linked scrim and velocity flicks.","platform":"mobile-app","type":"component","styles":["minimal","soft"],"tags":["bottom-sheet","map","gesture","ios","list"]},{"id":"brutalist-studio-home","n":"005","title":"Brutalist studio home","summary":"Black-on-white studio homepage: 1px column grid, 96px uppercase Archivo Black statement, project rows that invert on hover and a 36-second marquee footer.","platform":"web","type":"screen","styles":["brutalist","swiss"],"tags":["homepage","studio","portfolio","list","marquee"]},{"id":"button-state-morph","n":"006","title":"Button state morph","summary":"A 220px 'Pay $48.00' button collapses to a 44px spinner in 200ms, draws a checkmark with stroke-dashoffset over 400ms, then expands to a green 140px 'Paid' pill; click again after 2s to replay.","platform":"web","type":"animation","styles":["minimal","soft"],"tags":["button","checkout","loading","success","micro-interaction"]},{"id":"collapsing-sidebar-rail","n":"007","title":"Collapsing sidebar rail","summary":"A 240px app sidebar that collapses to a 64px icon rail with hover tooltips, an accent active-route bar and a ⌘B shortcut.","platform":"web","type":"component","styles":["minimal","dark"],"tags":["navigation","sidebar","dashboard","shell"]},{"id":"command-palette","n":"008","title":"Command palette","summary":"A ⌘K command palette that opens with a 200ms scale-and-fade, fuzzy-filters 20 grouped commands, and is fully driven from the keyboard with shortcut hints on the right.","platform":"web","type":"component","styles":["minimal","dark"],"tags":["command-palette","search","keyboard","navigation","dialog"]},{"id":"date-range-picker","n":"009","title":"Date range picker","summary":"A two-month calendar popover with a presets column, start/end pills, hover-previewed ranges and full arrow-key navigation across month boundaries.","platform":"web","type":"component","styles":["swiss","minimal"],"tags":["date-picker","calendar","popover","analytics","keyboard"]},{"id":"dense-data-table","n":"010","title":"Dense data table","summary":"A 40px-row invoice table with a sticky header, tri-state select-all, shift-click ranges, sortable columns and a dark action bar that slides up when rows are selected.","platform":"web","type":"component","styles":["minimal","swiss"],"tags":["table","data","selection","sorting","billing"]},{"id":"docs-three-column","n":"011","title":"Documentation three-column layout","summary":"A docs shell: 256px collapsible nav tree, 72ch prose column, sticky 'On this page' TOC with scroll-spy, ⌘K search and a code block with a copy button.","platform":"web","type":"layout","styles":["minimal"],"tags":["documentation","navigation","layout","developer"]},{"id":"editorial-landing-hero","n":"012","title":"Editorial landing hero","summary":"A paper-toned magazine landing hero: 104px Fraunces headline rising word by word, hairline nav, one-line manifesto, a single outlined pill CTA and a mono issue index.","platform":"web","type":"screen","styles":["editorial","paper"],"tags":["landing","hero","editorial","typography","reveal"]},{"id":"editorial-mega-menu","n":"013","title":"Editorial mega menu","summary":"A newspaper-style top nav whose full-width panel animates its height between sections, with a 2px underline that slides between labels and a featured story card.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["navigation","mega-menu","editorial","header","hover"]},{"id":"empty-state-line-illustration","n":"014","title":"Empty state with line illustration","summary":"An inbox empty state whose line-drawn SVG draws itself over 1.2s, with a heading, one line of guidance, two actions and a transition into a populated list.","platform":"web","type":"pattern","styles":["minimal","editorial","soft"],"tags":["empty-state","inbox","illustration","onboarding"]},{"id":"mobile-filter-chips-list","n":"015","title":"Filter chips product list","summary":"A 390px product list with a horizontally scrolling chip row (selected chip grows a check), a sort bottom sheet, a 2-column grid with SVG wishlist hearts, and a shimmer skeleton on every filter change.","platform":"mobile-web","type":"layout","styles":["minimal","soft"],"tags":["ecommerce","filters","chips","bottom-sheet","grid","skeleton"]},{"id":"ios-fintech-home","n":"016","title":"Fintech home","summary":"A banking home screen: dark balance card with a 40px tabular amount and a blur-to-hide toggle, four circular quick actions, day-grouped transactions with initial avatars, under a glass top bar.","platform":"mobile-app","type":"screen","styles":["minimal","glass"],"tags":["fintech","banking","list","glass","ios"]},{"id":"ios-glass-tab-bar","n":"017","title":"Floating glass tab bar","summary":"An inset Liquid-glass tab capsule with four tabs and a separate round search island; a glass lens squashes and slides between tabs while content scrolls under it.","platform":"mobile-app","type":"component","styles":["glass","soft"],"tags":["navigation","tab-bar","glass","ios"]},{"id":"tablet-floating-tool-palette","n":"018","title":"Floating tool palette","summary":"A draggable 56px tool palette for a 1180×820 canvas app: five tools with a sliding active indicator, a colour-and-size popover, undo and clear, over a dot-grid canvas you draw on.","platform":"tablet","type":"component","styles":["dark","industrial","minimal"],"tags":["toolbar","palette","canvas","drawing","popover","drag"]},{"id":"mobile-fullscreen-menu","n":"019","title":"Full-screen mobile menu","summary":"A hamburger that morphs into an X while the page fades, the background shifts from cream to navy and five 64px serif links rise in with a 55ms stagger, plus a small-links row and a language switch.","platform":"mobile-web","type":"component","styles":["editorial","paper","dark"],"tags":["navigation","menu","overlay","hamburger","editorial"]},{"id":"ios-grouped-settings","n":"020","title":"Grouped settings list","summary":"An iOS-style settings screen: inset grouped sections with 44px rows, coloured icon squares, 51×31 spring toggles with a stretching knob, chevron rows with values, footers and a profile row.","platform":"mobile-app","type":"screen","styles":["minimal","soft"],"tags":["settings","list","toggle","forms","ios"]},{"id":"hover-tilt-cards","n":"021","title":"Hover tilt cards","summary":"Three pricing cards tilt up to 8° toward the pointer with a cursor-following specular highlight and a lifted shadow, then spring back with an overshoot curve on leave.","platform":"web","type":"animation","styles":["dark","minimal"],"tags":["cards","pricing","hover","3d","tilt"]},{"id":"ink-fill-progress","n":"022","title":"Ink-fill upload progress","summary":"A full-screen upload state where a 168px outlined wordmark fills with ink from the bottom via clip-path as progress advances, with a mono percentage, ETA, speed and per-file checks; click replays.","platform":"web","type":"animation","styles":["paper","brutalist","minimal"],"tags":["progress","upload","loader","typography"]},{"id":"inline-form-validation","n":"023","title":"Inline form validation","summary":"A signup form that validates each field on blur with a 6px shake for errors, a stroke-drawn tick for success, a 4-segment password meter and a submit gated until everything passes.","platform":"web","type":"pattern","styles":["editorial","soft","minimal"],"tags":["form","validation","signup","password","accessibility"]},{"id":"kanban-board","n":"024","title":"Kanban board","summary":"Four 292px columns with live counts, labelled cards with avatars, pointer-event drag-and-drop with a 3° tilted ghost and a dashed drop placeholder, plus [ ] keyboard moves.","platform":"web","type":"layout","styles":["minimal","soft"],"tags":["kanban","board","drag-and-drop","project"]},{"id":"kinetic-type-marquee","n":"025","title":"Kinetic type marquee","summary":"Three rows of 136px variable-font text scroll at different speeds and directions; hovering a row eases it to quarter speed; the middle row is outlined and the weight breathes 300–720.","platform":"web","type":"animation","styles":["kinetic","editorial","paper"],"tags":["typography","marquee","variable-font","specimen","hero"]},{"id":"lamp-theme-toggle","n":"026","title":"Lamp pull-cord theme toggle","summary":"A hanging brass lamp with a pull cord that switches the whole page between day and night with a radial clip-path reveal starting at the bulb; reduced motion crossfades.","platform":"web","type":"component","styles":["editorial","paper","dark"],"tags":["theme","dark-mode","toggle","view-transition","editorial"]},{"id":"ios-large-title-collapse","n":"027","title":"Large title collapse on scroll","summary":"A 34px serif large title shrinks and fades into a 17px centred toolbar title as the list scrolls; the glass toolbar's fill, blur and hairline scale with scroll and the search field collapses.","platform":"mobile-app","type":"animation","styles":["paper","editorial","glass"],"tags":["navigation","toolbar","scroll","glass","ios","editorial"]},{"id":"luxe-product-detail","n":"028","title":"Luxe product detail","summary":"Fragrance product page: CSS-only bottle with three glass variants, Cormorant serif name, a size radio with a sliding black indicator, and an Add to bag button that morphs to a gold Added state.","platform":"web","type":"screen","styles":["luxe","editorial"],"tags":["ecommerce","product","luxury","selector","button"]},{"id":"luxe-serif-style","n":"029","title":"Luxe serif design style","summary":"High-contrast Cormorant Garamond with Karla small caps, hairline gold rules, cream and charcoal surfaces and centre-out underlines; a nav, four buttons, a newsletter input, a product card and a quote.","platform":"web","type":"style","styles":["luxe","editorial","minimal"],"tags":["style-guide","luxe","serif","ecommerce","typography"]},{"id":"m3-fab-menu","n":"030","title":"M3 expanding FAB menu","summary":"A dark-tonal Material 3 Expressive FAB that rotates its plus 45°, rounds to a circle and unfurls three labelled pill actions with a 40ms stagger behind a scrim.","platform":"mobile-app","type":"component","styles":["material","dark"],"tags":["material","fab","menu","actions","dark"]},{"id":"m3-expressive-home","n":"031","title":"M3 Expressive home feed","summary":"A warm-tonal Material 3 Expressive home: 36px greeting, morphing segmented group with a shape loader, 28px tonal cards, a floating 5-action toolbar and an extended FAB.","platform":"mobile-app","type":"screen","styles":["material","soft","playful"],"tags":["material","home","feed","toolbar","fab","cards"]},{"id":"m3-navigation-drawer","n":"032","title":"M3 modal navigation drawer","summary":"A 360px Material 3 Expressive modal drawer that slides in under a scrim from a top-app-bar hamburger, with full-width tonal pill for the active item, section headers, dividers and badges.","platform":"mobile-app","type":"component","styles":["material","minimal","soft"],"tags":["material","navigation","drawer","menu","app-bar"]},{"id":"m3-search-bar-morph","n":"033","title":"M3 search bar morph","summary":"A Material 3 Expressive container transform: a 56px pill search bar in a dark top app bar grows into a full-screen search view (radius 28→0) with suggestions fading in; the back arrow reverses it.","platform":"mobile-app","type":"animation","styles":["material","dark","kinetic"],"tags":["material","search","container-transform","app-bar","dark"]},{"id":"magazine-editorial-grid","n":"034","title":"Magazine editorial grid","summary":"An asymmetric 12-column editorial front: a 7-column lead story, three sidebar stories, a numbered index that highlights its story on hover, and hairline rules throughout.","platform":"web","type":"layout","styles":["editorial","paper"],"tags":["editorial","magazine","grid","typography"]},{"id":"masonry-gallery-captions","n":"035","title":"Masonry gallery with captions","summary":"A 4-column CSS-columns masonry of 14 CSS-painted tiles; hover slides a caption bar up from the bottom, and a chip row filters by series with a fade.","platform":"web","type":"layout","styles":["dark","minimal"],"tags":["gallery","masonry","portfolio","filter"]},{"id":"mobile-landing-sticky-cta","n":"036","title":"Mobile landing with sticky CTA","summary":"A 390px marketing landing page: Fraunces headline, scroll-snap feature carousel, social-proof block, FAQ accordion and a CTA bar that slides up once the hero scrolls away.","platform":"mobile-web","type":"screen","styles":["editorial","paper","soft"],"tags":["landing","marketing","carousel","accordion","cta"]},{"id":"modal-dialog-focus-trap","n":"037","title":"Modal dialog with focus trap","summary":"Native <dialog> modals that open with a 240ms scale .96→1 and scrim fade, trap focus, close on Esc or scrim click, plus a destructive variant gated by a type-to-confirm input.","platform":"web","type":"component","styles":["minimal","soft"],"tags":["dialog","modal","confirm","destructive","focus"]},{"id":"multi-step-form-stepper","n":"038","title":"Multi-step form stepper","summary":"A three-step workspace setup with a horizontal stepper whose connectors fill on completion, direction-aware 40px slide transitions, validation on Continue and a review step with Edit links.","platform":"web","type":"component","styles":["soft","minimal"],"tags":["form","stepper","onboarding","validation","wizard"]},{"id":"neo-brutalist-style","n":"039","title":"Neo-brutalist design style","summary":"Thick 2.5px black borders, hard 4px 4px 0 offset shadows, flat yellow and blue fills, and hover that moves the element into its shadow; buttons, inputs, a card, toggles and tags.","platform":"web","type":"style","styles":["brutalist","playful"],"tags":["style-guide","brutalist","components","buttons","toggles"]},{"id":"nested-dropdown-menu","n":"040","title":"Nested dropdown menu","summary":"An application menubar with click-to-open menus, hover submenus guarded by a safe-triangle delay, check and radio items, a shortcuts column and complete keyboard support including typeahead.","platform":"web","type":"component","styles":["industrial","dark"],"tags":["menu","dropdown","submenu","menubar","keyboard"]},{"id":"notification-center-panel","n":"041","title":"Notification center panel","summary":"A bell with an unread dot opens a 380px top-right panel with All/Mentions/Following tabs, Today/Yesterday groups, unread dots that scale away on Mark all read, and an empty tab state.","platform":"web","type":"component","styles":["dark","minimal","industrial"],"tags":["notifications","popover","tabs","dashboard","dark"]},{"id":"ios-now-playing","n":"042","title":"Now playing","summary":"A full-screen player: CSS-gradient album art with SVG grain, the same art blurred as the backdrop, a scrubber with a fat drag thumb, a path-morphing play/pause and time-synced lyrics.","platform":"mobile-app","type":"screen","styles":["dark","luxe","glass"],"tags":["music","player","scrubber","lyrics","ios","dark"]},{"id":"odometer-counter","n":"043","title":"Odometer counter","summary":"A 112px revenue figure whose digits roll vertically on 0–9 strips (700ms expo-out, 24ms cascade from the right), with comma grouping, four add/refund buttons and a 3s auto-tick.","platform":"web","type":"animation","styles":["paper","editorial","minimal"],"tags":["counter","odometer","numbers","dashboard","revenue"]},{"id":"ios-onboarding-carousel","n":"044","title":"Onboarding carousel","summary":"Three snap-scrolled onboarding slides with CSS-drawn illustrations, page dots that stretch into a 24px pill, and a Continue button that becomes Get started on the last slide.","platform":"mobile-app","type":"screen","styles":["dark","editorial","soft"],"tags":["onboarding","carousel","pagination","ios","dark"]},{"id":"onboarding-checklist","n":"045","title":"Onboarding checklist card","summary":"A 400px setup card with a 44px progress ring and five tasks; completing one draws a tick and collapses it, 100% dissolves into a calm 'You're set' state, and the card is dismissable.","platform":"web","type":"pattern","styles":["soft","minimal"],"tags":["onboarding","checklist","progress","activation","card"]},{"id":"mobile-one-page-checkout","n":"046","title":"One-page mobile checkout","summary":"A 390px single-page checkout: collapsible order summary, address form with correct input types and autocomplete, payment radio cards, inline validation and a sticky Pay button carrying the total.","platform":"mobile-web","type":"screen","styles":["minimal","soft"],"tags":["checkout","form","ecommerce","validation","payment"]},{"id":"optimistic-like-button","n":"047","title":"Optimistic like button","summary":"A heart that fills with a scale bounce and an 8-particle CSS burst, increments the count instantly, and shows an undo toast with a 5s rollback when the fake request fails.","platform":"web","type":"animation","styles":["dark","playful","minimal"],"tags":["like","optimistic-ui","toast","micro-interaction","social"]},{"id":"orbit-dots-loader","n":"048","title":"Orbit dots loader family","summary":"Three pure-CSS loading indicators side by side (orbit dots, staggered bars, morphing ring), each ≤ 3 DOM elements, driven by two custom properties with live duration and size sliders.","platform":"web","type":"animation","styles":["minimal","kinetic"],"tags":["loader","spinner","animation","feedback"]},{"id":"page-transition-curtain","n":"049","title":"Page transition curtain","summary":"Clicking a nav link closes two 50%-wide panels over the page in 450ms, swaps the content behind them, reopens, then the 132px page title enters letter by letter with a 28ms stagger.","platform":"web","type":"animation","styles":["luxe","editorial","dark"],"tags":["transition","navigation","curtain","typography","hotel"]},{"id":"paper-ink-style","n":"050","title":"Paper and ink design style","summary":"A warm off-white paper surface with SVG feTurbulence grain, ink-black type, Newsreader italics, a hand-drawn red underline, stamp-like tags and an approval stamp; buttons, inputs, a card and a table.","platform":"web","type":"style","styles":["paper","editorial"],"tags":["style-guide","paper","editorial","typography","components"]},{"id":"paper-article-reader","n":"051","title":"Paper article reader","summary":"Long-form article page on warm paper: Newsreader body at 19px/1.6 on a 66ch measure, a four-line drop cap, a pull quote, floated margin notes at ≥1100px and a 2px sticky reading-progress hairline.","platform":"web","type":"screen","styles":["paper","editorial"],"tags":["article","reading","typography","sidenotes","progress"]},{"id":"ios-pull-to-refresh","n":"052","title":"Pull to refresh with drawn ring","summary":"Dragging a deployments feed down draws a mint ring in proportion to the pull, spins it while loading for 1.2s, then inserts a new row at the top with a highlight that fades.","platform":"mobile-app","type":"animation","styles":["dark","terminal","minimal"],"tags":["pull-to-refresh","list","gesture","loading","dark"]},{"id":"pwa-app-shell","n":"053","title":"PWA app shell hydration","summary":"A cache-first app shell: fixed top bar and bottom nav render instantly, content cards show shimmering skeletons, then hydrate in with a 70ms stagger; a button replays the cold start.","platform":"pwa","type":"layout","styles":["dark","industrial","minimal"],"tags":["pwa","app-shell","skeleton","loading","cache","transit"]},{"id":"pwa-connectivity-banner","n":"054","title":"PWA connectivity banner","summary":"A 40px offline banner with a pulsing dot slides under the status bar, cached rows get a tag while uncached rows grey out; reconnecting flips it green and retracts it after 2s.","platform":"pwa","type":"pattern","styles":["minimal","swiss","soft"],"tags":["pwa","offline","banner","status","cache"]},{"id":"pwa-install-sheet","n":"055","title":"PWA install sheet","summary":"A bottom sheet that springs up to pitch installing a PWA, with an icon, three benefits, Install and Not now. Then it shows an inline progress bar and an 'Added to Home Screen' chip.","platform":"pwa","type":"pattern","styles":["paper","editorial","soft"],"tags":["pwa","install","bottom-sheet","onboarding","dialog"]},{"id":"pwa-news-reader","n":"056","title":"PWA news reader","summary":"A paper-toned news front with serif headlines: scrolling section chips, a lead card with a CSS-illustrated landscape, a story list with reading times and saved-for-offline marks, and a bottom nav.","platform":"pwa","type":"screen","styles":["editorial","paper"],"tags":["pwa","news","reading","offline","chips","list"]},{"id":"pwa-update-toast","n":"057","title":"PWA update toast","summary":"A 'New version available' toast rises above the bottom nav with a Reload action and a 10s countdown ring; Reload sweeps a lime panel over the screen showing v2.4.1, then reveals the updated app.","platform":"pwa","type":"component","styles":["dark","kinetic","minimal"],"tags":["pwa","toast","update","service-worker","countdown","dark"]},{"id":"scroll-reading-progress","n":"058","title":"Scroll reading progress","summary":"A long-form article with a 3px scroll-driven progress bar (CSS animation-timeline: scroll() with a JS fallback) and a sticky table of contents that marks the current section.","platform":"web","type":"animation","styles":["editorial","dark"],"tags":["scroll","article","progress","table-of-contents","editorial"]},{"id":"settings-page-sticky-nav","n":"059","title":"Settings page with sticky nav","summary":"Account settings: a 220px sticky section nav with scroll-spy highlight beside a 720px column of grouped setting cards with switches, selects, text inputs and an armed danger zone.","platform":"web","type":"screen","styles":["minimal","soft"],"tags":["settings","navigation","forms","scroll-spy","toggle"]},{"id":"tablet-sidebar-overlay-pin","n":"060","title":"Sidebar with overlay and pin modes","summary":"A 280px notes sidebar on a 1180×820 tablet that either overlays the page with a scrim and shadow or pins so the content reflows; a pin toggle switches modes with one 320ms transition.","platform":"tablet","type":"component","styles":["minimal","soft","paper"],"tags":["sidebar","navigation","notes","overlay","layout"]},{"id":"skeleton-to-content-swap","n":"061","title":"Skeleton to content swap","summary":"A six-card feed shows shimmering skeletons whose bars match the final content geometry exactly, then content fades and rises in with a 40ms stagger; Reload replays.","platform":"web","type":"animation","styles":["minimal","soft","editorial"],"tags":["loading","skeleton","feed","cards","stagger"]},{"id":"segmented-control-sliding","n":"062","title":"Sliding segmented control","summary":"Segmented controls in 2, 3 and 5-segment variants: an ivory pill slides between options over 260ms with a mid-travel squash, arrow keys move selection, and each switches a content panel.","platform":"web","type":"component","styles":["luxe","dark"],"tags":["segmented-control","tabs","toggle","radio","banking"]},{"id":"split-sign-in","n":"063","title":"Split sign-in","summary":"45/55 sign-in screen: floating-label fields, a password visibility toggle and a magic-link button, beside a deep-green panel with testimonials crossfading every 5 seconds.","platform":"web","type":"screen","styles":["editorial","soft"],"tags":["auth","form","sign-in","testimonial","split"]},{"id":"spotlight-hover-grid","n":"064","title":"Spotlight hover grid","summary":"A 4×3 grid of feature cards where a white radial light follows the pointer across card borders (1px mask-composited ring) and surfaces (6% wash); white-on-charcoal, no colour, no blur.","platform":"web","type":"animation","styles":["dark","minimal","industrial"],"tags":["grid","hover","spotlight","cards","features"]},{"id":"staggered-list-reveal","n":"065","title":"Staggered list reveal","summary":"Twelve transaction rows slide up 14px and fade in with a 30ms stagger and expo-out easing on load; a filter input animates leaving rows out (180ms) before re-staggering the survivors.","platform":"web","type":"animation","styles":["minimal","swiss"],"tags":["list","stagger","filter","table","banking"]},{"id":"sticky-split-story","n":"066","title":"Sticky split scroll story","summary":"A two-column scrollytelling layout: four text chapters scroll on the left while a sticky sky illustration on the right crossfades and shifts colour as each chapter enters view.","platform":"web","type":"layout","styles":["editorial","dark"],"tags":["storytelling","scroll","sticky","editorial"]},{"id":"mobile-story-viewer","n":"067","title":"Story viewer with hold to pause","summary":"A 390px story viewer: segmented 3px progress bars fill over 5s each, tap zones step forward and back, a 200ms hold pauses, and a pull-down of 120px closes the viewer over gradient scenes.","platform":"mobile-web","type":"animation","styles":["dark","kinetic"],"tags":["stories","gestures","progress","media","viewer"]},{"id":"ios-swipe-row-actions","n":"068","title":"Swipe-to-reveal row actions","summary":"Mail rows that swipe left to reveal 80px Archive and Delete buttons with rubber-band overshoot, commit on a 60% full swipe with a nudge, and swipe right to pin.","platform":"mobile-app","type":"pattern","styles":["minimal","paper"],"tags":["list","gesture","swipe","mail","ios"]},{"id":"swiss-grid-pricing","n":"069","title":"Swiss grid pricing","summary":"Pricing page on a visible 12-column hairline grid: three tiers in strict 4-column blocks, numbered features, red accent, and a monthly/yearly switch that tweens the prices.","platform":"web","type":"screen","styles":["swiss","minimal"],"tags":["pricing","grid","toggle","marketing","swiss"]},{"id":"swiss-poster-style","n":"070","title":"Swiss poster style","summary":"A Swiss-school exhibition poster: Archivo in red/black/off-white, a 130px word rotated −90°, a strict 12 × 8 grid with visible margins, and grid lines that reveal on hover.","platform":"web","type":"style","styles":["swiss","brutalist"],"tags":["poster","swiss","typography","grid"]},{"id":"tablet-split-view-mail","n":"071","title":"Tablet mail split view","summary":"A 1180×820 three-pane mail client: a collapsible 72px folder rail, a 320px message list with a 3px accent selection bar, a reading pane with an action header and j/k keyboard navigation.","platform":"tablet","type":"layout","styles":["minimal","swiss"],"tags":["mail","split-view","three-pane","list-detail","keyboard"]},{"id":"tablet-dashboard-grid","n":"072","title":"Tablet ops dashboard grid","summary":"A 1180×820 dark ops dashboard: 3×2 card grid with a crosshair-hover SVG line chart, a dash-offset gauge, a live event list that inserts a row every 4s, and a mono segmented time control.","platform":"tablet","type":"screen","styles":["dark","terminal","industrial"],"tags":["dashboard","chart","gauge","live-data","dark","ops"]},{"id":"tabs-morphing-underline","n":"073","title":"Tabs with morphing underline","summary":"Nine scrollable tabs whose 2px underline stretches to span old and new tab, then settles (180ms + 200ms), with a panel crossfade and fade masks at the strip's overflow edges.","platform":"web","type":"component","styles":["editorial","dark"],"tags":["tabs","navigation","underline","overflow","publishing"]},{"id":"terminal-404","n":"074","title":"Terminal 404","summary":"A 404 page styled as a terminal session: typewriter output at 22ms per character, a blinking block cursor, and a prompt that accepts home, back, search, help, ls and clear. Green on near-black.","platform":"web","type":"screen","styles":["terminal","dark"],"tags":["404","error","terminal","typewriter","command-line"]},{"id":"terminal-ui-style","n":"075","title":"Terminal UI style sheet","summary":"A monospace 1ch-grid style sheet for a terminal-style ops UI: box-drawing panel titles, bracketed buttons, key-value rows, an amber-highlighted list, a table, a status line and a : command input.","platform":"web","type":"style","styles":["terminal","dark"],"tags":["terminal","monospace","style-guide","ops"]},{"id":"text-scramble-reveal","n":"076","title":"Text scramble reveal","summary":"A 64px monospace headline resolves from random glyphs to its final text left to right in 900ms; three headlines cycle every 4s with a progress dash per headline; click or Space skips.","platform":"web","type":"animation","styles":["terminal","minimal","paper"],"tags":["typography","text-effect","headline","monospace","hero"]},{"id":"toast-stack","n":"077","title":"Toast stack","summary":"Bottom-right toasts that stack like cards (scale .96/.92, 12px offsets), expand on hover, drain a 2px progress hairline over 5s and pause while you look at them.","platform":"web","type":"component","styles":["dark","soft"],"tags":["toast","notification","feedback","stack","hover"]},{"id":"tablet-two-column-reader","n":"078","title":"Two-column tablet reader","summary":"A 1180×820 book reader that flows a chapter into two CSS columns, turns pages by sliding the column container, with a chapter overlay, a 16–22px size stepper and Libre Caslon body text.","platform":"tablet","type":"screen","styles":["paper","editorial"],"tags":["reader","typography","columns","pagination","editorial"]},{"id":"card-flip-3d","n":"079","title":"3D card flip trio","summary":"Three wallet cards (debit card, ticket, advisor profile) that flip on click or Enter with 1200px perspective, a 600ms rotate and a 14px mid-flip lift; every back face carries real content.","platform":"web","type":"animation","styles":["luxe","dark"],"tags":["card","flip","3d","wallet","transform"]},{"id":"accordion-grid-rows","n":"080","title":"Grid-rows FAQ accordion","summary":"A six-question FAQ whose answers animate open with grid-template-rows 0fr → 1fr over 320ms, one open at a time, chevron rotation and arrow-key movement between serif questions on a paper ground.","platform":"web","type":"component","styles":["paper","editorial","minimal"],"tags":["accordion","faq","disclosure","keyboard","grid"]},{"id":"hover-image-trail","n":"081","title":"Hover image trail","summary":"An editorial index of 6 project rows; dragging the cursor across a row spawns 180×124px gradient thumbnails every 48px that pop in, drift up and fade, never more than 6 alive.","platform":"web","type":"animation","styles":["editorial","paper","minimal"],"tags":["portfolio","cursor","trail","list","hover","editorial"]},{"id":"ios-app-switcher-stack","n":"082","title":"iOS app switcher stack","summary":"Five app cards fanned in a perspective stack: drag to browse, swipe up to fling one away and reflow, tap to expand it to full screen in 420ms.","platform":"mobile-app","type":"animation","styles":["dark","kinetic"],"tags":["app-switcher","cards","gesture","multitasking","ios"]},{"id":"ios-context-menu-lift","n":"083","title":"iOS context menu lift","summary":"Press-and-hold a chat bubble for 350ms: it lifts to 1.04 with a shadow, the thread blurs, and a four-item menu springs in with a 40ms stagger.","platform":"mobile-app","type":"animation","styles":["minimal","soft"],"tags":["context-menu","long-press","messaging","ios","haptics"]},{"id":"logo-draw-intro","n":"084","title":"Logo draw site intro","summary":"A black-and-white site intro: an SVG monogram strokes itself in over 900ms, fills red, then two panels split to reveal a 100px headline whose letters stagger up; a Replay control re-runs it.","platform":"web","type":"animation","styles":["swiss","brutalist","kinetic"],"tags":["intro","preloader","svg","stagger","hero","reveal"]},{"id":"magnetic-buttons","n":"085","title":"Magnetic buttons","summary":"Three CTAs and a nav row whose outlines and labels are pulled toward the cursor inside an 80px radius (up to 10px) and spring back over 500ms; keyboard focus works without the effect.","platform":"web","type":"animation","styles":["dark","industrial","kinetic"],"tags":["buttons","hover","cursor","navigation","microinteraction"]},{"id":"shared-element-expand","n":"086","title":"Shared element expand","summary":"Six project cards; clicking one FLIP-animates it (transform + border-radius, 420ms expo-out) into a full detail dialog while the rest fade, and Esc reverses it.","platform":"web","type":"animation","styles":["editorial","paper","soft"],"tags":["flip","transition","cards","dialog","gallery"]},{"id":"variable-font-proximity","n":"087","title":"Variable font proximity headline","summary":"A 148px Fraunces headline where every letter's weight (300–900) follows cursor distance within a 260px radius, easing back on leave; keyboard and reduced motion get a static 800.","platform":"web","type":"animation","styles":["editorial","paper","kinetic"],"tags":["typography","variable-font","hero","cursor","specimen"]},{"id":"account-menu-panel","n":"088","title":"Account menu panel","summary":"A 280px account menu under the avatar: identity, three destinations, sign out, arrow keys, and Escape returning focus.","platform":"web","type":"component","styles":["minimal"],"tags":["account","menu","overlay","focus"]},{"id":"ios-health-activity-rings","n":"089","title":"Activity rings with weekly picker","summary":"A dark iOS 26 health summary: three concentric rings sweep closed with an overflow lap, counters tick up, and a seven-day bar chart switches the day.","platform":"mobile-app","type":"screen","styles":["dark","minimal"],"tags":["health","rings","chart","fitness","ios"]},{"id":"landing-agency-case-wall","n":"090","title":"Agency landing with case wall","summary":"North Yard: an 88px lockup, a hard-edged 2×2 case wall that inverts on hover, and a sticky 56px orange CTA bar.","platform":"web","type":"screen","styles":["brutalist","swiss"],"tags":["landing","agency","grid","brutalist","cta"]},{"id":"hero-ai-prompt-cycle","n":"091","title":"AI prompt cycle hero","summary":"A Hollis product hero whose question box types four real company prompts, then streams a sourced answer; chips, Enter and New question all drive the same cycle.","platform":"web","type":"section","styles":["minimal","soft"],"tags":["hero","prompt","typewriter","saas","answer"]},{"id":"pricing-annual-toggle-roll","n":"092","title":"Annual toggle with rolling prices","summary":"Pricing rows whose 96px prices roll digit by digit like an odometer when billing flips to annual, while a tilted savings badge springs in.","platform":"web","type":"section","styles":["minimal","soft"],"tags":["pricing","toggle","odometer","billing","numbers"]},{"id":"portfolio-architect-index","n":"093","title":"Architect index with plan drawings","summary":"A Swiss architect index: 120px wordmark, an 8-row 12-column project list, and a sticky right panel that crossfades a geometric plan on hover.","platform":"web","type":"screen","styles":["swiss","minimal"],"tags":["portfolio","index","architecture","grid","hover"]},{"id":"hero-asymmetric-type-lockup","n":"094","title":"Asymmetric type lockup hero","summary":"A poetry-press hero: 160px italic QUARTO broken across an asymmetric 12-column grid, a 14px paragraph in the leftover cell, and one underline button.","platform":"web","type":"section","styles":["editorial","kinetic"],"tags":["hero","typography","editorial","lockup"]},{"id":"audit-activity-log","n":"095","title":"Audit activity log","summary":"A timestamped activity list with access, change, and denied filters. Mono times, a status dot, and a badge on each row.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["audit","log","activity","filter"]},{"id":"hero-bauhaus-composition","n":"096","title":"Bauhaus composition hero","summary":"A summer-school hero whose primary-colour circle, square, triangle and half-disc rearrange into three compositions on click, beside a 136px grotesk headline.","platform":"web","type":"section","styles":["bauhaus","swiss"],"tags":["hero","geometric","composition","school","landing"]},{"id":"bauhaus-style","n":"097","title":"Bauhaus design language kit","summary":"A full Bauhaus UI dialect on one sheet: red, yellow, blue and ink on paper, circle/square/triangle grammar, Josefin Sans lowercase headlines, hard-shadow controls.","platform":"web","type":"style","styles":["bauhaus","swiss"],"tags":["bauhaus","geometric","kit","typography","primary"]},{"id":"billing-plan-summary","n":"098","title":"Billing plan summary","summary":"The billing screen: current plan, a 72 percent usage bar, three invoices, and one primary action to change plan.","platform":"web","type":"screen","styles":["minimal","paper"],"tags":["billing","plan","usage","invoices"]},{"id":"footer-centered-colophon","n":"099","title":"Centered colophon footer","summary":"End of an essay: the last paragraph fades out, then a centered colophon (wordmark, three links, city, year) and a back-to-top that smoothly scrolls the article.","platform":"web","type":"section","styles":["minimal","paper"],"tags":["footer","colophon","editorial","essay"]},{"id":"checkbox-draw-list","n":"100","title":"Checkbox draw list","summary":"A ruled-paper to-do list where red-pencil checkmarks draw in, strike-throughs sweep across each task, and a 232px serif numeral counts progress.","platform":"web","type":"component","styles":["minimal","paper"],"tags":["checkbox","todo","list","progress","form"]},{"id":"clay-soft-style","n":"101","title":"Clay soft design language kit","summary":"A puffy clay kit: cream surfaces with inner light and a deep colour shelf, Bagel Fat One titles, Fredoka UI, and a Pebble Days habit-app home.","platform":"web","type":"style","styles":["clay","playful"],"tags":["clay","playful","kit","kids","habit"]},{"id":"contact-conversational-form","n":"102","title":"Conversational contact form","summary":"A one-question-at-a-time enquiry form on sunflower yellow: 64px serif questions, Enter to advance, A–D shortcuts, a progress bar and a review step.","platform":"web","type":"section","styles":["editorial","playful"],"tags":["contact","form","conversational","multi-step","keyboard"]},{"id":"profile-creator-masthead","n":"103","title":"Creator profile with masthead","summary":"Essayist Mira Joshi: a 104px Literata name, toggleable role chips, a 3-up work strip, and a Sunday-letter subscribe row.","platform":"web","type":"screen","styles":["editorial","paper"],"tags":["profile","editorial","masthead","subscribe","chips"]},{"id":"cta-split-dark-band","n":"104","title":"CTA split dark band","summary":"A last-section Volta Range closer: 88px Unbounded headline left, work-email capture and oxide button right, on a #121512 band.","platform":"web","type":"section","styles":["dark","industrial"],"tags":["cta","footer","form","hardware"]},{"id":"cyber-hud-style","n":"105","title":"Cyber HUD design language kit","summary":"A near-black ops HUD kit: cut corners, scanlines, signal teal on void, Chakra Petch titles, Share Tech Mono readouts, and a Sector 7-K nav console.","platform":"web","type":"style","styles":["cyber","dark"],"tags":["cyber","hud","kit","dark","console"]},{"id":"landing-devtool-dark","n":"106","title":"Dark devtool landing page","summary":"A full landing page for an edge image API: lime-on-graphite, tabbed curl/Node/Python samples with copy, a hairline feature grid, giant latency numerals and pricing.","platform":"web","type":"screen","styles":["dark","terminal"],"tags":["landing","api","developer","code","pricing"]},{"id":"deco-hotel-style","n":"107","title":"Deco hotel design language kit","summary":"A 1920s hotel kit: ivory on lacquer, 1px gold hairlines, stepped ziggurats, Italiana display, Josefin Sans UI, and a Vesper reservation scene.","platform":"web","type":"style","styles":["deco","luxe"],"tags":["deco","hotel","kit","gold","identity"]},{"id":"background-dot-wave","n":"108","title":"Dot wave background","summary":"A canvas field of 24px-grid dots rolling in a slow diagonal sine wave behind a product hero, with a quiet zone under the copy and click-to-ripple.","platform":"web","type":"animation","styles":["minimal","dark"],"tags":["background","canvas","dots","hero","wave"]},{"id":"hero-editorial-name-rotator","n":"109","title":"Editorial name rotator hero","summary":"A wine-dark portfolio hero: 212px italic 'Isaura Venn.' beside a cycling plate, while two slot-machine words in the deck rotate on a 2.6s clock.","platform":"web","type":"section","styles":["editorial","luxe","dark"],"tags":["hero","portfolio","rotator","editorial","slots"]},{"id":"footer-enterprise-sitemap","n":"110","title":"Enterprise sitemap footer","summary":"A dense six-column Swiss sitemap footer with giant index numerals, a live status pill with a 90-day uptime card, and a region and language popover.","platform":"web","type":"section","styles":["minimal","swiss"],"tags":["footer","sitemap","status","locale","enterprise","saas"]},{"id":"faq-two-column-search","n":"111","title":"FAQ two-column search","summary":"A Kestrel docs FAQ: eight accordion rows in two columns, a 44px search field that filters them, and an empty state when nothing hits.","platform":"web","type":"section","styles":["minimal","swiss"],"tags":["faq","search","accordion","docs"]},{"id":"landing-fashion-atelier","n":"112","title":"Fashion atelier landing page","summary":"Atelier Lumen: Didone hero, a gradient garment plate, a four-look strip that swaps the plate, and one sitting CTA on bone, charcoal and wine.","platform":"web","type":"screen","styles":["luxe","editorial"],"tags":["landing","fashion","hero","editorial","lookbook"]},{"id":"hero-flashlight-reveal","n":"113","title":"Flashlight reveal hero","summary":"A dark observability hero where the cursor is a hard-edged torch that cuts a light disc through the calm headline to expose a second, true one underneath.","platform":"web","type":"section","styles":["dark","kinetic"],"tags":["hero","cursor","mask","reveal","saas"]},{"id":"navbar-floating-pill-shrink","n":"114","title":"Floating pill navbar","summary":"A full-width transparent nav over a dusk hero that shrinks into a 780px frosted pill on scroll, with a sliding active-section capsule.","platform":"web","type":"section","styles":["glass","minimal"],"tags":["navbar","scroll","sticky","landing","scrollspy"]},{"id":"contact-giant-email-copy","n":"115","title":"Giant email, click to copy","summary":"A 200px Anton address fills the contact page; click copies it, flashes the page black, and scrambles the type to COPIED TO CLIPBOARD.","platform":"web","type":"section","styles":["brutalist","kinetic"],"tags":["contact","copy","email","scramble","cursor"]},{"id":"footer-giant-wordmark-reveal","n":"116","title":"Giant wordmark reveal footer","summary":"A dark studio footer whose full-width wordmark rises letter by letter out of the bottom edge as you scroll in, with a sitemap and a live local clock.","platform":"web","type":"section","styles":["minimal","dark"],"tags":["footer","wordmark","scroll","sitemap","clock","studio"]},{"id":"cursor-ink-blob","n":"117","title":"Ink blob cursor","summary":"A gooey deep-green ink blob lags the pointer across six editorial cards; overlapping cards invert to ink and lift 8px. Replay recenters the blob.","platform":"web","type":"animation","styles":["organic","kinetic"],"tags":["cursor","blob","editorial","hover"]},{"id":"navbar-island-morph","n":"118","title":"Island morph navbar","summary":"A centred black island in the header morphs 184×44 to 392, 480 or 540px for now-playing, a co-host ping and search, on a 520ms spring.","platform":"web","type":"section","styles":["dark","kinetic"],"tags":["navbar","island","morph","search","radio"]},{"id":"charts-kpi-spark-row","n":"119","title":"KPI row with sparklines","summary":"Four Harbor Ops KPI cards: label, large number, signed delta, and an SVG sparkline that draws on load and highlights the nearest point on hover.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["charts","kpi","sparkline","dashboard"]},{"id":"landing-fintech-light","n":"120","title":"Light fintech landing with tilting card","summary":"A warm-paper business banking landing page: serif headline, a CSS debit card that tilts toward the pointer with a moving glare, trust stats, feature rows and a cobalt CTA.","platform":"web","type":"screen","styles":["minimal","soft"],"tags":["landing","fintech","banking","card","tilt"]},{"id":"logos-mono-marquee","n":"121","title":"Logos mono marquee","summary":"A quiet two-row Tally customer marquee: monochrome type wordmarks, 42s/54s linear scroll, pause on hover, static under reduced motion.","platform":"web","type":"section","styles":["minimal","swiss"],"tags":["logos","marquee","customers","swiss"]},{"id":"portfolio-case-study-long","n":"122","title":"Long-form product case study","summary":"A product designer's case study page: italic serif hero with a phone mockup, role and timeline facts, sketches that draw themselves, count-up outcome metrics, quote and next project.","platform":"web","type":"screen","styles":["editorial","soft"],"tags":["portfolio","case-study","editorial","product-design","scroll"]},{"id":"m3-container-transform","n":"123","title":"M3 container transform","summary":"A Material 3 Expressive trail list where a card grows into its full detail screen in 500ms emphasized easing, with fade-through content, and shrinks back on Back.","platform":"mobile-app","type":"animation","styles":["material","soft"],"tags":["transition","container-transform","list","detail","material"]},{"id":"m3-music-player-expressive","n":"124","title":"M3 expressive music player","summary":"A Material 3 Expressive now-playing screen: 104px play morphs squircle to cookie, the waveform is the seek bar, and each track retints the scaffold.","platform":"mobile-app","type":"screen","styles":["material","dark"],"tags":["music","player","material","waveform","mobile"]},{"id":"auth-magic-link-sent","n":"125","title":"Magic link sent","summary":"A playful 'check your inbox' screen: an envelope seals itself, the address is editable inline, a ring counts down to resend, and mail apps are one tap away.","platform":"web","type":"screen","styles":["soft","playful"],"tags":["auth","sign-in","email","passwordless","countdown"]},{"id":"text-marker-highlight-draw","n":"126","title":"Marker highlight draw","summary":"A 58px Newsreader pull-quote where yellow marker and red pen strokes draw on over 2.5s; Replay and hover run the same stroke-dash animation again.","platform":"web","type":"animation","styles":["editorial","paper"],"tags":["text","marker","highlight","handwriting","editorial"]},{"id":"text-mask-line-reveal","n":"127","title":"Mask line reveal","summary":"A four-line Bodoni manifesto where each line slides up from behind its own mask with a 110ms stagger, then a hairline draws and notes fade in.","platform":"web","type":"animation","styles":["editorial","luxe","dark"],"tags":["headline","reveal","stagger","mask","editorial"]},{"id":"mobile-inbox-list","n":"128","title":"Mobile inbox list","summary":"A phone inbox: large title, search, unread rows, a thread sheet, and a four-item tab bar clear of the home indicator.","platform":"mobile-app","type":"screen","styles":["minimal","paper"],"tags":["inbox","list","mobile","tabs"]},{"id":"mobile-run-detail","n":"129","title":"Mobile run detail","summary":"A phone detail for one run: back control, status badge, five facts, and a full-width confirm button above the home indicator.","platform":"mobile-app","type":"screen","styles":["minimal","paper"],"tags":["detail","mobile","confirm","record"]},{"id":"portfolio-motion-showreel","n":"130","title":"Motion designer showreel index","summary":"A dark motion-design index: 118px italic name, four case rows that height-morph from 88px to 328px on click, each with a CSS/SVG still.","platform":"web","type":"screen","styles":["dark","kinetic"],"tags":["portfolio","motion","accordion","showreel","dark"]},{"id":"newsletter-fold-inline","n":"131","title":"Newsletter fold inline","summary":"A mid-article Loam Letter fold: issue No. 41, one-sentence promise, hairline email row that morphs to “You’re on the list”.","platform":"web","type":"section","styles":["paper","editorial"],"tags":["newsletter","article","form","editorial"]},{"id":"footer-newsletter-split","n":"132","title":"Newsletter split footer","summary":"Split footer for The Margin: underline email on the left, 84px italic wordmark and sitemap on the right, shown under the last essay paragraph.","platform":"web","type":"section","styles":["editorial","paper"],"tags":["footer","newsletter","subscribe","magazine","sitemap"]},{"id":"organic-garden-style","n":"133","title":"Organic garden design language kit","summary":"An earth-tone garden kit: irregular leaf blobs, moss pills, Young Serif display, Hanken Grotesk UI, and a Morrow Seed Co. packet card with a season toggle.","platform":"web","type":"style","styles":["organic","soft"],"tags":["organic","garden","kit","typography","seed"]},{"id":"background-paper-grain","n":"134","title":"Paper grain and ink blots","summary":"Generative paper grain and two multiply ink blots behind a three-line poem, with a Grain slider that changes overlay opacity and turbulence frequency.","platform":"web","type":"animation","styles":["paper","editorial"],"tags":["background","grain","paper","poetry"]},{"id":"auth-passkey-setup","n":"135","title":"Passkey setup with face-scan ring","summary":"An iOS 26 passkey creation screen: a 72-tick ring sweeps mint around a face glyph, resolves into a drawn check, and explains passkeys in a glass card.","platform":"mobile-app","type":"screen","styles":["glass","minimal"],"tags":["auth","passkey","biometrics","ios","security"]},{"id":"people-role-list","n":"136","title":"People by role","summary":"A staff directory with name search, role pills, initials, and an empty line when the filter matches no one.","platform":"web","type":"screen","styles":["minimal","paper"],"tags":["people","directory","roles","list"]},{"id":"portfolio-photographer-horizontal","n":"137","title":"Photographer horizontal gallery","summary":"A 10-plate Wadden-coast series that scrolls sideways: 500px CSS photographs, 9% lerp drag, a 10-tick scrub bar and a 01/10 index.","platform":"web","type":"screen","styles":["editorial","dark","luxe"],"tags":["portfolio","gallery","horizontal","photography","scroll"]},{"id":"pixel-arcade-style","n":"138","title":"Pixel arcade design language kit","summary":"An 8-bit pause-menu kit: 4px grid, Silkscreen display, Space Mono scores, hard NES-like colours, CSS box-shadow sprites, and a Stardrift start screen.","platform":"web","type":"style","styles":["pixel","retro"],"tags":["pixel","arcade","kit","retro","game"]},{"id":"portfolio-index-hover-preview","n":"139","title":"Portfolio index with hover preview","summary":"An art director's project index: a 12-column table of work where hovering a row floats an art-directed plate that trails the cursor with lag and tilt.","platform":"web","type":"screen","styles":["minimal","editorial"],"tags":["portfolio","index","hover","list","cursor"]},{"id":"hero-product-window-tilt","n":"140","title":"Product window tilt hero","summary":"A dark SaaS hero whose div-built app window tilts up to 8° toward the cursor, with sidebar, chart, chip and toast parallaxing at four translateZ depths.","platform":"web","type":"section","styles":["dark","minimal"],"tags":["hero","saas","3d","parallax","product"]},{"id":"record-detail-header","n":"141","title":"Record detail header","summary":"A record page for one run: breadcrumb, status, one primary action, overview and notes tabs, and a 300px next-step panel.","platform":"web","type":"screen","styles":["minimal","industrial"],"tags":["detail","record","tabs","admin"]},{"id":"riso-print-style","n":"142","title":"Riso print design language kit","summary":"A two-drum risograph kit: fluoro pink and indigo overprint, 3px misregistration, grain, Rubik Mono One display, and an Ink Fair 26 zine cover.","platform":"web","type":"style","styles":["riso","playful"],"tags":["riso","print","kit","zine","overprint"]},{"id":"search-results-filters","n":"143","title":"Search results with filters","summary":"A catalogue search with a 240px filter column, live text match, cloth and price filters, and an empty state when nothing qualifies.","platform":"web","type":"screen","styles":["editorial","paper"],"tags":["search","filters","catalogue","list"]},{"id":"text-split-letter-wave","n":"144","title":"Split letter wave","summary":"A 192px hero headline whose letters rise in a staggered wave with springy overshoot; hovering any word makes just that word hop again.","platform":"web","type":"animation","styles":["kinetic","playful"],"tags":["headline","letters","stagger","hover","hero"]},{"id":"contact-split-map-form","n":"145","title":"Split map contact form","summary":"A two-column contact block: a stylised SVG city map whose studio switcher pans to each pin, beside a floating-label form with simulated send.","platform":"web","type":"section","styles":["minimal","soft"],"tags":["contact","form","map","locations","floating-labels"]},{"id":"stacking-cards-scroll","n":"146","title":"Stacking cards on scroll","summary":"Five pastel step cards stick to the top and pile up as you scroll, each earlier card scaling down 3.5% per layer and dimming under the next.","platform":"web","type":"animation","styles":["minimal","soft"],"tags":["scroll","sticky","cards","stack","skincare"]},{"id":"stats-ticker-band","n":"147","title":"Stats ticker band","summary":"A four-column climate stats band whose 112px figures count up in 1200ms, each with a mint hairline, a unit and a one-line label, plus Replay.","platform":"web","type":"section","styles":["kinetic","dark"],"tags":["stats","counter","climate","numbers","band"]},{"id":"pricing-comparison-sticky","n":"148","title":"Sticky comparison table","summary":"A 25-row plan comparison with a sticky plan header, numbered collapsible groups, check/dash/limit cells, tooltips and a differences-only switch.","platform":"web","type":"section","styles":["swiss","industrial"],"tags":["pricing","table","comparison","sticky","accordion"]},{"id":"cta-sticky-mobile-bar","n":"149","title":"Sticky mobile CTA bar","summary":"Sprout product page on a 390×844 phone: a sticky bottom bar keeps $48 and Add to bag, and hides the description once the page is scrolled 72px.","platform":"mobile-web","type":"section","styles":["minimal","soft"],"tags":["cta","sticky","mobile","product"]},{"id":"features-sticky-scroll-steps","n":"150","title":"Sticky scroll feature steps","summary":"Four Loam garden-planning steps scroll on the left while a 600px plot preview sticks on the right and morphs beds, crops, calendar and harvest tally.","platform":"web","type":"section","styles":["organic","paper"],"tags":["features","sticky","scroll","steps","product"]},{"id":"contact-booking-hours","n":"151","title":"Studio hours and booking","summary":"Ceramics-studio contact: a two-line giant email, a seven-day hours table, a Lisbon timezone note, and a Book 30 min dialog with name, email, note and a focus trap.","platform":"web","type":"section","styles":["organic","soft"],"tags":["contact","dialog","hours","studio"]},{"id":"hero-swiss-grid-wordmark","n":"152","title":"Swiss grid wordmark hero","summary":"A design-office hero on a visible 12-column hairline grid: a 304px wordmark rises letter by letter into grid cells, and hovering any column tints it.","platform":"web","type":"section","styles":["swiss","kinetic"],"tags":["hero","grid","wordmark","typography","studio"]},{"id":"features-tabbed-preview","n":"153","title":"Tabbed feature preview","summary":"Four vertical feature tabs with 6s autoplay progress hairlines; the preview pane crossfades between CSS-built product UIs, with a giant outlined step numeral.","platform":"web","type":"section","styles":["dark","minimal"],"tags":["features","tabs","autoplay","product-ui","saas"]},{"id":"team-hover-portrait-grid","n":"154","title":"Team hover portrait grid","summary":"A 3×2 Halden studio grid: six geometric SVG portraits, hover or focus unveils role, one-line bio, and a studio email.","platform":"web","type":"section","styles":["editorial","luxe"],"tags":["team","portraits","hover","studio"]},{"id":"testimonials-quote-carousel","n":"155","title":"Testimonials quote carousel","summary":"A horizontal Fieldnote quote carousel: 48px Newsreader lines, author chip, prev/next, four dots, and a 420ms slide that wraps.","platform":"web","type":"section","styles":["editorial","paper"],"tags":["testimonials","carousel","quotes","section"]},{"id":"testimonials-wall-grid","n":"156","title":"Testimonials wall grid","summary":"A four-column Pebble quote wall: seven short cards, two spanning two columns, initials discs, and a 4px hover lift that reveals tenure.","platform":"web","type":"section","styles":["minimal","soft"],"tags":["testimonials","masonry","grid","quotes"]},{"id":"toggle-switch-set","n":"157","title":"Toggle switch set","summary":"Six toggle temperaments (classic, icon thumb, day/night, squish, labelled, segmented) in a smart-home preferences card with a live status index.","platform":"web","type":"component","styles":["soft","playful"],"tags":["toggle","switch","settings","preferences","form"]},{"id":"background-topographic-lines","n":"158","title":"Topographic lines background","summary":"A marching-squares contour field drifts behind a Ridgeline Atlas hero; interval chips retile the map and Pause drift stops the hills.","platform":"web","type":"animation","styles":["organic","paper"],"tags":["background","canvas","contours","map","hero"]},{"id":"upload-file-queue","n":"159","title":"Upload file queue","summary":"A dashed drop zone and a queue of files: one sent, one advancing, one rejected, with new sheets joining at 8 percent.","platform":"web","type":"component","styles":["paper","minimal"],"tags":["upload","files","queue","progress"]},{"id":"ios-weather-hourly-scrub","n":"160","title":"Weather with an hourly scrubber","summary":"An iOS 26 weather screen where dragging along a 24-hour temperature curve retints the sky, moves the sun or moon and updates temperature and conditions.","platform":"mobile-app","type":"screen","styles":["glass","soft"],"tags":["weather","scrubber","chart","gesture","ios"]},{"id":"landing-wellness-retreat","n":"161","title":"Wellness retreat booking landing","summary":"Loam House: a 76px Young Serif headline, an earth-tone date strip with steppers, and three stay cards each carrying a botanical SVG.","platform":"web","type":"screen","styles":["organic","soft"],"tags":["landing","wellness","booking","cards","retreat"]},{"id":"y2k-chrome-style","n":"162","title":"Y2K chrome design language kit","summary":"A millennium chrome kit: ice-silver bevels, bubble highlights, Michroma display, electric blue actions, and hot pink used once on a 2000s music drop.","platform":"web","type":"style","styles":["y2k","retro"],"tags":["y2k","chrome","kit","typography","music"]},{"id":"button-3d-press","n":"163","title":"3D keycap press buttons","summary":"Chunky keycap buttons with a solid bottom edge that physically sink 6px on press, latching icon keys, and keyboard legends that press them too.","platform":"web","type":"component","styles":["playful","industrial"],"tags":["buttons","keycap","3d","press","toggle","shortcuts"]},{"id":"button-add-to-cart","n":"164","title":"Add to cart that becomes a stepper","summary":"An add-to-basket button that shows an adding state, flies the product to the cart icon, bumps the badge and turns into a quantity stepper. Sold out offers notify.","platform":"web","type":"component","styles":["soft","organic","editorial"],"tags":["ecommerce","cart","stepper","add-to-cart","shop"]},{"id":"phone-calendar-agenda","n":"165","title":"Agenda calendar with quick add","summary":"A Material 3 Expressive agenda: a month grid that folds into a week strip, sticky day headers, a Now line, and a quick-add sheet that parses plain sentences.","platform":"mobile-app","type":"screen","styles":["material","soft"],"tags":["calendar","agenda","schedule","material","sheet"]},{"id":"agent-step-trace","n":"166","title":"Agent step trace","summary":"Four steps of a drafted note. The first is open. Opening another closes it. The last step is waiting.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["agent","trace","steps"]},{"id":"ai-chat-workspace","n":"167","title":"AI chat workspace","summary":"A warm paper AI assistant: history sidebar, a serif answer that streams in with a Stop button, numbered citations that open a sources panel, and a composer.","platform":"web","type":"screen","styles":["paper","editorial","minimal"],"tags":["ai","chat","assistant","streaming","citations"]},{"id":"features-alternating-rows","n":"168","title":"Alternating feature rows","summary":"Three Swiss industrial feature rows that swap sides, each with a numbered eyebrow, three checks, a text link and a drawn product panel that slides in 24px on view.","platform":"web","type":"section","styles":["swiss","industrial"],"tags":["features","product-ui","scroll","industrial","saas"]},{"id":"analog-stick","n":"169","title":"Analog stick","summary":"A stick in a round well. Move toward a side and it leans. Night, Gate, Month, or Yard lights.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["stick","direction","lean"]},{"id":"app-icon-colour-wall","n":"170","title":"App icon colour wall","summary":"A dark edge-to-edge wall of 96 SVG app icons that re-sorts by hue, lightness or shape with a FLIP animation, hover names and a pinned colour readout.","platform":"web","type":"screen","styles":["dark","kinetic","minimal"],"tags":["gallery","app-icons","sorting","colour","flip"]},{"id":"app-icon-shelf-gallery","n":"171","title":"App icon shelf gallery","summary":"A museum-style gallery of 36 SVG app icons on frosted glass shelves, with category, colour and finish filters and a detail sheet with a palette strip.","platform":"web","type":"screen","styles":["minimal","editorial","soft"],"tags":["gallery","app-icons","museum","filters","detail"]},{"id":"app-icon-spec-sheet","n":"172","title":"App icon spec sheet","summary":"One app icon as a review page: a 1024 master with a keyline overlay and mask toggle, real-pixel sizes, light and dark home screens, and the export set.","platform":"web","type":"screen","styles":["swiss","industrial","minimal"],"tags":["app-icons","spec","keylines","export","ios"]},{"id":"architecture-studio-index","n":"173","title":"Architecture studio index","summary":"A Swiss studio index: sortable, filterable project table whose selected row drives a true-scale SVG elevation that slides to follow it, plus a map view.","platform":"web","type":"screen","styles":["swiss","minimal"],"tags":["portfolio","architecture","table","sort","map"]},{"id":"background-aurora-mesh","n":"174","title":"Aurora mesh background","summary":"Four soft gradient blobs drift like an aurora over a dark night sky with SVG grain and a ridge silhouette, plus a warm dawn preset and a drift/intensity panel.","platform":"web","type":"pattern","styles":["dark","organic","soft"],"tags":["background","gradient","aurora","mesh","hero","grain"]},{"id":"automation-config-live-preview","n":"175","title":"Automation builder with live preview","summary":"A settings form on the left drives a sticky preview card on the right: headline count, progress, next issues and a calendar view, all in hard-shadow ink.","platform":"web","type":"section","styles":["brutalist","playful","soft"],"tags":["configurator","preview","form","sticky","saas"]},{"id":"card-boarding-pass","n":"176","title":"Boarding pass with fold-out details","summary":"A horizontal airline boarding pass with notch cutouts, a plane gliding along the route arc, a QR stub, a details sheet that folds down, and an Add to Wallet button.","platform":"web","type":"component","styles":["swiss","minimal"],"tags":["cards","travel","boarding-pass","qr","wallet"]},{"id":"book-page-flip","n":"177","title":"Book page flip","summary":"A 640 by 400 ledger. Next turns the page on its left edge. Three yard notes, one at a time.","platform":"web","type":"animation","styles":["editorial","paper"],"tags":["book","page","flip"]},{"id":"phone-booking-slots","n":"178","title":"Booking time slots","summary":"An appointment picker: service card, a 14-day date strip with sold-out days, grouped time chips, therapist avatars, and a sticky 'Thu 8 Oct, 14:30 · Confirm' bar.","platform":"mobile-app","type":"screen","styles":["soft","organic"],"tags":["booking","appointment","slots","date","wellness"]},{"id":"gym-membership-home","n":"179","title":"Boxing gym home with timetable","summary":"Graftworks: a black poster hero in 190px Anton with an angled orange stripe, a filterable timetable, a monthly/annual tier toggle and a sticky free-class button.","platform":"web","type":"screen","styles":["brutalist","dark"],"tags":["landing","gym","timetable","pricing","sport"]},{"id":"breadcrumb","n":"180","title":"Breadcrumb","summary":"Dispatch, Asar, then Gate 4 as the current page. The current crumb is text. The earlier crumbs are links. A click names what opened.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["breadcrumb","navigation","path"]},{"id":"budget-meter","n":"181","title":"Budget meters","summary":"Three budget rows and one number that is over. Only the over row uses the warning wash. The others stay quiet.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["budget","meter","finance","warning"]},{"id":"button-roles","n":"182","title":"Button roles","summary":"Save is the one solid button. Cancel is outline, Preview is soft, Remove is outline in danger, and Export is disabled.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["button","primary","destructive","disabled"]},{"id":"card-cafe-menu-board","n":"183","title":"Café chalkboard and letterboard menu","summary":"A framed café menu that switches between a chalkboard with grainy chalk lettering and a felt letterboard with plastic letters. Today's special writes itself in.","platform":"web","type":"component","styles":["organic","retro","playful"],"tags":["cards","menu","cafe","chalkboard","toggle"]},{"id":"calendar-month","n":"184","title":"Calendar month","summary":"One month, one chosen day. October 2026 opens with the 17th selected and the 3rd marked as today. Previous and next move a month.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["calendar","date","month","picker"]},{"id":"calendar-week-planner","n":"185","title":"Calendar week planner","summary":"A week calendar app with a mini month, calendar toggles, a 15-minute time grid, side-by-side overlaps, drag to move or resize, and a quick-create popover.","platform":"web","type":"screen","styles":["soft","minimal"],"tags":["calendar","week","schedule","drag","planner"]},{"id":"case-file-horizontal-scroll","n":"186","title":"Case file horizontal scroll","summary":"A pinned section where scrolling down slides three foggy night 'case file' panels sideways, with chapter tabs that fill and a 01 / 03 counter.","platform":"web","type":"section","styles":["dark","editorial","kinetic"],"tags":["horizontal","pinned","storytelling","chapters","night"]},{"id":"changelog-timeline","n":"187","title":"Changelog timeline","summary":"Four dated releases for Field ledger. All, Added, and Fixed filter the same list. A version pill sits under the date.","platform":"web","type":"section","styles":["editorial","minimal"],"tags":["changelog","timeline","filter"]},{"id":"hero-chaptered-scenes","n":"188","title":"Chaptered cinema hero","summary":"A dark film-studio hero: fixed headline on the left, four night scenes crossfading on the right, and a numbered chapter index whose hairline fills as each scene plays.","platform":"web","type":"section","styles":["dark","editorial","luxe"],"tags":["hero","chapters","autoplay","cinema","architecture"]},{"id":"chat-thread","n":"189","title":"Chat thread","summary":"A phone thread with Mira at the yard desk. Three messages are already there. Send adds yours on the right and clears the field.","platform":"mobile-app","type":"screen","styles":["minimal","industrial"],"tags":["chat","thread","message","phone"]},{"id":"checkbox-group","n":"190","title":"Checkbox group","summary":"Three loads on one truck. Rice and Oil start on. Each box is its own choice, and the line names what is actually on.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["checkbox","field","loads","group"]},{"id":"chip-bucket","n":"191","title":"Chip bucket","summary":"Three chips sit beside a night bucket. Drag one in and it stays. Miss, and it returns.","platform":"web","type":"component","styles":["minimal","dark"],"tags":["drag","bucket","chips"]},{"id":"card-cinema-ticket","n":"192","title":"Cinema ticket with tear-off stub","summary":"A 1930s picture-house ticket in cream and oxblood. Pull the perforated stub away and it tears along a ragged edge, keeps itself, and stamps the ticket Admitted.","platform":"web","type":"component","styles":["deco","retro","paper"],"tags":["cards","ticket","cinema","drag","tear"]},{"id":"hero-video-loop","n":"193","title":"Cinematic video loop hero","summary":"A full-bleed night-lake film loop behind a luxe hotel hero, with grain, a visible Pause control, captions, a poster still, and rules for shipping a real video.","platform":"web","type":"section","styles":["luxe","dark","editorial"],"tags":["hero","video","film","loop","hotel"]},{"id":"cited-answer","n":"194","title":"Cited answer","summary":"A sentence about Gate 4. Night book starts pressed and shows its line. Hold rule swaps the quote.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["citation","source","answer"]},{"id":"mockup-ipod-classic","n":"195","title":"Click-wheel player mockup","summary":"A CSS click-wheel music player with a working wheel: trace a circle to scroll the menu, press the centre to drill in, play tracks, scroll volume.","platform":"web","type":"component","styles":["y2k","playful","retro"],"tags":["mockup","music","player","click-wheel","retro"]},{"id":"code-snippet-tabs","n":"196","title":"Code snippet tabs","summary":"One request in curl, JavaScript, and Python. The active tab is a 32px pill. Copy writes that panel.","platform":"web","type":"component","styles":["terminal","minimal"],"tags":["code","tabs","copy"]},{"id":"combobox","n":"197","title":"Combobox","summary":"A bay field that filters eight names as you type. It opens on Ba, with Bay 2, Bay 4, and Bay 14. Enter commits the highlighted row.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["combobox","search","listbox","form"]},{"id":"card-event-ticket-stub","n":"198","title":"Concert ticket stack with foil strip","summary":"Three riso-printed gig tickets in a loose pile. A holographic security strip shifts with the pointer, the pile fans out like a hand of cards, and each stub has a seat map.","platform":"web","type":"component","styles":["riso","retro","dark"],"tags":["cards","ticket","concert","foil","stack"]},{"id":"integrations-connect","n":"199","title":"Connection grid","summary":"Six Field ledger connections. Three start connected. Connect and Connected are the same button, and the pressed one uses the soft green.","platform":"web","type":"section","styles":["editorial","minimal"],"tags":["integrations","connect","grid"]},{"id":"consent-bar","n":"200","title":"Consent bar","summary":"A yard log, and a bar that asks to keep one record of the visit. Accept keeps it. Decline does not. The bar leaves the page.","platform":"web","type":"pattern","styles":["minimal","industrial"],"tags":["consent","privacy","bar","choice"]},{"id":"gallery-contact-sheet","n":"201","title":"Contact sheet","summary":"Eight equal plates in a grid. North wall starts selected. The caption under the sheet names the plate and the time of day.","platform":"web","type":"layout","styles":["paper","editorial"],"tags":["gallery","contact-sheet","plates","selection"]},{"id":"content-card","n":"202","title":"Content card","summary":"One load as a card: Gate 4, Rice, 2,400 kg, Mira Shrestha on 17 October. Opening it marks the card and says load 1842 is open.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["card","record","load","list"]},{"id":"widget-control-toggles","n":"203","title":"Control centre toggles","summary":"A near-black control centre: radio cluster, tall brightness and volume sliders with rubber-band overdrag, and springy amber toggles that change the screen.","platform":"mobile-app","type":"component","styles":["dark","minimal"],"tags":["controls","toggles","sliders","settings","phone"]},{"id":"button-copy-share","n":"204","title":"Copy, share and copy-email buttons","summary":"A copy-citation button with a copy-to-check morph and tooltip, a Share button that opens a compact keyboard-ready menu, and an email chip that copies on click.","platform":"web","type":"component","styles":["editorial","paper","minimal"],"tags":["copy","clipboard","share","menu","tooltip","editorial"]},{"id":"corner-player","n":"205","title":"Corner player","summary":"A 220 by 124 clip sits in the corner. Open grows it to 640 by 360. Play fills a gold bar.","platform":"web","type":"component","styles":["dark","minimal"],"tags":["player","corner","video"]},{"id":"course-landing-curriculum","n":"206","title":"Course landing with curriculum","summary":"An academic course page: navy serif hero, honest dated discount, a preview-lesson modal, a module accordion with lock and preview rows, FAQ, and a sticky enroll bar.","platform":"web","type":"screen","styles":["editorial","paper"],"tags":["course","education","curriculum","accordion","modal","pricing"]},{"id":"coverflow-strip","n":"207","title":"Coverflow strip","summary":"Five load cards. The center one is forward. Previous and Next step the strip, and a card can be clicked.","platform":"web","type":"component","styles":["dark","minimal"],"tags":["coverflow","carousel","cards"]},{"id":"cta-giant-email-band","n":"208","title":"CTA giant email band","summary":"A Tallyhook closer on electric yellow: a 120px two-line headline with one outlined word, an inline email form that validates, sends, and draws a check.","platform":"web","type":"section","styles":["kinetic","brutalist"],"tags":["cta","email","form","signup","trial"]},{"id":"curve-drawer","n":"209","title":"Curve drawer","summary":"The hold list starts open, edge straight. Close it and the edge bows. Open it and the bow settles flat.","platform":"web","type":"component","styles":["minimal","paper"],"tags":["drawer","curve","hold"]},{"id":"frame-circle-cut","n":"210","title":"Cut-shape image frames","summary":"Four portfolio image frames cut by CSS masks: circle bites, an arch, a notched corner and a blob. Hover morphs each cut; Enter holds it.","platform":"web","type":"component","styles":["editorial","organic","soft"],"tags":["cards","image","mask","portfolio","product"]},{"id":"card-daily-quote","n":"211","title":"Daily quote card","summary":"A quote-of-the-day card whose sky gradient follows the time of day. Swipe for the next quote, save it, or open a share sheet that previews it as an image.","platform":"web","type":"component","styles":["soft","editorial","kinetic"],"tags":["quote","card","swipe","share","gradient","wellbeing"]},{"id":"social-repo-card","n":"212","title":"Dark mono repository card","summary":"A code repository card in dark mono: star toggle with a ring pop, a growing language bar with legend highlight, and a 52-week commit sparkline you can scrub.","platform":"web","type":"component","styles":["dark","terminal","minimal"],"tags":["repository","code","sparkline","stars","developer"]},{"id":"motion-shot-gallery-dark","n":"213","title":"Dark motion shot gallery","summary":"A dark gallery of phone-shot cards that loop when in view or hovered, filtered by gesture, pattern and effect, with a shot viewer and a giant faint wordmark.","platform":"web","type":"screen","styles":["dark","minimal","kinetic"],"tags":["gallery","motion","filters","grid","showcase"]},{"id":"clinic-home-booking","n":"214","title":"Dental clinic home with live booking","summary":"Larkfield Dental: a calm aqua clinic home with a live next-slot card, priced treatments, dentists, insurers, hours with today marked, a map and reviews.","platform":"web","type":"screen","styles":["soft","minimal"],"tags":["landing","clinic","booking","health","local"]},{"id":"notif-deploy-status","n":"215","title":"Deploy status notification","summary":"A dark corner toast that follows a deploy from build to checks to live, with steps, commit hash, a live log line, open preview and a confirmed rollback.","platform":"web","type":"component","styles":["dark","terminal","minimal"],"tags":["notification","deploy","devtools","progress","stepper","toast"]},{"id":"frame-transform-box","n":"216","title":"Design-tool transform box","summary":"A canvas selection box with eight resize handles, a rotate handle and a live size badge. Drag to move, resize and rotate; Shift keeps ratio and snaps 15°.","platform":"web","type":"component","styles":["dark","industrial","minimal"],"tags":["selection","resize","rotate","canvas","editor","drag"]},{"id":"dropdown-menubar-file","n":"217","title":"Desktop app menubar","summary":"File Edit View Track Window Help for a dark audio workstation: hover-to-switch menus, submenus that flip, checkable and radio items, shortcuts.","platform":"web","type":"component","styles":["dark","industrial","minimal"],"tags":["menubar","menu","submenu","desktop","keyboard","shortcuts"]},{"id":"widget-device-battery","n":"218","title":"Device battery widget","summary":"A clay-soft battery widget for phone, earbuds (left, right, case), watch and pen, with live charging rings and a tap-through detail view.","platform":"web","type":"component","styles":["clay","soft"],"tags":["battery","widget","devices","charging","rings"]},{"id":"background-diagonal-boxes","n":"219","title":"Diagonal boxes background","summary":"A monochrome isometric box field on canvas. Boxes near the pointer rise on taller sides and lighten, then settle back when it leaves.","platform":"web","type":"pattern","styles":["minimal","dark","industrial"],"tags":["background","isometric","canvas","pointer","3d"]},{"id":"dial-knob","n":"220","title":"Dial knob","summary":"A round hold-hours knob from 0 to 12. It starts at 6. Drag or arrow keys move it by one hour.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["dial","knob","input"]},{"id":"diamond-badge-rail","n":"221","title":"Diamond badge rail","summary":"A dark horizontal rail of badge cards, each crowned by a diamond icon that fills lime on hover. A thick scrubber bar drags the rail; a card click filters.","platform":"web","type":"section","styles":["dark","brutalist","industrial"],"tags":["cards","carousel","badges","filter","scrubber","dark"]},{"id":"profile-contact-card","n":"222","title":"Digital business card","summary":"A teal-and-brass business card that flips in 3D to a QR back, copies email and phone with a tag, tilts under the pointer, and downloads a real vCard 3.0 file.","platform":"web","type":"component","styles":["luxe","paper"],"tags":["profile","contact","vcard","flip","qr"]},{"id":"docs-install-steps","n":"223","title":"Docs install steps with code panels","summary":"Numbered install steps for a docs page: prose on the left, a dark code panel on the right with highlighted added lines, guide tabs and tick-off numbers.","platform":"web","type":"section","styles":["minimal","terminal"],"tags":["documentation","code","steps","install","developer"]},{"id":"docs-hatched-gutter-shell","n":"224","title":"Docs shell with hatched gutters","summary":"A docs page frame: sticky nav rail, a hairline-bordered content column with diagonal hatching in the gutters, crosshair marks, a version menu and a 3-way theme switch.","platform":"web","type":"layout","styles":["swiss","minimal","dark"],"tags":["documentation","layout","dark-mode","sidebar","developer"]},{"id":"donation-page-impact","n":"225","title":"Donation page with impact","summary":"A nonprofit appeal: story hero, a donation card where every amount says what it buys, fee cover, live goal progress, recent donors, and a thank-you state.","platform":"web","type":"screen","styles":["organic","soft"],"tags":["donation","nonprofit","form","progress","landing"]},{"id":"hero-dot-matrix-field","n":"226","title":"Dot-matrix blob field hero","summary":"A dark studio hero over a canvas dot matrix where drifting metaball blobs carve black shapes with signal-orange rims. The pointer stirs them, and clicks seed new ones.","platform":"web","type":"section","styles":["dark","industrial","kinetic"],"tags":["hero","canvas","dot-matrix","agency","interactive"]},{"id":"button-download-progress","n":"227","title":"Download button with progress and retry","summary":"A download button that becomes a live progress bar with size, speed and time left, pause and resume, a drawn check on done, and resumable retry. Asset rows use rings.","platform":"web","type":"component","styles":["dark","terminal","industrial"],"tags":["download","progress","retry","developer","release"]},{"id":"drag-to-confirm","n":"228","title":"Drag to confirm","summary":"A 56px track. The thumb must travel to the end before a hold is voided. A short drag snaps back.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["confirm","drag","destructive"]},{"id":"widget-analog-clock","n":"229","title":"Dress-watch analog clock widget","summary":"A gilt-cased analog clock on live time with a sweeping seconds hand, date window, 24-hour second-zone sub-dial and four dials you cycle by tapping.","platform":"web","type":"component","styles":["luxe","dark"],"tags":["clock","time","watch","timezone","svg"]},{"id":"card-drop-cap-editorial","n":"230","title":"Drop-cap editorial card","summary":"An essay card with a tiled ultramarine drop cap, a column-spanning pull quote, a column rule, reading time and a three-way classic type pairing switcher.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["editorial","article","typography","drop-cap","reading"]},{"id":"edge-light-button","n":"231","title":"Edge light button","summary":"A gold edge travels around Open the gate. Click says the gate opened on this page.","platform":"web","type":"component","styles":["dark","minimal"],"tags":["button","edge","light"]},{"id":"error-404-editorial","n":"232","title":"Editorial 404 with search","summary":"A riso-print 404: a huge serif 404 with a fluoro pink plate out of register, a torn strip, one plain apology, live search, four popular links and inline reporting.","platform":"web","type":"screen","styles":["riso","paper","editorial"],"tags":["404","error","search","riso","print"]},{"id":"social-profile-card","n":"233","title":"Editorial creator profile card","summary":"A 440px creator card with a printed-issue cover, an overlapping initials avatar, stats that count up on load, a Follow/Following toggle and a mutuals row.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["profile","creator","follow","stats","card"]},{"id":"phone-sign-in","n":"234","title":"Editorial phone sign-in","summary":"A sharp, square-cornered phone sign-in under a 112px serif wordmark, with inline email checks, a show/hide password and a button that loads, then welcomes.","platform":"mobile-app","type":"screen","styles":["editorial","minimal"],"tags":["auth","sign-in","form","validation","phone"]},{"id":"profile-editorial-staff","n":"235","title":"Editorial staff profile card","summary":"A newspaper staff card: CSS stipple portrait, kicker and serif name, a byline count that ticks up, Recent/Most read article tabs, and a blue-ink signature that draws itself.","platform":"web","type":"section","styles":["editorial","paper"],"tags":["team","staff","author","newspaper","signature"]},{"id":"footer-engraved-caravan-strip","n":"236","title":"Engraved caravan footer","summary":"A dark five-column footer with a ticking local time and an email form, ending in an engraved night plain where a herder and two pack llamas walk across.","platform":"web","type":"section","styles":["dark","editorial","paper"],"tags":["footer","illustration","parallax","newsletter","clock","svg"]},{"id":"throw-loop-engraved-strip","n":"237","title":"Engraved disc throw loop","summary":"Two stick figures on hatched hills trade a pink flying disc along a curved motion path with a fading comet trail, all synced to one 14s CSS clock.","platform":"web","type":"animation","styles":["playful","paper","minimal"],"tags":["illustration","offset-path","loop","svg","keyframes","playful"]},{"id":"hero-engraved-moonrise-plate","n":"238","title":"Engraved moonrise hero plate","summary":"A night portfolio hero drawn like an engraving: hatched ridges, a rising moon, drifting outline clouds, a kite flyer and a lighthouse, with rising headline lines and a drawn underline.","platform":"web","type":"section","styles":["editorial","dark","paper"],"tags":["hero","illustration","parallax","portfolio","svg","night"]},{"id":"card-event-countdown","n":"239","title":"Event countdown ticket card","summary":"A gig ticket card with split-flap digits counting down to a real date, a venue block, an add-to-calendar menu, tier and quantity pickers, and a seat-hold CTA.","platform":"web","type":"component","styles":["retro","riso"],"tags":["cards","event","countdown","tickets","calendar"]},{"id":"event-ticket-checkout","n":"240","title":"Event ticket checkout","summary":"Club night tickets: types with steppers, an SVG seat map for rows A–H, an itemised fee summary, and a 10:00 hold that really releases seats at zero.","platform":"web","type":"screen","styles":["y2k","cyber","dark"],"tags":["tickets","checkout","seats","timer","events"]},{"id":"load-failed-retry","n":"241","title":"Failed load with retry","summary":"A runs page that failed: a danger banner, one retry, then three rows. The failure is the first frame.","platform":"web","type":"pattern","styles":["minimal","industrial"],"tags":["error","retry","list","banner"]},{"id":"faq-category-accordion","n":"242","title":"FAQ category accordion","summary":"A Brightwell help centre FAQ: four categories with counts on the left, an accordion on the right, live search with highlighted matches, and a talk-to-a-person card.","platform":"web","type":"section","styles":["minimal","soft"],"tags":["faq","accordion","search","help","support"]},{"id":"widget-compass","n":"243","title":"Field compass widget","summary":"A forest-green compass widget on a topographic map: drag the cream card to rotate, read heading and cardinal, and watch a level bubble chase the pointer.","platform":"web","type":"component","styles":["organic","paper"],"tags":["compass","widget","outdoor","dial","map"]},{"id":"file-upload-manager","n":"244","title":"File upload manager","summary":"A dark upload screen: a tall dropzone that inverts on drag, a real file picker, and a queue with live speed, time left, pause, cancel, and retry.","platform":"web","type":"screen","styles":["dark","industrial","terminal"],"tags":["upload","files","dropzone","progress","queue"]},{"id":"gallery-film-strip","n":"245","title":"Film strip with loupe","summary":"A draggable 35mm strip with sprocket holes and edge-printed frame numbers. Clicking a frame enlarges it on a light box under a 3× loupe.","platform":"web","type":"layout","styles":["dark","retro","industrial"],"tags":["gallery","film","loupe","negative","darkroom"]},{"id":"dropdown-filter-sort","n":"246","title":"Filter and sort dropdowns","summary":"A stock table's Filter popover (search, multi-select with live faceted counts) and Sort menu with a direction toggle, plus removable applied-filter chips.","platform":"web","type":"component","styles":["organic","soft","editorial"],"tags":["filter","sort","dropdown","table","chips","listbox"]},{"id":"filter-toolbar","n":"247","title":"Filter toolbar","summary":"A search field and four chips above a load list. All starts pressed. Out, In, and Held filter the rows. An empty match says no loads match.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["filter","search","toolbar","list"]},{"id":"widget-flight-arrival","n":"248","title":"Flight arrival split-flap widget","summary":"An airport-signage flight widget: a plane rides a route arc, times and gate flip on split-flap cells, and a delay toggle re-flips the board.","platform":"web","type":"component","styles":["industrial","dark","retro"],"tags":["widget","flight","split-flap","travel","status"]},{"id":"focus-dim","n":"249","title":"Focus dim","summary":"Four yard cards. Press one and the others drop to opacity .35. Press it again and the board evens out.","platform":"web","type":"component","styles":["minimal","paper"],"tags":["focus","dim","cards"]},{"id":"folder-reveal","n":"250","title":"Folder reveal","summary":"A manila folder starts open, three notes fanned above it. The folder button closes and opens the fan.","platform":"web","type":"animation","styles":["paper","editorial"],"tags":["folder","cards","reveal"]},{"id":"button-follow-bookmark","n":"251","title":"Follow, unfollow and save buttons","summary":"A set of social buttons: Follow morphs to Following and shows Unfollow only on a later hover, a bell appears after follow, and Save fills its ribbon and shows an undo toast.","platform":"web","type":"component","styles":["minimal","swiss"],"tags":["social","follow","bookmark","toast","profile"]},{"id":"funnel-chart","n":"252","title":"Funnel chart","summary":"71 billed, of 240 that arrived. Five single-colour bars. The pressed stage becomes the number.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["chart","funnel","stages"]},{"id":"social-chat-server-card","n":"253","title":"Gamer community chat card","summary":"A three-column community chat card in violet-black with one acid-lime accent: banner, channels with unread badges, presence list and messages that arrive live after a typing indicator.","platform":"web","type":"component","styles":["dark","cyber","industrial"],"tags":["chat","community","presence","messages","gaming"]},{"id":"card-glass-credit","n":"254","title":"Glass credit card with flip","summary":"A frosted-glass payment card that tilts to the pointer with a moving holographic edge, flips to a back with a hold-to-reveal CVV, and switches between three cards.","platform":"web","type":"component","styles":["glass","dark","luxe"],"tags":["cards","payments","wallet","tilt","flip"]},{"id":"glitch-text","n":"255","title":"Glitch text","summary":"GATE 4 splits red and green for 480ms when Replay runs, then the word sits still.","platform":"web","type":"animation","styles":["dark","kinetic"],"tags":["glitch","type","replay"]},{"id":"card-progress-goals","n":"256","title":"Goals card with rings and confetti","summary":"Three quarterly goals as progress rings with log buttons, inline-editable targets, and a confetti burst at 100% that respects reduced motion.","platform":"web","type":"component","styles":["soft","playful"],"tags":["goals","progress","rings","celebration","inline-edit"]},{"id":"gooey-menu","n":"257","title":"Gooey menu","summary":"A green menu blob starts open. Hold, Note, and Call sit out on the goo. The menu button pulls them back.","platform":"web","type":"component","styles":["minimal","soft"],"tags":["menu","goo","blob"]},{"id":"gooey-nav","n":"258","title":"Gooey nav","summary":"Four yard links. A green pill slides under the current one and softens through a goo filter.","platform":"web","type":"component","styles":["minimal","soft"],"tags":["nav","goo","pill"]},{"id":"background-graph-paper","n":"259","title":"Graph paper background","summary":"Engineering graph paper on a true 1 mm grid with rulers, a snapping pointer crosshair, a live X/Y readout in millimetres, and paper or blueprint sheets.","platform":"web","type":"pattern","styles":["industrial","paper","swiss"],"tags":["background","grid","crosshair","blueprint","engineering"]},{"id":"graph-paper-homepage","n":"260","title":"Graph paper homepage","summary":"A personal homepage typed onto engineering paper: a typewriter greeting, a torn photo print, paperclipped project slips and a notebook log.","platform":"web","type":"screen","styles":["paper","retro","editorial"],"tags":["personal","homepage","typewriter","paper","notebook"]},{"id":"greeting-loader","n":"261","title":"Greeting loader","summary":"Hello, Namaste, Salaam, Bonjour. Each word holds 700ms, then it stops. Replay starts again.","platform":"web","type":"animation","styles":["editorial","paper"],"tags":["greeting","loader","type"]},{"id":"grow-grid","n":"262","title":"Grow grid","summary":"Six yard rooms in a 3 by 2 grid. The row and column under the pointer grow. The rest shrink.","platform":"web","type":"layout","styles":["minimal","paper"],"tags":["grid","hover","rooms"]},{"id":"background-halftone-pop","n":"263","title":"Halftone pop background","summary":"A 45° canvas halftone screen whose dot sizes follow a drifting gradient and swell under the pointer, in three two-ink pop-art presets behind comic caption boxes.","platform":"web","type":"pattern","styles":["playful","riso","retro"],"tags":["background","halftone","canvas","pointer","pop-art","hero"]},{"id":"hamburger-circle-reveal","n":"264","title":"Hamburger circle reveal","summary":"A 44px menu button morphs into an X while a black panel grows out of it as a clip-path circle, then five 40px grotesk links rise in on a 50ms stagger.","platform":"mobile-web","type":"component","styles":["kinetic","dark","swiss"],"tags":["navigation","menu","hamburger","overlay","clip-path"]},{"id":"text-annotated-underlines","n":"265","title":"Hand-drawn text annotations","summary":"An essay page where six pen marks (underline, circle, highlight, strike, bracket, arrow) draw onto the text on scroll, with a picker that replays each one.","platform":"web","type":"animation","styles":["editorial","paper"],"tags":["annotation","svg","handwriting","editorial","scroll"]},{"id":"handheld-talk-player","n":"266","title":"Handheld talk player","summary":"A list of recorded talks beside a pocket handheld console that plays the chosen one on a four-tone LCD, driven by a real d-pad and A/B keys.","platform":"web","type":"section","styles":["retro","playful","dark"],"tags":["video","talks","retro","console","playlist"]},{"id":"text-rise-underline-whisper","n":"267","title":"Headline rise with drawn underline","summary":"A staged headline intro: two lines rise 160ms apart, a hand-drawn underline strokes under the italic word at 1s, then the paragraph and a faint aside note follow.","platform":"web","type":"animation","styles":["editorial","paper","minimal"],"tags":["headline","intro","underline","svg","stagger","editorial"]},{"id":"hero-live-browser-card","n":"268","title":"Hero with a live browser card","summary":"A SaaS hero: marker-highlighted headline, hard-shadow buttons, and a browser mockup whose schedule card ticks up, adds a post and pops a toast every 4.2s.","platform":"web","type":"section","styles":["brutalist","playful"],"tags":["hero","saas","mockup","live","automation"]},{"id":"navbar-hide-on-scroll","n":"269","title":"Hide-on-scroll navbar","summary":"A docs-site header with a dismissible announcement bar. It slides away when you scroll down, returns with a shadow when you scroll up, and underlines the section in view.","platform":"web","type":"component","styles":["swiss","minimal"],"tags":["navbar","scroll","scrollspy","announcement","saas"]},{"id":"button-hold-to-confirm","n":"270","title":"Hold and slide to confirm","summary":"Hold-to-delete buttons that fill while held and drain on release, plus slide-to-pay tracks that spring home short of 92%, all with keyboard paths.","platform":"web","type":"component","styles":["industrial","minimal"],"tags":["buttons","destructive","confirm","slider","payment","hold"]},{"id":"streak-hold-confetti","n":"271","title":"Hold to log, streak and confetti","summary":"A reading-streak screen: press and hold to log today, the streak digits roll from 11 to 12, today's dot fills, and one short, restrained confetti burst fires.","platform":"mobile-app","type":"component","styles":["dark","organic","playful"],"tags":["streak","reward","long-press","confetti","success"]},{"id":"widget-voice-assistant","n":"272","title":"Hold-to-talk voice orb","summary":"A voice assistant widget: hold a soft teal orb to listen, a ring of 56 bars reacts to fake audio, and the transcript and reply arrive word by word.","platform":"web","type":"component","styles":["soft","minimal"],"tags":["widget","voice","assistant","waveform","transcript"]},{"id":"card-holo-foil","n":"273","title":"Holographic foil pass","summary":"A conference pass that tilts up to 12° toward the pointer or arrow keys, with a narrow three-stop foil band and a glare spot driven by CSS variables.","platform":"web","type":"component","styles":["y2k","cyber","dark"],"tags":["cards","tilt","foil","pass","membership"]},{"id":"app-icon-home-screen-set","n":"274","title":"Home screen icon set","summary":"Twelve original SVG app icons in one consistent style on a phone home screen with dock and widget, switching between light, dark and tinted appearances.","platform":"mobile-app","type":"screen","styles":["glass","soft","organic"],"tags":["app-icons","home-screen","ios","dark-mode","tinted"]},{"id":"hud-boot-gate","n":"275","title":"HUD boot gate","summary":"A portfolio intro in three acts: a quiet title card with an Enter control, a ring loader with a boot log, then a CRT-open framed hero whose headline decodes in.","platform":"web","type":"animation","styles":["cyber","terminal","dark"],"tags":["intro","boot","hud","gate","portfolio"]},{"id":"notif-incoming-call","n":"276","title":"Incoming call banner","summary":"A ringing call banner over an agenda app that expands into a full-screen call: slide to answer, decline with a quick reply, live timer, minimise to a pill.","platform":"mobile-app","type":"component","styles":["dark","glass","editorial"],"tags":["notification","call","banner","swipe","phone","voip"]},{"id":"widget-stopwatch-laps","n":"277","title":"Industrial stopwatch with lap log","summary":"A bolted instrument-panel stopwatch: amber phosphor centisecond readout, lap log with best and worst flagged, keycaps for Space, L and R.","platform":"web","type":"component","styles":["industrial","terminal","dark"],"tags":["stopwatch","timer","laps","keyboard","sports"]},{"id":"background-ink-wash","n":"278","title":"Ink wash background","summary":"Sumi ink blooms that spread and dry on rice paper where you click, drawn on canvas with layered translucent washes, tide-line edges and pigment grain.","platform":"web","type":"pattern","styles":["organic","paper","editorial"],"tags":["background","canvas","ink","watercolour","paper"]},{"id":"inline-alert","n":"279","title":"Inline alert","summary":"One warning on the dispatch page: Gate 2 closes at 18:00. Dismiss removes it. Three swatches below are the other tones, not three more alerts.","platform":"web","type":"pattern","styles":["minimal","industrial"],"tags":["alert","warning","dismiss","banner"]},{"id":"inline-edit","n":"280","title":"Inline edit","summary":"The load name is text until you click it. Enter saves. Escape puts the old name back.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["edit","inline","name"]},{"id":"phone-workout-timer","n":"281","title":"Interval workout timer","summary":"A black sport timer that runs live: a draining SVG ring, volt for work and cyan for rest, a flash at each switch, a segmented timeline, and a finish screen.","platform":"mobile-app","type":"screen","styles":["kinetic","dark"],"tags":["workout","timer","fitness","countdown","intervals"]},{"id":"features-isometric-fig-triptych","n":"282","title":"Isometric figure triptych","summary":"Three hairline isometric drawings captioned FIG 0.1–0.3 under a two-tone statement; hovering a column explodes its drawing, lights one amber part and dims the others.","platform":"web","type":"section","styles":["dark","minimal","industrial"],"tags":["features","isometric","svg","illustration","dark"]},{"id":"blog-issue-index","n":"283","title":"Issue index","summary":"Four notes in a 720px column, newest first. City, Desk, and Kitchen filter the list. The pressed topic sits on a pale blue.","platform":"web","type":"screen","styles":["editorial","paper"],"tags":["blog","index","essays","filter"]},{"id":"job-board-search","n":"284","title":"Job board search","summary":"A three-column job board. Search, live filters with a dual salary slider, a result list with save, and a detail pane with apply and similar jobs.","platform":"web","type":"screen","styles":["swiss","minimal"],"tags":["jobs","search","filters","list","detail"]},{"id":"card-journal-page","n":"285","title":"Journal page","summary":"A ruled notepad page on a kraft desk: margin line, punched holes, a date header, handwriting that stays on the rules, mood stickers, ink colours and autosave.","platform":"web","type":"component","styles":["paper","playful"],"tags":["journal","notes","textarea","stickers","autosave"]},{"id":"dropdown-kebab-actions","n":"286","title":"Kebab row actions menu","summary":"A ⋯ button on each invoice row opens an actions menu with icons, shortcuts, a divider and a delete that asks to confirm inside the same popover.","platform":"web","type":"component","styles":["minimal","swiss"],"tags":["menu","dropdown","kebab","table","actions","confirm"]},{"id":"object-3d-turntable","n":"287","title":"Kraft box 3D turntable","summary":"A CSS 3D coffee box with six printed kraft faces: drag to spin with inertia, snap to Front, Side or Back, arrow keys turn 90°, and a contact shadow follows tilt.","platform":"web","type":"component","styles":["paper","industrial"],"tags":["3d","product","turntable","packaging","drag"]},{"id":"mockup-laptop-browser","n":"288","title":"Laptop browser mockup","summary":"A CSS laptop whose lid swings open on load to reveal a desktop and a tabbed browser window; tabs switch real pages, finish toggles silver or space.","platform":"web","type":"component","styles":["industrial","minimal","swiss"],"tags":["mockup","laptop","browser","device","showcase"]},{"id":"law-firm-home","n":"289","title":"Law firm home, editorial","summary":"Thorne & Aldridge: an ivory page with an 88px Bodoni sentence, numbered practice areas that reveal on hover, case results, partners and a confidential form.","platform":"web","type":"screen","styles":["luxe","editorial"],"tags":["landing","law","professional","editorial","form"]},{"id":"hero-layered-letter-swap","n":"290","title":"Layered letter word-swap hero","summary":"A centred fintech hero whose second headline word swaps letter by letter: each glyph splits into coral and butter copies, then the new word gathers back.","platform":"web","type":"section","styles":["playful","kinetic"],"tags":["hero","headline","word-swap","parallax","fintech"]},{"id":"parallax-layered-hero","n":"291","title":"Layered parallax landscape hero","summary":"A dusk landscape hero built from six layers that scroll at 0.1x to 1.0x, with a title that lifts and fades and a 12px pointer drift.","platform":"web","type":"animation","styles":["organic","editorial"],"tags":["parallax","hero","landscape","outdoor","scroll"]},{"id":"lens-bento","n":"292","title":"Lens bento","summary":"A board of yard chips. A 180px lens follows the pointer and chips under it scale to 1.35.","platform":"web","type":"animation","styles":["minimal","paper"],"tags":["lens","magnify","chips"]},{"id":"scroll-lens-card-ticker","n":"293","title":"Lens card scroll ticker","summary":"Scroll moves a row of huge benefit lines sideways through a fixed centre card. Inside the card the text turns ink and the card recolours per benefit.","platform":"web","type":"section","styles":["dark","playful","kinetic"],"tags":["scroll","ticker","features","sticky","benefits"]},{"id":"letter-sleeve","n":"294","title":"Letter sleeve","summary":"A letter starts out of a charcoal sleeve. Tuck slides it in. Pull brings Gate 4 back out.","platform":"web","type":"animation","styles":["editorial","paper"],"tags":["letter","sleeve","paper"]},{"id":"background-linen-weave","n":"295","title":"Linen weave background","summary":"A plain-weave linen background in SVG with swappable warp and weft threads, a sheen that follows the pointer, and a folded-paper variant with live crease light.","platform":"web","type":"pattern","styles":["organic","paper","luxe"],"tags":["background","textile","svg","pattern","paper"]},{"id":"link-orbit","n":"296","title":"Link orbit","summary":"Eight yard connections on a ring around a Yard hub. One starts pressed. Choosing another rewrites the line.","platform":"web","type":"section","styles":["editorial","paper"],"tags":["integrations","orbit","connections"]},{"id":"features-live-checkout-bento","n":"297","title":"Live checkout bento","summary":"A product bento where every cell is working UI: a currency switcher, a freezable issued card, a retry timeline, and a checkout that posts its payment into a payouts ledger.","platform":"web","type":"section","styles":["minimal","swiss"],"tags":["features","bento","checkout","fintech","ledger"]},{"id":"widget-heart-rate","n":"298","title":"Live heart-rate tile","summary":"A dark watch-face tile with a sweeping ECG trace, a BPM that ticks every third beat, and a tap that cycles live, resting and zone views.","platform":"web","type":"component","styles":["dark","industrial","kinetic"],"tags":["widget","health","heart-rate","ecg","watch"]},{"id":"card-terminal-log","n":"299","title":"Live terminal log card","summary":"A streaming service log in a card: coloured levels, multi-select level filters, search highlight, hover-to-hold autoscroll, and copy any line.","platform":"web","type":"component","styles":["terminal","dark","industrial"],"tags":["logs","terminal","streaming","filter","search","devtools"]},{"id":"notif-delivery-live","n":"300","title":"Lock screen delivery live update","summary":"A lock-screen live activity for a delivery: ETA countdown, four-stage track with a moving scooter, an expandable map, courier actions and an arrival hand-off.","platform":"mobile-app","type":"component","styles":["organic","riso","soft"],"tags":["notification","live-activity","delivery","lock-screen","map","eta"]},{"id":"logos-grid-case-hover","n":"301","title":"Logos grid case hover","summary":"A 4×2 grid of eight fictional monochrome wordmarks on bone with brass hairlines. Hover, focus or tap a cell and it slides up to a one-line result.","platform":"web","type":"section","styles":["luxe","minimal","editorial"],"tags":["logos","clients","grid","hover"]},{"id":"m3-navigation-bar","n":"302","title":"M3 navigation bar","summary":"An Android Material 3 Expressive bottom bar: four destinations, a 64x32 pill that stretches in, filled active icons, a dot and a 12 badge, and a FAB above.","platform":"mobile-app","type":"component","styles":["material","soft"],"tags":["material","android","navigation","tabs","badge","fab"]},{"id":"hero-machined-part-breakout","n":"303","title":"Machined part breakout hero","summary":"An industrial hero: a dark rounded card, a light and black two-line caps headline, and a steel part that breaks out of the card with tolerance callouts.","platform":"web","type":"section","styles":["industrial","dark","swiss"],"tags":["hero","industrial","manufacturing","callouts","isometric"]},{"id":"card-magazine-cover","n":"304","title":"Magazine cover card","summary":"A 3:4 magazine cover card with masthead, cover lines, an SVG illustration and barcode. Hover lifts it and curls the corner; three issues swap from a stack.","platform":"web","type":"component","styles":["editorial","riso","paper"],"tags":["magazine","cover","card","editorial","print"]},{"id":"dock-magnify-desktop","n":"305","title":"Magnifying desktop dock","summary":"A desktop-OS dock whose icons swell by pointer distance on a cosine curve, with tooltips, a two-hop launch bounce, running dots and arrow-key navigation.","platform":"web","type":"component","styles":["glass","soft"],"tags":["dock","desktop","launcher","magnification","toolbar"]},{"id":"card-folder-tabs","n":"306","title":"Manila folder with tabs","summary":"A manila project folder with four cut tabs; each tab drops the current sheet into the pocket and slides the next one up. A stacked drawer variant sits beside it.","platform":"web","type":"component","styles":["paper","editorial","minimal"],"tags":["cards","folder","tabs","documents","files"]},{"id":"phone-map-listings","n":"307","title":"Map with price pins and listing sheet","summary":"A stays map drawn in SVG with terracotta price pins, a three-detent sheet (count, card carousel, list), pin-to-card sync, Search this area after a pan, and locate-me.","platform":"mobile-app","type":"screen","styles":["editorial","paper"],"tags":["map","listings","bottom-sheet","carousel","travel"]},{"id":"hero-search-marketplace","n":"308","title":"Marketplace search hero","summary":"An editorial travel hero with a Where / When / Guests search bar, a two-month date-range popover, a guests stepper, category chips and four drawn destination tiles.","platform":"web","type":"section","styles":["editorial","paper"],"tags":["hero","search","travel","marketplace","calendar"]},{"id":"cta-material-rod-rack","n":"309","title":"Material rod rack CTA","summary":"Five CSS-drawn bar stock rods stand behind a dark CTA card. Pick one and it rises; the card swaps to that material's specs and quote button.","platform":"web","type":"section","styles":["industrial","minimal"],"tags":["cta","industrial","materials","picker","radiogroup"]},{"id":"table-users-select","n":"310","title":"Members table with range select","summary":"An admin members table: shift-click range selection, inline role menus that save on change, an invite row, and numbered pagination.","platform":"web","type":"component","styles":["minimal","swiss"],"tags":["table","admin","selection","pagination","invite"]},{"id":"social-microblog-post","n":"311","title":"Microblog post card","summary":"A short-post card with verified handle, highlighted links and hashtags, a map image, rolling digit counters, and a seven-dot like burst.","platform":"web","type":"component","styles":["minimal","swiss"],"tags":["social","post","feed","like","counter"]},{"id":"social-microblog-profile","n":"312","title":"Microblog profile header","summary":"A dark short-post profile with a contour-map banner, Follow that flips to Unfollow on hover, a notify bell gated by following, and Posts/Replies/Media tabs with a sliding lime bar.","platform":"web","type":"component","styles":["dark","minimal"],"tags":["social","profile","tabs","follow","dark"]},{"id":"minute-wheel","n":"313","title":"Minute wheel","summary":"A wheel of minutes from 1 to 30. It starts at 10. Drag or arrow keys change the hour-less count.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["wheel","minutes","picker"]},{"id":"card-article-mix","n":"314","title":"Mixed article cards","summary":"A magazine grid that mixes one lead card with a CSS cover, two numbered text cards, and three small thumbnail cards. Each whole card is one link.","platform":"web","type":"section","styles":["editorial","paper"],"tags":["cards","blog","articles","magazine","grid"]},{"id":"mobile-scroll-story","n":"315","title":"Mobile scroll story","summary":"A six-chapter riso brand story for phones: full-height snapped chapters, a tappable segmented progress bar, big overprinted numbers and drawings that animate in.","platform":"mobile-web","type":"pattern","styles":["riso","editorial","playful"],"tags":["story","scrollytelling","progress","chapters","phone"]},{"id":"mobile-web-bottom-nav","n":"316","title":"Mobile website bottom bar","summary":"A five-item bottom bar for a phone website with a raised square Book action, a scroll-linked active state, and hide-on-scroll-down that returns on scroll up.","platform":"mobile-web","type":"component","styles":["industrial","brutalist"],"tags":["navigation","bottom-bar","scroll","website","pwa"]},{"id":"mood-pill-morph-card","n":"317","title":"Mood pill that morphs into a card","summary":"Five capsule pills for a mood check-in. Tap one and it springs open into a card with feeling chips, the others shrink aside, and the room light shifts to its hue.","platform":"mobile-app","type":"component","styles":["soft","organic","playful"],"tags":["morph","picker","mood","spring","check-in"]},{"id":"gallery-museum-placard","n":"318","title":"Museum wall with placards","summary":"Four framed paintings on an oxblood gallery wall, each with a wall label. Selecting one zooms it forward with the label as a reading panel.","platform":"web","type":"layout","styles":["luxe","editorial"],"tags":["gallery","museum","lightbox","labels","art"]},{"id":"newsletter-close-band","n":"319","title":"Newsletter close","summary":"The last line of a note, then a band: The evening list, one Sunday letter, an email field, and Join. A bad address stays on the page.","platform":"web","type":"section","styles":["editorial","paper"],"tags":["newsletter","email","form","close"]},{"id":"node-graph","n":"320","title":"Node graph","summary":"Five yard nodes. Yard starts pressed and its lines turn green. Another node lights only its own lines.","platform":"web","type":"component","styles":["minimal","paper"],"tags":["graph","nodes","links"]},{"id":"kpi-delta","n":"321","title":"One number, with a delta","summary":"A single metric at 72px. The delta is a small badge. Four equal numbers in a row are a different, worse screen.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["kpi","metric","dashboard","delta"]},{"id":"otp-code","n":"322","title":"One-time code","summary":"Six digits from a letter. Three are filled, so the line reads 3 of 6. The check accepts only 184219 and otherwise names that code.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["otp","code","sign-in","digits"]},{"id":"careers-role-list","n":"323","title":"Open roles","summary":"Four Harbour roles. The pressed row fills the panel beside it with the team, the place, and one sentence. Apply is outline.","platform":"web","type":"section","styles":["editorial","minimal"],"tags":["careers","list","hiring"]},{"id":"order-confirmed","n":"324","title":"Order confirmed","summary":"A paid order for रु 4,200, three lines, and one button that opens tracking. The receipt stays on the page.","platform":"web","type":"screen","styles":["minimal","industrial"],"tags":["order","receipt","confirmation","shop"]},{"id":"table-orders-status","n":"325","title":"Orders table with fulfilment","summary":"A warm shop orders table: payment pills, segmented fulfilment bars, rows that expand into packable items, and a floating bulk bar.","platform":"web","type":"component","styles":["soft","editorial"],"tags":["table","ecommerce","orders","bulk","expand"]},{"id":"logos-outline-name-marquee","n":"326","title":"Outline name marquee","summary":"Four rows of huge outlined client names drift in alternating directions. Hover or arrow to a name to fill it and caption the project; a ring badge spins.","platform":"web","type":"section","styles":["kinetic","dark","editorial"],"tags":["logos","marquee","clients","agency","outline"]},{"id":"outline-fill-topic-list","n":"327","title":"Outline to fill topic list","summary":"A long list of topics in huge condensed outline type. The one at the centre of the screen fills solid, steps right with a mint bar, and swaps the backdrop.","platform":"web","type":"section","styles":["dark","kinetic","editorial"],"tags":["list","scroll","outline-type","topics","night"]},{"id":"overlap-slider","n":"328","title":"Overlap slider","summary":"Five gate cards. The ones to the left of the pointer scale back. Gate 4 starts forward.","platform":"web","type":"component","styles":["dark","minimal"],"tags":["slider","cards","scale"]},{"id":"page-transition-tile-wipe","n":"329","title":"Page transition tile wipe","summary":"Nav clicks cover the page with a 6×4 grid of cobalt tiles that spin in on a diagonal, swap the page, spin out the same way, then the new title rises line by line.","platform":"web","type":"animation","styles":["swiss","kinetic","minimal"],"tags":["transition","navigation","tiles","routing","typography"]},{"id":"pagination","n":"330","title":"Pagination","summary":"Pages of a 48-row list, ten at a time. Page 2 starts current. Previous and Next disable at the ends. The count line shows the range.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["pagination","list","pages"]},{"id":"pan-canvas","n":"331","title":"Pan canvas","summary":"A yard map bigger than the frame. Drag to pan. Arrow keys nudge the view by 40px.","platform":"web","type":"layout","styles":["dark","minimal"],"tags":["pan","canvas","map"]},{"id":"social-contribution-graph","n":"332","title":"Paper contribution heatmap","summary":"A year-long contribution heatmap on warm paper with day tooltips, arrow-key navigation, a year switcher, streak stats and three ink themes that ripple across the grid.","platform":"web","type":"component","styles":["paper","editorial","minimal"],"tags":["heatmap","calendar","streaks","contributions","profile"]},{"id":"sidebar-docs-toc","n":"333","title":"Paper docs with scrollspy TOC","summary":"An editorial docs layout: 240px grouped nav, a 68ch serif-headed article, and a 200px On this page list with scrollspy and a red progress line.","platform":"web","type":"layout","styles":["paper","editorial"],"tags":["documentation","toc","scrollspy","sidebar","reading"]},{"id":"widget-hydration","n":"334","title":"Paper hydration tumbler","summary":"A paper-minimal water widget: an outlined tumbler whose liquid sloshes and rises on +250 ml, a 2 L goal, a dated log and a one-step undo.","platform":"web","type":"component","styles":["paper","minimal","editorial"],"tags":["widget","health","water","tracker","undo"]},{"id":"password-field","n":"335","title":"Password field","summary":"A password that starts hidden. Show reveals gate-1842. Hide puts it back. The hint says the yard issued it.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["password","field","show","form"]},{"id":"notif-payment-received","n":"336","title":"Payment received banner","summary":"An in-app banner for money in: the amount counts up, the balance follows, View receipt unfolds a slip, Split opens a sheet, and a grouped stack fans out on tap.","platform":"mobile-app","type":"component","styles":["material","playful","soft"],"tags":["notification","payments","banner","count-up","stack","split"]},{"id":"phone-comments-sheet","n":"337","title":"Phone comments sheet","summary":"A dark comments sheet over a dimmed post: Top/Newest sort, one level of threaded replies, like toggles, a reply chip, and a composer that stays off until you type.","platform":"mobile-app","type":"component","styles":["dark","minimal"],"tags":["comments","sheet","thread","replies","phone"]},{"id":"mobile-list-empty","n":"338","title":"Phone empty list","summary":"A phone list with zero runs. The screen name is a 13px label. The empty heading is 28px. One 44px button.","platform":"mobile-app","type":"pattern","styles":["minimal","industrial"],"tags":["empty","list","phone","yard"]},{"id":"mobile-load-failed","n":"339","title":"Phone failed load","summary":"A phone list that did not load. The screen name is a label. The failure sentence is 20px, with a 44px retry. Not the empty state.","platform":"mobile-app","type":"pattern","styles":["minimal","industrial"],"tags":["error","retry","phone","list"]},{"id":"phone-form-fields","n":"340","title":"Phone form fields","summary":"An industrial phone booking form: caps labels, mono values, phone with country code, date, segmented size, counted note, switch, blur validation and an error summary.","platform":"mobile-app","type":"screen","styles":["industrial","minimal"],"tags":["form","validation","phone","inputs","booking"]},{"id":"input-phone-country","n":"341","title":"Phone input with country picker","summary":"A phone field with a searchable flag-and-dial-code picker, live formatting per country, paste detection of +codes, and digit-count validation.","platform":"web","type":"component","styles":["minimal","soft","swiss"],"tags":["phone","country","combobox","form","validation","checkout"]},{"id":"phone-splash-launch","n":"342","title":"Phone launch splash lift","summary":"A 1.52s app launch: a G mark draws in three strokes, GANTRY rises letter by letter, then the splash lifts away to reveal the first home screen.","platform":"mobile-app","type":"animation","styles":["industrial","dark","kinetic"],"tags":["splash","launch","logo","reveal","phone"]},{"id":"phone-notifications-list","n":"343","title":"Phone notification centre","summary":"A Swiss phone notification list: Today, This week and Earlier groups, red unread dots, a three-way filter, tap to read, and Mark all read with a stagger.","platform":"mobile-app","type":"screen","styles":["swiss","minimal"],"tags":["notifications","list","filter","unread","empty"]},{"id":"phone-order-tracking","n":"344","title":"Phone order tracking","summary":"A food delivery tracker: map with a moving courier, ETA in 42px type, a four-step progress with a pulsing current step, courier card, and a folding receipt.","platform":"mobile-app","type":"screen","styles":["playful","brutalist"],"tags":["delivery","tracking","map","order","courier"]},{"id":"phone-paywall-plans","n":"345","title":"Phone paywall with two plans","summary":"An honest subscription paywall: three benefits, Monthly and Yearly cards as radios, a 7-day trial timeline, and a button that names the price you picked.","platform":"mobile-app","type":"screen","styles":["editorial","paper"],"tags":["paywall","subscription","plans","trial","phone"]},{"id":"phone-permission-prompt","n":"346","title":"Phone permission prompt","summary":"A soft pre-permission screen before the OS asks: a swaying plant drawing, three reasons, Allow and Not now, a labelled system step, then a granted or later state.","platform":"mobile-app","type":"component","styles":["soft","organic"],"tags":["permissions","notifications","onboarding","phone","overlay"]},{"id":"phone-photo-picker","n":"347","title":"Phone photo picker","summary":"A dark photo picker sheet: album menu, camera tile, 3-column grid, numbered multi-select up to 4, a toast at the limit, and a tray with removable thumbnails.","platform":"mobile-app","type":"component","styles":["dark","minimal"],"tags":["photos","picker","sheet","multi-select","media"]},{"id":"phone-product-detail","n":"348","title":"Phone product page","summary":"A retro paper product page for a small pottery shop: CSS-drawn gallery, glaze swatches that recolour the art, size chips, an accordion and a sticky Add to bag.","platform":"mobile-app","type":"screen","styles":["paper","retro","clay"],"tags":["product","shop","gallery","swatches","cart"]},{"id":"phone-profile-header","n":"349","title":"Phone profile header","summary":"A maker's profile: 92px initials avatar, tabular stats, a Follow button that morphs to Following, Posts/Saved/About tabs, and a glass top bar on scroll.","platform":"mobile-app","type":"screen","styles":["soft","glass","minimal"],"tags":["profile","follow","tabs","scroll","phone","ios"]},{"id":"phone-qr-scanner","n":"350","title":"Phone QR ticket scanner","summary":"A door-staff ticket scanner: grainy camera scene, breathing reticle with a scan line, torch, manual code sheet, and a mint valid or red invalid result.","platform":"mobile-app","type":"screen","styles":["dark","minimal"],"tags":["scanner","qr","tickets","camera","events"]},{"id":"phone-ride-request","n":"351","title":"Phone ride request","summary":"A night ride-hailing screen: dark map with a dashed acid route, pickup and drop fields with swap, three ride options, then a radar search and a driver card.","platform":"mobile-app","type":"screen","styles":["industrial","dark"],"tags":["ride","map","booking","transport","sheet"]},{"id":"phone-search-results","n":"352","title":"Phone search with live results","summary":"A phone search screen: focused field with Cancel, removable recents, ranked trending chips, live suggestions with the match in bold, tabbed results and a did-you-mean empty state.","platform":"mobile-app","type":"screen","styles":["minimal","swiss"],"tags":["search","suggestions","tabs","empty-state","ios"]},{"id":"mockup-phone-showcase","n":"353","title":"Phone showcase mockup","summary":"A pure-CSS titanium phone with side keys and an island, four finishes, three live screens, pointer-driven 3D tilt and a light or dark gallery stage.","platform":"web","type":"component","styles":["luxe","editorial","minimal"],"tags":["mockup","phone","device","showcase","3d"]},{"id":"phone-video-player","n":"354","title":"Phone video player","summary":"A 16:9 player with tap-to-show controls, double-tap ±10s ripples, a chaptered scrubber with a time bubble, speed chips, captions and a rotate-to-landscape full screen.","platform":"mobile-app","type":"screen","styles":["dark","minimal"],"tags":["video","player","scrubber","chapters","captions","dark"]},{"id":"gallery-photo-album","n":"355","title":"Photo album with page turns","summary":"A black-paged family album with photo corners and white-pen captions. Leaves turn over the spine in 3D on click or the arrow keys.","platform":"web","type":"layout","styles":["paper","retro","organic"],"tags":["gallery","album","page-flip","3d","nostalgia"]},{"id":"social-photo-post","n":"356","title":"Photo post with carousel","summary":"A dark square photo post: four CSS-painted slides with drag, dots and counter, double-tap heart pop, save toggle, caption with more, and inline comments.","platform":"web","type":"component","styles":["dark","minimal"],"tags":["social","photo","carousel","like","feed"]},{"id":"list-empty-plain","n":"357","title":"Plain list empty","summary":"An empty runs list: a heading, one sentence, and one button. No illustration, no second action, no joke.","platform":"web","type":"pattern","styles":["minimal","industrial"],"tags":["empty","list","dashboard"]},{"id":"phone-tab-plain","n":"358","title":"Plain phone tabs","summary":"A four-item phone tab bar with a hairline and a top mark. No glass, no blur, no floating capsule.","platform":"mobile-app","type":"component","styles":["minimal","paper"],"tags":["navigation","tabs","phone","ios"]},{"id":"card-music-playlist","n":"359","title":"Playlist card with now playing","summary":"A playlist card with a four-tile CSS cover collage, a track list with hover-to-play, live equaliser bars, shuffle that reorders with FLIP, a save toggle, and a total runtime.","platform":"web","type":"component","styles":["soft","editorial"],"tags":["music","playlist","player","cards","tracks"]},{"id":"polaroid-fan","n":"360","title":"Polaroid fan","summary":"Five prints start fanned. Click stacks them. Click again opens the arc.","platform":"web","type":"animation","styles":["paper","editorial"],"tags":["polaroid","fan","stack"]},{"id":"card-polaroid-frames","n":"361","title":"Polaroid frames, three ways","summary":"One 300px instant-photo frame in three treatments: a hard shadow lit by the cursor, tape with a peelable sticky note, and a print you shake to develop.","platform":"web","type":"component","styles":["brutalist","playful","paper"],"tags":["cards","polaroid","photo","sticky-note","drag"]},{"id":"popover-panel","n":"362","title":"Popover panel","summary":"Note opens a panel under the button: Gate 2 closes at 18:00. Close and Escape put it away. There is no scrim and no focus trap.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["popover","panel","note","disclosure"]},{"id":"card-postcard-stamp","n":"363","title":"Postcard with stamp and postmark","summary":"A travel postcard that turns over by drag or key: an illustrated harbour on the front, a handwritten note, perforated stamp, and an inked postmark on the back.","platform":"web","type":"component","styles":["retro","paper","playful"],"tags":["cards","postcard","flip","stamp","travel"]},{"id":"preloader-counter-intro","n":"364","title":"Preloader counter intro","summary":"A 0 to 100 counter runs for 1.8s while four print blocks pop in, then the loader splits top and bottom and the hero headline rises letter by letter.","platform":"web","type":"animation","styles":["brutalist","kinetic","paper"],"tags":["preloader","counter","intro","split","hero"]},{"id":"dock-presence-bar","n":"365","title":"Presence dock with follow mode","summary":"A dark pill dock of collaborator avatars over a shared doc: live named cursors drift through the text, clicking a face follows them, and Invite adds a pending seat.","platform":"web","type":"component","styles":["editorial","minimal"],"tags":["collaboration","presence","avatars","cursors","dock"]},{"id":"press-well","n":"366","title":"Press well","summary":"Open the gate sits in a recessed well. Press and the button drops 4px. Click says the gate opened.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["button","press","well"]},{"id":"process-step-dossier","n":"367","title":"Process step dossier","summary":"A portfolio case panel: a project's steps from sketch to shipped sit side by side as artboards; hover or focus one to light it and swap in its story.","platform":"web","type":"section","styles":["industrial","dark","swiss"],"tags":["portfolio","case-study","process","hover","artboards"]},{"id":"card-product-quick-add","n":"368","title":"Product cards with quick add","summary":"Four square-cornered shop cards with CSS-drawn art, a second angle on hover, colour swatches, sale tags, and a quick-add bar that bumps the bag count.","platform":"web","type":"component","styles":["retro","paper"],"tags":["cards","shop","product","quick-add","swatches"]},{"id":"mega-menu-product-grid","n":"369","title":"Product mega menu grid","summary":"A white SaaS navbar whose Product item opens a full-width panel: three product columns, a by-team column and a release card, with hover intent and full keys.","platform":"web","type":"component","styles":["swiss","minimal"],"tags":["navigation","mega-menu","header","saas","hover"]},{"id":"social-pro-post","n":"370","title":"Professional network post","summary":"A warm editorial work-network post: author with role, clamped text, a paged document preview, a five-reaction hover picker, and a live comment count.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["social","post","reactions","document","comments"]},{"id":"social-pro-profile","n":"371","title":"Professional network profile card","summary":"A work-network profile card with a contour banner, an open-to-work arc ring, a Connect → Pending → Connected flow, an inline message composer and a fold-out experience timeline.","platform":"web","type":"component","styles":["minimal","swiss"],"tags":["social","profile","network","timeline","connect"]},{"id":"progress-bar","n":"372","title":"Progress bar","summary":"Packing the rice, 5 of 8. Each click fills the bar by one bag. At 8 the button stops and the line says all the bags are packed.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["progress","meter","packing","status"]},{"id":"prompt-composer","n":"373","title":"Prompt composer","summary":"A 640px ask box. Plain, Short, or Formal. Send stays off until there is text, then reports the tone and the count.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["prompt","composer","form"]},{"id":"property-list","n":"374","title":"Property list","summary":"Four facts of load 1842. Gate, driver, slot, and weight, each a label and a value on one row. The label is quiet. The value is the ink.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["properties","definition","record","list"]},{"id":"card-pull-quote","n":"375","title":"Pull-quote testimonial card","summary":"A dark editorial testimonial card: a 300px chartreuse quote mark, a 46px serif quote whose key phrase is highlighted by a marker sweep, and prev/next.","platform":"web","type":"component","styles":["editorial","dark"],"tags":["testimonials","quote","carousel","highlight","editorial"]},{"id":"pwa-offline-library","n":"376","title":"PWA offline library","summary":"A saved-for-offline screen at night: storage meter, Wi-Fi-only switch, download rings, remove buttons, dimmed items with a reason, and an offline badge.","platform":"pwa","type":"screen","styles":["editorial","dark"],"tags":["pwa","offline","downloads","storage","podcast","reading"]},{"id":"pwa-outbox-sync","n":"377","title":"PWA outbox sync","summary":"An offline outbox sheet for a field-notes app: queued, sending, failed with retry, conflict with keep mine or theirs, and sent, sending one by one when signal returns.","platform":"pwa","type":"component","styles":["industrial","minimal"],"tags":["pwa","offline","sync","queue","conflict","retry"]},{"id":"qty-stepper","n":"378","title":"Quantity stepper","summary":"Rice at रु 1,200 a bag, starting at 2. Minus and plus step by one, from 1 to 8, and the line amount follows.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["quantity","stepper","cart","price"]},{"id":"chart-line-range","n":"379","title":"Quarter line chart","summary":"Twelve weeks of tonnage as one stroke. The latest week is a 56px number. The line is the evidence under it, not a second headline.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["charts","line","dashboard","quarter"]},{"id":"radio-group","n":"380","title":"Radio group","summary":"Three shifts in one fieldset. Morning starts selected. Arrow keys move the choice. The status line names the shift on the gate.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["radio","form","choice","shift"]},{"id":"chart-rank-spend","n":"381","title":"Ranked spend","summary":"Where the money went: one amount at display size, then five horizontal bars ranked by size. No pie, no legend, no second series.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["charts","spend","finance","nepal"]},{"id":"rating-score","n":"382","title":"Rating score","summary":"Five marks for the handoff. Four start filled. Choosing another mark rewrites the line to that score of 5.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["rating","score","radio","handoff"]},{"id":"realestate-listing-detail","n":"383","title":"Real estate listing detail","summary":"A stone-and-bronze house listing: CSS-drawn room gallery, a tappable SVG floor plan, a mortgage estimate, an SVG area map, and a sticky viewing card.","platform":"web","type":"screen","styles":["luxe","minimal"],"tags":["property","listing","floor-plan","mortgage","booking","map"]},{"id":"receipt-slip","n":"384","title":"Receipt slip","summary":"Print slip feeds a yard note out of a slot. Reprint pulls it back. The note says it is not a tax bill.","platform":"web","type":"component","styles":["minimal","paper"],"tags":["receipt","slip","print"]},{"id":"redaction-bar-reveal","n":"385","title":"Redaction bar reveal","summary":"Condensed investigative copy hidden under black bars, one per line, that lift right-to-left in a stagger. One name stays withheld for good.","platform":"web","type":"section","styles":["editorial","brutalist","paper"],"tags":["redaction","text","reveal","investigative","report","stagger"]},{"id":"restaurant-menu-page","n":"386","title":"Restaurant menu page","summary":"An oxblood-and-mustard bistro menu: riso halftone hero, sticky category bar with scrollspy, dotted price leaders, a Chef's pick stamp, and a booking popover.","platform":"web","type":"screen","styles":["retro","riso"],"tags":["restaurant","menu","scrollspy","booking","popover"]},{"id":"widget-ride-pickup","n":"387","title":"Ride pickup live activity","summary":"A lock-screen ride widget: a car drives a mini route map, the ETA counts down to Here, and one tap folds it to a compact progress row.","platform":"mobile-app","type":"component","styles":["paper","minimal","playful"],"tags":["widget","live-activity","ride","map","countdown"]},{"id":"rolling-total-period-switch","n":"388","title":"Rolling total with a jelly period switch","summary":"A spending screen where a lime pill squashes across Day to Year, the total and count roll digit by digit, bars spring, and the top-places list grows or shrinks.","platform":"mobile-app","type":"component","styles":["minimal","kinetic","swiss"],"tags":["ticker","numbers","segmented","finance","spring"]},{"id":"gallery-wall-frames","n":"389","title":"Salon wall planner","summary":"A gallery wall of seven mixed frames over a sofa. Drag to rearrange on a 10 cm snap grid; frames swing on their nail when hung. Pick a frame finish.","platform":"web","type":"layout","styles":["soft","organic","playful"],"tags":["gallery","drag","snap-grid","frames","planner"]},{"id":"saved-banner","n":"390","title":"Saved banner","summary":"A confirmation that stays on the page after a save. One word at display size, one sentence, one button. Not a toast.","platform":"web","type":"pattern","styles":["editorial","paper"],"tags":["feedback","save","banner","confirmation"]},{"id":"scan-page","n":"391","title":"Scan page","summary":"A note sits on the desk. Scan runs a green beam down the sheet, then reports two lines read.","platform":"web","type":"animation","styles":["minimal","industrial"],"tags":["scan","beam","note"]},{"id":"school-admissions-home","n":"392","title":"School admissions home","summary":"A Bauhaus-leaning college admissions page: geometric campus drawing, key dates timeline, filterable programmes, fees with scholarships, FAQ, and an enquiry form.","platform":"web","type":"screen","styles":["bauhaus","paper"],"tags":["education","school","admissions","timeline","form"]},{"id":"scroll-split","n":"393","title":"Scroll split","summary":"Gate 4, Night book, and Month close start as one board. Scroll opens a 16px gap between them.","platform":"web","type":"animation","styles":["editorial","paper"],"tags":["scroll","split","panels"]},{"id":"scroll-velocity-type","n":"394","title":"Scroll velocity type","summary":"Hold the line sits sticky. Scrolling opens its tracking up to 0.2em, then the tracking settles.","platform":"web","type":"animation","styles":["editorial","paper"],"tags":["scroll","tracking","type"]},{"id":"scroll-word-highlight","n":"395","title":"Scroll word highlight","summary":"A 54px serif manifesto pinned for 340vh. Each word goes from 18% to 100% opacity in reading order as you scroll, and three key phrases draw a terracotta underline.","platform":"web","type":"animation","styles":["editorial","minimal","paper"],"tags":["scroll","manifesto","about","words","underline"]},{"id":"scroll-zoom-portal","n":"396","title":"Scroll zoom portal","summary":"Scroll zooms the camera into the hole of a giant geometric O until its yellow centre fills the screen and becomes the next section.","platform":"web","type":"animation","styles":["bauhaus","playful"],"tags":["scroll","zoom","portal","hero","typography"]},{"id":"scroll-scrub-product-sequence","n":"397","title":"Scroll-scrubbed product teardown","summary":"A pinned 400vh section where scroll turns a CSS wristwatch, explodes it into four labelled parts, and closes it again, with stepped captions and a rail.","platform":"web","type":"animation","styles":["luxe","dark"],"tags":["scroll","product","pinned","exploded","watch"]},{"id":"navbar-section-tagline-pill","n":"398","title":"Section-tagline nav pill","summary":"A dark floating nav pill whose centre tagline rolls to a new cheeky line per section, opens into a menu drawer, and sits beside a stack of collapsible cards.","platform":"web","type":"component","styles":["minimal","industrial","swiss"],"tags":["navbar","menu","sticky","agency","drawer"]},{"id":"select-field","n":"399","title":"Select field","summary":"A closed list of roles. The field matches the other controls. The list uses the same radius. Empty submit puts the error under the field.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["select","form","listbox","role"]},{"id":"selection-bar","n":"400","title":"Selection bar","summary":"Checking loads raises a dark bar: the count, Clear, Export, and Archive. Zero checks hides it.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["table","selection","bulk"]},{"id":"dropdown-share-menu","n":"401","title":"Share menu with invites and QR","summary":"A riso-print share popover: email chips, an access-level menu, copy link with a Copied state, four send targets and a QR switch, all anchored to Share.","platform":"web","type":"component","styles":["riso","paper","editorial"],"tags":["share","popover","menu","invite","chips","qr"]},{"id":"button-sheen-pill","n":"402","title":"Sheen pill buttons","summary":"Champagne pill buttons on green-black: a light sheen sweeps across on hover, a conic gradient border turns, and async pills go loading then success.","platform":"web","type":"component","styles":["luxe","dark","minimal"],"tags":["buttons","pill","gradient-border","loading","success","hover"]},{"id":"shop-cart","n":"403","title":"Shop cart","summary":"The bag total is 56px. Two lines start at Rs 5,600. Quantity changes the total. An empty bag replaces the total with a sentence.","platform":"web","type":"screen","styles":["organic","minimal"],"tags":["shop","cart","quantity","total"]},{"id":"shop-collection","n":"404","title":"Shop collection","summary":"Six clay pieces on a warm table. One shelf filter. Lamps is the empty shelf. The button opens the selected piece.","platform":"web","type":"screen","styles":["organic","minimal"],"tags":["shop","collection","filter","empty"]},{"id":"hamburger-drawer-accordion","n":"405","title":"Shop drawer with accordion sections","summary":"An 86%-wide shop menu drawer from the left with search, one-open-at-a-time accordion sections, a promo row and account and help pinned at the bottom.","platform":"mobile-web","type":"component","styles":["soft","organic","editorial"],"tags":["navigation","drawer","accordion","shop","menu"]},{"id":"shop-product","n":"406","title":"Shop product","summary":"One bowl. The name is 56px. The price sits under it. One button puts it in the bag. The collection is a quiet back control.","platform":"web","type":"screen","styles":["organic","minimal"],"tags":["shop","product","bag","bowl"]},{"id":"shortcut-sheet","n":"407","title":"Shortcut sheet","summary":"A 480px sheet of yard shortcuts. The row for the key you press picks up a green wash.","platform":"web","type":"component","styles":["minimal","paper"],"tags":["keyboard","shortcuts","sheet"]},{"id":"shred-button","n":"408","title":"Shred button","summary":"Shred draft cuts a note into strips that fall. Restore brings the note back.","platform":"web","type":"animation","styles":["minimal","paper"],"tags":["delete","shred","paper"]},{"id":"sidebar-workspace-switcher","n":"409","title":"Sidebar with workspace switcher","summary":"A 260px dark app sidebar: workspace switcher popover, ⌘K search, counted inbox items, a collapsing Projects group and a pinned user row with plan badge.","platform":"web","type":"component","styles":["minimal","dark"],"tags":["sidebar","navigation","workspace","saas","keyboard"]},{"id":"hero-silk-ribbon-ticker","n":"410","title":"Silk ribbon hero with live ticker","summary":"A warm-paper fintech hero: a 150-fibre canvas ribbon sweeps off the top right, a two-tone light headline, a live payout ticker and chevrons that grow into arrows.","platform":"web","type":"section","styles":["minimal","editorial"],"tags":["hero","fintech","canvas","gradient","ticker"]},{"id":"footer-sitemap-columns","n":"411","title":"Sitemap columns footer","summary":"A quiet charcoal product footer: CTA row, brand and newsletter, five link columns, status line, language and region selects. Columns fold into accordions under 640px.","platform":"web","type":"section","styles":["dark","minimal"],"tags":["footer","sitemap","newsletter","accordion","status","saas"]},{"id":"widget-sleep-score","n":"412","title":"Sleep score with scrubbable hypnogram","summary":"A night-blue sleep card: a moon-cream score ring that fills to 84, four stage totals, and a stepped hypnogram you drag or arrow through to read the time and stage.","platform":"web","type":"component","styles":["soft","dark","editorial"],"tags":["widget","sleep","health","hypnogram","scrubber"]},{"id":"slider-field","n":"413","title":"Slider field","summary":"A dock arrival from 08:00 to 18:00. The thumb starts at 16:00. The value sits beside the label and updates as the thumb moves.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["slider","range","form","time"]},{"id":"smooth-scroll-inertia","n":"414","title":"Smooth scroll with inertia","summary":"A dark agency page whose content glides behind the native scrollbar with lerp 0.1, frames skew up to 4deg with speed, and art drifts inside each frame.","platform":"web","type":"pattern","styles":["editorial","dark","kinetic"],"tags":["scroll","smooth-scroll","parallax","agency","inertia"]},{"id":"phone-feed-posts","n":"415","title":"Social feed with stories and posts","summary":"A playful social home: unseen-ring stories, posts with CSS-drawn pictures and double-tap heart burst, counted actions, a clamped caption, a text post and a suggested-accounts carousel.","platform":"mobile-app","type":"screen","styles":["playful","minimal"],"tags":["feed","social","stories","like","carousel"]},{"id":"button-inset-soft","n":"416","title":"Soft inset clay buttons","summary":"Neumorphic buttons, icon toggles, switches and a segmented control on a clay surface, with AA text, a hairline edge and colour as the second state signal.","platform":"web","type":"component","styles":["soft","clay","minimal"],"tags":["buttons","neumorphic","toggle","switch","segmented","soft-ui"]},{"id":"spend-list","n":"417","title":"Spend list","summary":"A phone list of one month's lines. The amount left is the answer. All, out, and in filter the rows. Cash and a wallet would be different rows.","platform":"mobile-app","type":"screen","styles":["editorial","paper"],"tags":["list","finance","phone","nepal"]},{"id":"loader-spinner-set","n":"418","title":"Spinner specimen set","summary":"Eight pure-CSS spinners on a dark specimen sheet, sharing one size, colour and speed dial, each with a copy button for its class and settings.","platform":"web","type":"component","styles":["dark","swiss","kinetic"],"tags":["spinner","loading","css","specimen","copy"]},{"id":"split-button","n":"419","title":"Split button","summary":"One primary action and a 44px chevron that opens three related ways to send the same note.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["button","menu","send"]},{"id":"hero-split-ui-stack","n":"420","title":"Split hero with UI card stack","summary":"A soft SaaS hero: copy on the left, three overlapping product cards on the right that settle in with a stagger and drift up to 6px with the pointer.","platform":"web","type":"section","styles":["soft","minimal"],"tags":["hero","saas","product","cards","parallax"]},{"id":"navbar-split-centered-logo","n":"421","title":"Split navbar with centred wordmark","summary":"Links split left and right of a centred serif wordmark over a dark hero. After 80px of scroll it turns into a paper bar and the wordmark shrinks 40px to 24px.","platform":"web","type":"component","styles":["luxe","editorial"],"tags":["navbar","scroll","sticky","hotel","restaurant"]},{"id":"split-flap-board","n":"422","title":"Split-flap board","summary":"Three departure rows flip from a dot to the gate text. Replay runs the flaps again.","platform":"web","type":"animation","styles":["dark","kinetic"],"tags":["text","flap","board"]},{"id":"spotlight-command-bar","n":"423","title":"Spotlight search with preview","summary":"A frosted, desktop-OS spotlight bar on ⌘K: fuzzy results grouped as top hit, apps, files and actions, inline calculator, and a live preview pane.","platform":"web","type":"component","styles":["glass","minimal"],"tags":["search","spotlight","command","keyboard","preview"]},{"id":"spring-deck","n":"424","title":"Spring deck","summary":"Three notes in a pile. Drag the front one, Gate 4. Release and it springs back.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["deck","drag","spring"]},{"id":"card-stamped-document","n":"425","title":"Stamped document","summary":"An official permit on a desk blotter: a paperclipped receipt, a signature that draws itself, and an APPROVED rubber stamp that thumps down wherever you click.","platform":"web","type":"component","styles":["paper","retro","editorial"],"tags":["cards","document","stamp","signature","approval"]},{"id":"stats-count-up-band","n":"426","title":"Stats count-up band","summary":"A Halyard stats band on deep green: four serif figures count up once in 1.2s when seen, each with a mono label, a drawn sparkline or bars, and a source line.","platform":"web","type":"section","styles":["editorial","dark"],"tags":["stats","numbers","counter","sparkline","band"]},{"id":"status-badge","n":"427","title":"Status badge","summary":"Four loads, four different states. Cleared, Held, Refused, and Booked each use their own wash and the ink that sits on that wash.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["badge","status","list"]},{"id":"contact-project-brief-steps","n":"428","title":"Stepped project brief form","summary":"Brutalist agency inquiry on cream: four steps on one page with chips, budget segments and timeline cards, per-step checks, a review screen and a success screen.","platform":"web","type":"section","styles":["brutalist","editorial"],"tags":["contact","form","steps","agency","validation"]},{"id":"widget-activity-rings","n":"429","title":"Sticker activity rings","summary":"Three chunky concentric rings, Burn, Hustle and Rise, that spring-fill on load on a cream sticker card; tap a ring or pill for its detail and hourly bars.","platform":"web","type":"component","styles":["playful","bauhaus"],"tags":["widget","fitness","rings","progress","health"]},{"id":"card-sticky-notepad","n":"430","title":"Sticky notes board","summary":"A retro board of sticky notes on dark felt: add notes in five colours, drag them with a tilt, peel a corner on hover, and drop on the bin to delete with undo.","platform":"web","type":"component","styles":["playful","paper","dark"],"tags":["notes","board","drag","retro","collaboration"]},{"id":"stretch-switch","n":"431","title":"Stretch switch","summary":"Hold starts on. Press the thumb and it widens. Release and it slides. The label says on or off.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["switch","hold","thumb"]},{"id":"background-sunrise-horizon","n":"432","title":"Sunrise horizon background","summary":"Hard-edged sky and sea bands recolour through dawn while a sun disc rises over the horizon, driven by scroll, a time slider, or a slow autoplay.","platform":"web","type":"pattern","styles":["editorial","paper","minimal"],"tags":["background","sunrise","gradient","scroll","editorial","hero"]},{"id":"card-retail-price-tag","n":"433","title":"Swinging kraft hang tag","summary":"A kraft-paper price tag on a green string that swings when you brush past it, with a struck price, a sale sticker, size chips, a hold button and a real EAN barcode.","platform":"web","type":"component","styles":["paper","editorial","retro"],"tags":["price","tag","retail","sale","sizes","barcode"]},{"id":"card-stacked-deck","n":"434","title":"Swipe deck with undo","summary":"A stacked deck of trip cards: drag right to save, left to pass, arrow keys for both, undo flies the card back from the side it left.","platform":"web","type":"component","styles":["editorial","organic"],"tags":["deck","swipe","drag","undo","travel","shortlist"]},{"id":"swipe-pay-ember-bloom","n":"435","title":"Swipe to pay, ember bloom","summary":"A dark phone checkout where you drag a knob across a track to pay, then the keypad drops away and an ember glow blooms behind a drawn check.","platform":"mobile-app","type":"component","styles":["dark","kinetic","minimal"],"tags":["payments","slider","swipe","success","checkout"]},{"id":"switch-row","n":"436","title":"Switch row","summary":"One setting, Hold the gate. It starts off, the gate stays open, and turning it on says the gate is held.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["switch","toggle","setting","gate"]},{"id":"tablet-pos-register","n":"437","title":"Tablet cafe register","summary":"A 1180×820 cafe point of sale: category rail, big item tiles with a hold-for-options sheet, a live order ticket, and a Charge flow through Cash, Card or QR to Paid.","platform":"tablet","type":"screen","styles":["soft","organic"],"tags":["pos","register","cafe","order","checkout","touch"]},{"id":"tablet-kiosk-checkin","n":"438","title":"Tablet kiosk check-in","summary":"A front-desk check-in kiosk: tap-to-start attract screen, code or name search on a big keypad, confirm card, badge print with progress, and a 10s auto-reset.","platform":"tablet","type":"screen","styles":["industrial","minimal"],"tags":["kiosk","check-in","keypad","tablet","reception"]},{"id":"tablet-notes-three-pane","n":"439","title":"Tablet notes in three panes","summary":"A 1180×820 paper notes app: collapsible folders, a note list with red pencil selection, a serif editor with tickable checklist and quote, a floating format bar, and focus mode.","platform":"tablet","type":"screen","styles":["paper","editorial"],"tags":["notes","editor","three-pane","writing","focus-mode"]},{"id":"tablet-cook-mode","n":"440","title":"Tablet recipe cook mode","summary":"A 1180×820 kitchen cook mode: one step in 54px heavy type, tickable ingredients for that step, two timer chips that ring, swipe or big buttons between steps.","platform":"tablet","type":"screen","styles":["playful","organic"],"tags":["recipe","cooking","timer","steps","kitchen","swipe"]},{"id":"tactile-chip-tabs-stretch","n":"441","title":"Tactile chip tabs with a stretch","summary":"Clay-raised category chips that press down like keys, a dark well that stretches and springs to the chosen tab, and skeleton cards that hand over to listings.","platform":"mobile-app","type":"component","styles":["clay","soft","organic"],"tags":["tabs","chips","press","spring","skeleton"]},{"id":"table-tasks-inline","n":"442","title":"Tasks table with inline editing","summary":"A playful sprint table grouped by status: rename in place, swap assignees, nudge due dates, cycle priority, and drag rows between groups.","platform":"web","type":"component","styles":["playful","brutalist"],"tags":["table","tasks","drag","inline-edit","productivity"]},{"id":"settings-team-members","n":"443","title":"Team members settings","summary":"A Swiss members page: email chip invites, a seat meter, a table with inline role changes and an undo toast, pending invites, and a confirm before remove.","platform":"web","type":"screen","styles":["swiss","minimal"],"tags":["settings","team","members","invite","roles","table"]},{"id":"crypto-exchange-trade","n":"444","title":"Terminal crypto trading screen","summary":"A dense near-black spot trading screen: pair header, SVG candles with a crosshair, a live order book that ticks every 800ms, trades, and a buy/sell panel.","platform":"web","type":"screen","styles":["terminal","dark"],"tags":["trading","crypto","chart","order-book","finance"]},{"id":"background-terrazzo","n":"445","title":"Terrazzo background","summary":"A seeded SVG terrazzo floor of irregular stone chips in three depth layers, with a reshuffle button, three stone palettes and gentle pointer parallax.","platform":"web","type":"pattern","styles":["organic","minimal","paper"],"tags":["background","terrazzo","svg","generative","parallax","hero"]},{"id":"testimonials-masonry-wall","n":"446","title":"Testimonials masonry wall","summary":"A riso-paper wall of twelve Pressroom letters in three CSS columns: one coral featured quote, marked phrases, post cards, and a fade with Show more.","platform":"web","type":"section","styles":["paper","riso","editorial"],"tags":["testimonials","masonry","quotes","riso"]},{"id":"testimonials-metric-tabs","n":"447","title":"Testimonials metric tabs","summary":"Four customer wordmark tabs for Keel billing: a 112px mono metric, a quote, a person, and a case link. Auto-advances every 7s with a mint progress line.","platform":"web","type":"section","styles":["dark","minimal"],"tags":["testimonials","tabs","case-study","metrics"]},{"id":"text-field","n":"448","title":"Text field","summary":"Three account fields: a name with a hint, a gate code in error until it is four digits, and a badge number that cannot be edited.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["field","form","error","disabled"]},{"id":"loader-text-shimmer","n":"449","title":"Text loaders for AI states","summary":"Four text-only loaders for slow answers: a shimmer sweep, a thinking ellipsis with honest seconds, a typewriter step cycle, and a scramble that resolves.","platform":"web","type":"component","styles":["editorial","paper","minimal"],"tags":["loading","text","ai","shimmer","typewriter","status"]},{"id":"text-mask-scroll-reveal","n":"450","title":"Text mask scroll reveal","summary":"A 26vw black-weight word cuts a window into a moving CSS sunset. Scrolling scales the word into its I until the scene fills the screen and the next headline lands.","platform":"web","type":"animation","styles":["kinetic","dark","brutalist"],"tags":["scroll","mask","wordmark","zoom","hero"]},{"id":"textarea-field","n":"451","title":"Textarea field","summary":"A dock note with the hint under it and a count of 160. Past 160 the hint yields to the error and the border turns danger.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["textarea","field","note","count"]},{"id":"features-thread-to-issue-board","n":"452","title":"Thread to issue board","summary":"A dark intake section: a chat thread floats over a faded kanban board; sending an @mention makes a bot file two issues that drop into Todo, linked back to the reply.","platform":"web","type":"section","styles":["dark","minimal"],"tags":["features","kanban","chat","agent","dark"]},{"id":"social-thread-card","n":"453","title":"Threaded conversation card","summary":"A playful thread card: parent post with a drawn thread line through replies, a hooked expand control, a quote post, and repost or quote from any post.","platform":"web","type":"component","styles":["playful","brutalist"],"tags":["social","thread","replies","quote","comments"]},{"id":"stage-passes-compare","n":"454","title":"Three passes, one frame","summary":"A method section: one portrait frame shown as sketch, light and motion passes, with timed tabs and a drag line that compares each pass with the one before.","platform":"web","type":"section","styles":["paper","editorial","minimal"],"tags":["process","compare","tabs","before-after","studio"]},{"id":"phone-sign-up-steps","n":"455","title":"Three-step phone sign-up","summary":"A soft, cream-and-green phone sign-up in three sliding steps: name and email, a password with live ticking rules, then pick 3+ interests as chips.","platform":"mobile-app","type":"screen","styles":["soft","material","organic"],"tags":["auth","sign-up","stepper","form","chips"]},{"id":"stats-tilted-card-stack","n":"456","title":"Tilted stat card stack","summary":"A pinned stats section: big headline left, four coloured stat cards that rise tilted, land on a 44px peek, count up, and pile as you scroll.","platform":"web","type":"section","styles":["playful","soft"],"tags":["stats","scroll","sticky","cards","count-up","agency"]},{"id":"time-field","n":"457","title":"Time field","summary":"Hour and minute for when Gate 4 closes. It starts at 18:00, the same time as the dock note, and rejects an hour or minute that cannot exist.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["time","field","hour","gate"]},{"id":"token-field","n":"458","title":"Token field","summary":"Rice and Oil start on the truck. Enter adds a load once. A remove control drops one. Backspace on an empty field drops the last.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["tokens","chips","tags","field"]},{"id":"widget-pomodoro","n":"459","title":"Tomato pomodoro timer widget","summary":"A focus timer card where the countdown ring is the tomato: start, pause, skip, reset, focus and break modes, and four session dots.","platform":"web","type":"component","styles":["playful","soft"],"tags":["timer","pomodoro","focus","productivity","ring"]},{"id":"tooltip","n":"460","title":"Tooltip","summary":"Hold describes itself: the tip says the load stays on the dock until 18:00. It starts open, and it follows hover and focus.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["tooltip","hint","hover","focus"]},{"id":"trail-type","n":"461","title":"Trail type","summary":"HOLD is an outline. Drag it and up to eight outlines stay behind. Release clears them.","platform":"web","type":"animation","styles":["dark","kinetic"],"tags":["type","drag","trail"]},{"id":"table-transactions-ledger","n":"462","title":"Transactions ledger","summary":"A bank ledger in serif and mono: day group headers, merchant icons, decimal-aligned signed amounts, a running balance, search and a direction filter.","platform":"web","type":"component","styles":["editorial","minimal"],"tags":["table","finance","ledger","search","banking"]},{"id":"tree-nav","n":"463","title":"Tree","summary":"A place tree. Dispatch and Asar start open, Gate 4 is current, and Bhadra and People start closed. A click opens a branch or moves the current page.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["tree","navigation","nested","folders"]},{"id":"input-otp-underline","n":"464","title":"Underline OTP input","summary":"A six-digit verification code on hairline underlines: paste fills all six, typing auto-advances, a wrong code shakes coral, a resend countdown ticks, success turns gold.","platform":"web","type":"component","styles":["luxe","editorial","dark"],"tags":["otp","verification","code","auth","form"]},{"id":"undo-toast","n":"465","title":"Undo toast","summary":"Archiving a yard note raises a dark toast with Undo. It leaves after six seconds unless undone.","platform":"web","type":"component","styles":["minimal","dark"],"tags":["toast","undo","archive"]},{"id":"pricing-usage-slider","n":"466","title":"Usage pricing slider","summary":"Usage pricing on white: a log-scale event slider with snapping ticks, live prices that count to the new value, a moving recommended border and a sales state past 10M.","platform":"web","type":"section","styles":["swiss","minimal"],"tags":["pricing","slider","usage","saas","calculator"]},{"id":"features-vertical-label-columns","n":"467","title":"Vertical label service columns","summary":"Four tall columns with rotated service names. Hover, click or Enter widens one into a list of services with arrows; the others stay as labels.","platform":"web","type":"section","styles":["swiss","minimal","editorial"],"tags":["features","services","accordion","agency","columns"]},{"id":"navbar-vertical-rail","n":"468","title":"Vertical rail navbar","summary":"A fixed 88px left rail for a studio site: rotated wordmark, four numbered links with a pink block that follows the section in view, local time at the foot.","platform":"web","type":"component","styles":["brutalist","riso"],"tags":["navbar","rail","portfolio","scrollspy","studio"]},{"id":"widget-now-playing","n":"469","title":"Vinyl now-playing widget","summary":"A 70s now-playing widget in small and medium sizes: CSS-only album art, a record that spins while playing, a scrubber, and equaliser bars.","platform":"web","type":"component","styles":["retro","playful"],"tags":["widget","music","player","vinyl","scrubber"]},{"id":"phone-wallet-cards","n":"470","title":"Wallet card stack","summary":"Four passes stacked with a 56px peek. Tap one to lift it out with balance, transactions or a code, then hold near the reader for a pulse and a tick.","platform":"mobile-app","type":"screen","styles":["luxe","dark","minimal"],"tags":["wallet","cards","payments","passes","ios","dark"]},{"id":"mockup-watch-faces","n":"471","title":"Watch crown mockup","summary":"A CSS smartwatch with strap, crown and side button; turn the crown (drag, scroll, arrows) to roll through four live faces with snap and rubber-banding.","platform":"web","type":"component","styles":["dark","industrial","kinetic"],"tags":["mockup","watch","wearable","crown","device"]},{"id":"widget-weather-glance","n":"472","title":"Weather glance widget, three sizes","summary":"One frosted weather widget that morphs between small, medium and large, with an animated SVG condition scene and a tappable hourly strip.","platform":"web","type":"component","styles":["glass","soft"],"tags":["weather","widget","forecast","sizes","hourly"]},{"id":"webgl-shader-hero","n":"473","title":"WebGL shader hero","summary":"A hero whose background is a raw WebGL fragment shader: slow domain-warped noise in navy, glacier blue and ice, nudged by the pointer, with a CSS fallback.","platform":"web","type":"section","styles":["dark","minimal"],"tags":["webgl","shader","hero","noise","background"]},{"id":"week-schedule","n":"474","title":"Week schedule","summary":"Seven days for the week of 28 Sep. Tuesday starts pressed. Choosing a block rewrites the line under the title.","platform":"web","type":"section","styles":["editorial","paper"],"tags":["calendar","week","schedule"]},{"id":"chart-bar-week","n":"475","title":"Weekly bar chart","summary":"Seven bars for a yard week. One series, one selected day, and a mono readout. No legend, no second colour, no chart theme.","platform":"web","type":"component","styles":["minimal","industrial"],"tags":["charts","bars","dashboard","week"]},{"id":"dock-editor-tools","n":"476","title":"Whiteboard tool dock","summary":"A floating hard-shadow tool dock for a whiteboard: exclusive tools, a nested shapes flyout, colour swatches, working undo/redo, and a two-row collapse on phones.","platform":"web","type":"component","styles":["playful","paper","brutalist"],"tags":["toolbar","dock","whiteboard","editor","flyout"]},{"id":"winding-ribbon-scroll-story","n":"477","title":"Winding ribbon scroll story","summary":"A thick orange road ribbon winds down the page between alternating step cards, drawing itself as you scroll while a small van drives along it.","platform":"web","type":"section","styles":["playful","organic"],"tags":["scroll","svg","path","storytelling","steps","illustration"]},{"id":"phone-lesson-quiz","n":"478","title":"Word-bank lesson card","summary":"A clay-style language lesson: tap tiles to build a sentence, Check turns into a green or coral banner, hearts drop on a miss, and an SVG flame counts the streak.","platform":"mobile-app","type":"screen","styles":["playful","clay"],"tags":["lesson","quiz","language","tiles","streak"]},{"id":"onboarding-workspace-setup","n":"479","title":"Workspace setup with live preview","summary":"A three-step create-your-workspace flow: name and checked URL, colour and mark, email invites. A live sidebar preview updates as you type, then builds itself.","platform":"web","type":"screen","styles":["bauhaus","minimal"],"tags":["onboarding","workspace","form","preview","invite"]},{"id":"widget-world-clocks","n":"480","title":"World clocks meeting planner","summary":"Six city rows with 24-hour day/night bands and one shared cursor. Drag a band or the slider to scrub time across every city at once.","platform":"web","type":"component","styles":["swiss","minimal"],"tags":["clock","timezone","meeting","scheduler","slider"]},{"id":"game-lobby","n":"481","title":"Bramble parlour lobby","summary":"Four seats in Parlour 4, a copyable room code, one ready toggle, and a host Start that stays off until two players are ready, then a one-line deal.","platform":"web","type":"screen","styles":["editorial","soft"],"tags":["lobby","multiplayer","ready","room"]},{"id":"shot-callout-pins","n":"482","title":"Callouts on a review still","summary":"Four numbered pins beside a checkout still. The open pin draws a line to one note. Arrow keys move it.","platform":"web","type":"component","styles":["editorial","minimal"],"tags":["annotation","callout","review","screenshot"]},{"id":"phone-code-entry","n":"483","title":"Chitthi code entry","summary":"Six digit boxes for a masked Nepal mobile. Paste fills them, a wrong code shakes, and Resend waits 30 seconds.","platform":"mobile-app","type":"screen","styles":["editorial","minimal"],"tags":["auth","otp","phone","ios"]},{"id":"phone-app-lock","n":"484","title":"Coffer drawer lock","summary":"An in-app drawer lock with a fingerprint beat, a square keypad, and one home row after it opens.","platform":"mobile-app","type":"screen","styles":["luxe","dark"],"tags":["auth","lock","biometric","phone","ios"]},{"id":"phone-delete-account","n":"485","title":"Delete account with a 30-day undo","summary":"A dark iOS delete-account flow: a concrete list of what goes, export first, a one-line grace period, type-your-email confirm, and a scheduled state with a live countdown and Undo.","platform":"mobile-app","type":"screen","styles":["dark","minimal"],"tags":["settings","account","delete","destructive","confirmation","ios"]},{"id":"game-hud","n":"486","title":"Duskwell mission HUD","summary":"Duskwell chrome over a still night ridge: score, lives, wave, a minimap, and a pause menu that opens on P.","platform":"web","type":"screen","styles":["cyber","dark"],"tags":["hud","pause","minimap","overlay","wave"]},{"id":"phone-account-edit","n":"487","title":"Edit profile with live username check","summary":"An iOS edit-profile screen: change photo sheet, live username availability, bio counter, unverified email with resend cooldown, and a Save that only wakes on real changes.","platform":"mobile-app","type":"screen","styles":["paper","minimal"],"tags":["profile","account","forms","username","validation","ios"]},{"id":"phone-photo-viewer","n":"488","title":"Full-bleed photo viewer","summary":"Dunlin pages four drawn photos full bleed. Swipe or buttons move, one zoom step returns, and a caption, close control, and page indicator stay on screen.","platform":"mobile-app","type":"screen","styles":["dark","editorial"],"tags":["photos","viewer","swipe","zoom","phone"]},{"id":"handwritten-homepage","n":"489","title":"Handwritten homepage","summary":"A first page written as a letter on warm paper: a short nav, a signed opening, and three notes for three pieces of work.","platform":"web","type":"screen","styles":["paper"],"tags":["letter","handwriting","landing","paper","personal"]},{"id":"handwritten-letter","n":"490","title":"Handwritten night letter","summary":"One night letter on a warm dark desk: date, salutation, three short paragraphs, a red margin note, a P.S., and a signature.","platform":"web","type":"screen","styles":["paper","editorial"],"tags":["letter","handwriting","reading","paper","night"]},{"id":"phone-large-text-layout","n":"491","title":"Large text layout rules","summary":"One phone order screen stepped from Small to Accessibility 5. Rows grow, two-column rows stack, icons hold the first line, tab labels never truncate.","platform":"mobile-app","type":"pattern","styles":["dark","minimal"],"tags":["accessibility","dynamic-type","layout","text-size","reflow"]},{"id":"handwritten-style","n":"492","title":"Letter hand kit","summary":"A letter-hand kit sheet: one rule, a title hand beside a body hand, a button, a field, a card, and three lines not to copy.","platform":"web","type":"style","styles":["paper"],"tags":["handwriting","kit","paper","type","buttons"]},{"id":"game-card-table","n":"493","title":"Linnet pairs table","summary":"A 4 by 4 felt table of drawn cards. Flip two, a match stays, a miss turns back, moves count, and the win line names the moves.","platform":"web","type":"screen","styles":["organic","soft"],"tags":["cards","memory","table","keyboard"]},{"id":"three-orbit-object","n":"494","title":"Lit study on a quiet stage","summary":"Drag orbits a plaster massing on a quiet stage, with one key light and a dim fill so a face goes dark as it turns.","platform":"web","type":"component","styles":["dark","minimal"],"tags":["mockup","webgl","orbit","lighting","architecture"]},{"id":"live-cursors-board","n":"495","title":"Live cursors on a board","summary":"Three named cursors on a rehearsal floor plan. Yours follows the pointer. Click a set piece to claim it.","platform":"web","type":"component","styles":["editorial","paper"],"tags":["cursor","collaboration","board","presence"]},{"id":"three-room-look","n":"496","title":"Look around a small room","summary":"Drag looks around a room with one window on the cut and a jar on a stand. Yaw and pitch stay clamped. Reset faces the window.","platform":"web","type":"section","styles":["editorial","soft"],"tags":["hero","webgl","room","camera","interior"]},{"id":"m3-dialog","n":"497","title":"M3 basic and destructive dialogs","summary":"A centred Briarnote alert over a field note. Leave is a basic dialog; Delete uses the error colour. Esc closes, and the scrim does not.","platform":"mobile-app","type":"screen","styles":["material","editorial"],"tags":["material","dialog","android","alert","overlay"]},{"id":"m3-top-app-bar-scroll","n":"498","title":"M3 collapsing large top app bar","summary":"An Android M3 large top app bar that collapses to the small bar as you scroll, its title gliding and shrinking, with an extended FAB that shrinks on scroll down.","platform":"mobile-app","type":"screen","styles":["material","soft"],"tags":["material","android","app-bar","fab","scroll","list"]},{"id":"m3-list-detail","n":"499","title":"M3 list to detail with predictive back","summary":"An Android Material 3 list that opens a detail screen with a container transform, a small top app bar with back, and a predictive back swipe that reverses it.","platform":"mobile-app","type":"pattern","styles":["material","soft"],"tags":["list","detail","container-transform","back","android","material"]},{"id":"m3-modal-bottom-sheet","n":"500","title":"M3 modal bottom sheet with predictive back","summary":"An Android M3 filter sheet over a trail list: scrim, drag handle, partial and full heights, spring settle, drag to dismiss and a predictive-back shrink.","platform":"mobile-app","type":"component","styles":["material","dark","organic"],"tags":["material","android","bottom-sheet","filters","gesture","spring"]},{"id":"m3-search-results","n":"501","title":"M3 search results","summary":"An Orchardbind search view with a focused filled field, tappable recent searches, live filtering, and an empty line that includes the query.","platform":"mobile-app","type":"screen","styles":["material","organic"],"tags":["material","search","android","filter","empty"]},{"id":"m3-settings-list","n":"502","title":"M3 settings list","summary":"An Android Material 3 settings screen: flat list with primary section headers, 72dp two-line rows, M3 switches with check handles and a radio theme dialog.","platform":"mobile-app","type":"screen","styles":["material","minimal"],"tags":["material","android","settings","switch","dialog","list"]},{"id":"m3-sign-in","n":"503","title":"M3 sign-in with passkey","summary":"An Android Material 3 sign-in: outlined fields with supporting and error text, show and hide password, a tonal passkey button, and a loading filled button.","platform":"mobile-app","type":"screen","styles":["material","soft"],"tags":["sign-in","form","passkey","android","material"]},{"id":"m3-snackbar","n":"504","title":"M3 snackbar with undo","summary":"One Woldwalk snackbar, Trail archived, with Undo. A second archive replaces it. It sits above the home inset and leaves after 4 seconds.","platform":"mobile-app","type":"screen","styles":["material","dark"],"tags":["material","snackbar","android","undo","list"]},{"id":"game-playfield","n":"505","title":"Mallow Court brick rally","summary":"A finishable Mallow Court rally: paddle, bricks, three lives, a score from cleared bricks, Esc to pause, and Play again.","platform":"web","type":"screen","styles":["playful","soft"],"tags":["game","breakout","paddle","canvas","pause"]},{"id":"phone-subscription-manage","n":"506","title":"Manage subscription, honest cancel","summary":"An iOS subscription screen: navy plan card, monthly or yearly with real arithmetic, billing rows, Restore purchases, and a cancel sheet that states the end date and the losses.","platform":"mobile-app","type":"screen","styles":["editorial","minimal"],"tags":["settings","subscription","billing","pricing","cancel","ios"]},{"id":"phone-composer","n":"507","title":"New note composer","summary":"Whinchat's new-note screen. Post stays off until the body has text, four drawn thumbs appear on request, and Cancel opens a discard sheet on a dirty draft.","platform":"mobile-app","type":"screen","styles":["paper","editorial"],"tags":["composer","notes","sheet","phone","ios"]},{"id":"game-title-screen","n":"508","title":"Pebbleline attract screen","summary":"A Pebbleline coin-op attract screen: bezel, looping ledge demo, blinking Press start, high score, and a credit that opens Stage 1.","platform":"web","type":"screen","styles":["pixel","retro"],"tags":["arcade","attract","pixel","title","credits"]},{"id":"phone-checkout","n":"509","title":"Phone checkout","summary":"Threadrow phone checkout with an address, two priced deliveries, and a saved card, where Place order stays off until a speed is picked.","platform":"mobile-app","type":"screen","styles":["minimal","swiss"],"tags":["checkout","delivery","payment","phone","ios"]},{"id":"phone-notification-settings","n":"510","title":"Phone notification settings","summary":"iOS notification settings with a system-off banner, per-category push or email chips, a quiet-hours wheel picker with a live summary, and a lock-screen preview.","platform":"mobile-app","type":"screen","styles":["minimal","organic"],"tags":["settings","notifications","ios","time-picker","toggles"]},{"id":"phone-orders","n":"511","title":"Phone past orders","summary":"A Sablecroft list of past orders with status, date, count, and total, opening in place to items, a status sentence, and a receipt.","platform":"mobile-app","type":"screen","styles":["paper","editorial"],"tags":["orders","receipt","shop","phone","ios"]},{"id":"phone-privacy-data","n":"512","title":"Phone privacy and data","summary":"Dark iOS privacy screen: real system permission states, a deep link to Settings, a tracking switch, a data export that runs requested, preparing, ready, and a confirmed clear.","platform":"mobile-app","type":"screen","styles":["dark","editorial","minimal"],"tags":["settings","privacy","permissions","export","ios"]},{"id":"phone-rating-prompt","n":"513","title":"Phone rating prompt","summary":"An 'Enjoying Brindle?' sheet after a delivered order. Yes hands off to a generic five-star system review alert; Not really opens a private feedback form; Not now backs off.","platform":"mobile-app","type":"pattern","styles":["soft","playful","paper"],"tags":["rating","review","feedback","bottom-sheet","ios"]},{"id":"phone-cart","n":"514","title":"Phone shopping bag","summary":"An iOS bag for Wickmere with three swatched lines, steppers, a cents total pinned to the bar, and one button when the bag is empty.","platform":"mobile-app","type":"screen","styles":["editorial","soft"],"tags":["cart","shop","phone","ios","quantity"]},{"id":"game-leaderboard","n":"515","title":"Quern score ladder","summary":"Today, This week, and All reorder twelve Quern scores. Your row stays marked, and a few rows show places gained or lost.","platform":"web","type":"screen","styles":["swiss","minimal"],"tags":["leaderboard","ranks","tabs","scores"]},{"id":"label-roll-button","n":"516","title":"Rolling label row","summary":"Three full-width rows. Hover, focus, or a click rolls the label up to a second line and turns the row black.","platform":"web","type":"component","styles":["editorial","kinetic"],"tags":["buttons","motion","type","menu"]},{"id":"three-scroll-world","n":"517","title":"Scroll past three path models","summary":"Three chapters beside a canvas. Scroll moves the camera past a gate, a cistern, and a belvedere. Buttons jump.","platform":"web","type":"screen","styles":["editorial","organic"],"tags":["scroll","webgl","camera","chapters","landscape"]},{"id":"chart-scrub-readout","n":"518","title":"Scrub a firing curve","summary":"A 90 minute kiln curve. Drag or press an arrow key. The big number is the degree at that minute.","platform":"web","type":"component","styles":["dark","industrial"],"tags":["charts","line","scrub","dashboard"]},{"id":"phone-skeleton-list","n":"519","title":"Skeleton list swap","summary":"Reedmark opens on a pulsing notice skeleton, then five real rows after 1.4 seconds. Replay runs it again. Reduced motion skips the pulse and the wait.","platform":"mobile-app","type":"screen","styles":["minimal","soft"],"tags":["skeleton","loading","list","phone","replay"]},{"id":"phone-forgot-password","n":"520","title":"Solander password reset","summary":"A grouped phone screen that emails a reset link, then shows that address with Resend held for 30 seconds.","platform":"mobile-app","type":"screen","styles":["paper","organic"],"tags":["auth","password","email","phone","ios"]},{"id":"type-gallery-wall","title":"Gallery Wall","summary":"Quiet confidence. A serif with ink-trap italics over a neutral grotesk.","type":"pairing","tags":["editorial","portfolio"],"href":"/type/gallery-wall"},{"id":"type-the-lounge","title":"The Lounge","summary":"Warm, literary, a little soft. The house pairing of this site.","type":"pairing","tags":["editorial","warm"],"href":"/type/the-lounge"},{"id":"type-newsroom","title":"Newsroom","summary":"Serious reporting with a friendly sans for the furniture.","type":"pairing","tags":["editorial","news"],"href":"/type/newsroom"},{"id":"type-swiss-precision","title":"Swiss Precision","summary":"Grid-first. Tight grotesk, mono for data and captions.","type":"pairing","tags":["swiss","product"],"href":"/type/swiss-precision"},{"id":"type-brutal-grotesk","title":"Brutal Grotesk","summary":"Loud headlines, plain body, nothing in between.","type":"pairing","tags":["brutalist","loud"],"href":"/type/brutal-grotesk"},{"id":"type-maison","title":"Maison","summary":"High-contrast Didone with an airy humanist. Restraint as luxury.","type":"pairing","tags":["luxe","fashion"],"href":"/type/maison"},{"id":"type-studio-display","title":"Studio Display","summary":"Art-school geometry with a calm, readable companion.","type":"pairing","tags":["expressive","studio"],"href":"/type/studio-display"},{"id":"type-developer-docs","title":"Developer Docs","summary":"Neutral, technical, legible at 13px. Built for code next to prose.","type":"pairing","tags":["product","tech"],"href":"/type/developer-docs"},{"id":"type-bookish","title":"Bookish","summary":"Old-style serif reading comfort with a friendly grotesk for UI.","type":"pairing","tags":["editorial","reading"],"href":"/type/bookish"},{"id":"type-poster-condensed","title":"Poster Condensed","summary":"Tall and urgent. Condensed caps with a mono to keep it honest.","type":"pairing","tags":["loud","poster"],"href":"/type/poster-condensed"},{"id":"type-deco-hotel","title":"Deco Hotel","summary":"Thin, tall, 1920s. Geometric sans for the room numbers.","type":"pairing","tags":["deco","luxe"],"href":"/type/deco-hotel"},{"id":"type-atelier","title":"Atelier","summary":"A heavy display serif with a soft, rounded geometric for everything else.","type":"pairing","tags":["fashion","editorial"],"href":"/type/atelier"},{"id":"type-arcade","title":"Arcade","summary":"Bitmap caps over a mono body. Insert coin.","type":"pairing","tags":["pixel","retro"],"href":"/type/arcade"},{"id":"type-hud","title":"HUD","summary":"Angular, technical, cockpit-adjacent. Pairs with cut corners and scanlines.","type":"pairing","tags":["cyber","tech"],"href":"/type/hud"},{"id":"type-candy-clay","title":"Candy Clay","summary":"Puffy, round, delighted. Built for chunky buttons.","type":"pairing","tags":["clay","playful"],"href":"/type/candy-clay"},{"id":"type-friendly-saas","title":"Friendly SaaS","summary":"Modern product sans with a mono for numbers and keys.","type":"pairing","tags":["product","saas"],"href":"/type/friendly-saas"},{"id":"type-devanagari","title":"Devanagari","summary":"A Nepali display serif for headings and amounts. Mukta for the interface. The currency word and the digits share one face.","type":"pairing","tags":["editorial","locale"],"href":"/type/devanagari"},{"id":"type-bauhaus-school","title":"Bauhaus School","summary":"Geometric heavyweight with a mono for the rules.","type":"pairing","tags":["bauhaus","geometric"],"href":"/type/bauhaus-school"},{"id":"type-wide-tech","title":"Wide Tech","summary":"Extended display, crisp neutral body. Feels engineered and expensive.","type":"pairing","tags":["tech","wide"],"href":"/type/wide-tech"},{"id":"type-garden-journal","title":"Garden Journal","summary":"Chunky friendly serif, generous grotesk. Earthy and kind.","type":"pairing","tags":["organic","warm"],"href":"/type/garden-journal"},{"id":"type-literary","title":"Literary","summary":"Calligraphic Garamond display with a quiet sans for UI.","type":"pairing","tags":["editorial","classic"],"href":"/type/literary"},{"id":"type-riso-zine","title":"Riso Zine","summary":"Monoline heavyweight caps and its own family for body. Photocopied joy.","type":"pairing","tags":["riso","playful"],"href":"/type/riso-zine"},{"id":"type-industrial-label","title":"Industrial Label","summary":"Tall stencil-adjacent caps and a workhorse sans.","type":"pairing","tags":["industrial","utility"],"href":"/type/industrial-label"},{"id":"type-letter-hand","title":"Letter Hand","summary":"The whole site is handwritten. A loose script for titles, a clear printed hand for everything you read.","type":"pairing","tags":["playful","personal"],"href":"/type/letter-hand"},{"id":"type-handwritten-notes","title":"Handwritten Notes","summary":"A real hand for annotations, a neutral grotesk for the rest.","type":"pairing","tags":["playful","personal"],"href":"/type/handwritten-notes"},{"id":"type-slab-ledger","title":"Slab Ledger","summary":"Sturdy slab with a mono. Ledgers, receipts, honesty.","type":"pairing","tags":["utility","finance"],"href":"/type/slab-ledger"},{"id":"type-red-hat","title":"Red Hat Pair","summary":"One superfamily: display and mono designed together.","type":"pairing","tags":["product","superfamily"],"href":"/type/red-hat"},{"id":"type-y2k-chrome","title":"Y2K Chrome","summary":"Wide, sci-fi, millennium. Wants bevels and sparkles.","type":"pairing","tags":["y2k","retro"],"href":"/type/y2k-chrome"},{"id":"type-signal-mono","title":"Signal Mono","summary":"Space-age grotesk and its mono sibling. Tech without coldness.","type":"pairing","tags":["tech","product"],"href":"/type/signal-mono"},{"id":"type-playground","title":"Playground","summary":"Round and bouncy with a sturdy, readable body.","type":"pairing","tags":["playful","friendly"],"href":"/type/playground"},{"id":"type-magazine-contrast","title":"Magazine Contrast","summary":"Display serif and its matched sans, designed as a pair.","type":"pairing","tags":["editorial","superfamily"],"href":"/type/magazine-contrast"},{"id":"type-neo-grotesk-mono","title":"Neo Grotesk Mono","summary":"Scandinavian grotesk with a characterful mono.","type":"pairing","tags":["swiss","product"],"href":"/type/neo-grotesk-mono"},{"id":"type-variable-expressive","title":"Variable Expressive","summary":"A width-and-weight variable display with a crisp body. Begs to animate.","type":"pairing","tags":["kinetic","variable"],"href":"/type/variable-expressive"},{"id":"type-academic","title":"Academic","summary":"A screen-first book serif with a civic sans.","type":"pairing","tags":["editorial","civic"],"href":"/type/academic"},{"id":"type-cinema","title":"Cinema","summary":"Poster-tall condensed caps over a bookish serif. Credits energy.","type":"pairing","tags":["poster","editorial"],"href":"/type/cinema"},{"id":"type-monumental","title":"Monumental","summary":"Roman inscriptional caps with a refined text serif.","type":"pairing","tags":["classic","luxe"],"href":"/type/monumental"},{"id":"type-terminal-native","title":"Terminal Native","summary":"A mono that reads like prose, with a plain sans for marketing copy.","type":"pairing","tags":["terminal","tech"],"href":"/type/terminal-native"},{"id":"type-neon-marquee","title":"Neon Marquee","summary":"Inline tube lettering with a geometric sans. Use once, big.","type":"pairing","tags":["retro","deco"],"href":"/type/neon-marquee"},{"id":"type-indie-maker","title":"Indie Maker","summary":"One variable family doing both jobs at two optical sizes.","type":"pairing","tags":["single-family","product"],"href":"/type/indie-maker"},{"id":"type-ai-editorial","title":"AI Editorial","summary":"The 2026 look: a delicate serif with a precise mono. Thoughtful machines.","type":"pairing","tags":["editorial","tech"],"href":"/type/ai-editorial"},{"id":"type-lettera","title":"Lettera","summary":"Classic high-contrast serif with a warm sans. Timeless, never wrong.","type":"pairing","tags":["classic","editorial"],"href":"/type/lettera"},{"id":"type-pixel-soft","title":"Pixel Soft","summary":"A friendly pixel face with a hyper-legible sans. Retro without the eye strain.","type":"pairing","tags":["pixel","friendly"],"href":"/type/pixel-soft"},{"id":"type-classic-garamond","title":"Classic Garamond","summary":"The book face of record, with a sober grotesk for navigation.","type":"pairing","tags":["classic","reading"],"href":"/type/classic-garamond"},{"id":"type-geometric-modern","title":"Geometric Modern","summary":"Clean geometric sans in two weights. The safe-but-sharp product default.","type":"pairing","tags":["product","single-family"],"href":"/type/geometric-modern"},{"id":"theme-paper-ink","title":"Paper & Ink","summary":"Warm newsprint. The default of a well-printed book, not a template.","type":"theme","tags":["paper","editorial","warm"],"href":"/themes/paper-ink"},{"id":"theme-night-desk","title":"Night Desk","summary":"A lamp over a dark table. Warm paper type on near-black.","type":"theme","tags":["dark","warm","editorial"],"href":"/themes/night-desk"},{"id":"theme-alpine-clinic","title":"Alpine Clinic","summary":"Cool, washed, trustworthy. Mint air and a precise teal.","type":"theme","tags":["soft","health","cool"],"href":"/themes/alpine-clinic"},{"id":"theme-harbour-ledger","title":"Harbour Ledger","summary":"Navy wool, cream paper, a brass stamp.","type":"theme","tags":["luxe","finance","classic"],"href":"/themes/harbour-ledger"},{"id":"theme-kiln","title":"Kiln","summary":"Fired clay, sand, charcoal. A studio that still has dust on the floor.","type":"theme","tags":["organic","warm","craft"],"href":"/themes/kiln"},{"id":"theme-signal-green","title":"Signal Green","summary":"A terminal that grew up. Phosphor on soot, no nostalgia drag.","type":"theme","tags":["terminal","dark","tech"],"href":"/themes/signal-green"},{"id":"theme-atelier-noir","title":"Atelier Noir","summary":"Bone type on black. Luxury as the absence of extra lines.","type":"theme","tags":["luxe","dark","fashion"],"href":"/themes/atelier-noir"},{"id":"theme-loam","title":"Loam","summary":"Garden journal. Olive, cream, a rust that looks like soil.","type":"theme","tags":["organic","warm","editorial"],"href":"/themes/loam"},{"id":"theme-ice-station","title":"Ice Station","summary":"Pale, northern, a little severe. Blue-gray air.","type":"theme","tags":["cool","minimal","civic"],"href":"/themes/ice-station"},{"id":"theme-press-room","title":"Press Room","summary":"Newsprint and one red. Headlines do the shouting.","type":"theme","tags":["editorial","swiss","loud"],"href":"/themes/press-room"},{"id":"theme-velvet-club","title":"Velvet Club","summary":"Burgundy walls, a gold rail, last orders at two.","type":"theme","tags":["luxe","dark","deco"],"href":"/themes/velvet-club"},{"id":"theme-greenhouse","title":"Greenhouse","summary":"Leaf-filtered light. Soft, wet, growing.","type":"theme","tags":["organic","playful","soft"],"href":"/themes/greenhouse"},{"id":"theme-circuit","title":"Circuit","summary":"Engineered and a little expensive. Lime on charcoal.","type":"theme","tags":["industrial","dark","tech"],"href":"/themes/circuit"},{"id":"theme-marble-hall","title":"Marble Hall","summary":"White stone, dove shadows, a brass plaque.","type":"theme","tags":["classic","luxe","civic"],"href":"/themes/marble-hall"},{"id":"theme-cinder","title":"Cinder","summary":"Yard ops. Safety orange on poured concrete.","type":"theme","tags":["industrial","utility","loud"],"href":"/themes/cinder"},{"id":"theme-sakura-desk","title":"Sakura Desk","summary":"Blush paper, black ink, one stamp of red.","type":"theme","tags":["paper","soft","editorial"],"href":"/themes/sakura-desk"},{"id":"theme-observatory","title":"Observatory","summary":"Deep navy, star-gold, a little ice on the glass.","type":"theme","tags":["dark","luxe","cool"],"href":"/themes/observatory"},{"id":"theme-market-stall","title":"Market Stall","summary":"Turmeric, tomato, kraft paper. Loud in a friendly way.","type":"theme","tags":["playful","warm","organic"],"href":"/themes/market-stall"},{"id":"theme-fog-city","title":"Fog City","summary":"Cool gray, white, one cobalt. Civic and calm.","type":"theme","tags":["minimal","cool","product"],"href":"/themes/fog-city"},{"id":"theme-archive","title":"Archive","summary":"Manila folders, faded navy, a stamp of red.","type":"theme","tags":["paper","retro","editorial"],"href":"/themes/archive"},{"id":"theme-neon-alley","title":"Neon Alley","summary":"Black wet street, magenta and cyan tubes.","type":"theme","tags":["cyber","dark","y2k"],"href":"/themes/neon-alley"},{"id":"theme-linen-shop","title":"Linen Shop","summary":"Flax, clay, sage. Washed twice so it arrives soft.","type":"theme","tags":["soft","organic","fashion"],"href":"/themes/linen-shop"},{"id":"theme-copper-works","title":"Copper Works","summary":"Soot walls, a copper pipe, cream labels.","type":"theme","tags":["industrial","warm","craft"],"href":"/themes/copper-works"},{"id":"theme-glacier","title":"Glacier","summary":"Almost white, a glacial blue, slate type.","type":"theme","tags":["minimal","cool","soft"],"href":"/themes/glacier"},{"id":"theme-festival","title":"Festival","summary":"Two inks, one drum. Fluoro pink on indigo cream.","type":"theme","tags":["riso","playful","loud"],"href":"/themes/festival"},{"id":"theme-courtroom","title":"Courtroom","summary":"Deep green leather, cream paper, a gold rule.","type":"theme","tags":["classic","luxe","civic"],"href":"/themes/courtroom"},{"id":"theme-playroom","title":"Playroom","summary":"Butter walls, coral buttons, a navy that keeps it honest.","type":"theme","tags":["playful","clay","soft"],"href":"/themes/playroom"},{"id":"theme-oxide","title":"Oxide","summary":"Rusted metal, olive, bone. A shed that still works.","type":"theme","tags":["industrial","organic","warm"],"href":"/themes/oxide"},{"id":"theme-y2k-chrome","title":"Y2K Chrome","summary":"Ice silver, bevels, one electric blue. Millennium optimism.","type":"theme","tags":["y2k","retro","playful"],"href":"/themes/y2k-chrome"},{"id":"theme-hud-teal","title":"HUD Teal","summary":"Cockpit glass. Signal teal, scanline black.","type":"theme","tags":["cyber","dark","tech"],"href":"/themes/hud-teal"},{"id":"theme-lokta","title":"Lokta","summary":"Lokta paper, flag crimson, navy ink. A Nepali surface, not a Western fintech skin.","type":"theme","tags":["paper","warm","editorial"],"href":"/themes/lokta"},{"id":"theme-lokta-night","title":"Lokta Night","summary":"The same crimson on navy after dark. The paper colour moves into the type.","type":"theme","tags":["dark","warm","editorial"],"href":"/themes/lokta-night"},{"id":"theme-harbour-night","title":"Harbour Night","summary":"The same ledger after the lamps go down. Cream type, a brighter brass stamp.","type":"theme","tags":["luxe","finance","dark"],"href":"/themes/harbour-night"},{"id":"theme-alpine-night","title":"Alpine Night","summary":"The clinic after hours. Mint light on a deep pine glass.","type":"theme","tags":["soft","health","dark"],"href":"/themes/alpine-night"},{"id":"theme-loam-dusk","title":"Loam Dusk","summary":"The garden at dusk. Olive shadows, a rust that glows.","type":"theme","tags":["organic","warm","dark"],"href":"/themes/loam-dusk"},{"id":"theme-polar-night","title":"Polar Night","summary":"The station in winter. Blue-black air, one amber lamp.","type":"theme","tags":["cool","minimal","dark"],"href":"/themes/polar-night"},{"id":"theme-night-edition","title":"Night Edition","summary":"The late edition. Newsprint white on press black, the same red.","type":"theme","tags":["editorial","swiss","dark"],"href":"/themes/night-edition"},{"id":"theme-greenhouse-night","title":"Greenhouse Night","summary":"Grow lights after dark. Soft green on deep leaf.","type":"theme","tags":["organic","playful","dark"],"href":"/themes/greenhouse-night"},{"id":"theme-basalt-hall","title":"Basalt Hall","summary":"The hall after closing. Dark stone, the brass plaque lit.","type":"theme","tags":["classic","luxe","dark"],"href":"/themes/basalt-hall"},{"id":"theme-night-shift","title":"Night Shift","summary":"The yard under floodlights. Safety orange on wet asphalt.","type":"theme","tags":["industrial","utility","dark"],"href":"/themes/night-shift"},{"id":"theme-sakura-night","title":"Sakura Night","summary":"The desk by lamplight. Blush type on plum ink, the red stamp brighter.","type":"theme","tags":["paper","soft","dark"],"href":"/themes/sakura-night"},{"id":"theme-night-market","title":"Night Market","summary":"The stalls after sunset. Turmeric and tomato under bulbs.","type":"theme","tags":["playful","warm","dark"],"href":"/themes/night-market"},{"id":"theme-fog-night","title":"Fog Night","summary":"The city at night. Slate, white type, the same cobalt brighter.","type":"theme","tags":["minimal","cool","dark"],"href":"/themes/fog-night"},{"id":"theme-reading-room","title":"Reading Room","summary":"The archive after hours. Manila type on dark oak, a red stamp.","type":"theme","tags":["paper","retro","dark"],"href":"/themes/reading-room"},{"id":"theme-glacier-night","title":"Glacier Night","summary":"Ice under moonlight. Slate dark, a glacial blue that glows.","type":"theme","tags":["minimal","cool","dark"],"href":"/themes/glacier-night"},{"id":"theme-festival-night","title":"Festival Night","summary":"The second night of the festival. Cream ink on indigo, fluoro pink.","type":"theme","tags":["riso","playful","dark"],"href":"/themes/festival-night"},{"id":"theme-chambers","title":"Chambers","summary":"The judge's chambers at night. Green leather dark, a gold rule.","type":"theme","tags":["classic","luxe","dark"],"href":"/themes/chambers"},{"id":"theme-bedtime","title":"Bedtime","summary":"The playroom with the lights low. Butter type on a navy blanket.","type":"theme","tags":["playful","clay","dark"],"href":"/themes/bedtime"},{"id":"theme-oxide-night","title":"Oxide Night","summary":"The shed with the door shut. Rust glowing on dark iron.","type":"theme","tags":["industrial","organic","dark"],"href":"/themes/oxide-night"},{"id":"theme-chrome-midnight","title":"Chrome Midnight","summary":"The mixtape at midnight. Gunmetal, the same electric blue.","type":"theme","tags":["y2k","retro","dark"],"href":"/themes/chrome-midnight"},{"id":"theme-signal-paper","title":"Signal Paper","summary":"The terminal printed out. Green-black type on pale paper.","type":"theme","tags":["terminal","tech","light"],"href":"/themes/signal-paper"},{"id":"theme-matinee","title":"Matinee","summary":"The club in the afternoon. Rose plaster, burgundy, a gold rail.","type":"theme","tags":["luxe","deco","light"],"href":"/themes/matinee"},{"id":"theme-circuit-bench","title":"Circuit Bench","summary":"The test bench in daylight. Charcoal type, a deep lime.","type":"theme","tags":["industrial","tech","light"],"href":"/themes/circuit-bench"},{"id":"theme-planetarium","title":"Planetarium","summary":"The observatory by day. Pale sky, navy type, a gold chart line.","type":"theme","tags":["luxe","cool","light"],"href":"/themes/planetarium"},{"id":"theme-arcade-day","title":"Arcade Day","summary":"The arcade with the shutters up. Lilac light, magenta and teal.","type":"theme","tags":["cyber","y2k","light"],"href":"/themes/arcade-day"},{"id":"theme-cockpit-day","title":"Cockpit Day","summary":"The cockpit in sunlight. Pale glass, ink type, signal teal.","type":"theme","tags":["cyber","tech","light"],"href":"/themes/cockpit-day"},{"id":"theme-inkwell","title":"Inkwell","summary":"A letter on warm paper. Blue-black ink, one red correction.","type":"theme","tags":["paper","warm","light"],"href":"/themes/inkwell"},{"id":"theme-lamp-desk","title":"Lamp Desk","summary":"The same letter after dark. Warm ink on a brown desk.","type":"theme","tags":["paper","warm","dark"],"href":"/themes/lamp-desk"},{"id":"theme-coin-op","title":"Coin-op","summary":"A cabinet in a dark arcade. Amber coin light, CRT green.","type":"theme","tags":["pixel","retro","dark"],"href":"/themes/coin-op"},{"id":"theme-ticket-booth","title":"Ticket Booth","summary":"The arcade in daylight. Cream tickets, a red stamp, green ink.","type":"theme","tags":["pixel","retro","light"],"href":"/themes/ticket-booth"},{"id":"kit","title":"Compose a kit","summary":"Pick a kind, a palette, a pairing and a family. Get a brief.","type":"map","href":"/kit"},{"id":"surface-web","title":"Websites","summary":"The kind of site. Open one, then the screens that belong to it.","type":"start","tags":["web"],"href":"/start#web"},{"id":"surface-app","title":"Apps","summary":"The kind of phone. A bank, a clinic, a shop in the hand.","type":"start","tags":["app"],"href":"/start#app"},{"id":"start-real-estate","title":"Real estate","summary":"One home, its plan, a viewing, the monthly cost.","type":"start","tags":["Live","marble-hall","gallery-wall"],"href":"/start#real-estate"},{"id":"start-restaurant","title":"A restaurant","summary":"Hours today, the menu with prices, a table.","type":"start","tags":["Eat","velvet-club","riso-zine"],"href":"/start#restaurant"},{"id":"start-education","title":"A school or course","summary":"What you learn, the lessons, the dates, how to apply.","type":"start","tags":["Learn","paper-ink","academic"],"href":"/start#education"},{"id":"start-jobs","title":"A job board","summary":"Search, filters, one job beside the list.","type":"start","tags":["Work","fog-city","swiss-precision"],"href":"/start#jobs"},{"id":"start-nonprofit","title":"A nonprofit","summary":"The story, what each amount does, the goal.","type":"start","tags":["Give","kiln","garden-journal"],"href":"/start#nonprofit"},{"id":"start-clinic","title":"A clinic","summary":"The next free slot, the doctors, the hours, the map.","type":"start","tags":["Care","alpine-clinic","friendly-saas"],"href":"/start#clinic"},{"id":"start-gym","title":"A gym","summary":"A loud poster, the timetable, the price, a free class.","type":"start","tags":["Train","cinder","poster-condensed"],"href":"/start#gym"},{"id":"start-professional","title":"A firm","summary":"One serious sentence, the practice areas, a private form.","type":"start","tags":["Advise","courtroom","maison"],"href":"/start#professional"},{"id":"start-marketing-site","title":"A marketing site","summary":"Hero, nav, proof, pricing, FAQ, contact, footer. Assemble a public site from pieces that already agree.","type":"start","tags":["Website","paper-ink","the-lounge"],"href":"/start#marketing-site"},{"id":"start-saas","title":"A SaaS site","summary":"A tool people subscribe to. One product window, the price, the questions.","type":"start","tags":["Product","fog-city","friendly-saas"],"href":"/start#saas"},{"id":"start-portfolio","title":"A portfolio","summary":"Index, case study, a horizontal rail, a masthead. Steal a structure, keep your personality.","type":"start","tags":["Personal","atelier-noir","gallery-wall"],"href":"/start#portfolio"},{"id":"start-portfolio-builder","title":"A builder’s portfolio","summary":"For people who ship software. The projects are small working screens, not a list of names.","type":"start","tags":["Personal","kiln","indie-maker"],"href":"/start#portfolio-builder"},{"id":"start-fintech","title":"Fintech","summary":"A card, a price, one number. The page stays light.","type":"start","tags":["Finance","harbour-ledger","friendly-saas"],"href":"/start#fintech"},{"id":"start-fashion","title":"Fashion","summary":"A lookbook and one garment. The name is the largest type.","type":"start","tags":["Look","linen-shop","maison"],"href":"/start#fashion"},{"id":"start-food","title":"A food shop","summary":"What is for sale, then the hours. A local shop, not a craft catalogue.","type":"start","tags":["Food","loam","garden-journal"],"href":"/start#food"},{"id":"start-wellness","title":"Wellness","summary":"One retreat, the dates, a way to write.","type":"start","tags":["Stay","alpine-clinic","garden-journal"],"href":"/start#wellness"},{"id":"start-hotel","title":"A hotel","summary":"The room, the hours, a map. Bone type on black.","type":"start","tags":["Stay","atelier-noir","maison"],"href":"/start#hotel"},{"id":"start-agency","title":"An agency","summary":"The work on the wall, the people, the open roles.","type":"start","tags":["Studio","night-desk","brutal-grotesk"],"href":"/start#agency"},{"id":"start-docs","title":"Documentation","summary":"Three columns, a snippet, a way to search the tree.","type":"start","tags":["Docs","fog-city","developer-docs"],"href":"/start#docs"},{"id":"start-music","title":"A music site","summary":"The showreel, a moving line, a player in the corner.","type":"start","tags":["Music","neon-alley","y2k-chrome"],"href":"/start#music"},{"id":"start-personal-site","title":"A personal site","summary":"A name, a journal, one essay. Not a showreel.","type":"start","tags":["Personal","sakura-desk","the-lounge"],"href":"/start#personal-site"},{"id":"start-event","title":"An event","summary":"The date, the board, one ask.","type":"start","tags":["Night","festival","poster-condensed"],"href":"/start#event"},{"id":"start-museum","title":"A museum","summary":"The works, a caption, a long note.","type":"start","tags":["Rooms","marble-hall","the-lounge"],"href":"/start#museum"},{"id":"start-landing","title":"A landing page","summary":"One argument, one sitting. Fashion, wellness, fintech, a tool, an agency — each a complete first page.","type":"start","tags":["Launch","atelier-noir","maison"],"href":"/start#landing"},{"id":"start-mobile-app","title":"A mobile app","summary":"iOS 26 glass and Material 3 Expressive, plus the PWA moments in between. Native feel, web materials.","type":"start","tags":["App","alpine-clinic","geometric-modern"],"href":"/start#mobile-app"},{"id":"start-design-system","title":"A design system","summary":"Start with a language kit, then lock type, colour, icons and motion before drawing a single screen.","type":"start","tags":["System","paper-ink","the-lounge"],"href":"/start#design-system"},{"id":"start-dashboard","title":"A dashboard","summary":"Dense tables, one metric, a collapsing rail, a board. A finance palette with a dashboard face, not a docs face.","type":"start","tags":["Product","harbour-ledger","swiss-precision"],"href":"/start#dashboard"},{"id":"start-web-app","title":"A web app","summary":"The product people log into. A sidebar, the work, an empty state, the account.","type":"start","tags":["Product","fog-city","friendly-saas"],"href":"/start#web-app"},{"id":"start-commerce","title":"A shop","summary":"Collection, one product, the bag, then checkout. The name is the largest type. The total is the largest type on the bag.","type":"start","tags":["Commerce","kiln","atelier"],"href":"/start#commerce"},{"id":"start-tablet","title":"A tablet","summary":"Landscape. A split, a sidebar, a reader, a tool palette, an ops grid. Not a phone layout pulled wide.","type":"start","tags":["Tablet","press-room","newsroom"],"href":"/start#tablet"},{"id":"start-editorial","title":"An editorial product","summary":"Type does the work: magazine grids, kinetic headlines, a reader with a proper measure.","type":"start","tags":["Reading","press-room","newsroom"],"href":"/start#editorial"},{"id":"start-bank","title":"A bank app","summary":"The balance first. Tabs, settings, a passkey.","type":"start","tags":["Finance","harbour-ledger","friendly-saas"],"href":"/start#bank"},{"id":"start-health","title":"A health app","summary":"The rings, the week, a quiet settings list.","type":"start","tags":["Health","alpine-clinic","geometric-modern"],"href":"/start#health"},{"id":"start-messages","title":"Messages","summary":"The inbox, then one thread. A row can swipe.","type":"start","tags":["Mail","fog-city","geometric-modern"],"href":"/start#messages"},{"id":"start-music-app","title":"A music app","summary":"Now playing, and a player that takes the screen.","type":"start","tags":["Music","neon-alley","y2k-chrome"],"href":"/start#music-app"},{"id":"start-news","title":"A news app","summary":"The issue, then the piece. A title that collapses as you read.","type":"start","tags":["News","press-room","newsroom"],"href":"/start#news"},{"id":"start-shop-app","title":"A shop app","summary":"The list, the piece, then one page to pay.","type":"start","tags":["Commerce","kiln","atelier"],"href":"/start#shop-app"},{"id":"start-social","title":"A social app","summary":"A feed, a story you hold, a tab bar.","type":"start","tags":["Feed","playroom","geometric-modern"],"href":"/start#social"},{"id":"start-weather","title":"Weather","summary":"The hour under your thumb. The title gets out of the way.","type":"start","tags":["Sky","ice-station","geometric-modern"],"href":"/start#weather"},{"id":"start-field","title":"A field app","summary":"Today’s run, an empty list, a failed load.","type":"start","tags":["Ops","cinder","swiss-precision"],"href":"/start#field"},{"id":"start-personal","title":"A personal app","summary":"One person and their number. Lokta and Devanagari when the product is Nepali. Not a staff dashboard.","type":"start","tags":["Personal","lokta","devanagari"],"href":"/start#personal"},{"id":"start-game","title":"A game","summary":"A title screen, a game you can play, a score list, and a room for friends. Three.js when the world is a scene.","type":"start","tags":["Play","coin-op","arcade"],"href":"/start#game"},{"id":"start-notebook","title":"A handwritten site","summary":"The page is a letter. Titles in a loose script, the reading in a clear hand.","type":"start","tags":["Hand","inkwell","letter-hand"],"href":"/start#notebook"},{"id":"map-kit","title":"Compose","summary":"Pick a kind, a palette, a pairing, a family. Get a brief.","type":"map","href":"/kit"},{"id":"map-system","title":"Ingredients","summary":"Type, themes, icons, motion. Pick these first.","type":"map","href":"/system"},{"id":"map-index","title":"By name","summary":"Hero, footer, portfolio, loader — what a designer would call it.","type":"map","href":"/c"},{"id":"map-shelves","title":"By problem","summary":"Curated reading lists: navigation, first impressions, languages.","type":"map","href":"/collections"},{"id":"source-abel","title":"Abel","summary":"A perfume shop. The range, the scent types, a quiz, a journal.","type":"source","href":"/sources#abel"},{"id":"source-igloo","title":"Igloo","summary":"An onchain community. The public HTML is a shell, so the lesson is the mission they publish, not a layout.","type":"source","href":"/sources#igloo"},{"id":"source-dontboardme","title":"Don't Board Me","summary":"In-home pet care. A loud line, then the services, then book.","type":"source","href":"/sources#dontboardme"},{"id":"source-noomo","title":"Noomo","summary":"A Los Angeles studio. 3D stories and sites that stop a scroll.","type":"source","href":"/sources#noomo"},{"id":"source-synchronized","title":"Synchronized","summary":"A digital studio. The word archive repeats until the work is the page.","type":"source","href":"/sources#synchronized"},{"id":"source-mendo","title":"Mendo","summary":"A bookshop in Amsterdam. Books as objects, and a journal beside the shop.","type":"source","href":"/sources#mendo"},{"id":"source-nixon","title":"Nixon","summary":"Watches. The page could not be read from here, so no screen claims it yet.","type":"source","href":"/sources#nixon"},{"id":"source-dragone","title":"Dragone","summary":"Live shows. A dark front, then the shows, the news, and a way to partner.","type":"source","href":"/sources#dragone"},{"id":"source-nothin","title":"Nothin'","summary":"A Paris studio. Ideas, not a pile of content. One line does the work.","type":"source","href":"/sources#nothin"},{"id":"source-stripe","title":"Stripe","summary":"A payments company. One bright ribbon, a light headline, and the product shown working in every card.","type":"source","href":"/sources#stripe"},{"id":"source-usearticle","title":"UseArticle","summary":"A tool that writes and posts articles on a schedule. The page shows the product running, not a picture of it.","type":"source","href":"/sources#usearticle"},{"id":"source-linear","title":"Linear","summary":"A tool for building software. A dark page where the real app is the picture.","type":"source","href":"/sources#linear"},{"id":"source-tailwind","title":"Tailwind CSS docs","summary":"The install page for a CSS framework. Numbered steps, each with its own small code box.","type":"source","href":"/sources#tailwind"},{"id":"source-wickret","title":"Wickret","summary":"A concept bank app page by a studio. One huge headline, toys floating around it, then a phone.","type":"source","href":"/sources#wickret"},{"id":"source-lamalama","title":"Lama Lama","summary":"An Amsterdam agency. A dark page with a dot screen hero and a small bar that talks back.","type":"source","href":"/sources#lamalama"},{"id":"source-mindmarket","title":"MindMarket","summary":"A research agency. Big friendly type on bright green, cartoon people, white cards along a winding path.","type":"source","href":"/sources#mindmarket"},{"id":"source-flist","title":"The F-List","summary":"A watchdog report on ad agencies. Black and yellow, tall narrow type, lines hidden under black bars.","type":"source","href":"/sources#flist"},{"id":"source-bermawy","title":"Bermawy","summary":"A personal site typed on graph paper. A torn photo, clipped cards, a notebook of articles. A toy console plays the talks.","type":"source","href":"/sources#bermawy"},{"id":"source-haunted","title":"Haunted Boulder City","summary":"A ghost walking tour. Fog, night photos and huge narrow type. The story slides sideways as you scroll.","type":"source","href":"/sources#haunted"},{"id":"source-gmx","title":"GMX Digital","summary":"A film studio for buildings that are not built yet. Dark, slow, and it plays like a film.","type":"source","href":"/sources#gmx"},{"id":"source-sibal","title":"Sibal Design","summary":"One designer, shown like a ship screen. You press Enter, it loads, then the work opens in frames.","type":"source","href":"/sources#sibal"},{"id":"source-mwdt","title":"MWDT","summary":"A machine shop. A dark hero card, a steel part, and a button to ask for a quote.","type":"source","href":"/sources#mwdt"},{"id":"source-moremedia","title":"Moremedia","summary":"An agency in Austria. Big tight type, real work, and services you open one at a time.","type":"source","href":"/sources#moremedia"},{"id":"source-susan","title":"Susan Acharya","summary":"A product lead's portfolio. A night valley drawn by hand. Small people play in it while you read.","type":"source","href":"/sources#susan"},{"id":"source-60fps","title":"60fps","summary":"A big library of short clips. Small moments from phone apps, tagged by gesture, pattern and effect.","type":"source","href":"/sources#60fps"},{"id":"source-icm","title":"Icon Museum","summary":"A gallery of app icons. Each one sits on a glass shelf. Click one to see it big with its colours.","type":"source","href":"/sources#icm"},{"id":"shelf-first-impressions","title":"First impressions","summary":"Landing pages, onboarding, empty states and the 404. The screens people meet before they trust you.","type":"shelf","href":"/collections/first-impressions"},{"id":"shelf-website-in-parts","title":"A website, in parts","summary":"Heroes, navs, features, pricing, proof, contact and the sign-off. Assemble a marketing site from pieces that already agree with each other.","type":"shelf","href":"/collections/website-in-parts"},{"id":"shelf-portfolio-sites","title":"Sites that show the work","summary":"Personal and studio portfolios: the index, the case study, the photographer’s rail, the architect’s list. Steal a structure, not a personality.","type":"shelf","href":"/collections/portfolio-sites"},{"id":"shelf-landing-pages","title":"Landing pages with a point of view","summary":"Full first pages for fashion, wellness, fintech, a dev tool and an agency. Each one is a complete argument, not a template.","type":"shelf","href":"/collections/landing-pages"},{"id":"shelf-proof-and-close","title":"Proof, and the close","summary":"Testimonials, logos, FAQs, stats and the last ask. The blocks that turn a visitor into a customer without raising their voice.","type":"shelf","href":"/collections/proof-and-close"},{"id":"shelf-navigation-sorted","title":"Navigation, sorted","summary":"Sidebars, rails, tab bars, drawers and palettes. Every way to get around a product, from a 64px icon rail to a floating glass capsule.","type":"shelf","href":"/collections/navigation-sorted"},{"id":"shelf-loading-states","title":"Loading states that earn the wait","summary":"Skeletons that match their content, loaders with three elements, buttons that carry their own progress. Nothing spins for the sake of spinning.","type":"shelf","href":"/collections/loading-states"},{"id":"shelf-sheets-and-overlays","title":"Sheets, dialogs and things on top","summary":"Bottom sheets with detents, dialogs with real focus traps, toasts that stack, panels that anchor. Layering done with restraint.","type":"shelf","href":"/collections/sheets-and-overlays"},{"id":"shelf-forms-people-finish","title":"Forms people finish","summary":"Steppers, inline validation, one-page checkout, sign-in that respects the keyboard. The boring parts, made unboring by getting the details right.","type":"shelf","href":"/collections/forms-people-finish"},{"id":"shelf-control-set","title":"The control set","summary":"The field, the button, the badge, the alert, the path, and the pages of a list. One control language, before any screen invents a second.","type":"shelf","href":"/collections/control-set"},{"id":"shelf-native-feel","title":"Native feel, web materials","summary":"iOS 26 glass, Material 3 Expressive shapes, and the PWA moments in between: install, offline, update.","type":"shelf","href":"/collections/native-feel"},{"id":"shelf-dashboards-and-data","title":"Dashboards and dense data","summary":"Tables you can live in, KPI rows, boards, bento grids and counters that roll. Density without noise.","type":"shelf","href":"/collections/dashboards-and-data"},{"id":"shelf-motion-with-a-reason","title":"Motion with a reason","summary":"Transitions that explain where things went. Every duration and curve here is doing a job: continuity, hierarchy, or feedback.","type":"shelf","href":"/collections/motion-with-a-reason"},{"id":"shelf-typography-first","title":"Typography does the work","summary":"Pieces where the type is the design: editorial heroes, kinetic marquees, reading pages with a proper measure, spreads that behave like print.","type":"shelf","href":"/collections/typography-first"},{"id":"shelf-design-languages","title":"Whole design languages","summary":"Not a component, a dialect. Each of these is a complete visual grammar you can hand to an agent as the style guide for a product.","type":"shelf","href":"/collections/design-languages"},{"id":"shelf-cursor-play","title":"Cursor and hover play","summary":"Pieces that answer the pointer: magnetic buttons, image trails, letters that get heavier as you approach, cards that tilt and flip.","type":"shelf","href":"/collections/cursor-play"},{"id":"shelf-scroll-driven","title":"Scroll as the timeline","summary":"Motion tied to scroll position, not the clock: stacking cards, clip reveals, sticky stories, collapsing titles, reading progress.","type":"shelf","href":"/collections/scroll-driven"},{"id":"shelf-widgets-and-faces","title":"Widgets and faces","summary":"Clocks, rings, timers and live tiles. The small faces of a bigger app, for home screens, watches and dashboards.","type":"shelf","href":"/collections/widgets-and-faces"},{"id":"shelf-social-cards","title":"Social cards","summary":"Posts, profiles, repos and chat in the shapes people already know, with invented brands.","type":"shelf","href":"/collections/social-cards"},{"id":"shelf-paper-and-objects","title":"Paper and objects","summary":"Tickets, postcards, polaroids, albums and stamps. Real things people recognise, made in CSS.","type":"shelf","href":"/collections/paper-and-objects"},{"id":"shelf-grounds-and-presses","title":"Backgrounds and buttons","summary":"Surfaces to set a page on and buttons worth pressing: gradients, patterns, keycaps, sheens and holds.","type":"shelf","href":"/collections/grounds-and-presses"}]