{"cats":{"404":"404","hero":"Hero sections","login":"Login","signup":"Sign up","forgot":"Forgot password"},"items":[{"id":"hero-rocket-launch","cat":"hero","title":"Launch hero with scroll rocket","desc":"A clean, centered developer-platform hero: headline, a deploy command button, and a rocket that lights its engine and lifts off as visitors scroll, followed by a logo strip and three feature cards.","tags":["light","centered","developer","scroll","launch"],"f":1,"dark":false,"fig":{"k":"live","id":"rocket-launch-scroll","title":"Rocket launch","s":1}},{"id":"hero-laptop-open","cat":"hero","title":"Analytics hero with opening laptop","desc":"A light split hero for a product-analytics tool: headline, an email trial field and checks on the left; on the right a laptop whose lid opens and whose chart grows as visitors scroll.","tags":["light","split","analytics","scroll","email capture"],"f":1,"dark":false,"fig":{"k":"live","id":"laptop-open-scroll","title":"Laptop open","s":1}},{"id":"hero-exploded-stack","cat":"hero","title":"App builder hero with exploded stack","desc":"A light, centered hero with an email sign-up field under the lead and an app screen whose layers lift apart into an exploded view as visitors scroll, then a logo row and three steps.","tags":["light","centered","email capture","scroll","no-code"],"f":1,"dark":false,"fig":{"k":"live","id":"exploded-stack-scroll","title":"Exploded stack","s":1}},{"id":"hero-ai-chip","cat":"hero","title":"Inference cloud hero with AI chip","desc":"A dark split for an AI inference API: the chip sits straight on the page on the left, its cores rising under the pointer, with the headline, live throughput stats and an API call on the right.","tags":["dark","split","ai","interactive","stats"],"f":1,"dark":true,"fig":{"k":"live","id":"ai-chip","title":"AI chip"}},{"id":"hero-checkout-counter","cat":"hero","title":"POS hero with checkout counter","desc":"A warm off-white split hero for a point-of-sale product: copy and offline badges on the left, an interactive checkout counter whose belt follows the pointer on the right, then a numbers strip and three cards.","tags":["light","split","retail","interactive","pos"],"f":1,"dark":false,"fig":{"k":"live","id":"checkout-counter","title":"Checkout counter"}},{"id":"hero-cdn-nodes","cat":"hero","title":"Edge network hero with latency stats","desc":"A clean, centered CDN hero: a live-status eyebrow, two buttons, edge nodes around a globe that rise where the pointer lands, and a four-number latency strip underneath.","tags":["light","centered","interactive","stats","developer"],"f":1,"dark":false,"fig":{"k":"live","id":"cdn-nodes","title":"CDN nodes"}},{"id":"hero-vault-door","cat":"hero","title":"Treasury hero with scroll vault","desc":"A flat near-black banking hero: a round vault door on the left that unlocks as visitors scroll, its wheel spinning and bolts drawing back; on the right the headline, a yield card and calls to action, then a numbers row, three features and a customer quote.","tags":["dark","split","fintech","scroll","banking"],"f":0,"dark":true,"fig":{"k":"live","id":"vault-door-scroll","title":"Vault door","s":1}},{"id":"hero-deploy-cloud","cat":"hero","title":"Hosting hero with deploy cloud","desc":"A light split for app hosting: a laptop wired to a cloud on the left that ships code up the tube as visitors scroll, and the copy on the right with a one-line deploy command.","tags":["light","split","developer","scroll","hosting"],"f":0,"dark":false,"fig":{"k":"live","id":"deploy-cloud-scroll","title":"Deploy cloud","s":1}},{"id":"hero-dashboard-bars","cat":"hero","title":"Analytics hero with growing dashboard","desc":"A centered reporting hero with a row of four metric chips under the buttons; the dashboard below grows its bars one by one and draws a trend line as visitors scroll.","tags":["light","centered","scroll","analytics","metrics"],"f":0,"dark":false,"fig":{"k":"live","id":"dashboard-bars-scroll","title":"Dashboard bars","s":1}},{"id":"hero-code-assistant","cat":"hero","title":"Coding assistant hero in an editor frame","desc":"A dark, centered hero for an AI coding tool with mono details: a file pill, a headline with a code highlight, then the code assistant figure on the page and a benchmark row under it.","tags":["dark","centered","ai","interactive","developer"],"f":0,"dark":true,"fig":{"k":"live","id":"code-assistant","title":"Code assistant"}},{"id":"hero-kanban-board","cat":"hero","title":"Team hero with kanban board","desc":"A centered project-management hero with a team avatar row, an interactive kanban board that lifts cards under the pointer, a sample board in three columns and a customer quote.","tags":["light","centered","project management","interactive","team"],"f":0,"dark":false,"fig":{"k":"live","id":"kanban-board","title":"Kanban board"}},{"id":"hero-data-pipeline","cat":"hero","title":"Data sync hero with pipeline","desc":"A near-black split for a data-sync product: connector chips and two buttons on the left, a pipeline where packets stream into the warehouse as visitors scroll on the right, then three stats.","tags":["dark","split","data","scroll","developer"],"f":0,"dark":true,"fig":{"k":"live","id":"data-pipeline-scroll","title":"Data pipeline","s":1}},{"id":"hero-growth-stairs","cat":"hero","title":"Editorial SEO hero with growth stairs","desc":"A warm cream, editorial hero with a large serif headline and a site-audit field; on the right a run of steps rises into a staircase with a flag climbing it as visitors scroll. A press strip and three numbered steps follow.","tags":["light","editorial","marketing","scroll","serif"],"f":0,"dark":false,"fig":{"k":"live","id":"growth-stairs-scroll","title":"Growth stairs","s":1}},{"id":"hero-crm-pipeline","cat":"hero","title":"CRM hero with deal pipeline","desc":"Copy, buttons and checkmarks on the left; an interactive deal pipeline sitting straight on the page on the right, then three stat columns and a quote.","tags":["light","split","interactive","sales","crm"],"f":0,"dark":false,"fig":{"k":"live","id":"crm-pipeline","title":"CRM pipeline"}},{"id":"hero-telehealth","cat":"hero","title":"Telehealth hero with video cart","desc":"A clean white split for a clinic video-visit product: copy with a HIPAA trust row on the left, an interactive telehealth cart on the right with no box behind it, then three steps.","tags":["light","split","healthcare","interactive","trust"],"f":0,"dark":false,"fig":{"k":"live","id":"telehealth-cart","title":"Telehealth cart"}},{"id":"hero-skyline","cat":"hero","title":"Property management hero with rising skyline","desc":"A light split hero for property-management software: headline, two calls to action and a units line on the left; a city block whose towers rise as visitors scroll on the right. A four-number results strip, logos and three feature columns follow.","tags":["light","split","proptech","scroll","stats"],"f":0,"dark":false,"fig":{"k":"live","id":"skyline-scroll","title":"Skyline","s":1}},{"id":"hero-drone-delivery","cat":"hero","title":"Delivery hero with scroll drone","desc":"A centered same-day delivery hero with a postcode check field, a drone that flies its parcel from pad to pad as visitors scroll, and four delivery stats below.","tags":["light","centered","logistics","scroll","form"],"f":0,"dark":false,"fig":{"k":"live","id":"drone-delivery-scroll","title":"Drone delivery","s":1}},{"id":"hero-dna-helix","cat":"hero","title":"Genomics hero with DNA helix","desc":"A clinical white split ruled with fine lines: a serif headline, buttons and three figures on the left, an interactive DNA helix captioned like a paper figure on the right.","tags":["light","split","interactive","serif","healthcare"],"f":0,"dark":false,"fig":{"k":"live","id":"dna-helix","title":"Dna helix"}},{"id":"hero-credit-card","cat":"hero","title":"Corporate card hero with policy rules","desc":"A flat split for corporate cards and spend: headline, a short list of live policy rules and two buttons on the left; an interactive payment card on the right, straight on the page. Logos, three number cards and a closing band follow.","tags":["light","split","fintech","interactive","cards"],"f":0,"dark":false,"fig":{"k":"live","id":"credit-card","title":"Credit card"}},{"id":"hero-shield-layers","cat":"hero","title":"Compliance hero with shield layers","desc":"A light split for compliance automation: framework progress tiles for SOC 2, ISO 27001, GDPR and HIPAA under the copy, and security rings that rise into a shield as visitors scroll.","tags":["light","split","security","scroll","compliance"],"f":0,"dark":false,"fig":{"k":"live","id":"shield-layers-scroll","title":"Shield layers","s":1}},{"id":"hero-key-unlock","cat":"hero","title":"Password manager hero with key unlock","desc":"The figure on the left, straight on the page, where a key slides into a padlock and turns as visitors scroll; headline, email sign-up and trust tags on the right.","tags":["light","split","scroll","security","email capture"],"f":0,"dark":false,"fig":{"k":"live","id":"key-unlock-scroll","title":"Key unlock","s":1}},{"id":"hero-candle-chart","cat":"hero","title":"Trading terminal hero with live candles","desc":"A near-black trading hero with a price ticker under the nav, fees in mono type, and a candle chart on the page that follows the pointer.","tags":["dark","split","interactive","crypto","mono"],"f":0,"dark":true,"fig":{"k":"live","id":"candle-chart","title":"Candle chart"}},{"id":"hero-integration-orbit","cat":"hero","title":"Integrations hero with app orbit","desc":"A centered white hero for a workflow-automation tool: app chips on both sides of an interactive integration orbit, then a three-step workflow recipe card and three short features.","tags":["light","centered","integrations","interactive","automation"],"f":0,"dark":false,"fig":{"k":"live","id":"integration-orbit","title":"Integration orbit"}},{"id":"hero-chat-stack","cat":"hero","title":"Support hero with chat stack","desc":"A light split for a support inbox: channel chips under the copy and a phone where chat bubbles pop up as visitors scroll, then a logo row and three cards.","tags":["light","split","support","scroll","messaging"],"f":0,"dark":false,"fig":{"k":"live","id":"chat-stack-scroll","title":"Chat stack","s":1}},{"id":"hero-roadmap","cat":"hero","title":"Roadmap hero with travelling pin","desc":"A centered off-white hero with a pill nav; below it a roadmap where a pin travels the road past its milestone flags as visitors scroll.","tags":["light","centered","scroll","product","roadmap"],"f":0,"dark":false,"fig":{"k":"live","id":"roadmap-scroll","title":"Roadmap","s":1}},{"id":"hero-email-automation","cat":"hero","title":"Email automation hero with sign-up","desc":"A serif headline with an email sign-up on the left and an interactive email-automation figure on the right, then three result cards.","tags":["light","split","interactive","serif","email capture"],"f":0,"dark":false,"fig":{"k":"live","id":"email-automation","title":"Email automation"}},{"id":"hero-zero-trust","cat":"hero","title":"Zero-trust hero with access log","desc":"A ruled, white security hero with mono labels: headline, calls to action and a live access log with allowed, denied and step-up badges on the left; interactive zero-trust gates on the right. A compliance row, three ruled columns and a closing call to action follow.","tags":["light","split","security","interactive","mono"],"f":0,"dark":false,"fig":{"k":"live","id":"zero-trust-gates","title":"Zero trust gates"}},{"id":"hero-server-rack","cat":"hero","title":"Database hero with server rack","desc":"A near-black, terminal-style split for managed Postgres: a .env connection-string block in the copy column and a server rack whose sleds slide out as visitors scroll, then a metrics row.","tags":["dark","split","database","scroll","developer"],"f":0,"dark":true,"fig":{"k":"live","id":"server-rack-scroll","title":"Server rack","s":1}},{"id":"hero-storefront","cat":"hero","title":"Shop builder hero with store-name field","desc":"A centered, warm off-white hero for an online-shop builder: a big headline, a store-name claim field, an interactive storefront, and a row of four seller cards, then three numbered steps.","tags":["light","centered","ecommerce","interactive","form"],"f":0,"dark":false,"fig":{"k":"live","id":"storefront","title":"Storefront"}},{"id":"hero-time-zones","cat":"hero","title":"Remote scheduling hero with city times","desc":"Headline, buttons and a row of city time pills on the left; an interactive wall of clocks on the right.","tags":["light","split","interactive","remote","scheduling"],"f":0,"dark":false,"fig":{"k":"live","id":"time-zones","title":"Time zones"}},{"id":"login-card-2fa","cat":"login","title":"Centered card with two-factor","desc":"A centered card on a soft grid: Google and GitHub buttons, email and password, and a note that a 6-digit code comes next. A floating two-factor illustration on top.","tags":["centered","card","2fa","social","light"],"f":1,"dark":false,"fig":{"k":"ill","id":"two-factor-token","title":"Two-factor token"}},{"id":"login-locker-wall","cat":"login","title":"Split login with credential wall","desc":"Illustration panel on a dotted ground with three feature cards, and a clean log-in form with Google and Microsoft buttons on the right.","tags":["split","social","features","light"],"f":1,"dark":false,"fig":{"k":"ill","id":"credential-locker-wall","title":"Credential locker wall"}},{"id":"login-split-door","cat":"login","title":"Split login with SSO door","desc":"Email and password on the left with single sign-on below; an interactive door on the right that swings open as the pointer reaches its badge reader.","tags":["split","sso","interactive","light"],"f":0,"dark":false,"fig":{"k":"live","id":"sso-door","title":"SSO door"}},{"id":"login-dark-vault","cat":"login","title":"Dark vault login","desc":"A dark two-column card: a round vault door whose wheel turns with the pointer, trust stats, and a master-password form.","tags":["dark","security","interactive","card"],"f":0,"dark":true,"fig":{"k":"live","id":"vault-door","title":"Vault door"}},{"id":"login-shield-gate","cat":"login","title":"Floating card with shield gate","desc":"A white sign-in card floating beside a large shield gate that opens as the pointer comes near, with a status badge and a light header.","tags":["floating card","security","interactive","light"],"f":0,"dark":false,"fig":{"k":"live","id":"shield-gate","title":"Shield gate"}},{"id":"login-enterprise-sso","cat":"login","title":"Enterprise SSO login","desc":"Workspace-domain SSO on the right; a dark panel with turnstile lanes that let the pointer through, and a customer quote.","tags":["enterprise","sso","dark panel","interactive"],"f":0,"dark":false,"fig":{"k":"live","id":"access-turnstile","title":"Access turnstile"}},{"id":"login-keyring-minimal","cat":"login","title":"Minimal login with key ring","desc":"A quiet, warm single column: a ring of keys that fan out under the pointer, two pill fields and one button.","tags":["minimal","centered","interactive","warm"],"f":0,"dark":false,"fig":{"k":"live","id":"key-ring","title":"Key ring"}},{"id":"login-passkey","cat":"login","title":"Passkey-first login","desc":"Passwordless sign-in: a big passkey button, an email fallback that folds open, and a floating laptop-and-phone passkey illustration.","tags":["passkey","passwordless","split","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"passkey-sign-in","title":"Passkey sign-in on laptop and phone"}},{"id":"login-magic-link","cat":"login","title":"Magic link login","desc":"Email-only sign-in: one inline field and button, three short steps, and a floating magic-link envelope above.","tags":["magic link","passwordless","centered","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"magic-link-envelope","title":"Magic link email"}},{"id":"login-qr","cat":"login","title":"Login with QR code","desc":"A two-pane card: email and password on one side, scan-to-sign-in with steps and a floating QR illustration on the other.","tags":["qr","two-pane","card","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"qr-code-sign-in","title":"QR code sign-in"}},{"id":"signup-avatar-profile","cat":"signup","title":"Sign up with avatar booth","desc":"A two-column sign-up with first and last name, email, password and terms; an avatar booth on the left that turns its eyes to the pointer.","tags":["split","interactive","profile","light"],"f":1,"dark":false,"fig":{"k":"live","id":"ai-avatar-booth","title":"AI avatar booth"}},{"id":"signup-domain","cat":"signup","title":"Claim your workspace URL","desc":"A bold headline, a workspace-address field with an availability badge, and a floating domain signpost.","tags":["workspace","domain","bold","light"],"f":1,"dark":false,"fig":{"k":"ill","id":"domain-name-plate","title":"Domain name plate"}},{"id":"signup-split-form","cat":"signup","title":"Split sign-up with form block","desc":"Google and GitHub buttons, name, email and a password-strength meter; an interactive form block whose fields lift under the pointer, with customer names below.","tags":["split","social","interactive","light"],"f":0,"dark":false,"fig":{"k":"live","id":"signup-form-block","title":"Signup form block"}},{"id":"signup-steps","cat":"signup","title":"Multi-step sign-up","desc":"Step 2 of 3 in a card: a progress bar, use-case choice cards and a workspace name; stepping stones that rise as steps are done.","tags":["onboarding","steps","card","interactive"],"f":0,"dark":false,"fig":{"k":"live","id":"onboarding-steps","title":"Onboarding steps"}},{"id":"signup-team","cat":"signup","title":"Team sign-up with invites","desc":"A card that overlaps a header band: name, team size, email, password and an invite field; a row of team avatars that rise under the pointer.","tags":["team","invite","centered","interactive"],"f":0,"dark":false,"fig":{"k":"live","id":"team-avatars","title":"Team avatars"}},{"id":"signup-rocket-dark","cat":"signup","title":"Dark sign-up with launch pad","desc":"A dark split with a glowing launch pad whose capsule lifts as the pointer nears; GitHub first, then email.","tags":["dark","developer","split","interactive"],"f":0,"dark":true,"fig":{"k":"live","id":"hero-rocket-free","title":"Hero rocket free"}},{"id":"signup-trial-gift","cat":"signup","title":"Free trial with gift box","desc":"A trial offer with what is included and a $0 today line; a gift box whose lid lifts as the pointer comes close.","tags":["trial","offer","split","interactive"],"f":0,"dark":false,"fig":{"k":"live","id":"gift-box","title":"Gift box"}},{"id":"signup-welcome-door","cat":"signup","title":"Warm welcome sign-up","desc":"A calm, editorial page: an open welcome door, a big \"Come on in.\" headline, name and email in pill fields.","tags":["minimal","warm","editorial","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"welcome-door-mat","title":"Welcome door"}},{"id":"signup-plan-picker","cat":"signup","title":"Sign-up with plan picker","desc":"Choose a plan with radio cards and a monthly or yearly switch, then create the account, side by side.","tags":["pricing","plans","two-panel","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"signup-steps-stairs","title":"Sign-up steps"}},{"id":"signup-verified-seal","cat":"signup","title":"Seller sign-up with verified seal","desc":"A marketplace seller sign-up with shop name and country, and a panel explaining verification in three steps under a floating verified seal.","tags":["marketplace","seller","split","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"verified-badge-seal","title":"Verified account badge"}},{"id":"forgot-front-desk","cat":"forgot","title":"Forgot password at the front desk","desc":"A centered card: \"Lost your key?\", one email field and a back link, under a floating hotel front desk with its key rack.","tags":["centered","card","light"],"f":1,"dark":false,"fig":{"k":"ill","id":"hotel-front-desk","title":"Hotel front desk with key rack"}},{"id":"forgot-shield-lock","cat":"forgot","title":"Split forgot-password with shield","desc":"A plain, reassuring split page: email field, a note that the link expires in 30 minutes, and a floating shield and padlock.","tags":["split","security","light"],"f":1,"dark":false,"fig":{"k":"ill","id":"shield-lock","title":"Shield and padlock"}},{"id":"forgot-key-reset","cat":"forgot","title":"Set a new password","desc":"The last step of a reset: a three-step tracker, new and confirm fields, live password rules with checkmarks, and a floating reset key.","tags":["reset","rules","steps","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"password-reset-key","title":"Password reset with key"}},{"id":"forgot-mailbox","cat":"forgot","title":"Check your inbox","desc":"The screen after \"send link\": open Gmail or Outlook, resend, or change the email; a mailbox whose door drops open and flag goes up as the pointer nears.","tags":["email sent","centered","interactive"],"f":0,"dark":false,"fig":{"k":"live","id":"newsletter-mailbox","title":"Newsletter mailbox"}},{"id":"forgot-padlock-dark","cat":"forgot","title":"Locked out, dark","desc":"A dark card for too many attempts: a status chip, an unlock-link form and an SSO way out, beside a wall of padlocks that spring open under the pointer.","tags":["dark","lockout","card","interactive"],"f":0,"dark":true,"fig":{"k":"live","id":"padlock-wall","title":"Padlock wall"}},{"id":"404-desert","cat":"404","title":"404 in the desert","desc":"A warm, centered 404: \"Nothing out here but cactus.\" with a home button and contact link, under a floating desert dune.","tags":["centered","friendly","warm"],"f":1,"dark":false,"fig":{"k":"ill","id":"desert-cactus-dune","title":"Desert cactus on a dune"}},{"id":"404-road-sign","cat":"404","title":"Wrong turn 404","desc":"A giant 404 with the zero in your brand colour, a short line and two buttons, beside a floating road sign.","tags":["big type","split","light"],"f":1,"dark":false,"fig":{"k":"ill","id":"road-sign","title":"Road sign"}},{"id":"404-lighthouse","cat":"404","title":"Lighthouse 404, dark","desc":"A dark page with a site search: a lighthouse whose beam swings round to find the pointer and lights up when it does.","tags":["dark","search","interactive","new figure"],"f":0,"dark":true,"fig":{"k":"live","id":"lighthouse-404","title":"Lighthouse 404"}},{"id":"404-missing-tile","cat":"404","title":"Missing tile 404","desc":"\"One piece is missing.\" with three helpful link cards: a tiled floor whose lost tile sinks back into its slot as the pointer comes near.","tags":["centered","links","interactive","new figure"],"f":0,"dark":false,"fig":{"k":"live","id":"missing-tile-404","title":"Missing tile 404"}},{"id":"404-ufo","cat":"404","title":"Abducted page 404","desc":"A starry night: \"This page was abducted.\" A saucer drifts over the pointer, and when its beam finds the lost page, it floats up.","tags":["dark","playful","interactive","new figure"],"f":0,"dark":true,"fig":{"k":"live","id":"ufo-404","title":"Ufo 404"}},{"id":"404-signpost-search","cat":"404","title":"404 with search","desc":"A product-site 404 with a full header, a search field with a keyboard hint and popular links, beside a floating 404 signpost.","tags":["search","header","split","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"page-not-found-signpost","title":"404 page not found"}},{"id":"404-satellite","cat":"404","title":"Signal lost 404","desc":"Dark and technical: a \"signal lost\" status, a big 404, a return button and a status-page link, with a floating lost satellite.","tags":["dark","space","big type"],"f":0,"dark":true,"fig":{"k":"ill","id":"lost-satellite-404","title":"Lost satellite 404"}},{"id":"404-broken-link","cat":"404","title":"Broken link 404","desc":"A card that shows the broken address and lets visitors report it in one click, with a floating broken chain.","tags":["card","report","light"],"f":0,"dark":false,"fig":{"k":"ill","id":"broken-link-chain","title":"Broken link chain"}},{"id":"404-desk-lamp","cat":"404","title":"Desk lamp 404","desc":"\"We looked under every lamp.\" Three things to try, as a numbered list; a desk lamp that tips its shade so the light lands under the pointer.","tags":["split","help","interactive","warm"],"f":0,"dark":false,"fig":{"k":"live","id":"desk-lamp","title":"Desk lamp"}},{"id":"404-wayfinding","cat":"404","title":"Where to next 404","desc":"A header band with a wayfinding post whose blades swing toward the pointer, then four big cards to the most useful pages.","tags":["links","cards","interactive","light"],"f":0,"dark":false,"fig":{"k":"live","id":"hospital-signpost","title":"Hospital signpost"}}]}