# Askewly Design > Agent-usable design system SSOT: 3-tier tokens, a cross-surface pattern taxonomy, and component recipes. This index links to raw assets derived from the same source the website uses — values live in the linked files, never here. Generated by scripts/generate-llms-txt.mjs — do not edit by hand. Rules for consumers: reference semantic tokens, never hard-code color/dimension literals; follow each recipe's Checks and Anti-patterns sections. ## Entry Protocol - [docs/design-system/entry-protocol.md](https://ui.askewly.com/llms/docs/design-system/entry-protocol.md): Start here: what to fetch, in what order, per design task type (new screen / improving existing UI / single component) - [docs/design-system/design-brief.md](https://ui.askewly.com/llms/docs/design-system/design-brief.md): Kickoff interview contract: scale gate (when to interview vs skip), 7-domain question catalog (tone, look ownership, color, type, structure, interaction level, content), answers persisted as the project's own DESIGN.md - [docs/design-system/brief-studio.md](https://ui.askewly.com/llms/docs/design-system/brief-studio.md): Visual brief studio contract: show color palettes on a mini UI preview, real font specimens, and touchable interaction demos in the browser; user clicks to choose, selections map into DESIGN.md — text questions are the fallback ## Principles - [docs/design-system/principles.md](https://ui.askewly.com/llms/docs/design-system/principles.md): Canonical Askewly Design principles: task-first hierarchy, semantic tokens, complete interaction states, meaningful motion, and evidence-based publication - [docs/design-system/anti-patterns.md](https://ui.askewly.com/llms/docs/design-system/anti-patterns.md): Agent-facing anti-pattern checklist distilled from all recipe Anti-patterns sections: 12 clusters covering cost integrity, destructive actions, accessible interaction paths, and more - [docs/design-system/style-signature.md](https://ui.askewly.com/llms/docs/design-system/style-signature.md): User-approved style signature: 5 cross-project operating principles + 5 hard-fail dislikes (left-border accent cards, broken Korean word wrap, emoji icons, …) — judge every design output against this - [docs/design-system/identity-layers.md](https://ui.askewly.com/llms/docs/design-system/identity-layers.md): Identity layers: the canonical two-layer split — base layer (portable design judgment, look-neutral, always applies) vs signature layer (Askewly's own visual signature, opt-in via three conditions only) — read this to know when Askewly's look may and may not enter a project - [docs/design-system/copy-language.md](https://ui.askewly.com/llms/docs/design-system/copy-language.md): Copy language policy: site copy is English-only (user-confirmed 2026-07-31 after a Korean-conversion attempt was reverted on observation) — do not re-propose Korean conversion; existing Korean strings stay as-is ## Tokens - [tokens/askewly.tokens.json](https://ui.askewly.com/llms/tokens/askewly.tokens.json): 3-tier design tokens (primitive/semantic/component), DTCG stable 2025.10 format — the single source all colors, dimensions, and typography derive from - [tokens/tokens.css](https://ui.askewly.com/llms/tokens/tokens.css): Ready-to-use CSS custom properties (light + dark) generated from the token SSOT — copy these variables instead of inventing values ## Taxonomy - [docs/design-system/pattern-taxonomy.md](https://ui.askewly.com/llms/docs/design-system/pattern-taxonomy.md): Canonical pattern classification: 7 surfaces, 10 pattern groups, 57 groups - [docs/design-system/naming-canon.md](https://ui.askewly.com/llms/docs/design-system/naming-canon.md): Naming canon: the size ladder the site navigation exposes (Components -> Patterns -> Blocks) plus the character axes (Effects, Colors, Docs), a three-layer map of display name / URL / internal id for every axis, the retired vocabulary and what replaced it, and what is deliberately NOT renamed (the repo recipes/ folder and published asset URLs) - [docs/ui-vocabulary/groups.yml](https://ui.askewly.com/llms/docs/ui-vocabulary/groups.yml): Group axis data (57 groups) referenced by every vocabulary term ## Contracts - [docs/design-system/pipeline-map.md](https://ui.askewly.com/llms/docs/design-system/pipeline-map.md): Pipeline map: how design data flows in (external absorption / self-harvest / vocabulary collection), where it lives (six SSOTs), and how it flows out (llms.txt, website, CLI, HTTP registry, Figma) — links to the contract that owns each gate; unexecuted paths are marked as dotted - [docs/design-system/recipe-format.md](https://ui.askewly.com/llms/docs/design-system/recipe-format.md): Recipe format contract: intent / anatomy / tokens / states / checks / anti-patterns - [docs/design-system/agent-asset-model.md](https://ui.askewly.com/llms/docs/design-system/agent-asset-model.md): How coding agents are expected to consume tokens, taxonomy, and recipes - [docs/design-system/component-restyle.md](https://ui.askewly.com/llms/docs/design-system/component-restyle.md): Component-layer restyle contract: keep shadcn-class behavior guarantees, remap the look to the working project's own tokens — the escape route from the generic shadcn face - [docs/design-system/absorption-criteria.md](https://ui.askewly.com/llms/docs/design-system/absorption-criteria.md): Decision rules for absorbing external expressive libraries: what becomes a canonical recipe, what stays a link reference, what waits - [docs/design-system/block-contract.md](https://ui.askewly.com/llms/docs/design-system/block-contract.md): Block contract: page/app-skeleton-grade composed assets — tier marker (meta.tier), registry representation, layout contract, required-CSS-variable restyle obligation, absorption/attribution rules, and the transplant→restyle→verify consumption path - [docs/design-system/head-meta.md](https://ui.askewly.com/llms/docs/design-system/head-meta.md): Head meta contract: minimum OG/favicon/tab-title obligations for every deployed project — static OG fallback (SPA crawlers never see client-side updates), dual favicon (ico+svg), per-route title override; snippet at templates/head-meta.html.tmpl - [docs/design-system/harvest-contract.md](https://ui.askewly.com/llms/docs/design-system/harvest-contract.md): Harvest contract (input loop): how self-produced deployed surfaces get promoted back into the registry — candidate axes + user-taste gate, standard 6-step promotion (extract, restyle-normalize, requiredCssVars, registry, verification chain, user observation), attribution and dedup rules - [docs/design-system/figma-bridge-contract.md](https://ui.askewly.com/llms/docs/design-system/figma-bridge-contract.md): Figma bridge contract: token SSOT wins (Figma variables are a derived artifact), outgoing sync rules (idempotent upsert, name-preserving, own-collection-only deletes), and the two return lanes — mechanical human-detailing retrieval (push snapshot ledger + diff) vs selective reference absorption - [docs/design-system/decision-format.md](https://ui.askewly.com/llms/docs/design-system/decision-format.md): Decision data contract: how a cluster file encodes the axes that split confusable candidates (axis needs a source URL + confidence; rule order is itself the judgment), and the 요소 결정 report block every decision must leave behind - [docs/design-system/no-asset-fallback.md](https://ui.askewly.com/llms/docs/design-system/no-asset-fallback.md): What to build from when a term has NO recipe and NO code asset (481 of 562 terms): use the term entry itself as material — visual_anatomy as a parts checklist, anti_use as the boundary, related as the neighbour diff. A missing recipe must not stop the work - [docs/ui-vocabulary/term-asset-map.json](https://ui.askewly.com/llms/docs/ui-vocabulary/term-asset-map.json): Generated term↔recipe↔code-asset map: for any term, what exists to build it with. Empty recipes AND code_assets means take the no-asset-fallback path ## Media - [docs/design-system/medium-taxonomy.md](https://ui.askewly.com/llms/docs/design-system/medium-taxonomy.md): Which gate applies to what: screen / print / deck each fail differently, so each is checked differently. Read this BEFORE assuming the screen checklist (states, dark mode) is the whole job — a print piece that passes it can still be broken paper - [docs/design-system/slide-spec.md](https://ui.askewly.com/llms/docs/design-system/slide-spec.md): Slide contract: five canvas presets across PowerPoint/Google Slides/Keynote (16:9 alone does NOT fix the canvas — 13.333in vs 10in), WCAG contrast, and the folklore rules (safe area, 24pt minimum, 6x6) shipped opt-in with an evidence grade attached to every value - [docs/design-system/print-spec.md](https://ui.askewly.com/llms/docs/design-system/print-spec.md): Print contract: trim sizes (KR/US business cards, ISO A4–A1), bleed, safe area, posting margin, 300dpi mm→px conversion, and the validation API. Generated from packages/template-core — the code is canonical ## Knowledge - [knowledge/adjacency-level-lod.md](https://ui.askewly.com/llms/knowledge/adjacency-level-lod.md): Choosing resolution tiers by grid topology distance (Chebyshev ring from the focused cell) instead of screen distance in pixels, so the sharp region keeps the same cell-count shape at any zoom, cell size, or viewport; includes the neighbor-count identity, tier atlas ratios, and the speed-gated promotion rule - [knowledge/checkout-flow.md](https://ui.askewly.com/llms/knowledge/checkout-flow.md): Checkout & conversion-flow rules (Stripe): friction is re-entry not step count — wallet one-click path above the form, never block autofill, address autocomplete as validation; inline validate-while-typing with descriptive localized errors and preemptive typo highlights; trust framing inside the surface (policy links, statement descriptor notice); payment methods/currency/language chosen dynamically by context; upsell restraint (one inline add-on, no forked pages) - [knowledge/commerce-conventions.md](https://ui.askewly.com/llms/knowledge/commerce-conventions.md): What three large commerce services agree on and where they split: sort-order defaults, filter-rail density, whether the cart is a page or a drawer, the sub-44px stepper convention that should not be copied, and the full-bleed breakout trick; each rule tagged as convention signal or option signal - [knowledge/css-reset.md](https://ui.askewly.com/llms/knowledge/css-reset.md): Reset and base-layer contract for non-Tailwind outputs: @layer isolation, mandatory restoration list after all:unset (focus ring first), lineage selection table, the modern sr-only pattern, percentage-based root font sizing — plus one rule that applies to every web surface including Tailwind: always reserve the scrollbar gutter (overflow-y:scroll AND scrollbar-gutter:stable, since the latter is inert while overflow is visible) - [knowledge/customizer-and-packaging.md](https://ui.askewly.com/llms/knowledge/customizer-and-packaging.md): Customizer and packaging rules for handing the system to someone else: which axes to expose (tone, accent, type direction) vs freeze (semantic token names, spacing scale, state strengths, contrast floor), why a tone preset carries radius rather than color alone, what makes generated output actually portable (one editable file, both light and dark faces, variable definitions shipped together with their utility mapping), and the four-part package claim (stack, assets, verification, round-trip) - [knowledge/dark-mode.md](https://ui.askewly.com/llms/knowledge/dark-mode.md): Dark mode judgment rules — definition (a redesigned palette, NOT an inversion), boundary vs night shift / forced-colors / inverted colors, design gates (no pure black, elevation-by-brightness, desaturation, semantic-token-only color), and web implementation gates (3-state model, FOUC head inline script, color-scheme, theme-color media split) - [knowledge/dashboard-density.md](https://ui.askewly.com/llms/knowledge/dashboard-density.md): Dashboard density & low-noise hierarchy rules (Linear 2026 refresh x Geist): density is not noise — keep information, cut borders/icon excess/brightness competition; attention budget (nav recedes after arrival, compact chrome), whitespace-before-borders order, two-tier page background cap, hover/active from adjacent scale steps (never new hues), and the two-step text hierarchy rule - [knowledge/deck-layout-vocabulary.md](https://ui.askewly.com/llms/knowledge/deck-layout-vocabulary.md): Slide layout vocabulary harvested from the /pt production skill: 19 layouts classified by density (low/medium/high/portfolio) and kind (static/interactive), with selection rules — pick by information density first, split when over budget, interactive only when the interaction itself is the evidence - [knowledge/dictionary-site-ia.md](https://ui.askewly.com/llms/knowledge/dictionary-site-ia.md): Dictionary-site IA: dual YAML source-of-truth (content vs navigation), build-time cross-validation gate, reduced core schema, in-memory weighted search — harvested from a production dictionary site - [knowledge/empty-and-error-states.md](https://ui.askewly.com/llms/knowledge/empty-and-error-states.md): Empty-state and error-recovery judgment rules: an empty state must say why it is empty and what to do next (never just 'no data'), empty and error are different states and must not be collapsed, error copy names the cause in user language with a recoverable action, input is preserved across failures, and retry is offered only when retry can actually succeed - [knowledge/expressive-stack.md](https://ui.askewly.com/llms/knowledge/expressive-stack.md): Expressive stack tier map: which rendering tier (CSS/SVG, JS motion orchestration, Canvas 2D + physics, WebGL/three.js) a visual effect belongs to, with a technique-to-tier decision table and mandatory judgment procedure (lower tier first, reduced-motion gating, lazy-load for GPU) - [knowledge/focus-keyboard.md](https://ui.askewly.com/llms/knowledge/focus-keyboard.md): Focus & keyboard discipline for custom widgets and overlays (Radix/WAI-ARIA APG): APG is canon — never invent keyboard behavior; modal contract (trap + focus return to trigger + first-logical-item initial focus + title/description announcement); composite widgets are one Tab stop with roving tabindex, arrows, Home/End, and typeahead; explicit dismiss layer contract (Esc closes top layer only); no unnamed controls - [knowledge/form-fields.md](https://ui.askewly.com/llms/knowledge/form-fields.md): Baseline contract every form field must meet: a visible label (placeholder is not a label), a name attribute, POST for credentials/sensitive data, and correct autocomplete tokens - [knowledge/graph-content-schema.md](https://ui.askewly.com/llms/knowledge/graph-content-schema.md): Graph content schema: independent type axis (7 node types with fixed visual vocabulary) and 3-level hierarchy axis, directed/undirected relation split, provenance.reviewed tracking for machine-generated edges, data-declared overview visibility — harvested from a production knowledge graph - [knowledge/input-modality.md](https://ui.askewly.com/llms/knowledge/input-modality.md): Input-modality judgment rules -- never assume the input device or sensory channel: hover dichotomy (decorative vs reach-path), Pointer Events over mouse events, interactive elements must be real buttons/links, and state changes must reach non-visual channels (aria-pressed/checked/expanded) - [knowledge/landing-section-rhythm.md](https://ui.askewly.com/llms/knowledge/landing-section-rhythm.md): Landing section rhythm: alternating background bands (base/warm/ink) as scroll pacing, single ink band on the process section, identical explanation hierarchy across sections — harvested from a production landing - [knowledge/mobile-navigation.md](https://ui.askewly.com/llms/knowledge/mobile-navigation.md): Mobile navigation & modality container selection rules (Apple HIG x Material 3): one primary nav per screen with a destination-count/breakpoint decision table (nav drawer deprecated by M3 Expressive — prefer expanded rail), nav behavior contract (no swipe switching, preserve-vs-reset state, no hidden tabs), modal surface choice by task weight (snackbar/dialog/modal sheet/full-screen dialog/detents), and the modal-depth-of-one rule - [knowledge/motion-principles.md](https://ui.askewly.com/llms/knowledge/motion-principles.md): Motion quality judgment rules — read BEFORE picking a tier or tool: still-appeal gate (motion cannot rescue a weak still frame), transition purpose taxonomy (continue/create/replace/compare/focus/confirm), one focal element per entrance, motion typography readability, and naming rules (user-facing behavior first, CSS technique second) - [knowledge/motion-references.md](https://ui.askewly.com/llms/knowledge/motion-references.md): External motion/interaction reference bookmarks: GSAP ScrollTrigger demo hubs, spatial 3D landing pattern with its decorative-skin failure gate, observation galleries (60fps.design, landing.love), and the media boundary note for pre-rendered video (Remotion) - [knowledge/onboarding.md](https://ui.askewly.com/llms/knowledge/onboarding.md): Onboarding judgment rules: design toward the first real success (activation) rather than signup completion, cut every step that is not required to reach it, teach in context at the moment of use instead of front-loading slides, and treat the first empty screen as the primary onboarding surface - [knowledge/permission-and-notification.md](https://ui.askewly.com/llms/knowledge/permission-and-notification.md): System-permission and notification judgment rules: never fire an OS permission prompt without an in-app pre-explanation tied to the action that needs it, a denied permission must lead somewhere (never a dead end), one prompt per moment of need, and notifications are chosen by channel and urgency with a visible opt-out on every recurring type - [knowledge/session-persistence-boundary.md](https://ui.askewly.com/llms/knowledge/session-persistence-boundary.md): Deciding what a UI remembers across visits and what it deliberately forgets: user-authored arrangement (position, size, sort order, view mode) persists, while momentary traces (stack order, foreground focus, load flags) are dropped on purpose; includes the observed schema split and how to apply the rule - [knowledge/slide-principles.md](https://ui.askewly.com/llms/knowledge/slide-principles.md): What makes a good presentation slide: 5 convergent principles from 8 master lineages (one message per slide, title-as-assertion with Penn State evidence, visual evidence over bullets, audience-first editing, structure before design) with evidence grades, plus HTML-native expressive techniques (SVG filters, chart/3D embeds) and their caveats - [knowledge/spacing-and-alignment.md](https://ui.askewly.com/llms/knowledge/spacing-and-alignment.md): Why an interface reads as tidy: pick one base unit and use only its multiples (the number itself is not the rule — measured grids are 4, 5, and 8px across benchmarks), derive the rest instead of defining it, align labels/icons/controls on shared axes, and treat whitespace as a grouping and importance signal rather than decoration - [knowledge/type-hierarchy.md](https://ui.askewly.com/llms/knowledge/type-hierarchy.md): How to build a readable type hierarchy without making the interface look generated: keep one typeface family by default (mixing families obscures hierarchy), pick ONE channel to carry the hierarchy — size amplitude, weight, or step count — rather than pushing all three at once, cap the number of sizes on a screen, and treat a second typeface as a signature-layer decision, not a tidiness one ## Methodology - [methodology/ai-slop-catalog.md](https://ui.askewly.com/llms/methodology/ai-slop-catalog.md): Ban catalog used to seed DESIGN.md Anti-patterns: CSS/visual-effect bans and generic-AI giveaways to encode as prohibitions BEFORE building — the make-time counterpart to the prompt-patterns smell test, which checks finished output - [methodology/design-md-guide.md](https://ui.askewly.com/llms/methodology/design-md-guide.md): How to write a good DESIGN.md: official Google Stitch flat-schema alignment (name/colors/typography/rounded/spacing/components, fixed 8-section body, {path.to.token} references), semantic-naming discipline inside the flat map, and the template starting point for third parties (templates/DESIGN.md.tmpl + published CLI) - [methodology/figma-workflow.md](https://ui.askewly.com/llms/methodology/figma-workflow.md): Figma x coding-agent operating procedure on top of the bridge contract: the adopted hybrid round-trip (token sync, design-to-code, code-to-Figma capture lanes) and when to use each — the contract itself lives in figma-bridge-contract.md - [methodology/prompt-patterns.md](https://ui.askewly.com/llms/methodology/prompt-patterns.md): Catalog of prompt patterns for directing AI design work — per pattern: when to use it, the original prompt, variations, and caveats. DESIGN.md owns the what; this owns the how-to-instruct, including the AI-slop smell test for checking finished output - [methodology/research-findings.md](https://ui.askewly.com/llms/methodology/research-findings.md): Aggregated external research behind the design-harness decisions: precedent meta-repos, the QA tool map with fail-fast ordering, and the decision each finding produced — cited as the evidence base by verify-loop and the slop catalog - [methodology/skill-routing.md](https://ui.askewly.com/llms/methodology/skill-routing.md): Which design skill to call in which situation: the 4-layer role map for the design-related slash skills and the boundaries between them - [methodology/slide-production.md](https://ui.askewly.com/llms/methodology/slide-production.md): How to produce a slide deck: HTML as the single source of truth with PPT/PDF as export paths (editability decision table — raster-embed vs pptxgenjs html2pptx vs SVG-to-DrawingML), engine selection, outline-before-design gate order, per-format final-artifact checks, and the lint rule spec (R1 title-assertion, R2 one-message, R3 text-density — all opt-in warnings) - [methodology/verify-loop.md](https://ui.askewly.com/llms/methodology/verify-loop.md): The 7-stage fail-fast design verification chain: each stage emits a JSON report an agent can read directly to run its own self-correction loop ## Recipes - [recipes/application-ui/canvas-particle-field.md](https://ui.askewly.com/llms/recipes/application-ui/canvas-particle-field.md): Canvas Particle Field — application-ui recipe (status: stable) [code: /r/canvas-particle-field.json] - [recipes/application-ui/card-flip-3d.md](https://ui.askewly.com/llms/recipes/application-ui/card-flip-3d.md): 3D Card Flip — application-ui recipe (status: draft) - [recipes/application-ui/chat-conversation-panel.md](https://ui.askewly.com/llms/recipes/application-ui/chat-conversation-panel.md): Chat Conversation Panel — application-ui recipe (status: stable) [code: /r/chat-conversation-panel.json] - [recipes/application-ui/drag-scrub-handle.md](https://ui.askewly.com/llms/recipes/application-ui/drag-scrub-handle.md): Drag Scrub Handle — application-ui recipe (status: stable) [code: /r/drag-scrub-handle.json] - [recipes/application-ui/exclusive-audio-playback.md](https://ui.askewly.com/llms/recipes/application-ui/exclusive-audio-playback.md): Exclusive Audio Playback — application-ui recipe (status: stable) [code: /r/exclusive-audio-playback.json] - [recipes/application-ui/forgiving-pointer-feel.md](https://ui.askewly.com/llms/recipes/application-ui/forgiving-pointer-feel.md): Forgiving Pointer Feel — application-ui recipe (status: stable) [code: /r/forgiving-pointer-feel.json] - [recipes/application-ui/idle-attract-demo.md](https://ui.askewly.com/llms/recipes/application-ui/idle-attract-demo.md): Idle Attract Demo — application-ui recipe (status: stable) [code: /r/idle-attract-demo.json] - [recipes/application-ui/idle-nudge-hint.md](https://ui.askewly.com/llms/recipes/application-ui/idle-nudge-hint.md): Idle Nudge Hint — application-ui recipe (status: stable) [code: /r/idle-nudge-hint.json] - [recipes/application-ui/lazy-three-object-scene.md](https://ui.askewly.com/llms/recipes/application-ui/lazy-three-object-scene.md): Lazy three.js Object Scene — application-ui recipe (status: stable) [code: /r/lazy-three-object-scene.json] - [recipes/application-ui/peer-blur-focus.md](https://ui.askewly.com/llms/recipes/application-ui/peer-blur-focus.md): Peer Blur Focus — application-ui recipe (status: stable) [code: /r/peer-blur-focus.json] - [recipes/application-ui/phase-broadcast-chrome.md](https://ui.askewly.com/llms/recipes/application-ui/phase-broadcast-chrome.md): Phase Broadcast Chrome — application-ui recipe (status: stable) [code: /r/phase-broadcast-chrome.json] - [recipes/application-ui/preset-bundle-switch.md](https://ui.askewly.com/llms/recipes/application-ui/preset-bundle-switch.md): Preset Bundle Switch — application-ui recipe (status: stable) [code: /r/preset-bundle-switch.json] - [recipes/application-ui/progressive-blur-edge.md](https://ui.askewly.com/llms/recipes/application-ui/progressive-blur-edge.md): Progressive Blur Edge — application-ui recipe (status: stable) [code: /r/progressive-blur-edge.json] - [recipes/application-ui/reduced-motion-timing-preserve.md](https://ui.askewly.com/llms/recipes/application-ui/reduced-motion-timing-preserve.md): Reduced Motion Timing Preserve — application-ui recipe (status: stable) - [recipes/application-ui/responsive-dashboard-panel.md](https://ui.askewly.com/llms/recipes/application-ui/responsive-dashboard-panel.md): Responsive Dashboard Panel — application-ui recipe (status: stable) - [recipes/application-ui/scroll-scrub-3d-scene.md](https://ui.askewly.com/llms/recipes/application-ui/scroll-scrub-3d-scene.md): Scroll-Scrub 3D Scene — application-ui recipe (status: draft) - [recipes/application-ui/seed-deeplink-share.md](https://ui.askewly.com/llms/recipes/application-ui/seed-deeplink-share.md): Seed Deeplink Share — application-ui recipe (status: stable) [code: /r/seed-deeplink-share.json] - [recipes/application-ui/showcase-card.md](https://ui.askewly.com/llms/recipes/application-ui/showcase-card.md): Showcase Card — application-ui recipe (status: draft) - [recipes/application-ui/spring-drag-snap-card.md](https://ui.askewly.com/llms/recipes/application-ui/spring-drag-snap-card.md): Spring Drag Snap-back Card — application-ui recipe (status: draft) [code: /r/spring-drag-snap-card.json] - [recipes/application-ui/staggered-entrance-group.md](https://ui.askewly.com/llms/recipes/application-ui/staggered-entrance-group.md): Staggered Entrance Group — application-ui recipe (status: draft) [code: /r/staggered-entrance-group.json] - [recipes/application-ui/view-transition-language-crossfade.md](https://ui.askewly.com/llms/recipes/application-ui/view-transition-language-crossfade.md): View Transition Language Crossfade — application-ui recipe (status: draft) - [recipes/application-ui/walkable-formal-garden.md](https://ui.askewly.com/llms/recipes/application-ui/walkable-formal-garden.md): Walkable Formal Garden — application-ui recipe (status: stable) [code: /r/walkable-formal-garden.json] - [recipes/application-ui/window-edge-affordance.md](https://ui.askewly.com/llms/recipes/application-ui/window-edge-affordance.md): Window Edge Affordance — application-ui recipe (status: stable) [code: /r/window-edge-affordance.json] - [recipes/application-ui/window-stack-focus.md](https://ui.askewly.com/llms/recipes/application-ui/window-stack-focus.md): Window Stack Focus — application-ui recipe (status: stable) [code: /r/window-stack-focus.json] - [recipes/commerce/add-to-cart-feedback-modes.md](https://ui.askewly.com/llms/recipes/commerce/add-to-cart-feedback-modes.md): Add-to-Cart Feedback Modes — commerce recipe (status: stable) [code: /r/add-to-cart-feedback-modes.json] - [recipes/commerce/cart-drawer.md](https://ui.askewly.com/llms/recipes/commerce/cart-drawer.md): Cart Drawer — commerce recipe (status: stable) [code: /r/cart-drawer.json] - [recipes/commerce/cart-line-item-anatomy.md](https://ui.askewly.com/llms/recipes/commerce/cart-line-item-anatomy.md): Cart Line Item Anatomy — commerce recipe (status: stable) [code: /r/cart-line-item-anatomy.json] - [recipes/commerce/category-product-grid.md](https://ui.askewly.com/llms/recipes/commerce/category-product-grid.md): Category Product Grid — commerce recipe (status: draft) [code: /r/category-product-grid.json] - [recipes/commerce/checkout-order-summary.md](https://ui.askewly.com/llms/recipes/commerce/checkout-order-summary.md): Checkout Order Summary — commerce recipe (status: draft) [code: /r/checkout-order-summary.json] - [recipes/commerce/price-hierarchy-stack.md](https://ui.askewly.com/llms/recipes/commerce/price-hierarchy-stack.md): Price Hierarchy Stack — commerce recipe (status: stable) [code: /r/price-hierarchy-stack.json] - [recipes/commerce/product-detail-purchase-stack.md](https://ui.askewly.com/llms/recipes/commerce/product-detail-purchase-stack.md): Product Detail Purchase Stack — commerce recipe (status: stable) [code: /r/product-detail-purchase-stack.json] - [recipes/commerce/product-grid-density-presets.md](https://ui.askewly.com/llms/recipes/commerce/product-grid-density-presets.md): Product Grid Density Presets — commerce recipe (status: stable) [code: /r/product-grid-density-presets.json] - [recipes/commerce/promo-banner-system.md](https://ui.askewly.com/llms/recipes/commerce/promo-banner-system.md): Promo Banner System — commerce recipe (status: deprecated) - [recipes/commerce/shipping-method-selector.md](https://ui.askewly.com/llms/recipes/commerce/shipping-method-selector.md): Shipping Method Selector — commerce recipe (status: stable) [code: /r/shipping-method-selector.json] - [recipes/data-display/audit-log-filterable-export-feed.md](https://ui.askewly.com/llms/recipes/data-display/audit-log-filterable-export-feed.md): Audit Log Filterable Export Feed — data-display recipe (status: draft) [code: /r/audit-log-filterable-export-feed.json] - [recipes/data-display/bulk-action-toolbar-selection-model.md](https://ui.askewly.com/llms/recipes/data-display/bulk-action-toolbar-selection-model.md): Bulk Action Toolbar with Selection Model — data-display recipe (status: draft) [code: /r/bulk-action-toolbar.json] - [recipes/data-display/chaos-settle-grid.md](https://ui.askewly.com/llms/recipes/data-display/chaos-settle-grid.md): Chaos Settle Grid — data-display recipe (status: stable) [code: /r/chaos-settle-grid.json] - [recipes/data-display/grid-track-magnitude-transition.md](https://ui.askewly.com/llms/recipes/data-display/grid-track-magnitude-transition.md): Grid Track Magnitude Transition — data-display recipe (status: stable) [code: /r/grid-track-magnitude-transition.json] - [recipes/data-display/interactive-data-table.md](https://ui.askewly.com/llms/recipes/data-display/interactive-data-table.md): Interactive Data Table — data-display recipe (status: stable) [code: /r/interactive-data-table.json] - [recipes/data-display/odometer-counter.md](https://ui.askewly.com/llms/recipes/data-display/odometer-counter.md): Odometer Counter — data-display recipe (status: stable) [code: /r/odometer-counter.json] - [recipes/data-display/permission-matrix-editor-grid.md](https://ui.askewly.com/llms/recipes/data-display/permission-matrix-editor-grid.md): Permission Matrix Editor Grid — data-display recipe (status: stable) [code: /r/permission-matrix-editor-grid.json] - [recipes/data-display/pull-to-refresh-list-pattern.md](https://ui.askewly.com/llms/recipes/data-display/pull-to-refresh-list-pattern.md): Pull to Refresh List Pattern — data-display recipe (status: draft) [code: /r/pull-to-refresh-list-pattern.json] - [recipes/data-display/remote-data-screen.md](https://ui.askewly.com/llms/recipes/data-display/remote-data-screen.md): Remote Data Screen — data-display recipe (status: stable) - [recipes/data-display/stat-summary-grid.md](https://ui.askewly.com/llms/recipes/data-display/stat-summary-grid.md): Stat Summary Grid — data-display recipe (status: draft) [code: /r/stat-summary-grid.json] - [recipes/data-display/swipe-action-row-pattern.md](https://ui.askewly.com/llms/recipes/data-display/swipe-action-row-pattern.md): Swipe Action Row (Leading/Trailing) — data-display recipe (status: stable) [code: /r/swipe-action-row-pattern.json] - [recipes/docs/api-reference-three-column-layout.md](https://ui.askewly.com/llms/recipes/docs/api-reference-three-column-layout.md): API Reference Three-Column Layout — docs recipe (status: stable) - [recipes/docs/article-documentation-layout.md](https://ui.askewly.com/llms/recipes/docs/article-documentation-layout.md): Article Documentation Layout — docs recipe (status: draft) - [recipes/docs/docs-changelog-category-filter-page.md](https://ui.askewly.com/llms/recipes/docs/docs-changelog-category-filter-page.md): Docs Changelog Page With Category Filter Chips And Pagination — docs recipe (status: stable) [code: /r/docs-changelog-category-filter-page.json] - [recipes/docs/docs-code-block-with-tabs-and-copy.md](https://ui.askewly.com/llms/recipes/docs/docs-code-block-with-tabs-and-copy.md): Docs Code Block With Language Tabs And Copy — docs recipe (status: stable) [code: /r/docs-code-block.json] - [recipes/feedback/actionable-toast.md](https://ui.askewly.com/llms/recipes/feedback/actionable-toast.md): Actionable Toast — feedback recipe (status: draft) - [recipes/feedback/audio-sprite-sfx.md](https://ui.askewly.com/llms/recipes/feedback/audio-sprite-sfx.md): Audio Sprite SFX — feedback recipe (status: stable) [code: /r/audio-sprite-sfx.json] - [recipes/feedback/drag-quote-anchored-comments.md](https://ui.askewly.com/llms/recipes/feedback/drag-quote-anchored-comments.md): Drag-Quote Anchored Comments — feedback recipe (status: draft) - [recipes/feedback/fake-progress-preloader.md](https://ui.askewly.com/llms/recipes/feedback/fake-progress-preloader.md): Fake Progress Preloader — feedback recipe (status: stable) [code: /r/fake-progress-preloader.json] - [recipes/feedback/multi-stage-entry-loader.md](https://ui.askewly.com/llms/recipes/feedback/multi-stage-entry-loader.md): Multi Stage Entry Loader — feedback recipe (status: stable) [code: /r/multi-stage-entry-loader.json] - [recipes/feedback/radial-dial-scroll.md](https://ui.askewly.com/llms/recipes/feedback/radial-dial-scroll.md): Radial Dial Scroll — feedback recipe (status: stable) [code: /r/radial-dial-scroll.json] - [recipes/feedback/recoverable-empty-state.md](https://ui.askewly.com/llms/recipes/feedback/recoverable-empty-state.md): Recoverable Empty State — feedback recipe (status: draft) [code: /r/recoverable-empty-state.json] - [recipes/feedback/reward-reveal-loader.md](https://ui.askewly.com/llms/recipes/feedback/reward-reveal-loader.md): Reward Reveal Loader — feedback recipe (status: stable) [code: /r/reward-reveal-loader.json] - [recipes/feedback/skeleton-card-loading.md](https://ui.askewly.com/llms/recipes/feedback/skeleton-card-loading.md): Skeleton Card Loading — feedback recipe (status: draft) - [recipes/feedback/svg-stroke-assembly-loader.md](https://ui.askewly.com/llms/recipes/feedback/svg-stroke-assembly-loader.md): SVG Stroke Assembly Loader — feedback recipe (status: stable) [code: /r/svg-stroke-assembly-loader.json] - [recipes/forms/advanced-filter-builder-condition-groups.md](https://ui.askewly.com/llms/recipes/forms/advanced-filter-builder-condition-groups.md): Advanced Filter Builder with Condition Groups — forms recipe (status: draft) [code: /r/advanced-filter-builder.json] - [recipes/forms/button-size-scale.md](https://ui.askewly.com/llms/recipes/forms/button-size-scale.md): Button Size Scale — forms recipe (status: stable) [code: /r/button-size-scale.json] - [recipes/forms/button.md](https://ui.askewly.com/llms/recipes/forms/button.md): Button — forms recipe (status: stable) [code: /r/button-size-scale.json] - [recipes/forms/character-login.md](https://ui.askewly.com/llms/recipes/forms/character-login.md): Character Login — forms recipe (status: stable) - [recipes/forms/data-import-wizard-validation-preview-steps.md](https://ui.askewly.com/llms/recipes/forms/data-import-wizard-validation-preview-steps.md): Data Import Wizard Validation Preview Steps — forms recipe (status: draft) - [recipes/forms/mobile-signup-field-stack.md](https://ui.askewly.com/llms/recipes/forms/mobile-signup-field-stack.md): Mobile Signup Field Stack — forms recipe (status: stable) - [recipes/forms/padding-proportional-radius.md](https://ui.askewly.com/llms/recipes/forms/padding-proportional-radius.md): Padding Proportional Radius — forms recipe (status: stable) [code: /r/padding-proportional-radius.json] - [recipes/forms/quiet-form-validation.md](https://ui.askewly.com/llms/recipes/forms/quiet-form-validation.md): Quiet Form Validation — forms recipe (status: stable) [code: /r/quiet-form-validation.json] - [recipes/forms/schema-driven-settings.md](https://ui.askewly.com/llms/recipes/forms/schema-driven-settings.md): Schema Driven Settings — forms recipe (status: stable) [code: /r/schema-driven-settings.json] - [recipes/layout/css-only-sticky-sequence.md](https://ui.askewly.com/llms/recipes/layout/css-only-sticky-sequence.md): CSS-Only Sticky Sequence — layout recipe (status: stable) [code: /r/css-only-sticky-sequence.json] - [recipes/layout/fluid-type-dual-clamp.md](https://ui.askewly.com/llms/recipes/layout/fluid-type-dual-clamp.md): Fluid Type Dual Clamp — layout recipe (status: stable) [code: /r/fluid-type-dual-clamp.json] - [recipes/layout/grid-anchored-icons.md](https://ui.askewly.com/llms/recipes/layout/grid-anchored-icons.md): Grid-Anchored Icons — layout recipe (status: stable) [code: /r/grid-anchored-icons.json] - [recipes/layout/rail-measured-line.md](https://ui.askewly.com/llms/recipes/layout/rail-measured-line.md): Rail Measured Line — layout recipe (status: stable) [code: /r/rail-measured-line.json] - [recipes/layout/reference-viewport-sizing.md](https://ui.askewly.com/llms/recipes/layout/reference-viewport-sizing.md): Reference Viewport Sizing — layout recipe (status: stable) [code: /r/reference-viewport-sizing.json] - [recipes/layout/responsive-content-grid.md](https://ui.askewly.com/llms/recipes/layout/responsive-content-grid.md): Responsive Content Grid — layout recipe (status: draft) - [recipes/layout/sidebar-application-shell.md](https://ui.askewly.com/llms/recipes/layout/sidebar-application-shell.md): Sidebar Application Shell — layout recipe (status: stable) [code: /r/sidebar-application-shell.json] - [recipes/layout/window-placement-cascade.md](https://ui.askewly.com/llms/recipes/layout/window-placement-cascade.md): Window Placement Cascade — layout recipe (status: stable) [code: /r/window-placement-cascade.json] - [recipes/marketing/ambient-audio-mixer.md](https://ui.askewly.com/llms/recipes/marketing/ambient-audio-mixer.md): Ambient Audio Mixer — marketing recipe (status: stable) [code: /r/ambient-audio-mixer.json] - [recipes/marketing/ascii-particle-logo.md](https://ui.askewly.com/llms/recipes/marketing/ascii-particle-logo.md): ASCII Particle Logo — marketing recipe (status: stable) [code: /r/ascii-particle-logo.json] - [recipes/marketing/attr-declared-cursor-modes.md](https://ui.askewly.com/llms/recipes/marketing/attr-declared-cursor-modes.md): Attribute Declared Cursor Modes — marketing recipe (status: stable) [code: /r/attr-declared-cursor-modes.json] - [recipes/marketing/blur-char-entrance.md](https://ui.askewly.com/llms/recipes/marketing/blur-char-entrance.md): Blur Char Entrance — marketing recipe (status: stable) [code: /r/blur-char-entrance.json] - [recipes/marketing/character-sheet-stage.md](https://ui.askewly.com/llms/recipes/marketing/character-sheet-stage.md): Character Sheet Stage — marketing recipe (status: stable) [code: /r/character-sheet-stage.json] - [recipes/marketing/character-stack-crossfade.md](https://ui.askewly.com/llms/recipes/marketing/character-stack-crossfade.md): Character Stack Crossfade — marketing recipe (status: stable) [code: /r/character-stack-crossfade.json] - [recipes/marketing/clip-reveal-wordmark.md](https://ui.askewly.com/llms/recipes/marketing/clip-reveal-wordmark.md): Clip Reveal Wordmark — marketing recipe (status: stable) [code: /r/clip-reveal-wordmark.json] - [recipes/marketing/composite-bleach-mh.md](https://ui.askewly.com/llms/recipes/marketing/composite-bleach-mh.md): Composite: bleach-mh Grain — marketing recipe (status: stable) [code: /r/composite-bleach-mh.json] - [recipes/marketing/composite-nk-inspiring.md](https://ui.askewly.com/llms/recipes/marketing/composite-nk-inspiring.md): Composite: NK Inspiring Arc — marketing recipe (status: stable) [code: /r/composite-nk-inspiring.json] - [recipes/marketing/composite-noth-in.md](https://ui.askewly.com/llms/recipes/marketing/composite-noth-in.md): Composite: noth.in Grain — marketing recipe (status: stable) [code: /r/composite-noth-in.json] - [recipes/marketing/composite-revelatio.md](https://ui.askewly.com/llms/recipes/marketing/composite-revelatio.md): Composite: Revelatio Home Grain — marketing recipe (status: stable) [code: /r/composite-revelatio.json] - [recipes/marketing/context-label-cursor.md](https://ui.askewly.com/llms/recipes/marketing/context-label-cursor.md): Context Label Cursor — marketing recipe (status: stable) [code: /r/context-label-cursor.json] - [recipes/marketing/crt-ascii-video.md](https://ui.askewly.com/llms/recipes/marketing/crt-ascii-video.md): CRT ASCII Video — marketing recipe (status: stable) [code: /r/crt-ascii-video.json] - [recipes/marketing/cursor-trail-shader.md](https://ui.askewly.com/llms/recipes/marketing/cursor-trail-shader.md): Cursor Trail Shader — marketing recipe (status: stable) [code: /r/cursor-trail-shader.json] - [recipes/marketing/declarative-reveal-engine.md](https://ui.askewly.com/llms/recipes/marketing/declarative-reveal-engine.md): Declarative Reveal Engine — marketing recipe (status: stable) [code: /r/declarative-reveal-engine.json] - [recipes/marketing/deco-equalizer.md](https://ui.askewly.com/llms/recipes/marketing/deco-equalizer.md): Deco Equalizer — marketing recipe (status: stable) [code: /r/deco-equalizer.json] - [recipes/marketing/diagonal-clip-reveal.md](https://ui.askewly.com/llms/recipes/marketing/diagonal-clip-reveal.md): Diagonal Clip Reveal — marketing recipe (status: stable) [code: /r/diagonal-clip-reveal.json] - [recipes/marketing/directional-hover-fill.md](https://ui.askewly.com/llms/recipes/marketing/directional-hover-fill.md): Directional Hover Fill — marketing recipe (status: stable) [code: /r/directional-hover-fill.json] - [recipes/marketing/dual-mode-line-reveal.md](https://ui.askewly.com/llms/recipes/marketing/dual-mode-line-reveal.md): Dual Mode Line Reveal — marketing recipe (status: stable) [code: /r/dual-mode-line-reveal.json] - [recipes/marketing/edge-flare-lines.md](https://ui.askewly.com/llms/recipes/marketing/edge-flare-lines.md): Edge Flare Lines — marketing recipe (status: stable) [code: /r/edge-flare-lines.json] - [recipes/marketing/entrance-three-stage.md](https://ui.askewly.com/llms/recipes/marketing/entrance-three-stage.md): Entrance Three Stage — marketing recipe (status: stable) [code: /r/entrance-three-stage.json] - [recipes/marketing/entry-veil-color-relay.md](https://ui.askewly.com/llms/recipes/marketing/entry-veil-color-relay.md): Entry Veil Color Relay — marketing recipe (status: draft) - [recipes/marketing/falling-image-trail.md](https://ui.askewly.com/llms/recipes/marketing/falling-image-trail.md): Falling Image Trail — marketing recipe (status: stable) [code: /r/falling-image-trail.json] - [recipes/marketing/filter-stagger-grid.md](https://ui.askewly.com/llms/recipes/marketing/filter-stagger-grid.md): Filter Stagger Grid — marketing recipe (status: stable) [code: /r/filter-stagger-grid.json] - [recipes/marketing/flip-heading-scrub.md](https://ui.askewly.com/llms/recipes/marketing/flip-heading-scrub.md): Flip Heading Scrub — marketing recipe (status: stable) [code: /r/flip-heading-scrub.json] - [recipes/marketing/fluid-cursor-background.md](https://ui.askewly.com/llms/recipes/marketing/fluid-cursor-background.md): Fluid Cursor Background — marketing recipe (status: stable) [code: /r/fluid-cursor-background.json] - [recipes/marketing/fullpage-snap-landing.md](https://ui.askewly.com/llms/recipes/marketing/fullpage-snap-landing.md): Fullpage Snap Landing — marketing recipe (status: draft) - [recipes/marketing/grain-texture-overlay.md](https://ui.askewly.com/llms/recipes/marketing/grain-texture-overlay.md): Grain Texture Overlay — marketing recipe (status: draft) - [recipes/marketing/grid-rows-accordion.md](https://ui.askewly.com/llms/recipes/marketing/grid-rows-accordion.md): Grid Rows Accordion — marketing recipe (status: stable) [code: /r/grid-rows-accordion.json] - [recipes/marketing/hero-reflection-stage.md](https://ui.askewly.com/llms/recipes/marketing/hero-reflection-stage.md): Hero Reflection Stage — marketing recipe (status: stable) [code: /r/hero-reflection-stage.json] - [recipes/marketing/hover-flicker-link.md](https://ui.askewly.com/llms/recipes/marketing/hover-flicker-link.md): Hover Flicker Link — marketing recipe (status: stable) [code: /r/hover-flicker-link.json] - [recipes/marketing/hover-preview-follower.md](https://ui.askewly.com/llms/recipes/marketing/hover-preview-follower.md): Hover Preview Follower — marketing recipe (status: stable) [code: /r/hover-preview-follower.json] - [recipes/marketing/idle-cursor-prewarm.md](https://ui.askewly.com/llms/recipes/marketing/idle-cursor-prewarm.md): Idle Cursor Prewarm — marketing recipe (status: stable) [code: /r/idle-cursor-prewarm.json] - [recipes/marketing/image-trail-cursor.md](https://ui.askewly.com/llms/recipes/marketing/image-trail-cursor.md): Image Trail Cursor — marketing recipe (status: stable) [code: /r/image-trail-cursor.json] - [recipes/marketing/kv-frame-stack-reveal.md](https://ui.askewly.com/llms/recipes/marketing/kv-frame-stack-reveal.md): KV Frame Stack Reveal — marketing recipe (status: stable) [code: /r/kv-frame-stack-reveal.json] - [recipes/marketing/landing-hero.md](https://ui.askewly.com/llms/recipes/marketing/landing-hero.md): Landing Hero — marketing recipe (status: stable) - [recipes/marketing/layered-noise-terrain.md](https://ui.askewly.com/llms/recipes/marketing/layered-noise-terrain.md): Layered Noise Terrain — marketing recipe (status: stable) [code: /r/layered-noise-terrain.json] - [recipes/marketing/linear-spring-easing.md](https://ui.askewly.com/llms/recipes/marketing/linear-spring-easing.md): Linear Spring Easing — marketing recipe (status: stable) [code: /r/linear-spring-easing.json] - [recipes/marketing/magnetic-hover-button.md](https://ui.askewly.com/llms/recipes/marketing/magnetic-hover-button.md): Magnetic Hover Button — marketing recipe (status: stable) [code: /r/magnetic-hover-button.json] - [recipes/marketing/magnetic-repulsion-cluster.md](https://ui.askewly.com/llms/recipes/marketing/magnetic-repulsion-cluster.md): Magnetic Repulsion Cluster — marketing recipe (status: stable) [code: /r/magnetic-repulsion-cluster.json] - [recipes/marketing/mesh-gradient-surface.md](https://ui.askewly.com/llms/recipes/marketing/mesh-gradient-surface.md): Mesh Gradient Surface — marketing recipe (status: draft) - [recipes/marketing/name-crossfade-state-machine.md](https://ui.askewly.com/llms/recipes/marketing/name-crossfade-state-machine.md): Name Crossfade State Machine — marketing recipe (status: stable) [code: /r/name-crossfade-state-machine.json] - [recipes/marketing/orbital-image-cloud-landing.md](https://ui.askewly.com/llms/recipes/marketing/orbital-image-cloud-landing.md): Orbital Image Cloud Landing — marketing recipe (status: draft) - [recipes/marketing/paragraph-reveal-modes.md](https://ui.askewly.com/llms/recipes/marketing/paragraph-reveal-modes.md): Paragraph Reveal Modes — marketing recipe (status: stable) [code: /r/paragraph-reveal-modes.json] - [recipes/marketing/path-length-timed-drawing.md](https://ui.askewly.com/llms/recipes/marketing/path-length-timed-drawing.md): Path Length Timed Drawing — marketing recipe (status: stable) [code: /r/path-length-timed-drawing.json] - [recipes/marketing/pinned-scroll-sequence.md](https://ui.askewly.com/llms/recipes/marketing/pinned-scroll-sequence.md): Pinned Scroll Sequence — marketing recipe (status: deprecated) - [recipes/marketing/pixelation-reveal.md](https://ui.askewly.com/llms/recipes/marketing/pixelation-reveal.md): Pixelation Reveal — marketing recipe (status: stable) [code: /r/pixelation-reveal.json] - [recipes/marketing/procedural-court-line.md](https://ui.askewly.com/llms/recipes/marketing/procedural-court-line.md): Procedural Court Line — marketing recipe (status: stable) [code: /r/procedural-court-line.json] - [recipes/marketing/scene-sound-map.md](https://ui.askewly.com/llms/recipes/marketing/scene-sound-map.md): Scene Sound Map — marketing recipe (status: stable) [code: /r/scene-sound-map.json] - [recipes/marketing/scramble-text-reveal.md](https://ui.askewly.com/llms/recipes/marketing/scramble-text-reveal.md): Scramble Text Reveal — marketing recipe (status: stable) [code: /r/scramble-text-reveal.json] - [recipes/marketing/scroll-driven-reveal.md](https://ui.askewly.com/llms/recipes/marketing/scroll-driven-reveal.md): Scroll-Driven Reveal — marketing recipe (status: draft) - [recipes/marketing/scroll-focus-list.md](https://ui.askewly.com/llms/recipes/marketing/scroll-focus-list.md): Scroll Focus List — marketing recipe (status: stable) [code: /r/scroll-focus-list.json] - [recipes/marketing/scroll-theme-inversion.md](https://ui.askewly.com/llms/recipes/marketing/scroll-theme-inversion.md): Scroll Theme Inversion — marketing recipe (status: stable) [code: /r/scroll-theme-inversion.json] - [recipes/marketing/shader-gradient-surface.md](https://ui.askewly.com/llms/recipes/marketing/shader-gradient-surface.md): Shader Gradient Surface — marketing recipe (status: draft) - [recipes/marketing/sound-onboarding-gate.md](https://ui.askewly.com/llms/recipes/marketing/sound-onboarding-gate.md): Sound Onboarding Gate — marketing recipe (status: stable) [code: /r/sound-onboarding-gate.json] - [recipes/marketing/speed-sensitive-marquee.md](https://ui.askewly.com/llms/recipes/marketing/speed-sensitive-marquee.md): Speed Sensitive Marquee — marketing recipe (status: stable) [code: /r/speed-sensitive-marquee.json] - [recipes/marketing/spotlight-mask-reveal.md](https://ui.askewly.com/llms/recipes/marketing/spotlight-mask-reveal.md): Spotlight Mask Reveal — marketing recipe (status: stable) [code: /r/spotlight-mask-reveal.json] - [recipes/marketing/text-explosion-physics.md](https://ui.askewly.com/llms/recipes/marketing/text-explosion-physics.md): Text Explosion Physics — marketing recipe (status: stable) [code: /r/text-explosion-physics.json] - [recipes/marketing/twinkle-star-field.md](https://ui.askewly.com/llms/recipes/marketing/twinkle-star-field.md): Twinkle Star Field — marketing recipe (status: stable) [code: /r/twinkle-star-field.json] - [recipes/marketing/underline-bridge-sweep.md](https://ui.askewly.com/llms/recipes/marketing/underline-bridge-sweep.md): Underline Bridge Sweep — marketing recipe (status: stable) [code: /r/underline-bridge-sweep.json] - [recipes/marketing/vertical-horizontal-scroll.md](https://ui.askewly.com/llms/recipes/marketing/vertical-horizontal-scroll.md): Vertical to Horizontal Scroll — marketing recipe (status: stable) [code: /r/vertical-horizontal-scroll.json] - [recipes/navigation/adaptive-navigation-container.md](https://ui.askewly.com/llms/recipes/navigation/adaptive-navigation-container.md): Adaptive Navigation Container — navigation recipe (status: stable) - [recipes/navigation/bottom-tab-bar.md](https://ui.askewly.com/llms/recipes/navigation/bottom-tab-bar.md): Bottom Tab Bar — navigation recipe (status: stable) - [recipes/navigation/curtain-page-transition.md](https://ui.askewly.com/llms/recipes/navigation/curtain-page-transition.md): Curtain Page Transition — navigation recipe (status: stable) [code: /r/curtain-page-transition.json] - [recipes/navigation/doc-search-cmdk-grouped-results-panel.md](https://ui.askewly.com/llms/recipes/navigation/doc-search-cmdk-grouped-results-panel.md): Doc Search Cmd-K Grouped Results Panel — navigation recipe (status: stable) [code: /r/doc-search-cmdk-grouped-results-panel.json] - [recipes/navigation/floating-button-contrast.md](https://ui.askewly.com/llms/recipes/navigation/floating-button-contrast.md): Floating Button Contrast — navigation recipe (status: stable) [code: /r/floating-button-contrast.json] - [recipes/navigation/large-title-collapsing-header.md](https://ui.askewly.com/llms/recipes/navigation/large-title-collapsing-header.md): Large Title Collapsing Header — navigation recipe (status: draft) - [recipes/navigation/membership-barcode-card.md](https://ui.askewly.com/llms/recipes/navigation/membership-barcode-card.md): Membership Barcode Card — navigation recipe (status: stable) - [recipes/navigation/page-transition-modes.md](https://ui.askewly.com/llms/recipes/navigation/page-transition-modes.md): Page Transition Modes — navigation recipe (status: stable) [code: /r/page-transition-modes.json] - [recipes/navigation/scroll-overrun-advance.md](https://ui.askewly.com/llms/recipes/navigation/scroll-overrun-advance.md): Scroll Overrun Advance — navigation recipe (status: stable) [code: /r/scroll-overrun-advance.json] - [recipes/navigation/shared-element-flip-transition.md](https://ui.askewly.com/llms/recipes/navigation/shared-element-flip-transition.md): Shared Element FLIP Transition — navigation recipe (status: stable) [code: /r/shared-element-flip-transition.json] - [recipes/navigation/topbar-command-search.md](https://ui.askewly.com/llms/recipes/navigation/topbar-command-search.md): Topbar Command Search — navigation recipe (status: draft) - [recipes/navigation/versioned-docs-switcher-navbar-sidebar-swap.md](https://ui.askewly.com/llms/recipes/navigation/versioned-docs-switcher-navbar-sidebar-swap.md): Versioned Docs Switcher With Navbar Dropdown And Sidebar Swap — navigation recipe (status: draft) [code: /r/versioned-docs-switcher-navbar-sidebar-swap.json] - [recipes/overlays/action-sheet-destructive-confirmation.md](https://ui.askewly.com/llms/recipes/overlays/action-sheet-destructive-confirmation.md): Action Sheet Destructive Confirmation — overlays recipe (status: draft) - [recipes/overlays/bottom-sheet-detents.md](https://ui.askewly.com/llms/recipes/overlays/bottom-sheet-detents.md): Bottom Sheet Detents — overlays recipe (status: deprecated) - [recipes/overlays/character-zoom-isolation.md](https://ui.askewly.com/llms/recipes/overlays/character-zoom-isolation.md): Character Zoom Isolation — overlays recipe (status: stable) [code: /r/character-zoom-isolation.json] - [recipes/overlays/glass-panel.md](https://ui.askewly.com/llms/recipes/overlays/glass-panel.md): Glass Panel — overlays recipe (status: draft) - [recipes/overlays/mobile-buy-bar-sheet.md](https://ui.askewly.com/llms/recipes/overlays/mobile-buy-bar-sheet.md): Mobile Buy Bar Sheet — overlays recipe (status: stable) [code: /r/mobile-buy-bar-sheet.json] - [recipes/overlays/modal-exit-choreography.md](https://ui.askewly.com/llms/recipes/overlays/modal-exit-choreography.md): Modal Exit Choreography — overlays recipe (status: draft) - [recipes/overlays/paper-card-reveal.md](https://ui.askewly.com/llms/recipes/overlays/paper-card-reveal.md): Paper Card Reveal — overlays recipe (status: stable) [code: /r/paper-card-reveal.json] - [recipes/overlays/popover-anatomy-variants.md](https://ui.askewly.com/llms/recipes/overlays/popover-anatomy-variants.md): Popover Anatomy Variants — overlays recipe (status: stable) [code: /r/popover-anatomy-variants.json] - [recipes/overlays/popover.md](https://ui.askewly.com/llms/recipes/overlays/popover.md): Popover — overlays recipe (status: stable) [code: /r/popover-anatomy-variants.json] ## Code Assets (verified implementations) Fetch the JSON, write files[].content into your project, install declared dependencies, then remap the look to your project's tokens per component-restyle.md. Human path: npx shadcn add https://ui.askewly.com/r/.json. Index: [r/registry.json](https://ui.askewly.com/r/registry.json) - [r/add-to-cart-feedback-modes.json](https://ui.askewly.com/r/add-to-cart-feedback-modes.json): Add to Cart Feedback Modes -- Three real answers to one event: full-page transition, anchored popover, auto-opening drawer. They share only the instant header count update. - [r/advanced-filter-builder.json](https://ui.askewly.com/r/advanced-filter-builder.json): Advanced Filter Builder -- An advanced filter builder with condition groups implements the `advanced-filter-builder` term's field-operator-value contract at composition scale: instead of one flat list of conditions, conditions nest inside groups, and groups combine with a top-level AND/OR join. This is the structure Retool-style internal admin tools repeat when a single filter row can't express "status is active AND (region is US OR region is EU)". - [r/ambient-audio-mixer.json](https://ui.askewly.com/r/ambient-audio-mixer.json): Ambient Audio Mixer -- Background layers mix by on-screen position and duck when UI opens, building spatial presence out of sound. - [r/api-reference-layout.json](https://ui.askewly.com/r/api-reference-layout.json): Api Reference Layout -- Api Reference Layout — verified recipe demo implementation from the Askewly Design site. - [r/ascii-particle-logo.json](https://ui.askewly.com/r/ascii-particle-logo.json): ASCII Particle Logo -- A wordmark sampled into ASCII particles that scatter from the cursor, fall under gravity on click, and reassemble in staggered ease-out. - [r/ask-input-bar.json](https://ui.askewly.com/r/ask-input-bar.json): Ask Input Bar -- An ask input bar is a single centered question field floating over an exploratory surface (graph, map, document). Its defining state is locked: exploration stays open to everyone while asking requires sign-in, and the bar communicates that policy itself — lock icon, read-only field, and a hint that routes to sign-in instead of a dead control. - [r/attr-declared-cursor-modes.json](https://ui.askewly.com/r/attr-declared-cursor-modes.json): Attribute Declared Cursor Modes -- A two-speed follower cursor whose dot leads and ring trails, with reaction targets declared through data attributes and rebound by a debounced MutationObserver. - [r/audio-sprite-sfx.json](https://ui.askewly.com/r/audio-sprite-sfx.json): Audio Sprite SFX -- An audio sprite packs multiple short effects into one buffer addressed by timecode cues: one decoded asset, per-cue segment playback, and a dB-to-linear volume curve, the game-audio pattern for UI SFX without per-file latency. - [r/audit-log-filterable-export-feed.json](https://ui.askewly.com/r/audit-log-filterable-export-feed.json): Audit Log Filterable Export Feed -- An audit log filterable export feed implements the `audit-log` term's actor/action/target/timestamp record as a filterable, exportable operational surface: filters scope by actor, action type, and date range, and export always applies to the currently active filter rather than silently dumping the full unfiltered table. Unlike `activity-feed`, which reads as a lightweight social/collaboration stream, this recipe is a forensic/compliance record — the column order (actor, action, target, timestamp) stays fixed regardless of filter state, and metadata expands on demand rather than always rendering inline. - [r/auth-gate-modal.json](https://ui.askewly.com/r/auth-gate-modal.json): Auth Gate Modal -- An auth gate modal signs a visitor in only where one capability is gated while exploring stays open. Three paths in fixed order — email/password, Google, and request-access so the gate never dead-ends someone without an account — plus three dismiss routes (close button, backdrop, Escape) and focus landing on the first field. The copy names what the gate protects, not a generic login. - [r/blur-char-entrance.json](https://ui.askewly.com/r/blur-char-entrance.json): Blur Char Entrance -- A hero entrance where characters resolve out of a 10px blur on block totals computed from a single stagger formula, with the label starting at the title block's midpoint. - [r/bulk-action-toolbar.json](https://ui.askewly.com/r/bulk-action-toolbar.json): Bulk Action Toolbar -- A bulk action toolbar turns a table's per-row selection into a single place to act on many rows at once. It appears only once a selection exists, always states the selected count out loud, and offers an explicit way to go beyond the current page — selecting every row that matches the active filter, not just the ones currently rendered. It builds directly on `interactive-data-table`'s selection state rather than defining a second, competing selection model. - [r/button-size-scale.json](https://ui.askewly.com/r/button-size-scale.json): Button Size Scale -- Two independent size scales for buttons: fixed-height variable-width action CTAs versus fixed-dimension selection controls like size chips and swatches. - [r/canvas-particle-field.json](https://ui.askewly.com/r/canvas-particle-field.json): Canvas Particle Field -- A canvas particle field draws dozens-to-hundreds of drifting dots into a 2D pixel buffer as ambient backdrop texture. Tier ③ in `knowledge/expressive-stack.md`: at this element count, DOM nodes pay layout/paint cost per node while the canvas pays none. An experimental/showcase touch (signature principle 5) — hero and event surfaces on request, never behind forms or data UI. - [r/cart-drawer.json](https://ui.askewly.com/r/cart-drawer.json): Cart Drawer -- A cart drawer keeps the browsing context intact while confirming what a user has added. It opens as a slide-over panel, shows each item with enough detail to double-check the choice, and moves the user toward checkout without a full page navigation. It intentionally shows only a subtotal — a full cost breakdown belongs to `checkout-order-summary`. - [r/cart-line-item-anatomy.json](https://ui.askewly.com/r/cart-line-item-anatomy.json): Cart Line Item Anatomy -- A three-column cart row with quantity and remove split into their own action bar, and a stepper corrected to a 44px touch target. - [r/category-product-grid.json](https://ui.askewly.com/r/category-product-grid.json): Category Product Grid -- A category product grid assembles many `product-card` cells into the higher-order list structure a category or search-results page actually needs: a filter/sort bar above the grid, a loading skeleton that matches the final column count, and an empty state that offers a way out instead of a dead end. The card itself stays a separate term — this recipe is the layout and state machine around it. - [r/chaos-settle-grid.json](https://ui.askewly.com/r/chaos-settle-grid.json): Chaos Settle Grid -- Cards orbit on seeded chaotic paths and bind into a width-responsive curved grid, with position, rotation, scale and opacity all driven by one asymmetrically damped scalar. - [r/character-sheet-stage.json](https://ui.askewly.com/r/character-sheet-stage.json): Character Sheet Stage -- A print-minded character sheet page: ink-textured ground, a fixed content column, uncropped setting art with its credit inside the image, and no entrance animation at all. - [r/character-stack-crossfade.json](https://ui.askewly.com/r/character-stack-crossfade.json): Character Stack Crossfade -- Stacked figures crossfade in place on selection, with a draggable pagination bar, so the selector reads as a stage rather than a catalog. - [r/character-zoom-isolation.json](https://ui.askewly.com/r/character-zoom-isolation.json): Character Zoom Isolation -- A zoom view that loads its overlay module only on first open, locks scroll with scrollbar-width compensation, and releases the lock on a delay matched to the close transition. - [r/chat-conversation-panel.json](https://ui.askewly.com/r/chat-conversation-panel.json): Chat Conversation Panel -- A chat conversation panel turns a request-response exchange with a person or an AI assistant into one continuously readable thread: a bounded, self-scrolling message log above a single always-visible input bar. It exists for turn-taking conversation — not for comment threads (no reply nesting), notification feeds (no input), or one-shot form submission. - [r/checkout-order-summary.json](https://ui.askewly.com/r/checkout-order-summary.json): Checkout Order Summary -- A checkout order summary keeps the exact purchase commitment visible while the user provides delivery and payment details. Products, quantities, discounts, shipping, tax, total, fulfillment method, and final action stay consistent across steps and remain editable before confirmation. - [r/clip-reveal-wordmark.json](https://ui.askewly.com/r/clip-reveal-wordmark.json): Clip Reveal Wordmark -- A header wordmark that stays clipped to its leading letters and releases the clip on hover, so the full brand name arrives without the visible letters shifting. - [r/color-palette-generator.json](https://ui.askewly.com/r/color-palette-generator.json): Color Palette Generator -- A color palette generator is a five-swatch production tool: generate/lock cycles that respect locked colors, drag reorder with a floating preview, a per-color tint/shade panel, an HSV picker, copy-to-clipboard with toast, and PNG/SVG palette export. Palette math lives in palette-generator-core; this component owns the interaction surface, with chrome on semantic tokens and swatch colors as user content. - [r/composite-bleach-mh.json](https://ui.askewly.com/r/composite-bleach-mh.json): Composite: bleach-mh Grain -- A single scene running the key visual stack, dual-mode line reveals, a character selector with two-stage name crossfade, zoom isolation, and a global motion toggle in the source site's order. - [r/composite-nk-inspiring.json](https://ui.askewly.com/r/composite-nk-inspiring.json): Composite: NK Inspiring Arc -- A full landing arc where blurred headline entry, an asymmetric outro, a broadcast chrome phase change, and a card field binding from orbits into a grid all run off one shared clock. - [r/composite-noth-in.json](https://ui.askewly.com/r/composite-noth-in.json): Composite: noth.in Grain -- A single dark-stage scene running loader, reflected hero, sound gauge, repulsion cluster, velocity glitch, cursor-label work rows, FLIP detail transition, and a bottom overrun gauge in the source site's order. - [r/composite-revelatio.json](https://ui.askewly.com/r/composite-revelatio.json): Composite: Revelatio Home Grain -- A single scene that sequences preloader, CRT power-on, scroll-driven TV zoom, theme inversion, odometer stats, and a drag-reactive marquee in the source site's own rhythm. - [r/context-annotation.json](https://ui.askewly.com/r/context-annotation.json): Context Annotation -- An inline context annotation marks a term in running text with a thin highlighter band (body-toned, not a chip) and opens a dark glossary card right below it: term, pronunciation/tag chips, explanation, optional image, and related links — the annotation is an entrance to more content, not just a definition. Document-wide singleton (opening one closes any other), viewport-edge-aware repositioning, Escape and outside-click dismissal. - [r/context-label-cursor.json](https://ui.askewly.com/r/context-label-cursor.json): Context Label Cursor -- A fixed cursor follower that morphs into an action label (View, Play, Drag) over each target, telling the visitor what a click will do before they click. - [r/contrast-duo-card.json](https://ui.askewly.com/r/contrast-duo-card.json): Contrast Duo Card -- A contrast duo card tells a before/after or problem/answer comparison as exactly two cards with identical internal hierarchy — muted label, bold headline, supporting line, optional visual band — where one side may invert onto the foreground ground to sharpen the contrast. The repeated rhythm is what makes the comparison legible; not a feature grid. - [r/copy-link-button.json](https://ui.askewly.com/r/copy-link-button.json): Copy Link Button -- A share affordance that actually works: copies the page URL (or a supplied one) to the clipboard and confirms inline for 1.5 seconds — instead of a dead social-icon row. Text-only button: type plus a stroke icon, no background or border, focus ring for keyboard. Clipboard failure leaves the idle state untouched rather than claiming success. - [r/crt-ascii-video.json](https://ui.askewly.com/r/crt-ascii-video.json): CRT ASCII Video -- A background video redrawn as a live grid of ASCII glyphs inside a CRT tube mask, with pointer warp and a power-on flare, so arriving at the screen is itself the effect. - [r/css-only-sticky-sequence.json](https://ui.askewly.com/r/css-only-sticky-sequence.json): CSS-Only Sticky Sequence -- A pinned-rail scroll sequence built from position:sticky and a one-viewport gap rhythm, with no scroll controller in JavaScript. - [r/cursor-proximity-glow.json](https://ui.askewly.com/r/cursor-proximity-glow.json): Cursor Proximity Glow -- Cursor proximity glow lights up marked elements as the pointer nears them: one document-level pointermove writes per-element --cursor-x/y custom properties and toggles a data attribute, and a pure CSS radial-gradient overlay renders the glow — zero React re-renders on the hot path. Decoration only: touch and keyboard users see resting states with no meaning lost. - [r/cursor-reactive-field.json](https://ui.askewly.com/r/cursor-reactive-field.json): Cursor Reactive Field -- A cursor-reactive glyph field lights a fixed grid of monospace glyphs around the pointer and lets them decay on a timer: influence falls off with distance, the glyph changes by influence band so the trail reads as texture, and a ~85ms life countdown produces the fade tail. Plain spans and one interval — no canvas, no rAF. - [r/cursor-trail-shader.json](https://ui.askewly.com/r/cursor-trail-shader.json): Cursor Trail Shader -- A cursor trail shader accumulates pointer history into a small offscreen intensity texture and feeds it to a WebGL noise-gradient fragment shader, so the cursor's wake visibly warps the background field. Colors are read from the project's tokens at mount. - [r/curtain-page-transition.json](https://ui.askewly.com/r/curtain-page-transition.json): Curtain Page Transition -- A curtain page transition covers the viewport with an opaque layer, swaps content while fully hidden, then lifts the curtain and slides the new headline in: SPA route changes read as one deliberate scene change instead of a flash. - [r/declarative-reveal-engine.json](https://ui.askewly.com/r/declarative-reveal-engine.json): Declarative Reveal Engine -- One reveal engine driven by markup attributes (line, letter, opacity, scale) behind a font-loading race gate, so entry animation is declared rather than wired per element. - [r/deco-equalizer.json](https://ui.askewly.com/r/deco-equalizer.json): Deco Equalizer -- A decorative equalizer animates a row of bars with randomized CSS keyframe durations and negative delays so they read as live audio levels while being pure decoration: no audio analysis, one paused/running play state. - [r/device-frame.json](https://ui.askewly.com/r/device-frame.json): Device Frame -- A device frame is a reusable mobile/tablet bezel for presenting screen-sized UI examples: it wraps arbitrary children in a rounded frame with a status-bar hint and gives the viewport its own scroll context, so a mobile screen can be embedded in a page without the page itself scrolling. Semantic tokens only. - [r/diagonal-clip-reveal.json](https://ui.askewly.com/r/diagonal-clip-reveal.json): Diagonal Clip Reveal -- A diagonal clip-path reveal wipes content in along a slanted polygon edge: three variants: hero title reveal, full-menu diagonal wipe, and Ken Burns zoom with a clipped title: all pure CSS keyframes on clip-path. - [r/directional-hover-fill.json](https://ui.askewly.com/r/directional-hover-fill.json): Directional Hover Fill -- A directional hover fill detects which edge the pointer entered from and slides the fill layer in from that edge: and back out toward the exit edge: so buttons feel aware of cursor motion instead of playing one canned hover. - [r/doc-search-cmdk-grouped-results-panel.json](https://ui.askewly.com/r/doc-search-cmdk-grouped-results-panel.json): Doc Search Cmdk Grouped Results Panel -- A documentation site's Cmd/Ctrl+K search reuses the `command-palette` overlay shell (`topbar-command-search` implements the same input+popover idea inline in a topbar), but a docs search result set spans several kinds of content — pages, guides, API entries — and a flat list makes the reader scan section by section anyway. Grouping results under section headers (Docs/Guides/API) inside the same overlay does that scanning for them, without inventing a second overlay pattern. - [r/docs-changelog-category-filter-page.json](https://ui.askewly.com/r/docs-changelog-category-filter-page.json): Docs Changelog Category Filter Page -- `docs-changelog-page` already names a date-grouped `release-note-card` list as a page; this recipe is the concrete implementation with the two controls that make a long changelog navigable — a category filter chip row (All/GA/Preview-style categories) that narrows which cards show, and pagination so the page doesn't grow unbounded. Filtering and pagination share one state contract: changing the category resets which date groups are visible, and a date group with zero remaining cards after filtering disappears rather than rendering with an empty heading. - [r/docs-code-block.json](https://ui.askewly.com/r/docs-code-block.json): Docs Code Block -- Documentation readers often need the same instruction in more than one equivalent form (npm/yarn/pnpm, or curl/node/python) and want to copy it without hand-selecting text. Tabs switch between equivalent code variants in place, and a fixed copy button turns the block into a one-click action instead of a select-and-copy chore. - [r/docs-site.json](https://ui.askewly.com/r/docs-site.json): Docs Site -- A documentation site skeleton: a thin top navbar with section tabs and a ⌘K command palette, a left rail whose version dropdown swaps the sidebar tree (with a stale-version banner), and three pages — a guide article with package-manager code tabs, a self-playing terminal proof and a related-reading grid; an HTTP API reference with nested parameter rows and per-language samples; and a changelog with category filtering and pagination. Filter, pagination and version state live in the block; content lives in one data.json. Routing is left to the consumer. - [r/dual-mode-line-reveal.json](https://ui.askewly.com/r/dual-mode-line-reveal.json): Dual Mode Line Reveal -- Text lines declare their own reveal type in markup, so a curtain wipe and a blur resolve share one entrance stage and one observer. - [r/edge-flare-lines.json](https://ui.askewly.com/r/edge-flare-lines.json): Edge Flare Lines -- Ten light streaks enter from the four edges of a panel and travel toward the center, each stopping short of it so the motion gathers without converging on a point. - [r/exclusive-audio-playback.json](https://ui.askewly.com/r/exclusive-audio-playback.json): Exclusive Audio Playback -- A list where starting one track stops every other, with the playing state mirrored onto the card so the transfer of playback is visible. - [r/fake-progress-preloader.json](https://ui.askewly.com/r/fake-progress-preloader.json): Fake Progress Preloader -- A fake-progress preloader climbs a counter in small fixed ticks toward the real asset completion rate, clamped so it can never pass it: smooth perceived progress that stalls honestly when loading lags, then holds briefly and wipes upward to reveal content. - [r/filter-stagger-grid.json](https://ui.askewly.com/r/filter-stagger-grid.json): Filter Stagger Grid -- A tag filter that staggers the current cards out, swaps the set, then staggers the new cards in with asymmetric easing, reading as flow rather than a jump cut. - [r/flip-heading-scrub.json](https://ui.askewly.com/r/flip-heading-scrub.json): Flip Heading Scrub -- Scattered heading letters gather into a line under scroll scrub using a FLIP state swap, with a reverse-order scale pulse riding the same timeline. - [r/floating-bars-hero.json](https://ui.askewly.com/r/floating-bars-hero.json): Floating Bars Hero -- A floating bars hero centers a balanced title, supporting line, and action slot over a field of scattered vertical bars and a faint plus-grid. Bars are positioned data (pass your own coordinates), tones derive from foreground/primary mixes so both themes work, and the field fades toward content. For landing openings that want texture without imagery. - [r/floating-button-contrast.json](https://ui.askewly.com/r/floating-button-contrast.json): Floating Button Contrast -- A floating action button that measures its own overlap with dark sections each scroll frame and flips its icon tone, then lifts above the footer as it comes into range. - [r/fluid-cursor-background.json](https://ui.askewly.com/r/fluid-cursor-background.json): Fluid Cursor Background -- A low-resolution WebGL fluid simulation stirred by pointer movement, so the whole background behaves like a living reactive surface. - [r/fluid-type-dual-clamp.json](https://ui.askewly.com/r/fluid-type-dual-clamp.json): Fluid Type Dual Clamp -- A headline size formula that joins two viewport bands at different slopes, so type grows fast where it needs to and holds where it must not. - [r/focus-hud-overlay.json](https://ui.askewly.com/r/focus-hud-overlay.json): Focus HUD Overlay -- A focus HUD overlay is a pointer-events-none corner display for exploratory canvases: kicker line, large focus title, next-action hint, and an activation-count badge that pairs with elements highlighted on the canvas. It announces focus changes politely via aria-live and never steals interaction from the surface beneath. - [r/glow-points-scene.json](https://ui.askewly.com/r/glow-points-scene.json): Glow Points Scene -- A glow points scene renders a luminous point-cloud stage for knowledge graphs, constellations, and ambient data backdrops. The wrapper keeps three.js behind a dynamic import, checks WebGL support up front, and falls back to a static notice when the context is unavailable — the scene is an enhancement, never a gate. Rendering only; hover/raycast interaction is the consumer's concern. - [r/glow-points-scene-impl.json](https://ui.askewly.com/r/glow-points-scene-impl.json): Glow Points Scene Impl -- Implementation module for the glow points scene: one THREE.Points draw call with a custom core/halo point-sprite shader (AdditiveBlending, per-point breathing, depth fade), one LineSegments edge field with a pulse shader, UnrealBloom postprocessing, resize handling, and full dispose on unmount. Consumed through glow-points-scene — import that wrapper, not this module, so three.js stays behind a dynamic import. - [r/graph-legend-panel.json](https://ui.askewly.com/r/graph-legend-panel.json): Graph Legend Panel -- A graph legend panel is the sidebar of a data-graph view where every row is both a color key and a filter toggle: dot, label, and count badge. Toggled-off categories dim but keep their counts so totals stay auditable. Category colors arrive as data from the consumer's palette — the panel owns layout and interaction only. - [r/grid-anchored-icons.json](https://ui.askewly.com/r/grid-anchored-icons.json): Grid-Anchored Icons -- Icon placement stored as grid coordinates instead of pixels, shown side by side with pixel storage so the failure of the pixel side is visible when the stage narrows. - [r/grid-rows-accordion.json](https://ui.askewly.com/r/grid-rows-accordion.json): Grid Rows Accordion -- An accordion that animates grid-template-rows from 0fr to 1fr, so content of unknown height opens and closes smoothly without measuring it. - [r/grid-track-magnitude-transition.json](https://ui.askewly.com/r/grid-track-magnitude-transition.json): Grid Track Magnitude Transition -- Magnitudes shown by transitioning the grid track itself, so bars grow and ranks reorder through two CSS declarations instead of a counter. - [r/hero-composition.json](https://ui.askewly.com/r/hero-composition.json): Hero Composition Rotator -- A hero composition rotator cycles one hero surface through three named compositions — centered, proof-surface, compact — so layout variants read as an A/B lineup instead of separate mockups. A tab strip doubles as manual override, each variant swaps its proof element (search bar, workspace preview, none), and the auto-cycle stops entirely under reduced motion. Semantic tokens throughout. - [r/hero-reflection-stage.json](https://ui.askewly.com/r/hero-reflection-stage.json): Hero Reflection Stage -- A hero built as four stacked layers where a mirrored, blurred, masked copy of the same source plays under it, so the stage reads as a lit surface rather than a video box. - [r/hover-flicker-link.json](https://ui.askewly.com/r/hover-flicker-link.json): Hover Flicker Link -- Nav links whose characters flicker in random order on hover while the link itself shrinks a fraction, giving text a tactile response without scrambling it. - [r/hover-preview-follower.json](https://ui.askewly.com/r/hover-preview-follower.json): Hover Preview Follower -- A preview window follows the cursor over a list and swaps content per row, showing what each item holds before a click. - [r/image-trail-cursor.json](https://ui.askewly.com/r/image-trail-cursor.json): Image Trail Cursor -- Pointer travel spawns short-lived image clones along the path, turning mouse movement itself into a gallery preview. - [r/image-treatment.json](https://ui.askewly.com/r/image-treatment.json): Image Treatment Rotator -- An image treatment rotator cycles a photo grid through named recipes — duotone+grain, warm film, high-contrast mono — each a CSS filter chain plus optional blend-mode overlay, with SVG feTurbulence grain rendered as real speckle. A single before/after wipe sweeps the whole grid, and the raw layer resets its clip while transparent so the loop reads as the treatment dissolving, never a snap. Pass your own photos; reduced motion pins the treated state. - [r/interactive-data-table.json](https://ui.askewly.com/r/interactive-data-table.json): Interactive Data Table -- An interactive data table supports scanning and acting on structured records while preserving column meaning. Selection, sorting, filtering, density, and row actions are added only when the user task needs them; the table remains readable without those controls. - [r/kv-frame-stack-reveal.json](https://ui.askewly.com/r/kv-frame-stack-reveal.json): KV Frame Stack Reveal -- A key visual assembled from nine frames revealed at a fixed interval, with only the first frame given high fetch priority so the hero paints immediately. - [r/lazy-three-object-scene.json](https://ui.askewly.com/r/lazy-three-object-scene.json): Lazy Three Object Scene -- A real 3D object (lighting, depth, materials) rendered with three.js via React Three Fiber, loaded strictly behind a dynamic import. Tier ④ in `knowledge/expressive-stack.md` — CSS `perspective` can fake a rotated plane but cannot do lit, shaded geometry. The recipe's load-bearing part is the delivery contract: three.js is a ~155KB gzip fixed cost, so **the lazy boundary is not an optimization, it is the pattern** (judgment rule 4: tier ④ requires lazy-load). - [r/logo-marquee.json](https://ui.askewly.com/r/logo-marquee.json): Logo Marquee -- A logo marquee loops brand names in a seamless horizontal strip: the list is doubled and translated to -50% so the loop has no visible seam, duration scales with item count so adding brands never changes perceived speed, edges fade with a mask, hover pauses, and prefers-reduced-motion stops it. Pure CSS animation — not a carousel and not for interactive content. - [r/magnetic-hover-button.json](https://ui.askewly.com/r/magnetic-hover-button.json): Magnetic Hover Button -- A magnetic hover button leans toward the cursor while hovered and springs back to rest on leave: pointer position is normalized to -1..1, damped through a spring, and rendered as a CSS transform. An experimental showcase/marketing touch — never a product-wide button default. Keyboard users get the identical button minus the lean; reduced motion disables the pull entirely. - [r/magnetic-repulsion-cluster.json](https://ui.askewly.com/r/magnetic-repulsion-cluster.json): Magnetic Repulsion Cluster -- Scattered glyphs and shapes pushed away from the pointer with a power falloff, rotating and scaling as they go, and returning on an elastic ease. - [r/marketing-landing.json](https://ui.askewly.com/r/marketing-landing.json): Marketing Landing -- A standard-funnel marketing landing skeleton: floating-bars hero with dual CTA, logo marquee trust strip, zigzag how-it-works story, terminal demo proof pane with a staggered capability list, before/after contrast pair, three-tier pricing, buyer-ordered FAQ accordion, rotating-word final CTA on a mesh gradient, and a link-column footer. Every section is an independent file so the funnel order can be recomposed; copy, logos, and pricing live in one data.json. Routing is left to the consumer. - [r/mobile-buy-bar-sheet.json](https://ui.askewly.com/r/mobile-buy-bar-sheet.json): Mobile Buy Bar and Sheet -- A fixed bottom buy bar whose option selection opens as either a bottom sheet or a centered modal, both observed in production. - [r/multi-stage-entry-loader.json](https://ui.askewly.com/r/multi-stage-entry-loader.json): Multi Stage Entry Loader -- An entry loader whose image carousel accelerates on a sine curve while a percent counter runs down, then leaves in a four-step overlapping exit. - [r/name-crossfade-state-machine.json](https://ui.askewly.com/r/name-crossfade-state-machine.json): Name Crossfade State Machine -- A background label that swaps only after its exit transition actually ends, committed by transitionend rather than a timer, with a remount key restarting the entrance every time. - [r/odometer-counter.json](https://ui.askewly.com/r/odometer-counter.json): Odometer Counter -- Stat digits roll up like an odometer on viewport entry, with per-element and per-digit stagger so a static figure reads as just counted. - [r/orbit-chips.json](https://ui.askewly.com/r/orbit-chips.json): Orbit Chips -- Orbit chips are the DOM-projection sibling of the orbit wall: labeled chips float on a fibonacci sphere and the cloud can be grabbed and tumbled freely, but every chip is a real DOM button projected per frame — crisp CJK text, native click/focus/aria, zero dependencies (the quaternion and projection math is inline). Auto-spin pauses while grabbing and resumes with inertia; plain clicks pass through to chips and background clicks clear the selection; back-hemisphere chips ignore the pointer. - [r/orbit-wall.json](https://ui.askewly.com/r/orbit-wall.json): Orbit Wall -- An orbit wall is a grab-and-spin cloud of billboarded image cards on a stretched fibonacci sphere, for landing heroes and gallery walls that invite touch. The cloud auto-spins at a visible constant rate, pauses while grabbed, and resumes with inertia on release; cards bloom in with a staggered entry. The wrapper keeps three.js behind a dynamic import, checks WebGL support up front, and falls back to a static notice when the context is unavailable — the scene is an enhancement, never a gate. Focus states, routing, and copy are the consumer concern; clicks surface through onItemClick only. - [r/orbit-wall-impl.json](https://ui.askewly.com/r/orbit-wall-impl.json): Orbit Wall Impl -- Implementation module for the orbit wall: billboarded image cards on a stretched fibonacci sphere (radius/width variation so no angle looks sparse), constant auto-spin that pauses while grabbed, TrackballControls grab rotation with inertia (pan disabled, distance clamped), hover growth with a grab cursor affordance, synchronous tap pick for touch, staggered entry bloom, visibility pause, and full dispose on unmount. Consumed through orbit-wall — import that wrapper, not this module, so three.js stays behind a dynamic import. - [r/palette-generator-core.json](https://ui.askewly.com/r/palette-generator-core.json): Palette Generator Core -- Pure palette math for the color palette generator: a curated seed library, palette generation from seeds with lock-aware regeneration, quality scoring, and candidate rotation. No JSX — registered as a code asset so tools can reference it through the registry. Seed hex values are palette content by definition. - [r/path-length-timed-drawing.json](https://ui.askewly.com/r/path-length-timed-drawing.json): Path Length Timed Drawing -- Hand-drawn SVG marks whose draw duration is derived from path length, so short strokes finish fast and long ones hold a constant pace. - [r/peer-blur-focus.json](https://ui.askewly.com/r/peer-blur-focus.json): Peer Blur Focus -- Hovering one row leaves it untouched and pushes its siblings out of focus with a 6px blur at 0.4 opacity, narrowing attention by recession instead of highlight. - [r/permission-matrix-editor-grid.json](https://ui.askewly.com/r/permission-matrix-editor-grid.json): Permission Matrix Editor Grid -- A permission matrix editor grid implements the `permission-matrix-editor` term's role-by-permission table as an editable, high-density admin surface: both axes stay readable while scrolling a large matrix, explicit grants are visually distinct from inherited ones, and a batch of checkbox edits stays pending behind a diff step instead of writing to the backend on every click. This is the interaction shape Retool-style admin templates and workspace role-settings screens repeat once a permission table grows past a handful of rows and columns. - [r/phase-broadcast-chrome.json](https://ui.askewly.com/r/phase-broadcast-chrome.json): Phase Broadcast Chrome -- A shell chrome that keeps its animation phase in a DOM attribute and broadcasts a value-free CustomEvent, so unrelated consumers react to the same instant while the attribute stays the single source of truth. - [r/pixelation-reveal.json](https://ui.askewly.com/r/pixelation-reveal.json): Pixelation Reveal -- An image resolves from coarse mosaic to sharp in geometric column steps, giving the moment of disclosure a decoding texture. - [r/popover-anatomy-variants.json](https://ui.askewly.com/r/popover-anatomy-variants.json): Popover Anatomy Variants -- Shallow shadow, near-zero radius, optional arrow. The minimal decoration commerce popovers converge on, with the arrow left as a choice. - [r/price-hierarchy-stack.json](https://ui.askewly.com/r/price-hierarchy-stack.json): Price Hierarchy Stack -- Struck-through list price, a discount badge, then an oversized bold sale price. The size inversion three major commerce sites converge on. - [r/product-coverflow.json](https://ui.askewly.com/r/product-coverflow.json): Product Coverflow -- A product coverflow loops product-surface mockups through a 3D carousel: each card's transform derives from its shortest signed distance to the active index so the row wraps seamlessly — translateX for spread, rotateY for the flanks, translateZ/scale/opacity for depth falloff. Card faces are fixed-light showcase content on a dark stage; the accent palette is self-contained CSS variables to remap per brand. Reduced motion stops the auto-advance. - [r/product-detail-purchase-stack.json](https://ui.askewly.com/r/product-detail-purchase-stack.json): Product Detail Purchase Stack -- The product detail purchase stack is the desktop-default vertical block that binds title, price, variant selection, quantity, and the add-to-cart CTA into one continuously visible unit. Baymard's product-page research recommends exposing variant choices (size/color) as visible buttons rather than hiding them behind a dropdown, and surfacing the estimated total plus a return-policy link right next to the CTA rather than deferring cost/policy facts to a later step. `product-option-sheet` is the mobile bottom-sheet variant of this same decision set — this recipe is the inline desktop default, not a replacement for it. - [r/product-grid-density-presets.json](https://ui.askewly.com/r/product-grid-density-presets.json): Product Grid Density Presets -- Named density presets that redefine card width and gap per column count, plus the fixed badge, title, price rhythm inside each card. - [r/progressive-blur-edge.json](https://ui.askewly.com/r/progressive-blur-edge.json): Progressive Blur Edge -- A progressive blur edge stacks four backdrop-filter layers with increasing blur and staggered mask fade-stops at a scroll container's top and bottom, producing a stepped depth-of-field falloff instead of one flat blur band. - [r/pull-to-refresh-list-pattern.json](https://ui.askewly.com/r/pull-to-refresh-list-pattern.json): Pull To Refresh List -- A pull-to-refresh list runs a four-phase state machine — idle, pulling, threshold-crossed, refreshing — where a drag that never crosses the threshold snaps back without refreshing, and the loading indicator holds a fixed height so it never scrolls off-screen while refreshing (per Material 3 guidance). The live region announces the refresh politely. - [r/quiet-form-validation.json](https://ui.askewly.com/r/quiet-form-validation.json): Quiet Form Validation -- Validation that fires on blur and re-runs on input only to clear an error, so typing is never interrupted but corrections are instant. - [r/radial-dial-scroll.json](https://ui.askewly.com/r/radial-dial-scroll.json): Radial Dial Scroll -- A ring of 130 ticks fills clockwise with reading progress, sitting near the reader's eye as a gauge instead of a distant scrollbar. - [r/rail-measured-line.json](https://ui.askewly.com/r/rail-measured-line.json): Rail Measured Line -- A hairline that measures a target element's edge at runtime and scales itself to stop exactly there at every viewport width. - [r/recoverable-empty-state.json](https://ui.askewly.com/r/recoverable-empty-state.json): Recoverable Empty State -- A recoverable empty state explains why expected content is absent and gives the user the most direct next action. It distinguishes first-use emptiness, no search results, filtered-out content, permission limits, and load failures instead of showing one generic illustration for every cause. - [r/reference-viewport-sizing.json](https://ui.askewly.com/r/reference-viewport-sizing.json): Reference Viewport Sizing -- One reference viewport height drives every dimension through min(design px, the same ratio in vh), so the layout only shrinks below the reference and never grows above it. - [r/reward-reveal-loader.json](https://ui.askewly.com/r/reward-reveal-loader.json): Reward Reveal Loader -- A reward-reveal loader shows no spinner or percentage during the wait: when everything is ready it discloses wordmark and content in one staged expo-out burst, trading progress feedback for a single rewarding entrance. - [r/rotating-label.json](https://ui.askewly.com/r/rotating-label.json): Rotating Label -- A rotating label cycles one word slot inside a headline through a list of values using a React key-remount plus a single CSS keyframe — no JS tween. A fixed ch width keeps the sentence still while label lengths change, and a visually hidden live region mirrors values for screen readers. For one emphasized slot, not full-sentence carousels. - [r/saas-app-shell.json](https://ui.askewly.com/r/saas-app-shell.json): SaaS App Shell -- A SaaS application skeleton: inset sidebar shell with grouped navigation, a dashboard page (stat summary cards, interactive visitors chart, searchable members table with recoverable empty state and undoable archive toast), and a sectioned settings page. Routing is left to the consumer; views switch via local state. - [r/scene-sound-map.json](https://ui.askewly.com/r/scene-sound-map.json): Scene Sound Map -- Audio cues keyed to named stages of an experience, with a volume ladder and alternating hover sounds so interaction sound reads as choreography rather than a soundboard. - [r/scramble-text-reveal.json](https://ui.askewly.com/r/scramble-text-reveal.json): Scramble Text Reveal -- One scramble engine reused across load, hover, and scroll triggers, so text entry becomes a single brand signature instead of three effects. - [r/scroll-focus-list.json](https://ui.askewly.com/r/scroll-focus-list.json): Scroll Focus List -- A list whose items fade by their distance from the scroll progress point, so only the item in focus reads at full strength. - [r/scroll-fx.json](https://ui.askewly.com/r/scroll-fx.json): Scroll FX Utilities -- Scroll-reveal utility set: one-shot useInView (IntersectionObserver), live useReducedMotion, an easeOutCubic useCountTween that tweens from the previous value, LetterReveal (per-letter rise-in that splits with Intl.Segmenter grapheme boundaries so Thai/Hindi/emoji never shatter, words wrap as units), and MarkSweep (a primary-tinted highlighter that paints left-to-right on entry). Escalate here from CSS view-timeline reveals only when you need counting, per-letter timing, or latched state — plain appear-on-entry stays tier ① (scroll-driven-reveal). - [r/scroll-overrun-advance.json](https://ui.askewly.com/r/scroll-overrun-advance.json): Scroll Overrun Advance -- At the end of a view, continued scrolling accumulates into a gauge that advances to the next item, reading intent from overrun rather than from a click. - [r/scroll-theme-inversion.json](https://ui.askewly.com/r/scroll-theme-inversion.json): Scroll Theme Inversion -- When a dark section crosses the viewport midline, the whole site chrome inverts to dark, letting section mood tint the UI. - [r/shared-element-flip-transition.json](https://ui.askewly.com/r/shared-element-flip-transition.json): Shared Element FLIP Transition -- The clicked card flies into the next view's hero via a FLIP clone, keeping context unbroken across the page swap. - [r/shipping-method-selector.json](https://ui.askewly.com/r/shipping-method-selector.json): Shipping Method Selector -- A shipping method selector lets a checkout user compare delivery/pickup options by cost and timing in one glance, and binds the choice directly to the order total. Baymard's checkout-flow research treats a total that changes unexpectedly after this step as a trust problem — so selecting a method must recalculate the visible total immediately, not just at final confirmation. - [r/sidebar-application-shell.json](https://ui.askewly.com/r/sidebar-application-shell.json): Sidebar Application Shell -- A sidebar application shell gives repeated product navigation a stable rail while keeping the task surface flexible. It is appropriate for dashboards, internal tools, and documentation products where users move among peer work areas many times per session. - [r/sound-onboarding-gate.json](https://ui.askewly.com/r/sound-onboarding-gate.json): Sound Onboarding Gate -- A sound onboarding gate makes the first click both consent and AudioContext unlock: an explicit 'Click to start' gate starts a synthesized ambient pad, separates background and interaction tones, and remembers the mute state across tab visibility changes. - [r/speed-sensitive-marquee.json](https://ui.askewly.com/r/speed-sensitive-marquee.json): Speed Sensitive Marquee -- A looping logo strip that maps drag velocity and direction onto its flow, so visitors can grab the stream and play with it. - [r/spotlight-mask-reveal.json](https://ui.askewly.com/r/spotlight-mask-reveal.json): Spotlight Mask Reveal -- A spotlight mask reveal hides content behind a radial-gradient mask that follows the pointer as a small torch circle; a click expands the mask past the container so exploration becomes full disclosure. - [r/spring-drag-snap-card.json](https://ui.askewly.com/r/spring-drag-snap-card.json): Spring Drag Snap Card -- A spring drag snap-back card can be dragged anywhere inside its field and springs back to origin on release. The defining property is interruptibility: grab it mid-flight and the spring re-targets without a snap, which duration/easing tweens cannot do — a production-grade default for drag, reorder, and dismiss interactions. Reduced motion swaps the spring for an instant return. - [r/staggered-entrance-group.json](https://ui.askewly.com/r/staggered-entrance-group.json): Staggered Entrance Group -- A staggered entrance group animates children in with tightly offset start times (≤60ms) so the eye reads one coherent arrival instead of a simultaneous pop, each item settling on a spring. Reduced motion renders everything immediately visible with no movement — choreography is presentation, never gating. - [r/stat-summary-grid.json](https://ui.askewly.com/r/stat-summary-grid.json): Stat Summary Grid -- A stat summary grid gives a small set of operational measures a consistent hierarchy: label, current value, and a contextual trend or status. It supports quick orientation at the top of a real dashboard; it is not a license to fabricate metrics for decorative proof. - [r/sticky-steps.json](https://ui.askewly.com/r/sticky-steps.json): Sticky Steps Scrollytelling -- Scrollytelling engine: a sticky full-viewport stage behind a column of text steps, where the step nearest the viewport center is active and a date ticker interpolates between neighbouring steps' dates as you scroll. Three stage modes — cross-fading images under a readability scrim, a large count-up number with progress bar, and sticky stacking evidence cards. Discrete step activation, not scrub: for continuous scroll-scrubbed timelines take the pinned-scroll-sequence recipe (GSAP) instead. Dependency-free (rAF + IO via scroll-fx); reduced motion keeps content complete. - [r/svg-stroke-assembly-loader.json](https://ui.askewly.com/r/svg-stroke-assembly-loader.json): SVG Stroke Assembly Loader -- Scattered logo strokes assemble in shuffled stagger order while a percent counter runs, so loading progress doubles as brand imprint. - [r/swipe-action-row-pattern.json](https://ui.askewly.com/r/swipe-action-row-pattern.json): Swipe Action Row -- A swipe action row reveals a leading (mark done) or trailing (destructive) action depending on swipe direction, with the closed row keeping visible tap-only buttons for both commands — swipe is never the only path to an action. Tapping the row content resets it to closed; the destructive action sits on the trailing side with destructive tokens. - [r/terminal-demo-panel.json](https://ui.askewly.com/r/terminal-demo-panel.json): Terminal Demo Panel -- A terminal demo panel is a self-playing two-pane pitch: a terminal types a command, streams its response lines, then a browser-style result pane slides open beside it — compressing "you ask, it ships" into a loop the visitor watches instead of reads. Playback is pausable and prefers-reduced-motion renders finished states without typing animation. Not an interactive shell or a code block. - [r/text-explosion-physics.json](https://ui.askewly.com/r/text-explosion-physics.json): Text Explosion Physics -- A text explosion hands each headline character to a 2D physics engine on click: radial impulse, air friction, spin: then tweens every glyph back to its exact original position on reset, pairing chaos with a controlled reassembly. - [r/twinkle-star-field.json](https://ui.askewly.com/r/twinkle-star-field.json): Twinkle Star Field -- A 420 point star field where each point twinkles on its own phase, built by swapping two lines into three.js's stock PointsMaterial at compile time with a procedurally generated sprite. - [r/typing-headline.json](https://ui.askewly.com/r/typing-headline.json): Typing Headline -- A typing headline types one slot of a sentence character-by-character with a caret, holds, then cycles to the next value. The slot is fixed-width (sized to the longest value) and right-aligned so the surrounding words never shift. Screen readers get the complete sentence via a live mirror; reduced-motion swaps without typing. - [r/underline-bridge-sweep.json](https://ui.askewly.com/r/underline-bridge-sweep.json): Underline Bridge Sweep -- A hero headline whose emphasis underlines sweep in alternating directions and on staggered offsets while the characters are still arriving. - [r/versioned-docs-switcher-navbar-sidebar-swap.json](https://ui.askewly.com/r/versioned-docs-switcher-navbar-sidebar-swap.json): Versioned Docs Switcher Navbar Sidebar Swap -- The `versioned-docs-switcher` term already names the dropdown-plus-stale-banner concept; this recipe is the actual three-part state contract behind it — picking a version in the navbar dropdown does not just relabel the page, it swaps the sidebar tree's entire data source to that version's structure, and shows a stale-version banner whenever the selected version is not the latest. The dropdown, banner, and sidebar all read from one `activeVersionId` value instead of three independently-set flags. - [r/vertical-horizontal-scroll.json](https://ui.askewly.com/r/vertical-horizontal-scroll.json): Vertical to Horizontal Scroll -- A vertical scroll segment remapped into a horizontal film reel while pinned, creating scene-change rhythm inside one continuous scroll. - [r/window-edge-affordance.json](https://ui.askewly.com/r/window-edge-affordance.json): Window Edge Affordance -- Resize handles that straddle the window border and an asymmetric offscreen buffer, so edges are easy to grab and a window can never be pushed somewhere the user cannot grab it back. - [r/window-placement-cascade.json](https://ui.askewly.com/r/window-placement-cascade.json): Window Placement Cascade -- New windows step diagonally from the previous one and fall back to center when the next step would leave the stage, with center measured against the available area rather than the geometric middle. - [r/window-stack-focus.json](https://ui.askewly.com/r/window-stack-focus.json): Window Stack Focus -- Z-order derived from a stack array, next focus resolved to the topmost non-minimized entry, and minimize flying toward its own taskbar entry so the eye follows where the window went. - [r/zigzag-story-section.json](https://ui.askewly.com/r/zigzag-story-section.json): Zigzag Story Section -- A zigzag story section tells a sequential narrative as alternating copy/media rows — copy left on even rows, right on odd — so a long "how we work" story reads as a walk instead of a wall of features. Each row is one step and order carries meaning; media is a consumer slot with a numbered placeholder fallback. Not for unordered feature grids or single-visual heroes. - [r/procedural-court-line.json](https://ui.askewly.com/r/procedural-court-line.json): Procedural Court Line -- Vector-perfect lines weathered by noise on their own SDF distance and eaten away by threshold zones, so a drawn boundary reads as a hand-scuffed mark. - [r/idle-attract-demo.json](https://ui.askewly.com/r/idle-attract-demo.json): Idle Attract Demo -- An idle screen that demonstrates its own controls, jittering each decision between snap, mid, and slow moves so the demo never reads as a robot. - [r/forgiving-pointer-feel.json](https://ui.askewly.com/r/forgiving-pointer-feel.json): Forgiving Pointer Feel -- Three rules that make fast dragging feel generous: a hit area that swells with speed, a two-stage follow that turns into direct tracking, and a contact-point reflection. - [r/layered-noise-terrain.json](https://ui.askewly.com/r/layered-noise-terrain.json): Layered Noise Terrain -- Terrain grain built by stacking noise layers whose resolution escalates per depth, so coarse swells carry fine wrinkles instead of one flat noise. - [r/seed-deeplink-share.json](https://ui.askewly.com/r/seed-deeplink-share.json): Seed Deeplink Share -- Generative output folded into one address string, with a decoder that refuses malformed seeds, so a lucky result can be handed to someone else intact. - [r/schema-driven-settings.json](https://ui.askewly.com/r/schema-driven-settings.json): Schema Driven Settings -- A settings panel generated from field declarations (readable, desc, type, default) so adding an option costs a schema line rather than UI work. - [r/preset-bundle-switch.json](https://ui.askewly.com/r/preset-bundle-switch.json): Preset Bundle Switch -- A theme preset that carries behavior as well as color: switching the scene changes surface friction, so the rolling object actually travels a different distance. - [r/idle-nudge-hint.json](https://ui.askewly.com/r/idle-nudge-hint.json): Idle Nudge Hint -- After a few idle seconds the surface nudges itself, ramping in over seconds so the invitation to interact arrives without a tooltip. - [r/paper-card-reveal.json](https://ui.askewly.com/r/paper-card-reveal.json): Paper Card Reveal -- A card backed by an offset, rotated hard layer instead of a blur shadow, so the overlay reads as pasted paper rather than a floating pane. - [r/entrance-three-stage.json](https://ui.askewly.com/r/entrance-three-stage.json): Entrance Three Stage -- An entrance whose value is the overlap: a loader, a crossfade, and a camera pull-back run at different lengths and hand off mid-flight rather than in sequence. - [r/padding-proportional-radius.json](https://ui.askewly.com/r/padding-proportional-radius.json): Padding Proportional Radius -- Button radius expressed as a function of padding, so the shape ratio holds as the size scale grows instead of being re-decided per step. - [r/page-transition-modes.json](https://ui.askewly.com/r/page-transition-modes.json): Page Transition Modes -- Three production answers to one route change: press-and-erase, sweep-and-cover, and curtain-with-teardown. Their total lengths differ by more than 3x. - [r/linear-spring-easing.json](https://ui.askewly.com/r/linear-spring-easing.json): Linear Spring Easing -- A CSS linear() multi-stop curve approximating a spring with zero runtime, placed beside a JS spring and a plain ease-out so the overshoot boundary is visible. - [r/drag-scrub-handle.json](https://ui.askewly.com/r/drag-scrub-handle.json): Drag Scrub Handle -- A scrubber where click seeks by absolute position while dragging maps accumulated travel from the grab point, with clamping - the three pieces toggled one by one. - [r/idle-cursor-prewarm.json](https://ui.askewly.com/r/idle-cursor-prewarm.json): Idle Cursor Prewarm -- Fake coordinates flow through the same pointer pipeline before any input arrives, so a reactive surface is already alive while the loader clears - and hands over without a jump. - [r/paragraph-reveal-modes.json](https://ui.askewly.com/r/paragraph-reveal-modes.json): Paragraph Reveal Modes -- One site runs body reveals on two mechanisms: lines that move once on entry, and characters that only brighten while scrubbed to scroll. Rewind is where they split. - [r/falling-image-trail.json](https://ui.askewly.com/r/falling-image-trail.json): Falling Image Trail -- Cursor trail fragments spawn on accumulated travel and exit in three stages - elastic pop, lateral inertia, gravity fall - with fall strength a function of spawn height. - [r/walkable-formal-garden.json](https://ui.askewly.com/r/walkable-formal-garden.json): Walkable Formal Garden -- A formal garden walked in first person, with axis, mirrored parterre broderie, clipped hedge walls and gravel walks all generated from rules instead of loaded as models. Movement carries no acceleration or momentum, the keyboard alone reaches every part of the garden, and prefers-reduced-motion swaps free movement for fixed viewpoints that still show the whole space. ## Vocabulary (562 UI terms) Do NOT fetch the whole dictionary — the source is 665KB. Read the lookup contract first, then the index, then the ONE group shard you need (2–3 fetches). The raw `docs/ui-vocabulary/terms.yml` is deliberately not published; a 404 there is expected. - [docs/design-system/vocabulary-lookup.md](https://ui.askewly.com/llms/docs/design-system/vocabulary-lookup.md): How to look a term up: by name, by intent (category axis), and what to do when the concept is not in the dictionary — a lookup miss must not stop the work - [docs/ui-vocabulary/vocabulary/index.md](https://ui.askewly.com/llms/docs/ui-vocabulary/vocabulary/index.md): Term index — ids and Korean names only, grouped by category then group. No definitions here; it tells you which shard to open - Group shards (60): https://ui.askewly.com/llms/docs/ui-vocabulary/vocabulary/.yml — full term bodies (one_liner, visual_anatomy, when_to_use, anti_use, related). Group ids come from the index ## Decisions (which element to use) When a request names an outcome but not an element, these files split the confusable candidates. Start at the README index, open the ONE cluster that covers your candidates, answer its axes, then evaluate rules top-to-bottom — rule order is itself the judgment. Leave a 요소 결정 block in your report (contract: decision-format.md). - [docs/design-system/decisions/README.md](https://ui.askewly.com/llms/docs/design-system/decisions/README.md): Cluster index — start here. Also lists the clusters deliberately NOT written and why (already answered correctly without axes / no external source for the label) - [docs/design-system/decisions/card-vs-list-expand.md](https://ui.askewly.com/llms/docs/design-system/decisions/card-vs-list-expand.md): 카드형 펼침 — 항목마다 요약을 보여주고 필요하면 자세히 펼치게 하고 싶다 · candidates [disclosure-card, accordion, card, expandable-row] - [docs/design-system/decisions/disclosure-family.md](https://ui.askewly.com/llms/docs/design-system/decisions/disclosure-family.md): 펼침류 — 정보가 많은데 펼치고 접혔으면 좋겠다 · candidates [accordion, tabs, disclosure, disclosure-card, stepper, drawer] - [docs/design-system/decisions/navigation-scope.md](https://ui.askewly.com/llms/docs/design-system/decisions/navigation-scope.md): 내비게이션 범위 — 여기서 저기로 갈 수 있게 해야 하는데 무엇을 두나 · candidates [breadcrumb, sidebar-nav, navigation-drawer, tabs, anchor-nav] - [docs/design-system/decisions/overlay-surfaces.md](https://ui.askewly.com/llms/docs/design-system/decisions/overlay-surfaces.md): 오버레이 표면 — 이 작업을 지금 화면 위에 띄워야 하는데 어떤 방식이 맞나 · candidates [dialog, drawer, side-sheet, modal-bottom-sheet, full-screen-dialog] - [docs/design-system/decisions/single-choice-input.md](https://ui.askewly.com/llms/docs/design-system/decisions/single-choice-input.md): 단일 선택 입력 — 여럿 중 하나를 고르게 해야 한다 · candidates [radio-group, select, segmented-control, switch, combobox] - [docs/design-system/decisions/waiting-and-absence.md](https://ui.askewly.com/llms/docs/design-system/decisions/waiting-and-absence.md): 기다림과 비어 있음 — 아직 보여줄 게 없다 — 무엇을 그 자리에 두나 · candidates [skeleton, spinner, progress-bar, empty-state]