npm - @askewly/design - Versions diffs - 0.6.0 → 0.6.1 - Mend

@askewly/design 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/data/assets.json +1 -1
package/package.json +1 -1

package/data/assets.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"id":"action-sheet-destructive-confirmation","title":"Action Sheet Destructive Confirmation","definition":"An `action-sheet` (vocabulary term) variant tuned for the common case where one of the listed actions is destructive and irreversible (delete).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/action-sheet-destructive-confirmation.md","keywords":["overlays","action-sheet"],"md":"# Action Sheet Destructive Confirmation\n\n> An `action-sheet` (vocabulary term) variant tuned for the common case where one of the listed actions is destructive and irreversible (delete).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/action-sheet-destructive-confirmation.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/action-sheet-destructive-confirmation.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/action-sheet-destructive-confirmation\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/action-sheet-destructive-confirmation.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"actionable-toast","title":"Actionable Toast","definition":"An actionable toast confirms a recent low-risk operation and may offer one short recovery action such as Undo or Retry.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/actionable-toast.md","keywords":[],"md":"# Actionable Toast\n\n> An actionable toast confirms a recent low-risk operation and may offer one short recovery action such as Undo or Retry.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/feedback/actionable-toast.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/actionable-toast.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/actionable-toast\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/actionable-toast.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"adaptive-navigation-container","title":"Adaptive Navigation Container","definition":"One destination set, three possible primary-navigation containers — resolved by rule, not taste.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/adaptive-navigation-container.md","keywords":["navigation","tab-bar","navigation-rail","tabs"],"md":"# Adaptive Navigation Container\n\n> One destination set, three possible primary-navigation containers — resolved by rule, not taste.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/adaptive-navigation-container.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/adaptive-navigation-container.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/adaptive-navigation-container\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/adaptive-navigation-container.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"add-to-cart-feedback-modes","title":"Add to Cart Feedback Modes","definition":"Three real answers to one event: full-page transition, anchored popover, auto-opening drawer. They share only the instant header count update.","install":"npx @askewly/design add add-to-cart-feedback-modes","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/add-to-cart-feedback-modes.md","keywords":["commerce","cart-summary","cart-summary-bar","drawer","toast"],"md":"# Add to Cart Feedback Modes\n\n> Three real answers to one event: full-page transition, anchored popover, auto-opening drawer. They share only the instant header count update.\n\n## 설치\n\n```\nnpx @askewly/design add add-to-cart-feedback-modes\n```\n\nRegistry JSON: https://ui.askewly.com/r/add-to-cart-feedback-modes.json\n\n## 코드 경로\n\n`registry/askewly/add-to-cart-feedback-modes/add-to-cart-feedback-modes.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/add-to-cart-feedback-modes\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/add-to-cart-feedback-modes.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"advanced-filter-builder","title":"Advanced Filter Builder","definition":"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)\".","install":"npx @askewly/design add advanced-filter-builder","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/advanced-filter-builder-condition-groups.md","keywords":["forms","advanced-filter-builder","select","text-field"],"md":"# Advanced Filter Builder\n\n> 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)\".\n\n## 설치\n\n```\nnpx @askewly/design add advanced-filter-builder\n```\n\nRegistry JSON: https://ui.askewly.com/r/advanced-filter-builder.json\n\n## 코드 경로\n\n`registry/askewly/advanced-filter-builder/advanced-filter-builder.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/advanced-filter-builder-condition-groups\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/advanced-filter-builder-condition-groups.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ambient-audio-mixer","title":"Ambient Audio Mixer","definition":"Background layers mix by on-screen position and duck when UI opens, building spatial presence out of sound.","install":"npx @askewly/design add ambient-audio-mixer","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/ambient-audio-mixer.md","keywords":["marketing"],"md":"# Ambient Audio Mixer\n\n> Background layers mix by on-screen position and duck when UI opens, building spatial presence out of sound.\n\n## 설치\n\n```\nnpx @askewly/design add ambient-audio-mixer\n```\n\nRegistry JSON: https://ui.askewly.com/r/ambient-audio-mixer.json\n\n## 코드 경로\n\n`registry/askewly/ambient-audio-mixer/ambient-audio-mixer.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/ambient-audio-mixer\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/ambient-audio-mixer.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"api-reference-layout","title":"Api Reference Layout","definition":"Api Reference Layout — verified recipe demo implementation from the Askewly Design site.","install":"npx @askewly/design add api-reference-layout","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Api Reference Layout\n\n> Api Reference Layout — verified recipe demo implementation from the Askewly Design site.\n\n## 설치\n\n```\nnpx @askewly/design add api-reference-layout\n```\n\nRegistry JSON: https://ui.askewly.com/r/api-reference-layout.json\n\n## 코드 경로\n\n`registry/askewly/api-reference-layout/api-reference-layout.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"api-reference-three-column-layout","title":"API Reference Three-Column Layout","definition":"An API reference page needs a reading path that is different from a prose article: the reader is scanning parameter names and types on the left while running or copying a request on the right.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/api-reference-three-column-layout.md","keywords":["docs","badge"],"md":"# API Reference Three-Column Layout\n\n> An API reference page needs a reading path that is different from a prose article: the reader is scanning parameter names and types on the left while running or copying a request on the right.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/docs/api-reference-three-column-layout.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/api-reference-layout.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/api-reference-three-column-layout\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/api-reference-three-column-layout.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"article-documentation-layout","title":"Article Documentation Layout","definition":"A documentation article layout turns a long implementation rule into a predictable reading path: breadcrumb and title establish context, a short lead states the decision the article helps make, ordered sections carry definitions and examples, and an on-this-page rail exposes the structure without competing with the body.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/article-documentation-layout.md","keywords":["docs","breadcrumb","typography","content-section","anchor-nav"],"md":"# Article Documentation Layout\n\n> A documentation article layout turns a long implementation rule into a predictable reading path: breadcrumb and title establish context, a short lead states the decision the article helps make, ordered sections carry definitions and examples, and an on-this-page rail exposes the structure without competing with the body.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/docs/article-documentation-layout.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/article-documentation-layout.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/article-documentation-layout\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/article-documentation-layout.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ascii-fluid-field","title":"ASCII Fluid Field","definition":"A transparent overlay where the cursor opens a fluid mask over a brightness source, so characters bloom under the pointer, drift with the flow, and fade through a fixed glyph ramp.","install":"npx @askewly/design add ascii-fluid-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/ascii-fluid-field.md","keywords":["marketing","hover-reveal"],"md":"# ASCII Fluid Field\n\n> A transparent overlay where the cursor opens a fluid mask over a brightness source, so characters bloom under the pointer, drift with the flow, and fade through a fixed glyph ramp.\n\n## 설치\n\n```\nnpx @askewly/design add ascii-fluid-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/ascii-fluid-field.json\n\n## 코드 경로\n\n`registry/askewly/ascii-fluid-field/ascii-fluid-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/ascii-fluid-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/ascii-fluid-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ascii-fluid-overlay","title":"ASCII Fluid Overlay","definition":"The reusable core of the ASCII fluid field: a transparent, pointer-events-none canvas that fills its positioned host, runs the cursor-driven fluid mask over an internal brightness source, and stamps the glyph ramp in currentColor. No background of its own; mount it over any hero.","install":"npx @askewly/design add ascii-fluid-overlay","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# ASCII Fluid Overlay\n\n> The reusable core of the ASCII fluid field: a transparent, pointer-events-none canvas that fills its positioned host, runs the cursor-driven fluid mask over an internal brightness source, and stamps the glyph ramp in currentColor. No background of its own; mount it over any hero.\n\n## 설치\n\n```\nnpx @askewly/design add ascii-fluid-overlay\n```\n\nRegistry JSON: https://ui.askewly.com/r/ascii-fluid-overlay.json\n\n## 코드 경로\n\n`registry/askewly/ascii-fluid-overlay/ascii-fluid-overlay.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ascii-particle-logo","title":"ASCII Particle Logo","definition":"A wordmark sampled into ASCII particles that scatter from the cursor, fall under gravity on click, and reassemble in staggered ease-out.","install":"npx @askewly/design add ascii-particle-logo","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/ascii-particle-logo.md","keywords":["marketing","logo"],"md":"# ASCII Particle Logo\n\n> A wordmark sampled into ASCII particles that scatter from the cursor, fall under gravity on click, and reassemble in staggered ease-out.\n\n## 설치\n\n```\nnpx @askewly/design add ascii-particle-logo\n```\n\nRegistry JSON: https://ui.askewly.com/r/ascii-particle-logo.json\n\n## 코드 경로\n\n`registry/askewly/ascii-particle-logo/ascii-particle-logo.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/ascii-particle-logo\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/ascii-particle-logo.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ask-input-bar","title":"Ask Input Bar","definition":"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.","install":"npx @askewly/design add ask-input-bar","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Ask Input Bar\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add ask-input-bar\n```\n\nRegistry JSON: https://ui.askewly.com/r/ask-input-bar.json\n\n## 코드 경로\n\n`registry/askewly/ask-input-bar/ask-input-bar.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"askewly-otter-mascot","title":"Askewly Otter Mascot","definition":"Askewly's Korean-otter mascot as half-block pixel text: one canonical pixel map, four poses, punched-out eyes, and a single lavender ink that lives unchanged in web and terminal surfaces.","install":"npx @askewly/design add askewly-otter-mascot","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/askewly-otter-mascot.md","keywords":["marketing","logo"],"md":"# Askewly Otter Mascot\n\n> Askewly's Korean-otter mascot as half-block pixel text: one canonical pixel map, four poses, punched-out eyes, and a single lavender ink that lives unchanged in web and terminal surfaces.\n\n## 설치\n\n```\nnpx @askewly/design add askewly-otter-mascot\n```\n\nRegistry JSON: https://ui.askewly.com/r/askewly-otter-mascot.json\n\n## 코드 경로\n\n`registry/askewly/askewly-otter-mascot/askewly-otter-mascot.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/askewly-otter-mascot\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/askewly-otter-mascot.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"attr-declared-cursor-modes","title":"Attribute Declared Cursor Modes","definition":"A two-speed follower cursor whose dot leads and ring trails, with reaction targets declared through data attributes and rebound by a debounced MutationObserver.","install":"npx @askewly/design add attr-declared-cursor-modes","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/attr-declared-cursor-modes.md","keywords":["marketing"],"md":"# Attribute Declared Cursor Modes\n\n> A two-speed follower cursor whose dot leads and ring trails, with reaction targets declared through data attributes and rebound by a debounced MutationObserver.\n\n## 설치\n\n```\nnpx @askewly/design add attr-declared-cursor-modes\n```\n\nRegistry JSON: https://ui.askewly.com/r/attr-declared-cursor-modes.json\n\n## 코드 경로\n\n`registry/askewly/attr-declared-cursor-modes/attr-declared-cursor-modes.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/attr-declared-cursor-modes\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/attr-declared-cursor-modes.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"audio-sprite-sfx","title":"Audio Sprite SFX","definition":"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.","install":"npx @askewly/design add audio-sprite-sfx","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/audio-sprite-sfx.md","keywords":["feedback"],"md":"# Audio Sprite SFX\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add audio-sprite-sfx\n```\n\nRegistry JSON: https://ui.askewly.com/r/audio-sprite-sfx.json\n\n## 코드 경로\n\n`registry/askewly/audio-sprite-sfx/audio-sprite-sfx.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/audio-sprite-sfx\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/audio-sprite-sfx.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"audit-log-filterable-export-feed","title":"Audit Log Filterable Export Feed","definition":"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.","install":"npx @askewly/design add audit-log-filterable-export-feed","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/audit-log-filterable-export-feed.md","keywords":["data-display","audit-log","activity-feed"],"md":"# Audit Log Filterable Export Feed\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add audit-log-filterable-export-feed\n```\n\nRegistry JSON: https://ui.askewly.com/r/audit-log-filterable-export-feed.json\n\n## 코드 경로\n\n`registry/askewly/audit-log-filterable-export-feed/audit-log-filterable-export-feed.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/audit-log-filterable-export-feed\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/audit-log-filterable-export-feed.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"auth-card","title":"Auth Card","definition":"A centered card that carries only the auth form, its logo line, and two secondary link positions, leaving the page background to whatever it sits on.","install":"npx @askewly/design add auth-card","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/auth-card.md","keywords":["forms","auth-card","login-page","split-auth-layout","login-dialog"],"md":"# Auth Card\n\n> A centered card that carries only the auth form, its logo line, and two secondary link positions, leaving the page background to whatever it sits on.\n\n## 설치\n\n```\nnpx @askewly/design add auth-card\n```\n\nRegistry JSON: https://ui.askewly.com/r/auth-card.json\n\n## 코드 경로\n\n`registry/askewly/auth-card/auth-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/auth-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/auth-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"auth-gate-modal","title":"Auth Gate Modal","definition":"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.","install":"npx @askewly/design add auth-gate-modal","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Auth Gate Modal\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add auth-gate-modal\n```\n\nRegistry JSON: https://ui.askewly.com/r/auth-gate-modal.json\n\n## 코드 경로\n\n`registry/askewly/auth-gate-modal/auth-gate-modal.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"autoplay-tab-figure","title":"Autoplay Tab Figure","definition":"A tabbed figure that advances every 6.3 seconds, pauses on hover or focus, and scrolls its pill tab list horizontally with edge fades when it overflows.","install":"npx @askewly/design add autoplay-tab-figure","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/autoplay-tab-figure.md","keywords":["marketing","tabs","content-tabs"],"md":"# Autoplay Tab Figure\n\n> A tabbed figure that advances every 6.3 seconds, pauses on hover or focus, and scrolls its pill tab list horizontally with edge fades when it overflows.\n\n## 설치\n\n```\nnpx @askewly/design add autoplay-tab-figure\n```\n\nRegistry JSON: https://ui.askewly.com/r/autoplay-tab-figure.json\n\n## 코드 경로\n\n`registry/askewly/autoplay-tab-figure/autoplay-tab-figure.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/autoplay-tab-figure\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/autoplay-tab-figure.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"avatar-stack","title":"Avatar Stack","definition":"Overlapping rings that summarize headcount visually while the whole list is announced as one label, with the overflow chip sized like a person.","install":"npx @askewly/design add avatar-stack","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/avatar-stack.md","keywords":["data-display","avatar-stack","avatar-group","team-member-row"],"md":"# Avatar Stack\n\n> Overlapping rings that summarize headcount visually while the whole list is announced as one label, with the overflow chip sized like a person.\n\n## 설치\n\n```\nnpx @askewly/design add avatar-stack\n```\n\nRegistry JSON: https://ui.askewly.com/r/avatar-stack.json\n\n## 코드 경로\n\n`registry/askewly/avatar-stack/avatar-stack.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/avatar-stack\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/avatar-stack.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"bar-grid-glyph-morph","title":"Bar Grid Glyph Morph","definition":"A three-by-eight module grid renders a whole character set, and each transition is matched per row so modules travel, stretch, then split or merge into the next glyph.","install":"npx @askewly/design add bar-grid-glyph-morph","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/bar-grid-glyph-morph.md","keywords":["marketing","typography"],"md":"# Bar Grid Glyph Morph\n\n> A three-by-eight module grid renders a whole character set, and each transition is matched per row so modules travel, stretch, then split or merge into the next glyph.\n\n## 설치\n\n```\nnpx @askewly/design add bar-grid-glyph-morph\n```\n\nRegistry JSON: https://ui.askewly.com/r/bar-grid-glyph-morph.json\n\n## 코드 경로\n\n`registry/askewly/bar-grid-glyph-morph/bar-grid-glyph-morph.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/bar-grid-glyph-morph\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/bar-grid-glyph-morph.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"blur-char-entrance","title":"Blur Char Entrance","definition":"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.","install":"npx @askewly/design add blur-char-entrance","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/blur-char-entrance.md","keywords":["marketing","hero","blur-fade-in","typography"],"md":"# Blur Char Entrance\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add blur-char-entrance\n```\n\nRegistry JSON: https://ui.askewly.com/r/blur-char-entrance.json\n\n## 코드 경로\n\n`registry/askewly/blur-char-entrance/blur-char-entrance.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/blur-char-entrance\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/blur-char-entrance.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"bottom-sheet-detents","title":"Bottom Sheet Detents","definition":"A bottom sheet that carries two collapsed/expanded height presets (\"detents\") toggled from a drag handle, and can run in either of two structural modes: `standard-bottom-sheet` (no scrim — the screen behind stays visible and interactive) or `modal-bottom-sheet` (a scrim blocks the background until the sheet is dismissed).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/bottom-sheet-detents.md","keywords":[],"md":"# Bottom Sheet Detents\n\n> A bottom sheet that carries two collapsed/expanded height presets (\"detents\") toggled from a drag handle, and can run in either of two structural modes: `standard-bottom-sheet` (no scrim — the screen behind stays visible and interactive) or `modal-bottom-sheet` (a scrim blocks the background until the sheet is dismissed).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/bottom-sheet-detents.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/bottom-sheet-detents.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/bottom-sheet-detents\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/bottom-sheet-detents.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"bottom-tab-bar","title":"Bottom Tab Bar","definition":"A persistent bar fixed to the bottom of a mobile screen that switches between the app's top-level, equally-important destinations (`tab-bar` in the vocabulary).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/bottom-tab-bar.md","keywords":["navigation","tab-bar"],"md":"# Bottom Tab Bar\n\n> A persistent bar fixed to the bottom of a mobile screen that switches between the app's top-level, equally-important destinations (`tab-bar` in the vocabulary).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/bottom-tab-bar.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/bottom-tab-bar.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/bottom-tab-bar\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/bottom-tab-bar.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"bulk-action-toolbar","title":"Bulk Action Toolbar","definition":"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.","install":"npx @askewly/design add bulk-action-toolbar","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/bulk-action-toolbar-selection-model.md","keywords":[],"md":"# Bulk Action Toolbar\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add bulk-action-toolbar\n```\n\nRegistry JSON: https://ui.askewly.com/r/bulk-action-toolbar.json\n\n## 코드 경로\n\n`registry/askewly/bulk-action-toolbar/bulk-action-toolbar.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/bulk-action-toolbar-selection-model\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/bulk-action-toolbar-selection-model.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"button-size-scale","title":"Button Size Scale","definition":"Two independent size scales for buttons: fixed-height variable-width action CTAs versus fixed-dimension selection controls like size chips and swatches.","install":"npx @askewly/design add button-size-scale","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/button-size-scale.md","keywords":["forms","button","primary-button","secondary-button","variant-selector-buttons"],"md":"# Button Size Scale\n\n> Two independent size scales for buttons: fixed-height variable-width action CTAs versus fixed-dimension selection controls like size chips and swatches.\n\n## 설치\n\n```\nnpx @askewly/design add button-size-scale\n```\n\nRegistry JSON: https://ui.askewly.com/r/button-size-scale.json\n\n## 코드 경로\n\n`registry/askewly/button-size-scale/button-size-scale.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/button-size-scale\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/button-size-scale.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"canvas-particle-field","title":"Canvas Particle Field","definition":"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.","install":"npx @askewly/design add canvas-particle-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/canvas-particle-field.md","keywords":["application-ui"],"md":"# Canvas Particle Field\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add canvas-particle-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/canvas-particle-field.json\n\n## 코드 경로\n\n`registry/askewly/canvas-particle-field/canvas-particle-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/canvas-particle-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/canvas-particle-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"card-flip-3d","title":"3D Card Flip","definition":"A 3D card flip presents two faces of one object — summary and detail — rotating in perspective so the second face reads as the back of the same thing, not a new panel.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/card-flip-3d.md","keywords":["application-ui","card"],"md":"# 3D Card Flip\n\n> A 3D card flip presents two faces of one object — summary and detail — rotating in perspective so the second face reads as the back of the same thing, not a new panel.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/card-flip-3d.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/card-flip-3d.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/card-flip-3d\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/card-flip-3d.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cart-drawer","title":"Cart Drawer","definition":"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`.","install":"npx @askewly/design add cart-drawer","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/cart-drawer.md","keywords":["commerce","cart-summary","cart-summary-bar","quantity-stepper"],"md":"# Cart Drawer\n\n> 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`.\n\n## 설치\n\n```\nnpx @askewly/design add cart-drawer\n```\n\nRegistry JSON: https://ui.askewly.com/r/cart-drawer.json\n\n## 코드 경로\n\n`registry/askewly/cart-drawer/cart-drawer.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/cart-drawer\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/cart-drawer.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cart-line-item-anatomy","title":"Cart Line Item Anatomy","definition":"A three-column cart row with quantity and remove split into their own action bar, and a stepper corrected to a 44px touch target.","install":"npx @askewly/design add cart-line-item-anatomy","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/cart-line-item-anatomy.md","keywords":["commerce","quantity-stepper","cart-summary","cart-summary-bar"],"md":"# Cart Line Item Anatomy\n\n> A three-column cart row with quantity and remove split into their own action bar, and a stepper corrected to a 44px touch target.\n\n## 설치\n\n```\nnpx @askewly/design add cart-line-item-anatomy\n```\n\nRegistry JSON: https://ui.askewly.com/r/cart-line-item-anatomy.json\n\n## 코드 경로\n\n`registry/askewly/cart-line-item-anatomy/cart-line-item-anatomy.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/cart-line-item-anatomy\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/cart-line-item-anatomy.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"catalog-download-teaser","title":"Catalog Download Teaser","definition":"카탈로그 한 권을 받게 하는 2열 티저.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/catalog-download-teaser.md","keywords":[],"md":"# Catalog Download Teaser\n\n> 카탈로그 한 권을 받게 하는 2열 티저.\n\n## 사용 규칙\n\n- 언제 쓰나 — 긴 소개 뒤에 자료 한 건(카탈로그·백서)을 받게 하거나 견적으로 이어 줄 때.\n- 한 화면에 몇 개 — 하나. 이 블록의 주 행동은 아웃라인 버튼(카탈로그 PDF)이고 페이지의 primary 버튼은 헤더 견적·폼 보내기 둘이라 여기서는 쓰지 않는다 (리뷰 1회차 D1 뒤 정정).\n- 안 쓰는 곳 — 이미 primary CTA 가 있는 히어로 근처, 자료가 여러 건인 다운로드 센터.\n- 같이 쓰는 것 — 앞의 `product-line-card-trio`, 뒤의 `featured-news-rail`, 토큰 `action.primary`.\n- 한계 — 한 문장과 버튼 하나만 담는다. 파일 형식·용량 안내, 폼 입력은 따로 설계해야 한다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/catalog-download-teaser.md\n\n## 코드 경로\n\n`examples/robotics-site/src/components/catalog-download-teaser.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/catalog-download-teaser.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"category-product-grid","title":"Category Product Grid","definition":"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.","install":"npx @askewly/design add category-product-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/category-product-grid.md","keywords":["commerce","product-card","filter-bar","sort-control"],"md":"# Category Product Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add category-product-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/category-product-grid.json\n\n## 코드 경로\n\n`registry/askewly/category-product-grid/category-product-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/category-product-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/category-product-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"chaos-settle-grid","title":"Chaos Settle Grid","definition":"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.","install":"npx @askewly/design add chaos-settle-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/chaos-settle-grid.md","keywords":["data-display","card","grid"],"md":"# Chaos Settle Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add chaos-settle-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/chaos-settle-grid.json\n\n## 코드 경로\n\n`registry/askewly/chaos-settle-grid/chaos-settle-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/chaos-settle-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/chaos-settle-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-count-field","title":"Character Count Field","definition":"A visible counter that is never announced, paired with a separate hidden status copy that speaks only near the limit.","install":"npx @askewly/design add character-count-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/character-count-field.md","keywords":["forms","character-count-field","textarea","label"],"md":"# Character Count Field\n\n> A visible counter that is never announced, paired with a separate hidden status copy that speaks only near the limit.\n\n## 설치\n\n```\nnpx @askewly/design add character-count-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/character-count-field.json\n\n## 코드 경로\n\n`registry/askewly/character-count-field/character-count-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-count-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/character-count-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-login","title":"Character Login","definition":"A character login gives the most utilitarian surface in a product a personality whose motion is functional, not decorative: a mascot watches the username field as you type, covers its eyes when focus enters the password field, and peeks through when the user reveals the password.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/character-login.md","keywords":["forms","login-form","password-field"],"md":"# Character Login\n\n> A character login gives the most utilitarian surface in a product a personality whose motion is functional, not decorative: a mascot watches the username field as you type, covers its eyes when focus enters the password field, and peeks through when the user reveals the password.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/forms/character-login.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/character-login.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-login\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/character-login.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-sheet-stage","title":"Character Sheet Stage","definition":"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.","install":"npx @askewly/design add character-sheet-stage","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/character-sheet-stage.md","keywords":["marketing","content-section","image","noise-texture"],"md":"# Character Sheet Stage\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add character-sheet-stage\n```\n\nRegistry JSON: https://ui.askewly.com/r/character-sheet-stage.json\n\n## 코드 경로\n\n`registry/askewly/character-sheet-stage/character-sheet-stage.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-sheet-stage\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/character-sheet-stage.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-stack-crossfade","title":"Character Stack Crossfade","definition":"Stacked figures crossfade in place on selection, with a draggable pagination bar, so the selector reads as a stage rather than a catalog.","install":"npx @askewly/design add character-stack-crossfade","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/character-stack-crossfade.md","keywords":["marketing","pagination","fade-transition"],"md":"# Character Stack Crossfade\n\n> Stacked figures crossfade in place on selection, with a draggable pagination bar, so the selector reads as a stage rather than a catalog.\n\n## 설치\n\n```\nnpx @askewly/design add character-stack-crossfade\n```\n\nRegistry JSON: https://ui.askewly.com/r/character-stack-crossfade.json\n\n## 코드 경로\n\n`registry/askewly/character-stack-crossfade/character-stack-crossfade.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-stack-crossfade\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/character-stack-crossfade.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-zoom-isolation","title":"Character Zoom Isolation","definition":"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.","install":"npx @askewly/design add character-zoom-isolation","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/character-zoom-isolation.md","keywords":["overlays","lightbox","scrim","backdrop-blur"],"md":"# Character Zoom Isolation\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add character-zoom-isolation\n```\n\nRegistry JSON: https://ui.askewly.com/r/character-zoom-isolation.json\n\n## 코드 경로\n\n`registry/askewly/character-zoom-isolation/character-zoom-isolation.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-zoom-isolation\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/character-zoom-isolation.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"chart-series-ramp","title":"Chart Series Ramp","definition":"Per-series ink / bounded-fill / keyline colour roles at six steps, all derived from one semantic token with color-mix, with chart surfaces delegated to site tokens.","install":"npx @askewly/design add chart-series-ramp","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/chart-series-ramp.md","keywords":["data-display","chart","legend"],"md":"# Chart Series Ramp\n\n> Per-series ink / bounded-fill / keyline colour roles at six steps, all derived from one semantic token with color-mix, with chart surfaces delegated to site tokens.\n\n## 설치\n\n```\nnpx @askewly/design add chart-series-ramp\n```\n\nRegistry JSON: https://ui.askewly.com/r/chart-series-ramp.json\n\n## 코드 경로\n\n`registry/askewly/chart-series-ramp/chart-series-ramp.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/chart-series-ramp\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/chart-series-ramp.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"chat-conversation-panel","title":"Chat Conversation Panel","definition":"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.","install":"npx @askewly/design add chat-conversation-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/chat-conversation-panel.md","keywords":["application-ui","chat-message","chat-bubble","message-scroller"],"md":"# Chat Conversation Panel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add chat-conversation-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/chat-conversation-panel.json\n\n## 코드 경로\n\n`registry/askewly/chat-conversation-panel/chat-conversation-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/chat-conversation-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/chat-conversation-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"checkout-order-summary","title":"Checkout Order Summary","definition":"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.","install":"npx @askewly/design add checkout-order-summary","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/checkout-order-summary.md","keywords":["commerce","cart-summary","checkout-step","checkout-progress-header","payment-method-card","order-status"],"md":"# Checkout Order Summary\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add checkout-order-summary\n```\n\nRegistry JSON: https://ui.askewly.com/r/checkout-order-summary.json\n\n## 코드 경로\n\n`registry/askewly/checkout-order-summary/checkout-order-summary.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/checkout-order-summary\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/checkout-order-summary.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"citation-ladder","title":"Citation Ladder","definition":"A three-rung citation ladder: an inline 22px badge that keeps the line height, a fixed 420×420 hover popover with a scrolling excerpt and a 'view source' foot link, and a highlighted passage in the source text.","install":"npx @askewly/design add citation-ladder","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/citation-ladder.md","keywords":["overlays","popover","badge","tooltip"],"md":"# Citation Ladder\n\n> A three-rung citation ladder: an inline 22px badge that keeps the line height, a fixed 420×420 hover popover with a scrolling excerpt and a 'view source' foot link, and a highlighted passage in the source text.\n\n## 설치\n\n```\nnpx @askewly/design add citation-ladder\n```\n\nRegistry JSON: https://ui.askewly.com/r/citation-ladder.json\n\n## 코드 경로\n\n`registry/askewly/citation-ladder/citation-ladder.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/citation-ladder\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/citation-ladder.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"clip-reveal-wordmark","title":"Clip Reveal Wordmark","definition":"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.","install":"npx @askewly/design add clip-reveal-wordmark","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/clip-reveal-wordmark.md","keywords":["marketing","logo","clipping-mask","hover-reveal"],"md":"# Clip Reveal Wordmark\n\n> 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.\n\n## 사용 규칙\n\n- 언제 쓰나 — 헤더에서 짧은 로고를 두고 호버하면 전체 이름을 보여 주고 싶을 때\n- 한 화면에 몇 개 — 헤더당 1개\n- 안 쓰는 곳 — 터치 기기와 1280px 미만(호버가 없어 잘린 채 남는다), 풀네임이 읽혀야 하는 첫 방문 안내\n- 같이 쓰는 것 — 헤더 내비게이션, 모바일 메뉴 오버레이(열리면 로고가 사라진다)\n- 한계 — 자르는 값 130px 이 글자 폭에 묶여 서체·크기·브랜드명이 바뀌면 다시 계산해야 한다\n\n## 설치\n\n```\nnpx @askewly/design add clip-reveal-wordmark\n```\n\nRegistry JSON: https://ui.askewly.com/r/clip-reveal-wordmark.json\n\n## 코드 경로\n\n`registry/askewly/clip-reveal-wordmark/clip-reveal-wordmark.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/clip-reveal-wordmark\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/clip-reveal-wordmark.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"color-palette-generator","title":"Color Palette Generator","definition":"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.","install":"npx @askewly/design add color-palette-generator","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Color Palette Generator\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add color-palette-generator\n```\n\nRegistry JSON: https://ui.askewly.com/r/color-palette-generator.json\n\n## 코드 경로\n\n`registry/askewly/color-palette-generator/color-palette-generator.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"comparison-table-card","title":"Comparison Table Card","definition":"A marketing comparison rendered as a card that reads as an argument rather than a dataset, while keeping a real semantic table underneath.","install":"npx @askewly/design add comparison-table-card","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/comparison-table-card.md","keywords":["marketing","data-grid","table"],"md":"# Comparison Table Card\n\n> A marketing comparison rendered as a card that reads as an argument rather than a dataset, while keeping a real semantic table underneath.\n\n## 설치\n\n```\nnpx @askewly/design add comparison-table-card\n```\n\nRegistry JSON: https://ui.askewly.com/r/comparison-table-card.json\n\n## 코드 경로\n\n`registry/askewly/comparison-table-card/comparison-table-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/comparison-table-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/comparison-table-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"composite-bleach-mh","title":"Composite: bleach-mh Grain","definition":"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.","install":"npx @askewly/design add composite-bleach-mh","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/composite-bleach-mh.md","keywords":["marketing","thumbnail","fade-transition","backdrop-blur"],"md":"# Composite: bleach-mh Grain\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add composite-bleach-mh\n```\n\nRegistry JSON: https://ui.askewly.com/r/composite-bleach-mh.json\n\n## 코드 경로\n\n`registry/askewly/composite-bleach-mh/composite-bleach-mh.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/composite-bleach-mh\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/composite-bleach-mh.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"composite-nk-inspiring","title":"Composite: NK Inspiring Arc","definition":"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.","install":"npx @askewly/design add composite-nk-inspiring","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/composite-nk-inspiring.md","keywords":["marketing","hero","blur-fade-in","cta-section"],"md":"# Composite: NK Inspiring Arc\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add composite-nk-inspiring\n```\n\nRegistry JSON: https://ui.askewly.com/r/composite-nk-inspiring.json\n\n## 코드 경로\n\n`registry/askewly/composite-nk-inspiring/composite-nk-inspiring.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/composite-nk-inspiring\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/composite-nk-inspiring.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"composite-noth-in","title":"Composite: noth.in Grain","definition":"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.","install":"npx @askewly/design add composite-noth-in","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/composite-noth-in.md","keywords":["marketing","hero","loading-state"],"md":"# Composite: noth.in Grain\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add composite-noth-in\n```\n\nRegistry JSON: https://ui.askewly.com/r/composite-noth-in.json\n\n## 코드 경로\n\n`registry/askewly/composite-noth-in/composite-noth-in.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/composite-noth-in\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/composite-noth-in.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"composite-revelatio","title":"Composite: Revelatio Home Grain","definition":"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.","install":"npx @askewly/design add composite-revelatio","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/composite-revelatio.md","keywords":["marketing","loading-state","dark-mode","number-ticker","marquee-row"],"md":"# Composite: Revelatio Home Grain\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add composite-revelatio\n```\n\nRegistry JSON: https://ui.askewly.com/r/composite-revelatio.json\n\n## 코드 경로\n\n`registry/askewly/composite-revelatio/composite-revelatio.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/composite-revelatio\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/composite-revelatio.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"context-annotation","title":"Context Annotation","definition":"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.","install":"npx @askewly/design add context-annotation","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Context Annotation\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add context-annotation\n```\n\nRegistry JSON: https://ui.askewly.com/r/context-annotation.json\n\n## 코드 경로\n\n`registry/askewly/context-annotation/context-annotation.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"context-label-cursor","title":"Context Label Cursor","definition":"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.","install":"npx @askewly/design add context-label-cursor","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/context-label-cursor.md","keywords":["marketing","tooltip","gesture-hint"],"md":"# Context Label Cursor\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add context-label-cursor\n```\n\nRegistry JSON: https://ui.askewly.com/r/context-label-cursor.json\n\n## 코드 경로\n\n`registry/askewly/context-label-cursor/context-label-cursor.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/context-label-cursor\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/context-label-cursor.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"contrast-duo-card","title":"Contrast Duo Card","definition":"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.","install":"npx @askewly/design add contrast-duo-card","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Contrast Duo Card\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add contrast-duo-card\n```\n\nRegistry JSON: https://ui.askewly.com/r/contrast-duo-card.json\n\n## 코드 경로\n\n`registry/askewly/contrast-duo-card/contrast-duo-card.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"copy-field","title":"Copy Field","definition":"A read-only value that never reads as editable, with copy confirmation announced without moving focus and a spoken line that outlives the badge.","install":"npx @askewly/design add copy-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/copy-field.md","keywords":["forms","copy-field","api-key-field","keyboard-shortcut-key"],"md":"# Copy Field\n\n> A read-only value that never reads as editable, with copy confirmation announced without moving focus and a spoken line that outlives the badge.\n\n## 설치\n\n```\nnpx @askewly/design add copy-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/copy-field.json\n\n## 코드 경로\n\n`registry/askewly/copy-field/copy-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/copy-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/copy-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"copy-link-button","title":"Copy Link Button","definition":"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.","install":"npx @askewly/design add copy-link-button","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Copy Link Button\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add copy-link-button\n```\n\nRegistry JSON: https://ui.askewly.com/r/copy-link-button.json\n\n## 코드 경로\n\n`registry/askewly/copy-link-button/copy-link-button.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"crt-ascii-video","title":"CRT ASCII Video","definition":"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.","install":"npx @askewly/design add crt-ascii-video","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/crt-ascii-video.md","keywords":["marketing","clipping-mask","typography"],"md":"# CRT ASCII Video\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add crt-ascii-video\n```\n\nRegistry JSON: https://ui.askewly.com/r/crt-ascii-video.json\n\n## 코드 경로\n\n`registry/askewly/crt-ascii-video/crt-ascii-video.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/crt-ascii-video\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/crt-ascii-video.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"css-only-sticky-sequence","title":"CSS-Only Sticky Sequence","definition":"A pinned-rail scroll sequence built from position:sticky and a one-viewport gap rhythm, with no scroll controller in JavaScript.","install":"npx @askewly/design add css-only-sticky-sequence","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/css-only-sticky-sequence.md","keywords":["layout","sticky-scroll-section","scroll-area","grid"],"md":"# CSS-Only Sticky Sequence\n\n> A pinned-rail scroll sequence built from position:sticky and a one-viewport gap rhythm, with no scroll controller in JavaScript.\n\n## 설치\n\n```\nnpx @askewly/design add css-only-sticky-sequence\n```\n\nRegistry JSON: https://ui.askewly.com/r/css-only-sticky-sequence.json\n\n## 코드 경로\n\n`registry/askewly/css-only-sticky-sequence/css-only-sticky-sequence.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/css-only-sticky-sequence\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/css-only-sticky-sequence.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cursor-proximity-glow","title":"Cursor Proximity Glow","definition":"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.","install":"npx @askewly/design add cursor-proximity-glow","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Cursor Proximity Glow\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add cursor-proximity-glow\n```\n\nRegistry JSON: https://ui.askewly.com/r/cursor-proximity-glow.json\n\n## 코드 경로\n\n`registry/askewly/cursor-proximity-glow/cursor-proximity-glow.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cursor-reactive-field","title":"Cursor Reactive Field","definition":"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.","install":"npx @askewly/design add cursor-reactive-field","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Cursor Reactive Field\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add cursor-reactive-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/cursor-reactive-field.json\n\n## 코드 경로\n\n`registry/askewly/cursor-reactive-field/cursor-reactive-field.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cursor-trail-shader","title":"Cursor Trail Shader","definition":"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.","install":"npx @askewly/design add cursor-trail-shader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/cursor-trail-shader.md","keywords":["marketing","noise-texture","gradient-fill"],"md":"# Cursor Trail Shader\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add cursor-trail-shader\n```\n\nRegistry JSON: https://ui.askewly.com/r/cursor-trail-shader.json\n\n## 코드 경로\n\n`registry/askewly/cursor-trail-shader/cursor-trail-shader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/cursor-trail-shader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/cursor-trail-shader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"curtain-page-transition","title":"Curtain Page Transition","definition":"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.","install":"npx @askewly/design add curtain-page-transition","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/curtain-page-transition.md","keywords":["navigation","transition","slide-transition"],"md":"# Curtain Page Transition\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add curtain-page-transition\n```\n\nRegistry JSON: https://ui.askewly.com/r/curtain-page-transition.json\n\n## 코드 경로\n\n`registry/askewly/curtain-page-transition/curtain-page-transition.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/curtain-page-transition\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/curtain-page-transition.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"data-import-wizard-validation-preview-steps","title":"Data Import Wizard Validation Preview Steps","definition":"A data import wizard validation preview steps recipe implements the `data-import-wizard-validation-preview` term's upload-to-summary contract as five discrete steps: upload, map, validate, preview, confirm.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/data-import-wizard-validation-preview-steps.md","keywords":[],"md":"# Data Import Wizard Validation Preview Steps\n\n> A data import wizard validation preview steps recipe implements the `data-import-wizard-validation-preview` term's upload-to-summary contract as five discrete steps: upload, map, validate, preview, confirm.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/forms/data-import-wizard-validation-preview-steps.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/data-import-wizard-validation-preview-steps.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/data-import-wizard-validation-preview-steps\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/data-import-wizard-validation-preview-steps.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"declarative-reveal-engine","title":"Declarative Reveal Engine","definition":"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.","install":"npx @askewly/design add declarative-reveal-engine","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/declarative-reveal-engine.md","keywords":["marketing","fade-transition","scale-transition"],"md":"# Declarative Reveal Engine\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add declarative-reveal-engine\n```\n\nRegistry JSON: https://ui.askewly.com/r/declarative-reveal-engine.json\n\n## 코드 경로\n\n`registry/askewly/declarative-reveal-engine/declarative-reveal-engine.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/declarative-reveal-engine\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/declarative-reveal-engine.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"deco-equalizer","title":"Deco Equalizer","definition":"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.","install":"npx @askewly/design add deco-equalizer","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/deco-equalizer.md","keywords":["marketing"],"md":"# Deco Equalizer\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add deco-equalizer\n```\n\nRegistry JSON: https://ui.askewly.com/r/deco-equalizer.json\n\n## 코드 경로\n\n`registry/askewly/deco-equalizer/deco-equalizer.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/deco-equalizer\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/deco-equalizer.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"device-frame","title":"Device Frame","definition":"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.","install":"npx @askewly/design add device-frame","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Device Frame\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add device-frame\n```\n\nRegistry JSON: https://ui.askewly.com/r/device-frame.json\n\n## 코드 경로\n\n`registry/askewly/device-frame/device-frame.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"diagonal-clip-reveal","title":"Diagonal Clip Reveal","definition":"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.","install":"npx @askewly/design add diagonal-clip-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/diagonal-clip-reveal.md","keywords":["marketing","clipping-mask"],"md":"# Diagonal Clip Reveal\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add diagonal-clip-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/diagonal-clip-reveal.json\n\n## 코드 경로\n\n`registry/askewly/diagonal-clip-reveal/diagonal-clip-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/diagonal-clip-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/diagonal-clip-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"diagonal-corner-shape-kit","title":"Diagonal Corner Shape Kit","definition":"Three-rounding shape system (diagonal pair, single tab, arch) with same-shape offset plates, leaf buttons and a thick frame section.","install":"npx @askewly/design add diagonal-corner-shape-kit","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/diagonal-corner-shape-kit.md","keywords":["marketing","border-radius","button","card"],"md":"# Diagonal Corner Shape Kit\n\n> Three-rounding shape system (diagonal pair, single tab, arch) with same-shape offset plates, leaf buttons and a thick frame section.\n\n## 설치\n\n```\nnpx @askewly/design add diagonal-corner-shape-kit\n```\n\nRegistry JSON: https://ui.askewly.com/r/diagonal-corner-shape-kit.json\n\n## 코드 경로\n\n`registry/askewly/diagonal-corner-shape-kit/diagonal-corner-shape-kit.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/diagonal-corner-shape-kit\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/diagonal-corner-shape-kit.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"directional-hover-fill","title":"Directional Hover Fill","definition":"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.","install":"npx @askewly/design add directional-hover-fill","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/directional-hover-fill.md","keywords":["marketing","button","hover-state"],"md":"# Directional Hover Fill\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add directional-hover-fill\n```\n\nRegistry JSON: https://ui.askewly.com/r/directional-hover-fill.json\n\n## 코드 경로\n\n`registry/askewly/directional-hover-fill/directional-hover-fill.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/directional-hover-fill\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/directional-hover-fill.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"directional-motion-bloom","title":"Directional Motion Bloom","definition":"Directional motion bloom takes the stock bloom pass and skews its blur direction so the glow stretches along an axis instead of spreading evenly.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/directional-motion-bloom.md","keywords":["marketing","hero"],"md":"# Directional Motion Bloom\n\n> Directional motion bloom takes the stock bloom pass and skews its blur direction so the glow stretches along an axis instead of spreading evenly.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/directional-motion-bloom.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/directional-motion-bloom.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/directional-motion-bloom\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/directional-motion-bloom.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"doc-search-cmdk-grouped-results-panel","title":"Doc Search Cmdk Grouped Results Panel","definition":"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.","install":"npx @askewly/design add doc-search-cmdk-grouped-results-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/doc-search-cmdk-grouped-results-panel.md","keywords":["navigation","command-palette","search-suggestions"],"md":"# Doc Search Cmdk Grouped Results Panel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add doc-search-cmdk-grouped-results-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/doc-search-cmdk-grouped-results-panel.json\n\n## 코드 경로\n\n`registry/askewly/doc-search-cmdk-grouped-results-panel/doc-search-cmdk-grouped-results-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/doc-search-cmdk-grouped-results-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/doc-search-cmdk-grouped-results-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"docs-changelog-category-filter-page","title":"Docs Changelog Category Filter Page","definition":"`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.","install":"npx @askewly/design add docs-changelog-category-filter-page","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/docs-changelog-category-filter-page.md","keywords":["docs","docs-changelog-page","release-note-card"],"md":"# Docs Changelog Category Filter Page\n\n> `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.\n\n## 설치\n\n```\nnpx @askewly/design add docs-changelog-category-filter-page\n```\n\nRegistry JSON: https://ui.askewly.com/r/docs-changelog-category-filter-page.json\n\n## 코드 경로\n\n`registry/askewly/docs-changelog-category-filter-page/docs-changelog-category-filter-page.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/docs-changelog-category-filter-page\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/docs-changelog-category-filter-page.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"docs-code-block","title":"Docs Code Block","definition":"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.","install":"npx @askewly/design add docs-code-block","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/docs-code-block-with-tabs-and-copy.md","keywords":["docs","copy-button"],"md":"# Docs Code Block\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add docs-code-block\n```\n\nRegistry JSON: https://ui.askewly.com/r/docs-code-block.json\n\n## 코드 경로\n\n`registry/askewly/docs-code-block/docs-code-block.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/docs-code-block-with-tabs-and-copy\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/docs-code-block-with-tabs-and-copy.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"docs-site","title":"Docs Site","definition":"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.","install":"npx @askewly/design add docs-site","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Docs Site\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add docs-site\n```\n\nRegistry JSON: https://ui.askewly.com/r/docs-site.json\n\n## 코드 경로\n\n`registry/askewly/docs-site/api-page.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"drag-quote-anchored-comments","title":"Drag-Quote Anchored Comments","definition":"Comments that point at nothing drift into a second, disconnected conversation.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/drag-quote-anchored-comments.md","keywords":["feedback","comment-composer","avatar"],"md":"# Drag-Quote Anchored Comments\n\n> Comments that point at nothing drift into a second, disconnected conversation.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/feedback/drag-quote-anchored-comments.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/drag-quote-anchored-comments.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"drag-scrub-handle","title":"Drag Scrub Handle","definition":"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.","install":"npx @askewly/design add drag-scrub-handle","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/drag-scrub-handle.md","keywords":["application-ui","scrubber","drag-state"],"md":"# Drag Scrub Handle\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add drag-scrub-handle\n```\n\nRegistry JSON: https://ui.askewly.com/r/drag-scrub-handle.json\n\n## 코드 경로\n\n`registry/askewly/drag-scrub-handle/drag-scrub-handle.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/drag-scrub-handle\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/drag-scrub-handle.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"dual-mode-line-reveal","title":"Dual Mode Line Reveal","definition":"Text lines declare their own reveal type in markup, so a curtain wipe and a blur resolve share one entrance stage and one observer.","install":"npx @askewly/design add dual-mode-line-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/dual-mode-line-reveal.md","keywords":["marketing","blur-fade-in","typography"],"md":"# Dual Mode Line Reveal\n\n> Text lines declare their own reveal type in markup, so a curtain wipe and a blur resolve share one entrance stage and one observer.\n\n## 설치\n\n```\nnpx @askewly/design add dual-mode-line-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/dual-mode-line-reveal.json\n\n## 코드 경로\n\n`registry/askewly/dual-mode-line-reveal/dual-mode-line-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/dual-mode-line-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/dual-mode-line-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"dual-ring-soft-point-sprite","title":"Dual Ring Soft Point Sprite","definition":"A dual ring soft point sprite decides what a single glowing particle looks like.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/dual-ring-soft-point-sprite.md","keywords":["marketing","hero"],"md":"# Dual Ring Soft Point Sprite\n\n> A dual ring soft point sprite decides what a single glowing particle looks like.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/dual-ring-soft-point-sprite.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/dual-ring-soft-point-sprite.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/dual-ring-soft-point-sprite\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/dual-ring-soft-point-sprite.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"edge-flare-lines","title":"Edge Flare Lines","definition":"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.","install":"npx @askewly/design add edge-flare-lines","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/edge-flare-lines.md","keywords":["marketing","background-beams","hero"],"md":"# Edge Flare Lines\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add edge-flare-lines\n```\n\nRegistry JSON: https://ui.askewly.com/r/edge-flare-lines.json\n\n## 코드 경로\n\n`registry/askewly/edge-flare-lines/edge-flare-lines.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/edge-flare-lines\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/edge-flare-lines.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"editable-text","title":"Editable Text","definition":"An inline editable heading or label: click to edit in place, Enter confirms, Escape restores, and an empty confirmation falls back to a default value so the title never disappears.","install":"npx @askewly/design add editable-text","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Editable Text\n\n> An inline editable heading or label: click to edit in place, Enter confirms, Escape restores, and an empty confirmation falls back to a default value so the title never disappears.\n\n## 설치\n\n```\nnpx @askewly/design add editable-text\n```\n\nRegistry JSON: https://ui.askewly.com/r/editable-text.json\n\n## 코드 경로\n\n`registry/askewly/editable-text/editable-text.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"entrance-three-stage","title":"Entrance Three Stage","definition":"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.","install":"npx @askewly/design add entrance-three-stage","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/entrance-three-stage.md","keywords":["marketing","loading-state","progress-bar"],"md":"# Entrance Three Stage\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add entrance-three-stage\n```\n\nRegistry JSON: https://ui.askewly.com/r/entrance-three-stage.json\n\n## 코드 경로\n\n`registry/askewly/entrance-three-stage/entrance-three-stage.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/entrance-three-stage\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/entrance-three-stage.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"entry-veil-color-relay","title":"Entry Veil Color Relay","definition":"An entry veil makes a hard route change feel continuous without a SPA transition framework: the departing page records its dominant background color, and the arriving page paints a full-screen veil of that color on its very first frame, then fades it out.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/entry-veil-color-relay.md","keywords":["marketing","fade-transition"],"md":"# Entry Veil Color Relay\n\n> An entry veil makes a hard route change feel continuous without a SPA transition framework: the departing page records its dominant background color, and the arriving page paints a full-screen veil of that color on its very first frame, then fades it out.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/entry-veil-color-relay.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/entry-veil-color-relay.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"exclusive-audio-playback","title":"Exclusive Audio Playback","definition":"A list where starting one track stops every other, with the playing state mirrored onto the card so the transfer of playback is visible.","install":"npx @askewly/design add exclusive-audio-playback","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/exclusive-audio-playback.md","keywords":["application-ui","audio-player-controls","list","media-card"],"md":"# Exclusive Audio Playback\n\n> A list where starting one track stops every other, with the playing state mirrored onto the card so the transfer of playback is visible.\n\n## 설치\n\n```\nnpx @askewly/design add exclusive-audio-playback\n```\n\nRegistry JSON: https://ui.askewly.com/r/exclusive-audio-playback.json\n\n## 코드 경로\n\n`registry/askewly/exclusive-audio-playback/exclusive-audio-playback.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/exclusive-audio-playback\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/exclusive-audio-playback.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"fake-progress-preloader","title":"Fake Progress Preloader","definition":"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.","install":"npx @askewly/design add fake-progress-preloader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/fake-progress-preloader.md","keywords":["feedback","loading-state","progress-bar"],"md":"# Fake Progress Preloader\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add fake-progress-preloader\n```\n\nRegistry JSON: https://ui.askewly.com/r/fake-progress-preloader.json\n\n## 코드 경로\n\n`registry/askewly/fake-progress-preloader/fake-progress-preloader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/fake-progress-preloader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/fake-progress-preloader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"falling-image-trail","title":"Falling Image Trail","definition":"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.","install":"npx @askewly/design add falling-image-trail","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/falling-image-trail.md","keywords":["marketing","image"],"md":"# Falling Image Trail\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add falling-image-trail\n```\n\nRegistry JSON: https://ui.askewly.com/r/falling-image-trail.json\n\n## 코드 경로\n\n`registry/askewly/falling-image-trail/falling-image-trail.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/falling-image-trail\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/falling-image-trail.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"feature-row-fixed-axis","title":"Feature Row (Fixed Axis)","definition":"Alternating feature rows that keep the body text on a fixed axis, so a scanning reader never has to re-find the text column.","install":"npx @askewly/design add feature-row-fixed-axis","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/feature-row-fixed-axis.md","keywords":["marketing","hero","container"],"md":"# Feature Row (Fixed Axis)\n\n> Alternating feature rows that keep the body text on a fixed axis, so a scanning reader never has to re-find the text column.\n\n## 사용 규칙\n\n- 언제 쓰나 — 기능 행을 여러 줄 반복하며 글을 한쪽에 고정해 훑어 읽게 할 때\n- 한 화면에 몇 개 — 페이지당 행 여러 개, 뒤집는 행은 최대 1개\n- 안 쓰는 곳 — 행마다 실루엣이 달라야 하는 긴 행 목록(지그재그 변형을 쓴다)\n- 같이 쓰는 것 — 미디어 슬롯(비워서 준다), 컨테이너가 쥔 가로 패딩\n- 한계 — 행을 전부 번갈아 놓으면 이 recipe 가 아니라 지그재그다, 좁은 화면에서는 모든 행이 글 먼저 쌓인다\n\n## 설치\n\n```\nnpx @askewly/design add feature-row-fixed-axis\n```\n\nRegistry JSON: https://ui.askewly.com/r/feature-row-fixed-axis.json\n\n## 코드 경로\n\n`registry/askewly/feature-row-fixed-axis/feature-row-fixed-axis.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/feature-row-fixed-axis\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/feature-row-fixed-axis.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"featured-news-rail","title":"Featured News Rail","definition":"소식·사례를 \"하나는 크게, 나머지는 목록으로\" 보여 주는 레일.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/featured-news-rail.md","keywords":[],"md":"# Featured News Rail\n\n> 소식·사례를 \"하나는 크게, 나머지는 목록으로\" 보여 주는 레일.\n\n## 사용 규칙\n\n- 언제 쓰나 — 최근 소식·사례 4건 안팎을 한 구간에서 소개하고 전체 목록으로 보낼 때.\n- 한 화면에 몇 개 — 하나.\n- 안 쓰는 곳 — 글이 수십 건인 아카이브, 읽기가 목적인 본문, 모바일 전용 피드.\n- 같이 쓰는 것 — 앞의 `catalog-download-teaser`, 뒤의 `network-dot-map-stat`, 토큰 `--scrim-card-to`·`--chip`.\n- 한계 — 탭 전환·필터가 없다. 목록은 3개 고정 높이 가정이라 긴 제목이 많으면 피처드와 높이가 어긋난다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/featured-news-rail.md\n\n## 코드 경로\n\n`examples/robotics-site/src/components/featured-news-rail.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/featured-news-rail.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"filter-stagger-grid","title":"Filter Stagger Grid","definition":"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.","install":"npx @askewly/design add filter-stagger-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/filter-stagger-grid.md","keywords":["marketing","card","grid","fade-transition"],"md":"# Filter Stagger Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add filter-stagger-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/filter-stagger-grid.json\n\n## 코드 경로\n\n`registry/askewly/filter-stagger-grid/filter-stagger-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/filter-stagger-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/filter-stagger-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"flip-heading-scrub","title":"Flip Heading Scrub","definition":"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.","install":"npx @askewly/design add flip-heading-scrub","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/flip-heading-scrub.md","keywords":["marketing","typography"],"md":"# Flip Heading Scrub\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add flip-heading-scrub\n```\n\nRegistry JSON: https://ui.askewly.com/r/flip-heading-scrub.json\n\n## 코드 경로\n\n`registry/askewly/flip-heading-scrub/flip-heading-scrub.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/flip-heading-scrub\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/flip-heading-scrub.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"floating-bars-hero","title":"Floating Bars Hero","definition":"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.","install":"npx @askewly/design add floating-bars-hero","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Floating Bars Hero\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add floating-bars-hero\n```\n\nRegistry JSON: https://ui.askewly.com/r/floating-bars-hero.json\n\n## 코드 경로\n\n`registry/askewly/floating-bars-hero/floating-bars-hero.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"floating-button-contrast","title":"Floating Button Contrast","definition":"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.","install":"npx @askewly/design add floating-button-contrast","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/floating-button-contrast.md","keywords":["navigation","floating-action-button","color-contrast"],"md":"# Floating Button Contrast\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add floating-button-contrast\n```\n\nRegistry JSON: https://ui.askewly.com/r/floating-button-contrast.json\n\n## 코드 경로\n\n`registry/askewly/floating-button-contrast/floating-button-contrast.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/floating-button-contrast\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/floating-button-contrast.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"fluid-cursor-background","title":"Fluid Cursor Background","definition":"A low-resolution WebGL fluid simulation stirred by pointer movement, so the whole background behaves like a living reactive surface.","install":"npx @askewly/design add fluid-cursor-background","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/fluid-cursor-background.md","keywords":["marketing","animated-gradient-background","aurora-background","hover-reveal"],"md":"# Fluid Cursor Background\n\n> A low-resolution WebGL fluid simulation stirred by pointer movement, so the whole background behaves like a living reactive surface.\n\n## 설치\n\n```\nnpx @askewly/design add fluid-cursor-background\n```\n\nRegistry JSON: https://ui.askewly.com/r/fluid-cursor-background.json\n\n## 코드 경로\n\n`registry/askewly/fluid-cursor-background/fluid-cursor-background.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/fluid-cursor-background\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/fluid-cursor-background.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"fluid-type-dual-clamp","title":"Fluid Type Dual Clamp","definition":"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.","install":"npx @askewly/design add fluid-type-dual-clamp","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/fluid-type-dual-clamp.md","keywords":["layout","typography","fluid-layout"],"md":"# Fluid Type Dual Clamp\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add fluid-type-dual-clamp\n```\n\nRegistry JSON: https://ui.askewly.com/r/fluid-type-dual-clamp.json\n\n## 코드 경로\n\n`registry/askewly/fluid-type-dual-clamp/fluid-type-dual-clamp.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/fluid-type-dual-clamp\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/fluid-type-dual-clamp.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"focus-hud-overlay","title":"Focus HUD Overlay","definition":"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.","install":"npx @askewly/design add focus-hud-overlay","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Focus HUD Overlay\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add focus-hud-overlay\n```\n\nRegistry JSON: https://ui.askewly.com/r/focus-hud-overlay.json\n\n## 코드 경로\n\n`registry/askewly/focus-hud-overlay/focus-hud-overlay.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"footnote-citation-loop","title":"Footnote Citation Loop","definition":"Body superscripts jump to numbered notes and each note links back to its citation, both anchors offset below a fixed header and focused on arrival.","install":"npx @askewly/design add footnote-citation-loop","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/footnote-citation-loop.md","keywords":["docs","anchor-nav","sticky-header"],"md":"# Footnote Citation Loop\n\n> Body superscripts jump to numbered notes and each note links back to its citation, both anchors offset below a fixed header and focused on arrival.\n\n## 설치\n\n```\nnpx @askewly/design add footnote-citation-loop\n```\n\nRegistry JSON: https://ui.askewly.com/r/footnote-citation-loop.json\n\n## 코드 경로\n\n`registry/askewly/footnote-citation-loop/footnote-citation-loop.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/footnote-citation-loop\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/footnote-citation-loop.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"forgiving-pointer-feel","title":"Forgiving Pointer Feel","definition":"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.","install":"npx @askewly/design add forgiving-pointer-feel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/forgiving-pointer-feel.md","keywords":["application-ui","slider","sheet-drag-handle"],"md":"# Forgiving Pointer Feel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add forgiving-pointer-feel\n```\n\nRegistry JSON: https://ui.askewly.com/r/forgiving-pointer-feel.json\n\n## 코드 경로\n\n`registry/askewly/forgiving-pointer-feel/forgiving-pointer-feel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/forgiving-pointer-feel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/forgiving-pointer-feel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"fullpage-snap-landing","title":"Fullpage Snap Landing","definition":"A fullpage snap landing divides a marketing narrative into viewport-height chapters that scroll-snap into place, with a section indicator that stays in sync with scroll position and with the URL.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/fullpage-snap-landing.md","keywords":["marketing","scroll-snap","sticky-scroll-section","hero"],"md":"# Fullpage Snap Landing\n\n> A fullpage snap landing divides a marketing narrative into viewport-height chapters that scroll-snap into place, with a section indicator that stays in sync with scroll position and with the URL.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/fullpage-snap-landing.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/fullpage-snap-landing.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/fullpage-snap-landing\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/fullpage-snap-landing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"glass-panel","title":"Glass Panel","definition":"A glass panel keeps foreground content legible over a busy backdrop by blurring what is behind it (`backdrop-filter`), instead of covering it with an opaque fill.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/glass-panel.md","keywords":[],"md":"# Glass Panel\n\n> A glass panel keeps foreground content legible over a busy backdrop by blurring what is behind it (`backdrop-filter`), instead of covering it with an opaque fill.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/glass-panel.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/glass-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/glass-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/glass-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"glow-points-scene-impl","title":"Glow Points Scene Impl","definition":"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.","install":"npx @askewly/design add glow-points-scene-impl","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Glow Points Scene Impl\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add glow-points-scene-impl\n```\n\nRegistry JSON: https://ui.askewly.com/r/glow-points-scene-impl.json\n\n## 코드 경로\n\n`registry/askewly/glow-points-scene-impl/glow-points-scene-impl.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"glow-points-scene","title":"Glow Points Scene","definition":"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.","install":"npx @askewly/design add glow-points-scene","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Glow Points Scene\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add glow-points-scene\n```\n\nRegistry JSON: https://ui.askewly.com/r/glow-points-scene.json\n\n## 코드 경로\n\n`registry/askewly/glow-points-scene/glow-points-scene.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"gpgpu-attract-repel-field","title":"GPGPU Attract Repel Field","definition":"A GPGPU attract repel field keeps particle position and velocity in floating point textures and steps them on the GPU, so tens of thousands of grains can be shoved aside by the cursor and drift back into shape without the CPU touching a single one.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/gpgpu-attract-repel-field.md","keywords":[],"md":"# GPGPU Attract Repel Field\n\n> A GPGPU attract repel field keeps particle position and velocity in floating point textures and steps them on the GPU, so tens of thousands of grains can be shoved aside by the cursor and drift back into shape without the CPU touching a single one.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/gpgpu-attract-repel-field.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/gpgpu-attract-repel-field.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/gpgpu-attract-repel-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grain-texture-overlay","title":"Grain Texture Overlay","definition":"A grain texture overlay layers subtle procedural noise above a gradient or brand surface — it removes visible banding on smooth gradients and adds analog film texture.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/grain-texture-overlay.md","keywords":[],"md":"# Grain Texture Overlay\n\n> A grain texture overlay layers subtle procedural noise above a gradient or brand surface — it removes visible banding on smooth gradients and adds analog film texture.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/grain-texture-overlay.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/grain-texture-overlay.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grain-texture-overlay\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/grain-texture-overlay.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"graph-legend-panel","title":"Graph Legend Panel","definition":"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.","install":"npx @askewly/design add graph-legend-panel","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Graph Legend Panel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add graph-legend-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/graph-legend-panel.json\n\n## 코드 경로\n\n`registry/askewly/graph-legend-panel/graph-legend-panel.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grid-anchored-icons","title":"Grid-Anchored Icons","definition":"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.","install":"npx @askewly/design add grid-anchored-icons","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/grid-anchored-icons.md","keywords":["layout","icon","grid","drag-state"],"md":"# Grid-Anchored Icons\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add grid-anchored-icons\n```\n\nRegistry JSON: https://ui.askewly.com/r/grid-anchored-icons.json\n\n## 코드 경로\n\n`registry/askewly/grid-anchored-icons/grid-anchored-icons.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grid-anchored-icons\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/grid-anchored-icons.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grid-rows-accordion","title":"Grid Rows Accordion","definition":"An accordion that animates grid-template-rows from 0fr to 1fr, so content of unknown height opens and closes smoothly without measuring it.","install":"npx @askewly/design add grid-rows-accordion","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/grid-rows-accordion.md","keywords":["marketing","accordion","disclosure"],"md":"# Grid Rows Accordion\n\n> An accordion that animates grid-template-rows from 0fr to 1fr, so content of unknown height opens and closes smoothly without measuring it.\n\n## 설치\n\n```\nnpx @askewly/design add grid-rows-accordion\n```\n\nRegistry JSON: https://ui.askewly.com/r/grid-rows-accordion.json\n\n## 코드 경로\n\n`registry/askewly/grid-rows-accordion/grid-rows-accordion.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grid-rows-accordion\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/grid-rows-accordion.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grid-track-magnitude-transition","title":"Grid Track Magnitude Transition","definition":"Magnitudes shown by transitioning the grid track itself, so bars grow and ranks reorder through two CSS declarations instead of a counter.","install":"npx @askewly/design add grid-track-magnitude-transition","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/grid-track-magnitude-transition.md","keywords":["data-display","progress-bar","chart","stat-list"],"md":"# Grid Track Magnitude Transition\n\n> Magnitudes shown by transitioning the grid track itself, so bars grow and ranks reorder through two CSS declarations instead of a counter.\n\n## 설치\n\n```\nnpx @askewly/design add grid-track-magnitude-transition\n```\n\nRegistry JSON: https://ui.askewly.com/r/grid-track-magnitude-transition.json\n\n## 코드 경로\n\n`registry/askewly/grid-track-magnitude-transition/grid-track-magnitude-transition.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grid-track-magnitude-transition\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/grid-track-magnitude-transition.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grounded-source-panel","title":"Grounded Source Panel","definition":"A source list where the checkbox is the answer's grounding scope, rows show a favicon and a one-line title with a hover-only menu, and clicking a row swaps the same panel into the source's guide and highlighted passages.","install":"npx @askewly/design add grounded-source-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/grounded-source-panel.md","keywords":["application-ui","checkbox","accordion","empty-state"],"md":"# Grounded Source Panel\n\n> A source list where the checkbox is the answer's grounding scope, rows show a favicon and a one-line title with a hover-only menu, and clicking a row swaps the same panel into the source's guide and highlighted passages.\n\n## 설치\n\n```\nnpx @askewly/design add grounded-source-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/grounded-source-panel.json\n\n## 코드 경로\n\n`registry/askewly/grounded-source-panel/grounded-source-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grounded-source-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/grounded-source-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"half-arch-cta-band","title":"Half Arch CTA Band","definition":"End-of-page call-to-action band centred over a faint half-circle arch, in light and dark variants with one or two buttons.","install":"npx @askewly/design add half-arch-cta-band","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/half-arch-cta-band.md","keywords":["marketing","cta-section"],"md":"# Half Arch CTA Band\n\n> End-of-page call-to-action band centred over a faint half-circle arch, in light and dark variants with one or two buttons.\n\n## 사용 규칙\n\n- 언제 쓰나 — 페이지 끝에서 제목·문단·버튼 1~2개로 행동을 마무리할 때\n- 한 화면에 몇 개 — 페이지당 1개(끝자락)\n- 안 쓰는 곳 — 페이지 중간 구간, 호 색이 20% 알파를 넘어야 하는 강조 배경\n- 같이 쓰는 것 — button recipe, 라이트·다크 두 변형\n- 한계 — 호는 폭 50%·알파 15% 이하의 장식일 뿐 대비를 만들어 주지 않는다, 원이나 덩어리 모양으로 바꾸면 안 된다\n\n## 설치\n\n```\nnpx @askewly/design add half-arch-cta-band\n```\n\nRegistry JSON: https://ui.askewly.com/r/half-arch-cta-band.json\n\n## 코드 경로\n\n`registry/askewly/half-arch-cta-band/half-arch-cta-band.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/half-arch-cta-band\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/half-arch-cta-band.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"heart-kelp-strand","title":"Heart Kelp Strand","definition":"A kelp forest generated rather than drawn: one walked-stem function sampled twenty-eight times across three depth layers, with heart leaves alternating up each strand and depth carried by blur, opacity, and height alone.","install":"npx @askewly/design add heart-kelp-strand","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/heart-kelp-strand.md","keywords":["marketing","hero","divider"],"md":"# Heart Kelp Strand\n\n> A kelp forest generated rather than drawn: one walked-stem function sampled twenty-eight times across three depth layers, with heart leaves alternating up each strand and depth carried by blur, opacity, and height alone.\n\n## 설치\n\n```\nnpx @askewly/design add heart-kelp-strand\n```\n\nRegistry JSON: https://ui.askewly.com/r/heart-kelp-strand.json\n\n## 코드 경로\n\n`registry/askewly/heart-kelp-strand/heart-kelp-strand.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/heart-kelp-strand\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/heart-kelp-strand.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"hero-composition","title":"Hero Composition Rotator","definition":"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.","install":"npx @askewly/design add hero-composition","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Hero Composition Rotator\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add hero-composition\n```\n\nRegistry JSON: https://ui.askewly.com/r/hero-composition.json\n\n## 코드 경로\n\n`registry/askewly/hero-composition/hero-composition.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"hero-reflection-stage","title":"Hero Reflection Stage","definition":"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.","install":"npx @askewly/design add hero-reflection-stage","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/hero-reflection-stage.md","keywords":["marketing","hero","image"],"md":"# Hero Reflection Stage\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add hero-reflection-stage\n```\n\nRegistry JSON: https://ui.askewly.com/r/hero-reflection-stage.json\n\n## 코드 경로\n\n`registry/askewly/hero-reflection-stage/hero-reflection-stage.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/hero-reflection-stage\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/hero-reflection-stage.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"hover-flicker-link","title":"Hover Flicker Link","definition":"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.","install":"npx @askewly/design add hover-flicker-link","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/hover-flicker-link.md","keywords":["marketing","link","hover-state"],"md":"# Hover Flicker Link\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add hover-flicker-link\n```\n\nRegistry JSON: https://ui.askewly.com/r/hover-flicker-link.json\n\n## 코드 경로\n\n`registry/askewly/hover-flicker-link/hover-flicker-link.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/hover-flicker-link\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/hover-flicker-link.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"hover-preview-follower","title":"Hover Preview Follower","definition":"A preview window follows the cursor over a list and swaps content per row, showing what each item holds before a click.","install":"npx @askewly/design add hover-preview-follower","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/hover-preview-follower.md","keywords":["marketing","hover-card","hover-reveal"],"md":"# Hover Preview Follower\n\n> A preview window follows the cursor over a list and swaps content per row, showing what each item holds before a click.\n\n## 설치\n\n```\nnpx @askewly/design add hover-preview-follower\n```\n\nRegistry JSON: https://ui.askewly.com/r/hover-preview-follower.json\n\n## 코드 경로\n\n`registry/askewly/hover-preview-follower/hover-preview-follower.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/hover-preview-follower\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/hover-preview-follower.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"idle-attract-demo","title":"Idle Attract Demo","definition":"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.","install":"npx @askewly/design add idle-attract-demo","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/idle-attract-demo.md","keywords":["application-ui","list","menu-item"],"md":"# Idle Attract Demo\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add idle-attract-demo\n```\n\nRegistry JSON: https://ui.askewly.com/r/idle-attract-demo.json\n\n## 코드 경로\n\n`registry/askewly/idle-attract-demo/idle-attract-demo.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/idle-attract-demo\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/idle-attract-demo.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"idle-cursor-prewarm","title":"Idle Cursor Prewarm","definition":"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.","install":"npx @askewly/design add idle-cursor-prewarm","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/idle-cursor-prewarm.md","keywords":["marketing"],"md":"# Idle Cursor Prewarm\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add idle-cursor-prewarm\n```\n\nRegistry JSON: https://ui.askewly.com/r/idle-cursor-prewarm.json\n\n## 코드 경로\n\n`registry/askewly/idle-cursor-prewarm/idle-cursor-prewarm.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/idle-cursor-prewarm\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/idle-cursor-prewarm.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"idle-nudge-hint","title":"Idle Nudge Hint","definition":"After a few idle seconds the surface nudges itself, ramping in over seconds so the invitation to interact arrives without a tooltip.","install":"npx @askewly/design add idle-nudge-hint","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/idle-nudge-hint.md","keywords":["application-ui","card","tooltip"],"md":"# Idle Nudge Hint\n\n> After a few idle seconds the surface nudges itself, ramping in over seconds so the invitation to interact arrives without a tooltip.\n\n## 설치\n\n```\nnpx @askewly/design add idle-nudge-hint\n```\n\nRegistry JSON: https://ui.askewly.com/r/idle-nudge-hint.json\n\n## 코드 경로\n\n`registry/askewly/idle-nudge-hint/idle-nudge-hint.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/idle-nudge-hint\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/idle-nudge-hint.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"image-trail-cursor","title":"Image Trail Cursor","definition":"Pointer travel spawns short-lived image clones along the path, turning mouse movement itself into a gallery preview.","install":"npx @askewly/design add image-trail-cursor","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/image-trail-cursor.md","keywords":["marketing","image"],"md":"# Image Trail Cursor\n\n> Pointer travel spawns short-lived image clones along the path, turning mouse movement itself into a gallery preview.\n\n## 설치\n\n```\nnpx @askewly/design add image-trail-cursor\n```\n\nRegistry JSON: https://ui.askewly.com/r/image-trail-cursor.json\n\n## 코드 경로\n\n`registry/askewly/image-trail-cursor/image-trail-cursor.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/image-trail-cursor\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/image-trail-cursor.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"image-treatment","title":"Image Treatment Rotator","definition":"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.","install":"npx @askewly/design add image-treatment","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Image Treatment Rotator\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add image-treatment\n```\n\nRegistry JSON: https://ui.askewly.com/r/image-treatment.json\n\n## 코드 경로\n\n`registry/askewly/image-treatment/image-treatment.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"input-group","title":"Input Group","definition":"Prefix and suffix segments sharing one border with the field, hidden from assistive tech so the label itself has to carry the unit.","install":"npx @askewly/design add input-group","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/input-group.md","keywords":["forms","input-group","text-field","label","fieldset"],"md":"# Input Group\n\n> Prefix and suffix segments sharing one border with the field, hidden from assistive tech so the label itself has to carry the unit.\n\n## 설치\n\n```\nnpx @askewly/design add input-group\n```\n\nRegistry JSON: https://ui.askewly.com/r/input-group.json\n\n## 코드 경로\n\n`registry/askewly/input-group/input-group.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/input-group\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/input-group.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"interactive-data-table","title":"Interactive Data Table","definition":"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.","install":"npx @askewly/design add interactive-data-table","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/interactive-data-table.md","keywords":["data-display","table","data-grid","data-table-toolbar","table-density-control","table-row-actions"],"md":"# Interactive Data Table\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add interactive-data-table\n```\n\nRegistry JSON: https://ui.askewly.com/r/interactive-data-table.json\n\n## 코드 경로\n\n`registry/askewly/interactive-data-table/interactive-data-table.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/interactive-data-table\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/interactive-data-table.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"kv-frame-stack-reveal","title":"KV Frame Stack Reveal","definition":"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.","install":"npx @askewly/design add kv-frame-stack-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/kv-frame-stack-reveal.md","keywords":["marketing","hero","image"],"md":"# KV Frame Stack Reveal\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add kv-frame-stack-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/kv-frame-stack-reveal.json\n\n## 코드 경로\n\n`registry/askewly/kv-frame-stack-reveal/kv-frame-stack-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/kv-frame-stack-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/kv-frame-stack-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"landing-hero","title":"Landing Hero","definition":"The first-viewport block for a public product/design-system homepage: a centered product name or direct promise, one line of supporting copy naming the two things the product actually is, two calls to action, and a single restrained proof surface underneath (here, a live search field) instead of a wall of decorative cards.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/landing-hero.md","keywords":["marketing","command-palette","autocomplete"],"md":"# Landing Hero\n\n> The first-viewport block for a public product/design-system homepage: a centered product name or direct promise, one line of supporting copy naming the two things the product actually is, two calls to action, and a single restrained proof surface underneath (here, a live search field) instead of a wall of decorative cards.\n\n## 사용 규칙\n\n- 언제 쓰나 — 공개 제품 홈페이지 첫 화면에서 약속 한 줄·버튼 둘·증거 면 하나를 보여 줄 때\n- 한 화면에 몇 개 — 페이지당 1개, h1 하나, 버튼 정확히 2개\n- 안 쓰는 곳 — 좌우 분할 히어로, 대시보드 모드 화면, 가짜 지표 목업이 필요한 화면\n- 같이 쓰는 것 — button recipe, 검색 필드 또는 워크스페이스 미리보기 한 장\n- 한계 — 중앙 한 칼럼 방향만 다룬다(분할 히어로는 다른 패턴), 실제 제품 화면이 없으면 증거 면이 약하다\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/landing-hero.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/landing-hero.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/landing-hero\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/landing-hero.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"large-title-collapsing-header","title":"Large Title Collapsing Header","definition":"`large-title-header` names the visual states (big title / collapsed) but not the transition contract.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/large-title-collapsing-header.md","keywords":["navigation","large-title-header","top-app-bar"],"md":"# Large Title Collapsing Header\n\n> `large-title-header` names the visual states (big title / collapsed) but not the transition contract.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/large-title-collapsing-header.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/large-title-collapsing-header.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/large-title-collapsing-header\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/large-title-collapsing-header.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"layered-noise-terrain","title":"Layered Noise Terrain","definition":"Terrain grain built by stacking noise layers whose resolution escalates per depth, so coarse swells carry fine wrinkles instead of one flat noise.","install":"npx @askewly/design add layered-noise-terrain","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/layered-noise-terrain.md","keywords":["marketing","canvas-toolbar","slider"],"md":"# Layered Noise Terrain\n\n> Terrain grain built by stacking noise layers whose resolution escalates per depth, so coarse swells carry fine wrinkles instead of one flat noise.\n\n## 설치\n\n```\nnpx @askewly/design add layered-noise-terrain\n```\n\nRegistry JSON: https://ui.askewly.com/r/layered-noise-terrain.json\n\n## 코드 경로\n\n`registry/askewly/layered-noise-terrain/layered-noise-terrain.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/layered-noise-terrain\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/layered-noise-terrain.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"lazy-three-object-scene","title":"Lazy Three Object Scene","definition":"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).","install":"npx @askewly/design add lazy-three-object-scene","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/lazy-three-object-scene.md","keywords":["application-ui"],"md":"# Lazy Three Object Scene\n\n> 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).\n\n## 설치\n\n```\nnpx @askewly/design add lazy-three-object-scene\n```\n\nRegistry JSON: https://ui.askewly.com/r/lazy-three-object-scene.json\n\n## 코드 경로\n\n`registry/askewly/lazy-three-object-scene/lazy-three-object-scene.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/lazy-three-object-scene\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/lazy-three-object-scene.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"linear-spring-easing","title":"Linear Spring Easing","definition":"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.","install":"npx @askewly/design add linear-spring-easing","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/linear-spring-easing.md","keywords":["marketing","easing","duration"],"md":"# Linear Spring Easing\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add linear-spring-easing\n```\n\nRegistry JSON: https://ui.askewly.com/r/linear-spring-easing.json\n\n## 코드 경로\n\n`registry/askewly/linear-spring-easing/linear-spring-easing.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/linear-spring-easing\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/linear-spring-easing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"locked-state","title":"Locked State","definition":"Values stay readable while only the controls go inert, with the reason and the way back stated as separate lines.","install":"npx @askewly/design add locked-state","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/locked-state.md","keywords":["feedback","locked-state","permission-state","upgrade-prompt"],"md":"# Locked State\n\n> Values stay readable while only the controls go inert, with the reason and the way back stated as separate lines.\n\n## 설치\n\n```\nnpx @askewly/design add locked-state\n```\n\nRegistry JSON: https://ui.askewly.com/r/locked-state.json\n\n## 코드 경로\n\n`registry/askewly/locked-state/locked-state.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/locked-state\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/locked-state.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"login-dialog","title":"Login Dialog","definition":"A modal that keeps the interrupted work visible behind the scrim, with three closing paths and focus returned to the trigger.","install":"npx @askewly/design add login-dialog","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/login-dialog.md","keywords":["overlays","login-dialog","auth-card","login-page","reauthentication-form"],"md":"# Login Dialog\n\n> A modal that keeps the interrupted work visible behind the scrim, with three closing paths and focus returned to the trigger.\n\n## 설치\n\n```\nnpx @askewly/design add login-dialog\n```\n\nRegistry JSON: https://ui.askewly.com/r/login-dialog.json\n\n## 코드 경로\n\n`registry/askewly/login-dialog/login-dialog.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/login-dialog\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/login-dialog.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"logo-marquee","title":"Logo Marquee","definition":"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.","install":"npx @askewly/design add logo-marquee","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Logo Marquee\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add logo-marquee\n```\n\nRegistry JSON: https://ui.askewly.com/r/logo-marquee.json\n\n## 코드 경로\n\n`registry/askewly/logo-marquee/logo-marquee.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"magic-link-sent-state","title":"Magic Link Sent State","definition":"The form gives way to the sent address and a resend countdown, with the remaining time carried in the button's accessible name.","install":"npx @askewly/design add magic-link-sent-state","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/magic-link-sent-state.md","keywords":["feedback","magic-link-sent-state","magic-link-login-form","email-verification-banner"],"md":"# Magic Link Sent State\n\n> The form gives way to the sent address and a resend countdown, with the remaining time carried in the button's accessible name.\n\n## 설치\n\n```\nnpx @askewly/design add magic-link-sent-state\n```\n\nRegistry JSON: https://ui.askewly.com/r/magic-link-sent-state.json\n\n## 코드 경로\n\n`registry/askewly/magic-link-sent-state/magic-link-sent-state.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/magic-link-sent-state\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/magic-link-sent-state.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"magnetic-hover-button","title":"Magnetic Hover Button","definition":"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.","install":"npx @askewly/design add magnetic-hover-button","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/magnetic-hover-button.md","keywords":["marketing","button","hover-state"],"md":"# Magnetic Hover Button\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add magnetic-hover-button\n```\n\nRegistry JSON: https://ui.askewly.com/r/magnetic-hover-button.json\n\n## 코드 경로\n\n`registry/askewly/magnetic-hover-button/magnetic-hover-button.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/magnetic-hover-button\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/magnetic-hover-button.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"magnetic-repulsion-cluster","title":"Magnetic Repulsion Cluster","definition":"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.","install":"npx @askewly/design add magnetic-repulsion-cluster","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/magnetic-repulsion-cluster.md","keywords":["marketing"],"md":"# Magnetic Repulsion Cluster\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add magnetic-repulsion-cluster\n```\n\nRegistry JSON: https://ui.askewly.com/r/magnetic-repulsion-cluster.json\n\n## 코드 경로\n\n`registry/askewly/magnetic-repulsion-cluster/magnetic-repulsion-cluster.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/magnetic-repulsion-cluster\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/magnetic-repulsion-cluster.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"marketing-landing","title":"Marketing Landing","definition":"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.","install":"npx @askewly/design add marketing-landing","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Marketing Landing\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add marketing-landing\n```\n\nRegistry JSON: https://ui.askewly.com/r/marketing-landing.json\n\n## 코드 경로\n\n`registry/askewly/marketing-landing/comparison-section.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mega-panel-hover-bridge","title":"Mega Panel with Hover Bridge","definition":"A wide navigation panel opened on hover, with a transparent bridge covering the trigger-to-panel gap so it does not close before the pointer arrives.","install":"npx @askewly/design add mega-panel-hover-bridge","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/mega-panel-hover-bridge.md","keywords":["navigation","popover","dropdown-menu"],"md":"# Mega Panel with Hover Bridge\n\n> A wide navigation panel opened on hover, with a transparent bridge covering the trigger-to-panel gap so it does not close before the pointer arrives.\n\n## 설치\n\n```\nnpx @askewly/design add mega-panel-hover-bridge\n```\n\nRegistry JSON: https://ui.askewly.com/r/mega-panel-hover-bridge.json\n\n## 코드 경로\n\n`registry/askewly/mega-panel-hover-bridge/mega-panel-hover-bridge.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mega-panel-hover-bridge\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/mega-panel-hover-bridge.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"membership-barcode-card","title":"Membership Barcode Card","definition":"매장에서 점원이나 스캐너에게 보여 주는 멤버십 카드.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/membership-barcode-card.md","keywords":["navigation","page-control"],"md":"# Membership Barcode Card\n\n> 매장에서 점원이나 스캐너에게 보여 주는 멤버십 카드.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/membership-barcode-card.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/membership-barcode-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/membership-barcode-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/membership-barcode-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mesh-gradient-surface","title":"Mesh Gradient Surface","definition":"A mesh gradient surface gives a hero, brand section, or empty backdrop an organic multi-point color field without imagery.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/mesh-gradient-surface.md","keywords":[],"md":"# Mesh Gradient Surface\n\n> A mesh gradient surface gives a hero, brand section, or empty backdrop an organic multi-point color field without imagery.\n\n## 사용 규칙\n\n- 언제 쓰나 — 이미지 없이 히어로·브랜드 구역·빈 배경에 여러 색점의 부드러운 색면이 필요할 때\n- 한 화면에 몇 개 — 화면당 1면, 같은 구역에 겹치지 않는다\n- 안 쓰는 곳 — 움직이는 유기적 노이즈가 필요한 곳(셰이더 단계), 대비를 확인 못 한 본문 뒷면\n- 같이 쓰는 것 — grain-texture-overlay(밴딩이 보일 때), 의미 토큰 색\n- 한계 — 정적 면이라 움직임이 없다, color-mix 를 못 쓰는 브라우저에서는 평평한 배경으로 내려앉는다\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/mesh-gradient-surface.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/mesh-gradient-surface.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mesh-gradient-surface\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/mesh-gradient-surface.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mindmap-spine-tree","title":"Mindmap Spine Tree","definition":"A left-to-right spine tree whose fan-out beziers leave the parent's collapse button, with depth-ramped node fills, direction affordances, zoom and pan, a roadmap layout, and an optional downward drawer with three empty consumer slots.","install":"npx @askewly/design add mindmap-spine-tree","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/mindmap-spine-tree.md","keywords":["data-display","tree-view"],"md":"# Mindmap Spine Tree\n\n> A left-to-right spine tree whose fan-out beziers leave the parent's collapse button, with depth-ramped node fills, direction affordances, zoom and pan, a roadmap layout, and an optional downward drawer with three empty consumer slots.\n\n## 설치\n\n```\nnpx @askewly/design add mindmap-spine-tree\n```\n\nRegistry JSON: https://ui.askewly.com/r/mindmap-spine-tree.json\n\n## 코드 경로\n\n`registry/askewly/mindmap-spine-tree/mindmap-spine-tree.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mindmap-spine-tree\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/mindmap-spine-tree.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mobile-buy-bar-sheet","title":"Mobile Buy Bar and Sheet","definition":"A fixed bottom buy bar whose option selection opens as either a bottom sheet or a centered modal, both observed in production.","install":"npx @askewly/design add mobile-buy-bar-sheet","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/mobile-buy-bar-sheet.md","keywords":["overlays","bottom-cta-bar","product-option-sheet","modal-bottom-sheet"],"md":"# Mobile Buy Bar and Sheet\n\n> A fixed bottom buy bar whose option selection opens as either a bottom sheet or a centered modal, both observed in production.\n\n## 설치\n\n```\nnpx @askewly/design add mobile-buy-bar-sheet\n```\n\nRegistry JSON: https://ui.askewly.com/r/mobile-buy-bar-sheet.json\n\n## 코드 경로\n\n`registry/askewly/mobile-buy-bar-sheet/mobile-buy-bar-sheet.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mobile-buy-bar-sheet\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/mobile-buy-bar-sheet.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mobile-signup-field-stack","title":"Mobile Signup Field Stack","definition":"`mobile-form-field-stack` names the structural constraint (48×48 touch targets, next-field keyboard action) but not the field-level implementation.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/mobile-signup-field-stack.md","keywords":["forms","mobile-form-field-stack"],"md":"# Mobile Signup Field Stack\n\n> `mobile-form-field-stack` names the structural constraint (48×48 touch targets, next-field keyboard action) but not the field-level implementation.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/forms/mobile-signup-field-stack.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/mobile-signup-field-stack.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mobile-signup-field-stack\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/mobile-signup-field-stack.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"modal-exit-choreography","title":"Modal Exit Choreography","definition":"React unmounts a modal the instant `open` flips false — the exit animation you wrote never plays.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/modal-exit-choreography.md","keywords":["overlays","dialog","transition"],"md":"# Modal Exit Choreography\n\n> React unmounts a modal the instant `open` flips false — the exit animation you wrote never plays.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/modal-exit-choreography.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/modal-exit-choreography.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"model-surface-particle-field","title":"Model Surface Particle Field","definition":"A model surface particle field turns an arbitrary 3D form into a cloud of light grains by sampling points across the mesh surface rather than reusing the mesh vertices.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/model-surface-particle-field.md","keywords":["marketing","hero"],"md":"# Model Surface Particle Field\n\n> A model surface particle field turns an arbitrary 3D form into a cloud of light grains by sampling points across the mesh surface rather than reusing the mesh vertices.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/model-surface-particle-field.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/model-surface-particle-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/model-surface-particle-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/model-surface-particle-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"multi-stage-entry-loader","title":"Multi Stage Entry Loader","definition":"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.","install":"npx @askewly/design add multi-stage-entry-loader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/multi-stage-entry-loader.md","keywords":["feedback","loading-state","progress-bar"],"md":"# Multi Stage Entry Loader\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add multi-stage-entry-loader\n```\n\nRegistry JSON: https://ui.askewly.com/r/multi-stage-entry-loader.json\n\n## 코드 경로\n\n`registry/askewly/multi-stage-entry-loader/multi-stage-entry-loader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/multi-stage-entry-loader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/multi-stage-entry-loader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"multicolor-segment-divider","title":"Multicolor Segment Divider","definition":"Section boundary drawn as equal segments in palette order: 3px between sections, 2px under the header, four segments above the footer.","install":"npx @askewly/design add multicolor-segment-divider","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/multicolor-segment-divider.md","keywords":["marketing","divider"],"md":"# Multicolor Segment Divider\n\n> Section boundary drawn as equal segments in palette order: 3px between sections, 2px under the header, four segments above the footer.\n\n## 설치\n\n```\nnpx @askewly/design add multicolor-segment-divider\n```\n\nRegistry JSON: https://ui.askewly.com/r/multicolor-segment-divider.json\n\n## 코드 경로\n\n`registry/askewly/multicolor-segment-divider/multicolor-segment-divider.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/multicolor-segment-divider\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/multicolor-segment-divider.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"name-crossfade-state-machine","title":"Name Crossfade State Machine","definition":"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.","install":"npx @askewly/design add name-crossfade-state-machine","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/name-crossfade-state-machine.md","keywords":["marketing","fade-transition","selected-state"],"md":"# Name Crossfade State Machine\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add name-crossfade-state-machine\n```\n\nRegistry JSON: https://ui.askewly.com/r/name-crossfade-state-machine.json\n\n## 코드 경로\n\n`registry/askewly/name-crossfade-state-machine/name-crossfade-state-machine.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/name-crossfade-state-machine\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/name-crossfade-state-machine.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"network-dot-map-stat","title":"Network Dot Map Stat","definition":"전 세계 거점 네트워크를 점·선 지도와 큰 숫자로 보여 주는 카드.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/network-dot-map-stat.md","keywords":[],"md":"# Network Dot Map Stat\n\n> 전 세계 거점 네트워크를 점·선 지도와 큰 숫자로 보여 주는 카드.\n\n## 사용 규칙\n\n- 언제 쓰나 — 거점·고객·설치 규모 같은 \"퍼져 있음\"을 숫자와 함께 신뢰 근거로 보여 줄 때.\n- 한 화면에 몇 개 — 하나.\n- 안 쓰는 곳 — 거점이 한두 곳뿐인 회사, 정확한 위치 탐색이 목적인 지도 UI, 위치 데이터가 비공개인 곳.\n- 같이 쓰는 것 — `odometer-counter`(필수), 앞의 `featured-news-rail`, 토큰 `action.primary`(점 색).\n- 한계 — 추상 점·선이라 위치 정보를 주지 않는다. 오도미터는 정수만 지원한다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/network-dot-map-stat.md\n\n## 코드 경로\n\n`examples/robotics-site/src/components/network-dot-map-stat.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/network-dot-map-stat.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"notebook-workspace-shell","title":"Notebook Workspace Shell","definition":"Three floating cards on a muted stage — sources, chat, studio or mindmap — each collapsing to a 56px icon rail with a 200ms collapse and instant expand, resizable gaps, and a detail mode that widens the right card to 960 while the others shrink.","install":"npx @askewly/design add notebook-workspace-shell","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/notebook-workspace-shell.md","keywords":["application-ui","app-shell","split-pane","dockable-panel","collapsible-sidebar"],"md":"# Notebook Workspace Shell\n\n> Three floating cards on a muted stage — sources, chat, studio or mindmap — each collapsing to a 56px icon rail with a 200ms collapse and instant expand, resizable gaps, and a detail mode that widens the right card to 960 while the others shrink.\n\n## 설치\n\n```\nnpx @askewly/design add notebook-workspace-shell\n```\n\nRegistry JSON: https://ui.askewly.com/r/notebook-workspace-shell.json\n\n## 코드 경로\n\n`registry/askewly/notebook-workspace-shell/notebook-workspace-shell.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/notebook-workspace-shell\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/notebook-workspace-shell.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"odometer-counter","title":"Odometer Counter","definition":"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.","install":"npx @askewly/design add odometer-counter","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/odometer-counter.md","keywords":["data-display","number-ticker","metric-card"],"md":"# Odometer Counter\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add odometer-counter\n```\n\nRegistry JSON: https://ui.askewly.com/r/odometer-counter.json\n\n## 코드 경로\n\n`registry/askewly/odometer-counter/odometer-counter.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/odometer-counter\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/odometer-counter.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"orbit-chips","title":"Orbit Chips","definition":"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.","install":"npx @askewly/design add orbit-chips","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Orbit Chips\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add orbit-chips\n```\n\nRegistry JSON: https://ui.askewly.com/r/orbit-chips.json\n\n## 코드 경로\n\n`registry/askewly/orbit-chips/orbit-chips.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"orbit-wall-impl","title":"Orbit Wall Impl","definition":"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.","install":"npx @askewly/design add orbit-wall-impl","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Orbit Wall Impl\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add orbit-wall-impl\n```\n\nRegistry JSON: https://ui.askewly.com/r/orbit-wall-impl.json\n\n## 코드 경로\n\n`registry/askewly/orbit-wall-impl/orbit-wall-impl.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"orbit-wall","title":"Orbit Wall","definition":"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.","install":"npx @askewly/design add orbit-wall","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Orbit Wall\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add orbit-wall\n```\n\nRegistry JSON: https://ui.askewly.com/r/orbit-wall.json\n\n## 코드 경로\n\n`registry/askewly/orbit-wall/orbit-wall.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"orbital-image-cloud-landing","title":"Orbital Image Cloud Landing","definition":"An orbital image cloud turns a content catalog into the landing hero itself: dozens of item thumbnails float as a slowly rotating 3D cloud the visitor can spin, and clicking an item focuses it, then navigates.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/orbital-image-cloud-landing.md","keywords":["marketing","hero","thumbnail"],"md":"# Orbital Image Cloud Landing\n\n> An orbital image cloud turns a content catalog into the landing hero itself: dozens of item thumbnails float as a slowly rotating 3D cloud the visitor can spin, and clicking an item focuses it, then navigates.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/orbital-image-cloud-landing.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/orbital-image-cloud-landing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"otp-code-input","title":"OTP Code Input","definition":"Split digit boxes that keep the code length and current position visible, while any box accepts a full pasted code so the separation never blocks entry.","install":"npx @askewly/design add otp-code-input","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/otp-code-input.md","keywords":["forms","otp-code-input","otp-input","one-time-code-autofill","secure-text-entry"],"md":"# OTP Code Input\n\n> Split digit boxes that keep the code length and current position visible, while any box accepts a full pasted code so the separation never blocks entry.\n\n## 설치\n\n```\nnpx @askewly/design add otp-code-input\n```\n\nRegistry JSON: https://ui.askewly.com/r/otp-code-input.json\n\n## 코드 경로\n\n`registry/askewly/otp-code-input/otp-code-input.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/otp-code-input\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/otp-code-input.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"padding-proportional-radius","title":"Padding Proportional Radius","definition":"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.","install":"npx @askewly/design add padding-proportional-radius","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/padding-proportional-radius.md","keywords":["forms","button","border-radius"],"md":"# Padding Proportional Radius\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add padding-proportional-radius\n```\n\nRegistry JSON: https://ui.askewly.com/r/padding-proportional-radius.json\n\n## 코드 경로\n\n`registry/askewly/padding-proportional-radius/padding-proportional-radius.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/padding-proportional-radius\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/padding-proportional-radius.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"page-transition-modes","title":"Page Transition Modes","definition":"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.","install":"npx @askewly/design add page-transition-modes","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/page-transition-modes.md","keywords":["navigation","transition","fade-transition","slide-transition"],"md":"# Page Transition Modes\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add page-transition-modes\n```\n\nRegistry JSON: https://ui.askewly.com/r/page-transition-modes.json\n\n## 코드 경로\n\n`registry/askewly/page-transition-modes/page-transition-modes.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/page-transition-modes\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/page-transition-modes.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"palette-generator-core","title":"Palette Generator Core","definition":"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.","install":"npx @askewly/design add palette-generator-core","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Palette Generator Core\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add palette-generator-core\n```\n\nRegistry JSON: https://ui.askewly.com/r/palette-generator-core.json\n\n## 코드 경로\n\n`registry/askewly/palette-generator-core/palette-generator-core.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"paper-card-reveal","title":"Paper Card Reveal","definition":"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.","install":"npx @askewly/design add paper-card-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/paper-card-reveal.md","keywords":["overlays","dialog","card"],"md":"# Paper Card Reveal\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add paper-card-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/paper-card-reveal.json\n\n## 코드 경로\n\n`registry/askewly/paper-card-reveal/paper-card-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/paper-card-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/paper-card-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"paragraph-reveal-modes","title":"Paragraph Reveal Modes","definition":"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.","install":"npx @askewly/design add paragraph-reveal-modes","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/paragraph-reveal-modes.md","keywords":["marketing","typography","scroll-fade"],"md":"# Paragraph Reveal Modes\n\n> 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.\n\n## 사용 규칙\n\n- 언제 쓰나 — 본문 문단을 줄 단위 등장 또는 스크롤 연동 밝기 변화로 드러낼 때\n- 한 화면에 몇 개 — 화면당 문단 리빌 1종\n- 안 쓰는 곳 — 읽는 중인 본문 전체를 위치형으로 움직이는 곳, 자체 스크롤 컨테이너(scroller 지정 없이)\n- 같이 쓰는 것 — 스크롤 트리거 라이브러리(GSAP ScrollTrigger), 줄 단위 분해\n- 한계 — 문단 안에서 리빌 종류를 섞는 요청은 dual-mode-line-reveal 이 답이다, 분해 조각은 접근성 트리에서 숨겨야 한다\n\n## 설치\n\n```\nnpx @askewly/design add paragraph-reveal-modes\n```\n\nRegistry JSON: https://ui.askewly.com/r/paragraph-reveal-modes.json\n\n## 코드 경로\n\n`registry/askewly/paragraph-reveal-modes/paragraph-reveal-modes.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/paragraph-reveal-modes\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/paragraph-reveal-modes.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"parallax-layer-stage","title":"Parallax Layer Stage","definition":"A hero-sized stage whose background splits into depth planes that drift at different rates — value, line and detail recede together, not just speed.","install":"npx @askewly/design add parallax-layer-stage","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/parallax-layer-stage.md","keywords":["marketing","hero","scroll-fade","sticky-scroll-section"],"md":"# Parallax Layer Stage\n\n> A hero-sized stage whose background splits into depth planes that drift at different rates — value, line and detail recede together, not just speed.\n\n## 설치\n\n```\nnpx @askewly/design add parallax-layer-stage\n```\n\nRegistry JSON: https://ui.askewly.com/r/parallax-layer-stage.json\n\n## 코드 경로\n\n`registry/askewly/parallax-layer-stage/parallax-layer-stage.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/parallax-layer-stage\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/parallax-layer-stage.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"parametric-helix-particles","title":"Parametric Helix Particles","definition":"A parametric helix particle field draws a double helix as orbiting points instead of a surfaced mesh, and it does so with no model file, no GPGPU pass, and no noise function.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/parametric-helix-particles.md","keywords":["marketing","hero"],"md":"# Parametric Helix Particles\n\n> A parametric helix particle field draws a double helix as orbiting points instead of a surfaced mesh, and it does so with no model file, no GPGPU pass, and no noise function.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/parametric-helix-particles.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/parametric-helix-particles.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/parametric-helix-particles\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/parametric-helix-particles.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"password-reveal-toggle","title":"Password Reveal Toggle","definition":"A masked field that reveals in place, exposing the toggle state programmatically and keeping the autocomplete token across the type swap.","install":"npx @askewly/design add password-reveal-toggle","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/password-reveal-toggle.md","keywords":["forms","password-reveal-toggle","secure-text-entry","password-field"],"md":"# Password Reveal Toggle\n\n> A masked field that reveals in place, exposing the toggle state programmatically and keeping the autocomplete token across the type swap.\n\n## 설치\n\n```\nnpx @askewly/design add password-reveal-toggle\n```\n\nRegistry JSON: https://ui.askewly.com/r/password-reveal-toggle.json\n\n## 코드 경로\n\n`registry/askewly/password-reveal-toggle/password-reveal-toggle.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/password-reveal-toggle\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/password-reveal-toggle.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"path-length-timed-drawing","title":"Path Length Timed Drawing","definition":"Hand-drawn SVG marks whose draw duration is derived from path length, so short strokes finish fast and long ones hold a constant pace.","install":"npx @askewly/design add path-length-timed-drawing","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/path-length-timed-drawing.md","keywords":["marketing","highlight-stroke","icon"],"md":"# Path Length Timed Drawing\n\n> Hand-drawn SVG marks whose draw duration is derived from path length, so short strokes finish fast and long ones hold a constant pace.\n\n## 설치\n\n```\nnpx @askewly/design add path-length-timed-drawing\n```\n\nRegistry JSON: https://ui.askewly.com/r/path-length-timed-drawing.json\n\n## 코드 경로\n\n`registry/askewly/path-length-timed-drawing/path-length-timed-drawing.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/path-length-timed-drawing\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/path-length-timed-drawing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"peek-testimonial-carousel","title":"Peek Testimonial Carousel","definition":"Centre-focused testimonial carousel with cut-off neighbours, 6s autoplay, 500ms moves, infinite loop, and reduced-motion and hover pause.","install":"npx @askewly/design add peek-testimonial-carousel","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/peek-testimonial-carousel.md","keywords":["marketing","carousel-peek","testimonial-section","carousel"],"md":"# Peek Testimonial Carousel\n\n> Centre-focused testimonial carousel with cut-off neighbours, 6s autoplay, 500ms moves, infinite loop, and reduced-motion and hover pause.\n\n## 사용 규칙\n\n- 언제 쓰나 — 후기 한 장을 크게 보이고 양옆을 잘라 보여 더 있음을 알릴 때\n- 한 화면에 몇 개 — 섹션당 1개\n- 안 쓰는 곳 — 이웃 카드를 가려야 하는 좁은 컨테이너, 후기가 한두 건뿐인 페이지\n- 같이 쓰는 것 — 원판 카드 조각 장식(모서리 100px), 화살표 버튼\n- 한계 — 6초 자동 재생이라 모션 줄이기에서 멈추고 즉시 이동하도록 바꿔 둔 점이 원본과 다르다, 후기 문구는 자리표시자다\n\n## 설치\n\n```\nnpx @askewly/design add peek-testimonial-carousel\n```\n\nRegistry JSON: https://ui.askewly.com/r/peek-testimonial-carousel.json\n\n## 코드 경로\n\n`registry/askewly/peek-testimonial-carousel/peek-testimonial-carousel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/peek-testimonial-carousel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/peek-testimonial-carousel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"peer-blur-focus","title":"Peer Blur Focus","definition":"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.","install":"npx @askewly/design add peer-blur-focus","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/peer-blur-focus.md","keywords":["application-ui","list","hover-state"],"md":"# Peer Blur Focus\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add peer-blur-focus\n```\n\nRegistry JSON: https://ui.askewly.com/r/peer-blur-focus.json\n\n## 코드 경로\n\n`registry/askewly/peer-blur-focus/peer-blur-focus.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/peer-blur-focus\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/peer-blur-focus.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"permission-matrix-editor-grid","title":"Permission Matrix Editor Grid","definition":"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.","install":"npx @askewly/design add permission-matrix-editor-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/permission-matrix-editor-grid.md","keywords":["data-display","permission-matrix-editor"],"md":"# Permission Matrix Editor Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add permission-matrix-editor-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/permission-matrix-editor-grid.json\n\n## 코드 경로\n\n`registry/askewly/permission-matrix-editor-grid/permission-matrix-editor-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/permission-matrix-editor-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/permission-matrix-editor-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"phase-broadcast-chrome","title":"Phase Broadcast Chrome","definition":"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.","install":"npx @askewly/design add phase-broadcast-chrome","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/phase-broadcast-chrome.md","keywords":["application-ui","app-shell"],"md":"# Phase Broadcast Chrome\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add phase-broadcast-chrome\n```\n\nRegistry JSON: https://ui.askewly.com/r/phase-broadcast-chrome.json\n\n## 코드 경로\n\n`registry/askewly/phase-broadcast-chrome/phase-broadcast-chrome.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/phase-broadcast-chrome\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/phase-broadcast-chrome.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"pinned-scroll-sequence","title":"Pinned Scroll Sequence","definition":"A pinned scroll sequence holds a section in the viewport while the user's scroll scrubs a multi-step narrative, then releases it back into the flow.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/pinned-scroll-sequence.md","keywords":[],"md":"# Pinned Scroll Sequence\n\n> A pinned scroll sequence holds a section in the viewport while the user's scroll scrubs a multi-step narrative, then releases it back into the flow.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/pinned-scroll-sequence.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/pinned-scroll-sequence.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/pinned-scroll-sequence\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/pinned-scroll-sequence.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"pixelation-reveal","title":"Pixelation Reveal","definition":"An image resolves from coarse mosaic to sharp in geometric column steps, giving the moment of disclosure a decoding texture.","install":"npx @askewly/design add pixelation-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/pixelation-reveal.md","keywords":["marketing","image"],"md":"# Pixelation Reveal\n\n> An image resolves from coarse mosaic to sharp in geometric column steps, giving the moment of disclosure a decoding texture.\n\n## 설치\n\n```\nnpx @askewly/design add pixelation-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/pixelation-reveal.json\n\n## 코드 경로\n\n`registry/askewly/pixelation-reveal/pixelation-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/pixelation-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/pixelation-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"popover-anatomy-variants","title":"Popover Anatomy Variants","definition":"Shallow shadow, near-zero radius, optional arrow. The minimal decoration commerce popovers converge on, with the arrow left as a choice.","install":"npx @askewly/design add popover-anatomy-variants","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/popover-anatomy-variants.md","keywords":["overlays","popover","dropdown-menu","tooltip"],"md":"# Popover Anatomy Variants\n\n> Shallow shadow, near-zero radius, optional arrow. The minimal decoration commerce popovers converge on, with the arrow left as a choice.\n\n## 설치\n\n```\nnpx @askewly/design add popover-anatomy-variants\n```\n\nRegistry JSON: https://ui.askewly.com/r/popover-anatomy-variants.json\n\n## 코드 경로\n\n`registry/askewly/popover-anatomy-variants/popover-anatomy-variants.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/popover-anatomy-variants\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/popover-anatomy-variants.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"preset-bundle-switch","title":"Preset Bundle Switch","definition":"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.","install":"npx @askewly/design add preset-bundle-switch","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/preset-bundle-switch.md","keywords":["application-ui","tabs","badge"],"md":"# Preset Bundle Switch\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add preset-bundle-switch\n```\n\nRegistry JSON: https://ui.askewly.com/r/preset-bundle-switch.json\n\n## 코드 경로\n\n`registry/askewly/preset-bundle-switch/preset-bundle-switch.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/preset-bundle-switch\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/preset-bundle-switch.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"price-hierarchy-stack","title":"Price Hierarchy Stack","definition":"Struck-through list price, a discount badge, then an oversized bold sale price. The size inversion three major commerce sites converge on.","install":"npx @askewly/design add price-hierarchy-stack","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/price-hierarchy-stack.md","keywords":["commerce","price-card"],"md":"# Price Hierarchy Stack\n\n> Struck-through list price, a discount badge, then an oversized bold sale price. The size inversion three major commerce sites converge on.\n\n## 설치\n\n```\nnpx @askewly/design add price-hierarchy-stack\n```\n\nRegistry JSON: https://ui.askewly.com/r/price-hierarchy-stack.json\n\n## 코드 경로\n\n`registry/askewly/price-hierarchy-stack/price-hierarchy-stack.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/price-hierarchy-stack\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/price-hierarchy-stack.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"pricing-plan-compare","title":"Pricing Plan Compare","definition":"Plan columns laid side by side for a decision, with the recommended badge overhanging the card edge to break the grid.","install":"npx @askewly/design add pricing-plan-compare","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/pricing-plan-compare.md","keywords":["marketing","plan-card","tabs"],"md":"# Pricing Plan Compare\n\n> Plan columns laid side by side for a decision, with the recommended badge overhanging the card edge to break the grid.\n\n## 설치\n\n```\nnpx @askewly/design add pricing-plan-compare\n```\n\nRegistry JSON: https://ui.askewly.com/r/pricing-plan-compare.json\n\n## 코드 경로\n\n`registry/askewly/pricing-plan-compare/pricing-plan-compare.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/pricing-plan-compare\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/pricing-plan-compare.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"procedural-court-line","title":"Procedural Court Line","definition":"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.","install":"npx @askewly/design add procedural-court-line","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/procedural-court-line.md","keywords":["marketing","divider","hero"],"md":"# Procedural Court Line\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add procedural-court-line\n```\n\nRegistry JSON: https://ui.askewly.com/r/procedural-court-line.json\n\n## 코드 경로\n\n`registry/askewly/procedural-court-line/procedural-court-line.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/procedural-court-line\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/procedural-court-line.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"product-coverflow","title":"Product Coverflow","definition":"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.","install":"npx @askewly/design add product-coverflow","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Product Coverflow\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add product-coverflow\n```\n\nRegistry JSON: https://ui.askewly.com/r/product-coverflow.json\n\n## 코드 경로\n\n`registry/askewly/product-coverflow/product-coverflow.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"product-detail-purchase-stack","title":"Product Detail Purchase Stack","definition":"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.","install":"npx @askewly/design add product-detail-purchase-stack","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/product-detail-purchase-stack.md","keywords":["commerce","product-option-sheet","quantity-stepper"],"md":"# Product Detail Purchase Stack\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add product-detail-purchase-stack\n```\n\nRegistry JSON: https://ui.askewly.com/r/product-detail-purchase-stack.json\n\n## 코드 경로\n\n`registry/askewly/product-detail-purchase-stack/product-detail-purchase-stack.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/product-detail-purchase-stack\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/product-detail-purchase-stack.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"product-grid-density-presets","title":"Product Grid Density Presets","definition":"Named density presets that redefine card width and gap per column count, plus the fixed badge, title, price rhythm inside each card.","install":"npx @askewly/design add product-grid-density-presets","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/product-grid-density-presets.md","keywords":["commerce","product-card"],"md":"# Product Grid Density Presets\n\n> Named density presets that redefine card width and gap per column count, plus the fixed badge, title, price rhythm inside each card.\n\n## 설치\n\n```\nnpx @askewly/design add product-grid-density-presets\n```\n\nRegistry JSON: https://ui.askewly.com/r/product-grid-density-presets.json\n\n## 코드 경로\n\n`registry/askewly/product-grid-density-presets/product-grid-density-presets.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/product-grid-density-presets\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/product-grid-density-presets.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"product-line-card-trio","title":"Product Line Card Trio","definition":"제품군을 한 줄 3열로 비교하게 하는 카드 묶음.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/product-line-card-trio.md","keywords":[],"md":"# Product Line Card Trio\n\n> 제품군을 한 줄 3열로 비교하게 하는 카드 묶음.\n\n## 사용 규칙\n\n- 언제 쓰나 — 제품군·플랜·서비스 라인 3개를 같은 형식으로 나란히 소개하고 각각 상세로 보낼 때.\n- 한 화면에 몇 개 — 하나(한 번에 3장). 같은 페이지에 두 줄 이상 쌓지 않는다.\n- 안 쓰는 곳 — 수치 비교가 본질인 표, 항목이 6개 이상인 목록, 카드 안에 별도 행동(버튼 여럿)이 필요한 곳.\n- 같이 쓰는 것 — 위의 인트로 문장, 아래의 `catalog-download-teaser`, 토큰 `--font-size-card-title`.\n- 한계 — 카드 높이를 열 간에 맞추지 않는다. 설명 길이가 크게 다르면 어긋난다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/product-line-card-trio.md\n\n## 코드 경로\n\n`examples/robotics-site/src/components/product-line-card-trio.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/product-line-card-trio.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"progressive-blur-edge","title":"Progressive Blur Edge","definition":"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.","install":"npx @askewly/design add progressive-blur-edge","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/progressive-blur-edge.md","keywords":["application-ui","backdrop-blur","scroll-area"],"md":"# Progressive Blur Edge\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add progressive-blur-edge\n```\n\nRegistry JSON: https://ui.askewly.com/r/progressive-blur-edge.json\n\n## 코드 경로\n\n`registry/askewly/progressive-blur-edge/progressive-blur-edge.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/progressive-blur-edge\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/progressive-blur-edge.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"promo-banner-system","title":"Promo Banner System","definition":"A promo banner system is one banner shape that carries different urgency-driven offer copy — a discount rate, a limited-time sale, a countdown — depending on where it's placed (top-of-site vs in-page).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/promo-banner-system.md","keywords":[],"md":"# Promo Banner System\n\n> A promo banner system is one banner shape that carries different urgency-driven offer copy — a discount rate, a limited-time sale, a countdown — depending on where it's placed (top-of-site vs in-page).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/commerce/promo-banner-system.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/promo-banner-system.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/promo-banner-system\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/promo-banner-system.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"pull-to-refresh-list-pattern","title":"Pull To Refresh List","definition":"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.","install":"npx @askewly/design add pull-to-refresh-list-pattern","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/pull-to-refresh-list-pattern.md","keywords":["data-display","pull-to-refresh","pull-to-refresh-indicator"],"md":"# Pull To Refresh List\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add pull-to-refresh-list-pattern\n```\n\nRegistry JSON: https://ui.askewly.com/r/pull-to-refresh-list-pattern.json\n\n## 코드 경로\n\n`registry/askewly/pull-to-refresh-list-pattern/pull-to-refresh-list-pattern.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/pull-to-refresh-list-pattern\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/pull-to-refresh-list-pattern.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"quiet-form-validation","title":"Quiet Form Validation","definition":"Validation that fires on blur and re-runs on input only to clear an error, so typing is never interrupted but corrections are instant.","install":"npx @askewly/design add quiet-form-validation","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/quiet-form-validation.md","keywords":["forms","validation-message","field-group","label","text-field"],"md":"# Quiet Form Validation\n\n> Validation that fires on blur and re-runs on input only to clear an error, so typing is never interrupted but corrections are instant.\n\n## 설치\n\n```\nnpx @askewly/design add quiet-form-validation\n```\n\nRegistry JSON: https://ui.askewly.com/r/quiet-form-validation.json\n\n## 코드 경로\n\n`registry/askewly/quiet-form-validation/quiet-form-validation.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/quiet-form-validation\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/quiet-form-validation.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"quota-warning","title":"Quota Warning","definition":"A meter that spells out used, limit, and remaining in words, paired with one path you can take yourself before the block lands.","install":"npx @askewly/design add quota-warning","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/quota-warning.md","keywords":["feedback","quota-warning","locked-state","rate-limit-state","upgrade-prompt"],"md":"# Quota Warning\n\n> A meter that spells out used, limit, and remaining in words, paired with one path you can take yourself before the block lands.\n\n## 설치\n\n```\nnpx @askewly/design add quota-warning\n```\n\nRegistry JSON: https://ui.askewly.com/r/quota-warning.json\n\n## 코드 경로\n\n`registry/askewly/quota-warning/quota-warning.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/quota-warning\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/quota-warning.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"quote-card-carousel","title":"Quote Card Carousel","definition":"A two-up quote card carousel whose pages crossfade in the same grid cell (250ms), with prev/next and per-quote buttons and no autoplay.","install":"npx @askewly/design add quote-card-carousel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/quote-card-carousel.md","keywords":["marketing","carousel","testimonial-section"],"md":"# Quote Card Carousel\n\n> A two-up quote card carousel whose pages crossfade in the same grid cell (250ms), with prev/next and per-quote buttons and no autoplay.\n\n## 설치\n\n```\nnpx @askewly/design add quote-card-carousel\n```\n\nRegistry JSON: https://ui.askewly.com/r/quote-card-carousel.json\n\n## 코드 경로\n\n`registry/askewly/quote-card-carousel/quote-card-carousel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/quote-card-carousel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/quote-card-carousel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"radial-dial-scroll","title":"Radial Dial Scroll","definition":"A ring of 130 ticks fills clockwise with reading progress, sitting near the reader's eye as a gauge instead of a distant scrollbar.","install":"npx @askewly/design add radial-dial-scroll","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/radial-dial-scroll.md","keywords":["feedback","meter"],"md":"# Radial Dial Scroll\n\n> A ring of 130 ticks fills clockwise with reading progress, sitting near the reader's eye as a gauge instead of a distant scrollbar.\n\n## 설치\n\n```\nnpx @askewly/design add radial-dial-scroll\n```\n\nRegistry JSON: https://ui.askewly.com/r/radial-dial-scroll.json\n\n## 코드 경로\n\n`registry/askewly/radial-dial-scroll/radial-dial-scroll.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/radial-dial-scroll\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/radial-dial-scroll.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"rail-measured-line","title":"Rail Measured Line","definition":"A hairline that measures a target element's edge at runtime and scales itself to stop exactly there at every viewport width.","install":"npx @askewly/design add rail-measured-line","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/rail-measured-line.md","keywords":["layout","hairline-border","divider"],"md":"# Rail Measured Line\n\n> A hairline that measures a target element's edge at runtime and scales itself to stop exactly there at every viewport width.\n\n## 설치\n\n```\nnpx @askewly/design add rail-measured-line\n```\n\nRegistry JSON: https://ui.askewly.com/r/rail-measured-line.json\n\n## 코드 경로\n\n`registry/askewly/rail-measured-line/rail-measured-line.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/rail-measured-line\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/rail-measured-line.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"recoverable-empty-state","title":"Recoverable Empty State","definition":"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.","install":"npx @askewly/design add recoverable-empty-state","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/recoverable-empty-state.md","keywords":["feedback","empty-state","empty-search-result","empty-filter-state","error-state"],"md":"# Recoverable Empty State\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add recoverable-empty-state\n```\n\nRegistry JSON: https://ui.askewly.com/r/recoverable-empty-state.json\n\n## 코드 경로\n\n`registry/askewly/recoverable-empty-state/recoverable-empty-state.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/recoverable-empty-state\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/recoverable-empty-state.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"recovery-code-panel","title":"Recovery Code Panel","definition":"Codes laid out like paper, stating separately that they cannot be shown again and that each one is used only once.","install":"npx @askewly/design add recovery-code-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/recovery-code-panel.md","keywords":["feedback","recovery-code-panel","recovery-code-warning","mfa-enrollment-card"],"md":"# Recovery Code Panel\n\n> Codes laid out like paper, stating separately that they cannot be shown again and that each one is used only once.\n\n## 설치\n\n```\nnpx @askewly/design add recovery-code-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/recovery-code-panel.json\n\n## 코드 경로\n\n`registry/askewly/recovery-code-panel/recovery-code-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/recovery-code-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/recovery-code-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"reduced-motion-timing-preserve","title":"Reduced Motion Timing Preserve","definition":"The common reduced-motion fallback deletes the animation (`transition: none`, `animation: none`), which also deletes the time it occupied.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/reduced-motion-timing-preserve.md","keywords":[],"md":"# Reduced Motion Timing Preserve\n\n> The common reduced-motion fallback deletes the animation (`transition: none`, `animation: none`), which also deletes the time it occupied.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/reduced-motion-timing-preserve.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/reduced-motion-timing-preserve.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/reduced-motion-timing-preserve\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/reduced-motion-timing-preserve.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"reference-viewport-sizing","title":"Reference Viewport Sizing","definition":"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.","install":"npx @askewly/design add reference-viewport-sizing","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/reference-viewport-sizing.md","keywords":["layout","dynamic-viewport-unit","fluid-layout","responsive-layout","breakpoint","button"],"md":"# Reference Viewport Sizing\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add reference-viewport-sizing\n```\n\nRegistry JSON: https://ui.askewly.com/r/reference-viewport-sizing.json\n\n## 코드 경로\n\n`registry/askewly/reference-viewport-sizing/reference-viewport-sizing.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/reference-viewport-sizing\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/reference-viewport-sizing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"remote-data-screen","title":"Remote Data Screen","definition":"A remote data screen is the state contract for any view that fetches data over the network and renders it: one screen, five mutually exclusive states — loading, success, empty, error, and timeout — each visually distinct and each with its own next action.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/remote-data-screen.md","keywords":["data-display","skeleton","error-state","empty-state"],"md":"# Remote Data Screen\n\n> A remote data screen is the state contract for any view that fetches data over the network and renders it: one screen, five mutually exclusive states — loading, success, empty, error, and timeout — each visually distinct and each with its own next action.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/remote-data-screen.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/remote-data-screen.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/remote-data-screen\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/remote-data-screen.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"responsive-content-grid","title":"Responsive Content Grid","definition":"A responsive content grid arranges peer items into as many columns as the content can support, then collapses without changing their reading order.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/responsive-content-grid.md","keywords":[],"md":"# Responsive Content Grid\n\n> A responsive content grid arranges peer items into as many columns as the content can support, then collapses without changing their reading order.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/layout/responsive-content-grid.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/responsive-content-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/responsive-content-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/responsive-content-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"responsive-dashboard-panel","title":"Responsive Dashboard Panel","definition":"A responsive dashboard panel is the content pane of a dashboard — a filterable card/list collection with per-item state — with every state change carried on both channels: visual (class/style) and semantic (ARIA).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/responsive-dashboard-panel.md","keywords":["application-ui","sidebar-dashboard-layout","empty-search-result"],"md":"# Responsive Dashboard Panel\n\n> A responsive dashboard panel is the content pane of a dashboard — a filterable card/list collection with per-item state — with every state change carried on both channels: visual (class/style) and semantic (ARIA).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/responsive-dashboard-panel.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/responsive-dashboard-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/responsive-dashboard-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/responsive-dashboard-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"reward-reveal-loader","title":"Reward Reveal Loader","definition":"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.","install":"npx @askewly/design add reward-reveal-loader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/reward-reveal-loader.md","keywords":["feedback","loading-state","fade-transition"],"md":"# Reward Reveal Loader\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add reward-reveal-loader\n```\n\nRegistry JSON: https://ui.askewly.com/r/reward-reveal-loader.json\n\n## 코드 경로\n\n`registry/askewly/reward-reveal-loader/reward-reveal-loader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/reward-reveal-loader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/reward-reveal-loader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"rotating-label","title":"Rotating Label","definition":"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.","install":"npx @askewly/design add rotating-label","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Rotating Label\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add rotating-label\n```\n\nRegistry JSON: https://ui.askewly.com/r/rotating-label.json\n\n## 코드 경로\n\n`registry/askewly/rotating-label/rotating-label.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"saas-app-shell","title":"SaaS App Shell","definition":"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.","install":"npx @askewly/design add saas-app-shell","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# SaaS App Shell\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add saas-app-shell\n```\n\nRegistry JSON: https://ui.askewly.com/r/saas-app-shell.json\n\n## 코드 경로\n\n`registry/askewly/saas-app-shell/app-sidebar.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scene-sound-map","title":"Scene Sound Map","definition":"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.","install":"npx @askewly/design add scene-sound-map","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scene-sound-map.md","keywords":["marketing"],"md":"# Scene Sound Map\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add scene-sound-map\n```\n\nRegistry JSON: https://ui.askewly.com/r/scene-sound-map.json\n\n## 코드 경로\n\n`registry/askewly/scene-sound-map/scene-sound-map.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scene-sound-map\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scene-sound-map.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"schema-driven-settings","title":"Schema Driven Settings","definition":"A settings panel generated from field declarations (readable, desc, type, default) so adding an option costs a schema line rather than UI work.","install":"npx @askewly/design add schema-driven-settings","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/schema-driven-settings.md","keywords":["forms","switch","slider","select"],"md":"# Schema Driven Settings\n\n> A settings panel generated from field declarations (readable, desc, type, default) so adding an option costs a schema line rather than UI work.\n\n## 설치\n\n```\nnpx @askewly/design add schema-driven-settings\n```\n\nRegistry JSON: https://ui.askewly.com/r/schema-driven-settings.json\n\n## 코드 경로\n\n`registry/askewly/schema-driven-settings/schema-driven-settings.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/schema-driven-settings\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/schema-driven-settings.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scramble-text-reveal","title":"Scramble Text Reveal","definition":"One scramble engine reused across load, hover, and scroll triggers, so text entry becomes a single brand signature instead of three effects.","install":"npx @askewly/design add scramble-text-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scramble-text-reveal.md","keywords":["marketing","typography"],"md":"# Scramble Text Reveal\n\n> One scramble engine reused across load, hover, and scroll triggers, so text entry becomes a single brand signature instead of three effects.\n\n## 설치\n\n```\nnpx @askewly/design add scramble-text-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/scramble-text-reveal.json\n\n## 코드 경로\n\n`registry/askewly/scramble-text-reveal/scramble-text-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scramble-text-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scramble-text-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-cue-shape-converge","title":"Scroll Cue Shape Converge","definition":"A fixed particle backdrop bound to scroll: the field disperses past the hero, gathers onto the SVG outline of any cue element that enters the viewport, and scatters again after it — reversible in both directions.","install":"npx @askewly/design add scroll-cue-shape-converge","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-cue-shape-converge.md","keywords":["marketing","sticky-scroll-section","scroll-fade"],"md":"# Scroll Cue Shape Converge\n\n> A fixed particle backdrop bound to scroll: the field disperses past the hero, gathers onto the SVG outline of any cue element that enters the viewport, and scatters again after it — reversible in both directions.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-cue-shape-converge\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-cue-shape-converge.json\n\n## 코드 경로\n\n`registry/askewly/scroll-cue-shape-converge/scroll-cue-shape-converge.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-cue-shape-converge\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-cue-shape-converge.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-driven-reveal","title":"Scroll-Driven Reveal","definition":"A scroll-driven reveal fades/raises content in as it enters the scrollport, using CSS view-progress timelines (`animation-timeline: view()`).","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-driven-reveal.md","keywords":[],"md":"# Scroll-Driven Reveal\n\n> A scroll-driven reveal fades/raises content in as it enters the scrollport, using CSS view-progress timelines (`animation-timeline: view()`).\n\n## 사용 규칙\n\n- 언제 쓰나 — 스크롤로 뷰포트에 들어올 때 내용이 떠오르며 나타나게 할 때\n- 한 화면에 몇 개 — 뷰포트당 구조 단위 1개\n- 안 쓰는 곳 — 모든 섹션 요소에 순서를 거는 페이지, 핀 고정·스크럽·시퀀싱이 필요한 곳(GSAP 단계)\n- 같이 쓰는 것 — @supports 안에 둔 숨김 초기 상태, 모션 줄이기 끄기 블록\n- 한계 — opacity·transform 만 움직인다, 지원하지 않는 브라우저는 정적으로 보이는 것으로 끝난다\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/scroll-driven-reveal.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/scroll-driven-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-driven-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-driven-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-focus-list","title":"Scroll Focus List","definition":"A list whose items fade by their distance from the scroll progress point, so only the item in focus reads at full strength.","install":"npx @askewly/design add scroll-focus-list","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-focus-list.md","keywords":["marketing","list","scroll-fade"],"md":"# Scroll Focus List\n\n> A list whose items fade by their distance from the scroll progress point, so only the item in focus reads at full strength.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-focus-list\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-focus-list.json\n\n## 코드 경로\n\n`registry/askewly/scroll-focus-list/scroll-focus-list.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-focus-list\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-focus-list.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-fx","title":"Scroll FX Utilities","definition":"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).","install":"npx @askewly/design add scroll-fx","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Scroll FX Utilities\n\n> 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).\n\n## 설치\n\n```\nnpx @askewly/design add scroll-fx\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-fx.json\n\n## 코드 경로\n\n`registry/askewly/scroll-fx/scroll-fx.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-linked-word-band","title":"Scroll Linked Word Band","definition":"Dark strip of repeated phrases that slides sideways in proportion to scroll progress without pinning, and stays still under reduced motion.","install":"npx @askewly/design add scroll-linked-word-band","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-linked-word-band.md","keywords":["marketing","marquee-row"],"md":"# Scroll Linked Word Band\n\n> Dark strip of repeated phrases that slides sideways in proportion to scroll progress without pinning, and stays still under reduced motion.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-linked-word-band\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-linked-word-band.json\n\n## 코드 경로\n\n`registry/askewly/scroll-linked-word-band/scroll-linked-word-band.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-linked-word-band\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-linked-word-band.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-overrun-advance","title":"Scroll Overrun Advance","definition":"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.","install":"npx @askewly/design add scroll-overrun-advance","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/scroll-overrun-advance.md","keywords":["navigation","meter","gesture-hint"],"md":"# Scroll Overrun Advance\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-overrun-advance\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-overrun-advance.json\n\n## 코드 경로\n\n`registry/askewly/scroll-overrun-advance/scroll-overrun-advance.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-overrun-advance\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/scroll-overrun-advance.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-scrub-3d-scene","title":"Scroll-Scrub 3D Scene","definition":"A scroll-scrub 3D scene binds scroll progress to 3D state — a pinned canvas whose camera and object move as the page scrolls, turning a scroll distance into a narrative timeline the reader drives at their own pace.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/scroll-scrub-3d-scene.md","keywords":[],"md":"# Scroll-Scrub 3D Scene\n\n> A scroll-scrub 3D scene binds scroll progress to 3D state — a pinned canvas whose camera and object move as the page scrolls, turning a scroll distance into a narrative timeline the reader drives at their own pace.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/scroll-scrub-3d-scene.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/scroll-scrub-3d-scene.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-scrub-3d-scene\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/scroll-scrub-3d-scene.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-theme-inversion","title":"Scroll Theme Inversion","definition":"When a dark section crosses the viewport midline, the whole site chrome inverts to dark, letting section mood tint the UI.","install":"npx @askewly/design add scroll-theme-inversion","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-theme-inversion.md","keywords":["marketing","dark-mode","theme-token"],"md":"# Scroll Theme Inversion\n\n> When a dark section crosses the viewport midline, the whole site chrome inverts to dark, letting section mood tint the UI.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-theme-inversion\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-theme-inversion.json\n\n## 코드 경로\n\n`registry/askewly/scroll-theme-inversion/scroll-theme-inversion.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-theme-inversion\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-theme-inversion.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"section-padding-collapse","title":"Section Padding Collapse","definition":"Adjacent interchangeable sections declare their padding so neighboring blocks do not double the rhythm at the seam.","install":"npx @askewly/design add section-padding-collapse","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/section-padding-collapse.md","keywords":["marketing","container"],"md":"# Section Padding Collapse\n\n> Adjacent interchangeable sections declare their padding so neighboring blocks do not double the rhythm at the seam.\n\n## 설치\n\n```\nnpx @askewly/design add section-padding-collapse\n```\n\nRegistry JSON: https://ui.askewly.com/r/section-padding-collapse.json\n\n## 코드 경로\n\n`registry/askewly/section-padding-collapse/section-padding-collapse.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/section-padding-collapse\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/section-padding-collapse.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"seed-deeplink-share","title":"Seed Deeplink Share","definition":"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.","install":"npx @askewly/design add seed-deeplink-share","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/seed-deeplink-share.md","keywords":["application-ui","number-input","button"],"md":"# Seed Deeplink Share\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add seed-deeplink-share\n```\n\nRegistry JSON: https://ui.askewly.com/r/seed-deeplink-share.json\n\n## 코드 경로\n\n`registry/askewly/seed-deeplink-share/seed-deeplink-share.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/seed-deeplink-share\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/seed-deeplink-share.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"shader-gradient-surface","title":"Shader Gradient Surface","definition":"A shader gradient surface gives a hero or brand section an animated organic color field computed per-frame on the GPU (Paper Shaders `MeshGradient`).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/shader-gradient-surface.md","keywords":["marketing","animated-gradient-background","gradient-fill"],"md":"# Shader Gradient Surface\n\n> A shader gradient surface gives a hero or brand section an animated organic color field computed per-frame on the GPU (Paper Shaders `MeshGradient`).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/shader-gradient-surface.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/shader-gradient-surface.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/shader-gradient-surface\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/shader-gradient-surface.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"shared-container-ladder","title":"Shared Container Ladder","definition":"Every section wrapper shares one horizontal rule — a single max-width and gutter ladder across breakpoints — so sections line up on one edge no matter how many kinds there are.","install":"npx @askewly/design add shared-container-ladder","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/shared-container-ladder.md","keywords":["layout","container","grid"],"md":"# Shared Container Ladder\n\n> Every section wrapper shares one horizontal rule — a single max-width and gutter ladder across breakpoints — so sections line up on one edge no matter how many kinds there are.\n\n## 설치\n\n```\nnpx @askewly/design add shared-container-ladder\n```\n\nRegistry JSON: https://ui.askewly.com/r/shared-container-ladder.json\n\n## 코드 경로\n\n`registry/askewly/shared-container-ladder/shared-container-ladder.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/shared-container-ladder\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/shared-container-ladder.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"shared-element-flip-transition","title":"Shared Element FLIP Transition","definition":"The clicked card flies into the next view's hero via a FLIP clone, keeping context unbroken across the page swap.","install":"npx @askewly/design add shared-element-flip-transition","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/shared-element-flip-transition.md","keywords":["navigation","transition"],"md":"# Shared Element FLIP Transition\n\n> The clicked card flies into the next view's hero via a FLIP clone, keeping context unbroken across the page swap.\n\n## 설치\n\n```\nnpx @askewly/design add shared-element-flip-transition\n```\n\nRegistry JSON: https://ui.askewly.com/r/shared-element-flip-transition.json\n\n## 코드 경로\n\n`registry/askewly/shared-element-flip-transition/shared-element-flip-transition.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/shared-element-flip-transition\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/shared-element-flip-transition.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"shipping-method-selector","title":"Shipping Method Selector","definition":"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.","install":"npx @askewly/design add shipping-method-selector","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/shipping-method-selector.md","keywords":["commerce","checkout-step","checkout-progress-header","payment-method-card","cart-summary"],"md":"# Shipping Method Selector\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add shipping-method-selector\n```\n\nRegistry JSON: https://ui.askewly.com/r/shipping-method-selector.json\n\n## 코드 경로\n\n`registry/askewly/shipping-method-selector/shipping-method-selector.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/shipping-method-selector\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/shipping-method-selector.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"showcase-card","title":"Showcase Card","definition":"A showcase card is a self-contained shell that proves an interaction capability rather than describing it: a header (icon, title, one-line copy) sits above a bounded demo region that runs a live, interactive product-interface behavior.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/showcase-card.md","keywords":["application-ui","card","hero"],"md":"# Showcase Card\n\n> A showcase card is a self-contained shell that proves an interaction capability rather than describing it: a header (icon, title, one-line copy) sits above a bounded demo region that runs a live, interactive product-interface behavior.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/showcase-card.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/showcase-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/showcase-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/showcase-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"sidebar-application-shell","title":"Sidebar Application Shell","definition":"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.","install":"npx @askewly/design add sidebar-application-shell","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/sidebar-application-shell.md","keywords":["layout","app-shell","sidebar-nav","collapsible-sidebar","sidebar-dashboard-layout"],"md":"# Sidebar Application Shell\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add sidebar-application-shell\n```\n\nRegistry JSON: https://ui.askewly.com/r/sidebar-application-shell.json\n\n## 코드 경로\n\n`registry/askewly/sidebar-application-shell/sidebar-application-shell.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/sidebar-application-shell\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/sidebar-application-shell.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"skeleton-card-loading","title":"Skeleton Card Loading","definition":"Skeleton card loading is the shape contract for the loading state itself: placeholder cards that preview the true structure of what will arrive — same layout, same count, same proportions — so the wait reads as \"your content is forming\" rather than \"something is spinning\".","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/skeleton-card-loading.md","keywords":["feedback","skeleton","error-state"],"md":"# Skeleton Card Loading\n\n> Skeleton card loading is the shape contract for the loading state itself: placeholder cards that preview the true structure of what will arrive — same layout, same count, same proportions — so the wait reads as \"your content is forming\" rather than \"something is spinning\".\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/feedback/skeleton-card-loading.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/skeleton-card-loading.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/skeleton-card-loading\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/skeleton-card-loading.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"sound-onboarding-gate","title":"Sound Onboarding Gate","definition":"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.","install":"npx @askewly/design add sound-onboarding-gate","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/sound-onboarding-gate.md","keywords":["marketing"],"md":"# Sound Onboarding Gate\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add sound-onboarding-gate\n```\n\nRegistry JSON: https://ui.askewly.com/r/sound-onboarding-gate.json\n\n## 코드 경로\n\n`registry/askewly/sound-onboarding-gate/sound-onboarding-gate.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/sound-onboarding-gate\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/sound-onboarding-gate.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"speed-sensitive-marquee","title":"Speed Sensitive Marquee","definition":"A looping logo strip that maps drag velocity and direction onto its flow, so visitors can grab the stream and play with it.","install":"npx @askewly/design add speed-sensitive-marquee","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/speed-sensitive-marquee.md","keywords":["marketing","marquee-row"],"md":"# Speed Sensitive Marquee\n\n> A looping logo strip that maps drag velocity and direction onto its flow, so visitors can grab the stream and play with it.\n\n## 설치\n\n```\nnpx @askewly/design add speed-sensitive-marquee\n```\n\nRegistry JSON: https://ui.askewly.com/r/speed-sensitive-marquee.json\n\n## 코드 경로\n\n`registry/askewly/speed-sensitive-marquee/speed-sensitive-marquee.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/speed-sensitive-marquee\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/speed-sensitive-marquee.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"spiral-star-field-hero","title":"Spiral Star Field Hero","definition":"A hero star field whose points sit on curved rails with density falloff, converge from a dispersed intro, and rotate by drag or arrow keys — with a still slot when WebGL is unavailable.","install":"npx @askewly/design add spiral-star-field-hero","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/spiral-star-field-hero.md","keywords":["marketing","hero"],"md":"# Spiral Star Field Hero\n\n> A hero star field whose points sit on curved rails with density falloff, converge from a dispersed intro, and rotate by drag or arrow keys — with a still slot when WebGL is unavailable.\n\n## 설치\n\n```\nnpx @askewly/design add spiral-star-field-hero\n```\n\nRegistry JSON: https://ui.askewly.com/r/spiral-star-field-hero.json\n\n## 코드 경로\n\n`registry/askewly/spiral-star-field-hero/spiral-star-field-hero.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/spiral-star-field-hero\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/spiral-star-field-hero.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"split-auth-layout","title":"Split Auth Layout","definition":"Two columns where the form comes first in DOM order and the brand panel folds beneath it rather than disappearing on narrow screens.","install":"npx @askewly/design add split-auth-layout","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/split-auth-layout.md","keywords":["layout","split-auth-layout","auth-card","login-page"],"md":"# Split Auth Layout\n\n> Two columns where the form comes first in DOM order and the brand panel folds beneath it rather than disappearing on narrow screens.\n\n## 설치\n\n```\nnpx @askewly/design add split-auth-layout\n```\n\nRegistry JSON: https://ui.askewly.com/r/split-auth-layout.json\n\n## 코드 경로\n\n`registry/askewly/split-auth-layout/split-auth-layout.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/split-auth-layout\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/split-auth-layout.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"split-tone-hero","title":"Split Tone Hero","definition":"Two-column hero whose background splits into two tones at the same line as the grid, with a diagonal-corner media frame and a stacked mobile fallback.","install":"npx @askewly/design add split-tone-hero","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/split-tone-hero.md","keywords":["marketing","hero"],"md":"# Split Tone Hero\n\n> Two-column hero whose background splits into two tones at the same line as the grid, with a diagonal-corner media frame and a stacked mobile fallback.\n\n## 설치\n\n```\nnpx @askewly/design add split-tone-hero\n```\n\nRegistry JSON: https://ui.askewly.com/r/split-tone-hero.json\n\n## 코드 경로\n\n`registry/askewly/split-tone-hero/split-tone-hero.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/split-tone-hero\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/split-tone-hero.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"spotlight-mask-reveal","title":"Spotlight Mask Reveal","definition":"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.","install":"npx @askewly/design add spotlight-mask-reveal","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/spotlight-mask-reveal.md","keywords":["marketing","clipping-mask","hover-reveal"],"md":"# Spotlight Mask Reveal\n\n> 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.\n\n## 사용 규칙\n\n- 언제 쓰나 — 마우스를 따라 다니는 손전등 원으로 숨은 내용을 탐색하게 하고 클릭으로 전체를 열 때\n- 한 화면에 몇 개 — 화면당 1개\n- 안 쓰는 곳 — 키보드·터치만 쓰는 화면에서 클릭 경로가 없을 때, 번짐 구간에서 글자 대비를 못 지키는 본문\n- 같이 쓰는 것 — 마스크 변수를 움직이는 GSAP 트윈, 클릭으로 전체 공개하는 버튼 영역\n- 한계 — 전체 공개 뒤에는 이동 핸들러가 멈춘다, 모션 줄이기에서는 손전등을 빼고 클릭 공개만 남는다\n\n## 설치\n\n```\nnpx @askewly/design add spotlight-mask-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/spotlight-mask-reveal.json\n\n## 코드 경로\n\n`registry/askewly/spotlight-mask-reveal/spotlight-mask-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/spotlight-mask-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/spotlight-mask-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"spring-drag-snap-card","title":"Spring Drag Snap Card","definition":"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.","install":"npx @askewly/design add spring-drag-snap-card","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/spring-drag-snap-card.md","keywords":["application-ui","drag-state","card"],"md":"# Spring Drag Snap Card\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add spring-drag-snap-card\n```\n\nRegistry JSON: https://ui.askewly.com/r/spring-drag-snap-card.json\n\n## 코드 경로\n\n`registry/askewly/spring-drag-snap-card/spring-drag-snap-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/spring-drag-snap-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/spring-drag-snap-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"staggered-entrance-group","title":"Staggered Entrance Group","definition":"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.","install":"npx @askewly/design add staggered-entrance-group","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/staggered-entrance-group.md","keywords":["application-ui","fade-transition"],"md":"# Staggered Entrance Group\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add staggered-entrance-group\n```\n\nRegistry JSON: https://ui.askewly.com/r/staggered-entrance-group.json\n\n## 코드 경로\n\n`registry/askewly/staggered-entrance-group/staggered-entrance-group.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/staggered-entrance-group\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/staggered-entrance-group.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"stat-summary-grid","title":"Stat Summary Grid","definition":"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.","install":"npx @askewly/design add stat-summary-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/stat-summary-grid.md","keywords":["data-display","stat-list","dashboard-grid","status-indicator"],"md":"# Stat Summary Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add stat-summary-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/stat-summary-grid.json\n\n## 코드 경로\n\n`registry/askewly/stat-summary-grid/stat-summary-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/stat-summary-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/stat-summary-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"sticky-intro-faq","title":"Sticky Intro FAQ","definition":"Two-column FAQ with an intro pinned while tinted question bars scroll past; answers expand in about 400ms as the plus turns into a cross.","install":"npx @askewly/design add sticky-intro-faq","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/sticky-intro-faq.md","keywords":["marketing","faq-list","accordion","sticky-scroll-section"],"md":"# Sticky Intro FAQ\n\n> Two-column FAQ with an intro pinned while tinted question bars scroll past; answers expand in about 400ms as the plus turns into a cross.\n\n## 사용 규칙\n\n- 언제 쓰나 — 질문이 길게 이어질 때 왼쪽 소개를 고정하고 오른쪽 질문 막대를 스크롤시킬 때\n- 한 화면에 몇 개 — 페이지당 1개\n- 안 쓰는 곳 — 992px 미만(고정하면 질문을 가린다), 질문이 대여섯 개 이하인 짧은 목록\n- 같이 쓰는 것 — grid-rows-accordion 펼침 기법, 소개 영역의 버튼\n- 한계 — 질문·답은 자리표시자다, 높이를 자바스크립트로 재서 움직이는 방식은 쓰지 않는다\n\n## 설치\n\n```\nnpx @askewly/design add sticky-intro-faq\n```\n\nRegistry JSON: https://ui.askewly.com/r/sticky-intro-faq.json\n\n## 코드 경로\n\n`registry/askewly/sticky-intro-faq/sticky-intro-faq.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/sticky-intro-faq\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/sticky-intro-faq.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"sticky-steps","title":"Sticky Steps Scrollytelling","definition":"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.","install":"npx @askewly/design add sticky-steps","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Sticky Steps Scrollytelling\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add sticky-steps\n```\n\nRegistry JSON: https://ui.askewly.com/r/sticky-steps.json\n\n## 코드 경로\n\n`registry/askewly/sticky-steps/sticky-steps.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"studio-artifact-panel","title":"Studio Artifact Panel","definition":"A 3×3 grid of artifact-kind tiles tinted by group with icon and label carrying identity, an artifact list whose subtitle is source count plus freshness, a sticky add-note action, and a detail mode with breadcrumb, source-count link and feedback pair.","install":"npx @askewly/design add studio-artifact-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/studio-artifact-panel.md","keywords":["application-ui","grid","card","floating-action-button","badge"],"md":"# Studio Artifact Panel\n\n> A 3×3 grid of artifact-kind tiles tinted by group with icon and label carrying identity, an artifact list whose subtitle is source count plus freshness, a sticky add-note action, and a detail mode with breadcrumb, source-count link and feedback pair.\n\n## 설치\n\n```\nnpx @askewly/design add studio-artifact-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/studio-artifact-panel.json\n\n## 코드 경로\n\n`registry/askewly/studio-artifact-panel/studio-artifact-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/studio-artifact-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/studio-artifact-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"studio-finder-split","title":"Studio Finder Split","definition":"Two-state location finder box: choose a city, then filter studio cards beside a map slot; a booking button on wide screens and whole-card tap on narrow ones.","install":"npx @askewly/design add studio-finder-split","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/studio-finder-split.md","keywords":["navigation","office-location-card","map-marker","search-field"],"md":"# Studio Finder Split\n\n> Two-state location finder box: choose a city, then filter studio cards beside a map slot; a booking button on wide screens and whole-card tap on narrow ones.\n\n## 설치\n\n```\nnpx @askewly/design add studio-finder-split\n```\n\nRegistry JSON: https://ui.askewly.com/r/studio-finder-split.json\n\n## 코드 경로\n\n`registry/askewly/studio-finder-split/studio-finder-split.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/studio-finder-split\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/studio-finder-split.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"svg-stroke-assembly-loader","title":"SVG Stroke Assembly Loader","definition":"Scattered logo strokes assemble in shuffled stagger order while a percent counter runs, so loading progress doubles as brand imprint.","install":"npx @askewly/design add svg-stroke-assembly-loader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/svg-stroke-assembly-loader.md","keywords":["feedback","loading-state","logo"],"md":"# SVG Stroke Assembly Loader\n\n> Scattered logo strokes assemble in shuffled stagger order while a percent counter runs, so loading progress doubles as brand imprint.\n\n## 설치\n\n```\nnpx @askewly/design add svg-stroke-assembly-loader\n```\n\nRegistry JSON: https://ui.askewly.com/r/svg-stroke-assembly-loader.json\n\n## 코드 경로\n\n`registry/askewly/svg-stroke-assembly-loader/svg-stroke-assembly-loader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/svg-stroke-assembly-loader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/svg-stroke-assembly-loader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"swipe-action-row-pattern","title":"Swipe Action Row","definition":"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.","install":"npx @askewly/design add swipe-action-row-pattern","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/swipe-action-row-pattern.md","keywords":["data-display","swipe-action-row","swipe-to-delete","swipe-action"],"md":"# Swipe Action Row\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add swipe-action-row-pattern\n```\n\nRegistry JSON: https://ui.askewly.com/r/swipe-action-row-pattern.json\n\n## 코드 경로\n\n`registry/askewly/swipe-action-row-pattern/swipe-action-row-pattern.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/swipe-action-row-pattern\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/swipe-action-row-pattern.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"tabbed-progress-hero-carousel","title":"Tabbed Progress Hero Carousel","definition":"풀폭 히어로 한 장에 소식 4개를 돌려 보여 주는 블록.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/tabbed-progress-hero-carousel.md","keywords":["marketing","carousel","tabs","hero","progress-bar"],"md":"# Tabbed Progress Hero Carousel\n\n> 풀폭 히어로 한 장에 소식 4개를 돌려 보여 주는 블록.\n\n## 사용 규칙\n\n- 언제 쓰나 — 첫 화면에서 서로 독립된 소식·제품 3~5개를 한 자리에 번갈아 보여 줄 때.\n- 한 화면에 몇 개 — 하나. 페이지 맨 위 한 번만.\n- 안 쓰는 곳 — 한 가지 메시지가 핵심인 랜딩, 본문 중간 구간, 슬라이드가 6개를 넘는 경우.\n- 같이 쓰는 것 — 바로 아래 `page-intro` 류 인트로, 토큰 `--scrim-from/--scrim-to`·`--slot-`.\n- 한계* — 사진 없이는 톤 차이로만 전환을 보여 준다. 호버 정지가 없어 읽는 속도가 느린 사용자에게 불리하니 긴 문장에는 맞지 않는다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/tabbed-progress-hero-carousel.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/tabbed-progress-hero-carousel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/tabbed-progress-hero-carousel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/tabbed-progress-hero-carousel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"team-member-row","title":"Team Member Row","definition":"A row built for operating on one person: every control carries that member's name in its accessible name, and status is words before it is a dot.","install":"npx @askewly/design add team-member-row","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/team-member-row.md","keywords":["data-display","team-member-row","avatar-stack","profile-card","role-badge"],"md":"# Team Member Row\n\n> A row built for operating on one person: every control carries that member's name in its accessible name, and status is words before it is a dot.\n\n## 설치\n\n```\nnpx @askewly/design add team-member-row\n```\n\nRegistry JSON: https://ui.askewly.com/r/team-member-row.json\n\n## 코드 경로\n\n`registry/askewly/team-member-row/team-member-row.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/team-member-row\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/team-member-row.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"terminal-demo-panel","title":"Terminal Demo Panel","definition":"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.","install":"npx @askewly/design add terminal-demo-panel","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Terminal Demo Panel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add terminal-demo-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/terminal-demo-panel.json\n\n## 코드 경로\n\n`registry/askewly/terminal-demo-panel/terminal-demo-panel.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"text-explosion-physics","title":"Text Explosion Physics","definition":"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.","install":"npx @askewly/design add text-explosion-physics","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/text-explosion-physics.md","keywords":["marketing","typography"],"md":"# Text Explosion Physics\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add text-explosion-physics\n```\n\nRegistry JSON: https://ui.askewly.com/r/text-explosion-physics.json\n\n## 코드 경로\n\n`registry/askewly/text-explosion-physics/text-explosion-physics.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/text-explosion-physics\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/text-explosion-physics.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"topbar-command-search","title":"Topbar Command Search","definition":"A collapsed topbar icon that expands into a full-width search input with a live suggestion popover underneath it.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/topbar-command-search.md","keywords":["navigation","command-palette","autocomplete"],"md":"# Topbar Command Search\n\n> A collapsed topbar icon that expands into a full-width search input with a live suggestion popover underneath it.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/topbar-command-search.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/topbar-search.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/topbar-command-search\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/topbar-command-search.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"transparent-chrome-header","title":"Transparent Chrome Header","definition":"A header that never paints a background; a 112px blur layer beneath it is visible over the hero and fades out in 0.2s once scrolling starts.","install":"npx @askewly/design add transparent-chrome-header","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/transparent-chrome-header.md","keywords":["navigation","sticky-header","backdrop-blur","global-header"],"md":"# Transparent Chrome Header\n\n> A header that never paints a background; a 112px blur layer beneath it is visible over the hero and fades out in 0.2s once scrolling starts.\n\n## 설치\n\n```\nnpx @askewly/design add transparent-chrome-header\n```\n\nRegistry JSON: https://ui.askewly.com/r/transparent-chrome-header.json\n\n## 코드 경로\n\n`registry/askewly/transparent-chrome-header/transparent-chrome-header.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/transparent-chrome-header\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/transparent-chrome-header.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"twinkle-star-field","title":"Twinkle Star Field","definition":"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.","install":"npx @askewly/design add twinkle-star-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/twinkle-star-field.md","keywords":["marketing","hero"],"md":"# Twinkle Star Field\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add twinkle-star-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/twinkle-star-field.json\n\n## 코드 경로\n\n`registry/askewly/twinkle-star-field/twinkle-star-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/twinkle-star-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/twinkle-star-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"two-mode-footer-nav","title":"Two-Mode Footer Nav","definition":"The full navigation tree in the footer, written once in markup and driven as desktop columns or a mobile accordion from the same DOM.","install":"npx @askewly/design add two-mode-footer-nav","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/two-mode-footer-nav.md","keywords":["navigation","accordion","navigation-menu"],"md":"# Two-Mode Footer Nav\n\n> The full navigation tree in the footer, written once in markup and driven as desktop columns or a mobile accordion from the same DOM.\n\n## 설치\n\n```\nnpx @askewly/design add two-mode-footer-nav\n```\n\nRegistry JSON: https://ui.askewly.com/r/two-mode-footer-nav.json\n\n## 코드 경로\n\n`registry/askewly/two-mode-footer-nav/two-mode-footer-nav.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/two-mode-footer-nav\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/two-mode-footer-nav.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"typing-headline","title":"Typing Headline","definition":"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.","install":"npx @askewly/design add typing-headline","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Typing Headline\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add typing-headline\n```\n\nRegistry JSON: https://ui.askewly.com/r/typing-headline.json\n\n## 코드 경로\n\n`registry/askewly/typing-headline/typing-headline.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"underline-bridge-sweep","title":"Underline Bridge Sweep","definition":"A hero headline whose emphasis underlines sweep in alternating directions and on staggered offsets while the characters are still arriving.","install":"npx @askewly/design add underline-bridge-sweep","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/underline-bridge-sweep.md","keywords":["marketing","typography","highlight-stroke"],"md":"# Underline Bridge Sweep\n\n> A hero headline whose emphasis underlines sweep in alternating directions and on staggered offsets while the characters are still arriving.\n\n## 설치\n\n```\nnpx @askewly/design add underline-bridge-sweep\n```\n\nRegistry JSON: https://ui.askewly.com/r/underline-bridge-sweep.json\n\n## 코드 경로\n\n`registry/askewly/underline-bridge-sweep/underline-bridge-sweep.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/underline-bridge-sweep\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/underline-bridge-sweep.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"upgrade-prompt","title":"Upgrade Prompt","definition":"A preview of the locked feature above a badge that names both the current plan and the required one, so the block never reads as an error.","install":"npx @askewly/design add upgrade-prompt","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/upgrade-prompt.md","keywords":["feedback","upgrade-prompt","locked-state","permission-state","plan-card"],"md":"# Upgrade Prompt\n\n> A preview of the locked feature above a badge that names both the current plan and the required one, so the block never reads as an error.\n\n## 설치\n\n```\nnpx @askewly/design add upgrade-prompt\n```\n\nRegistry JSON: https://ui.askewly.com/r/upgrade-prompt.json\n\n## 코드 경로\n\n`registry/askewly/upgrade-prompt/upgrade-prompt.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/upgrade-prompt\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/upgrade-prompt.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"upload-dropzone","title":"Upload Dropzone","definition":"A drop area with an always-visible file picker beside it, so the drag path is the extra one and the pointer path is the contract.","install":"npx @askewly/design add upload-dropzone","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/upload-dropzone.md","keywords":["forms","upload-dropzone","file-upload","drop-target"],"md":"# Upload Dropzone\n\n> A drop area with an always-visible file picker beside it, so the drag path is the extra one and the pointer path is the contract.\n\n## 설치\n\n```\nnpx @askewly/design add upload-dropzone\n```\n\nRegistry JSON: https://ui.askewly.com/r/upload-dropzone.json\n\n## 코드 경로\n\n`registry/askewly/upload-dropzone/upload-dropzone.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/upload-dropzone\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/upload-dropzone.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"velocity-driven-particle-glow","title":"Velocity Driven Particle Glow","definition":"Velocity driven particle glow maps how fast a grain is moving straight onto how bright it is.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/velocity-driven-particle-glow.md","keywords":["marketing","hero"],"md":"# Velocity Driven Particle Glow\n\n> Velocity driven particle glow maps how fast a grain is moving straight onto how bright it is.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/velocity-driven-particle-glow.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/velocity-driven-particle-glow.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/velocity-driven-particle-glow\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/velocity-driven-particle-glow.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"versioned-docs-switcher-navbar-sidebar-swap","title":"Versioned Docs Switcher Navbar Sidebar Swap","definition":"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.","install":"npx @askewly/design add versioned-docs-switcher-navbar-sidebar-swap","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/versioned-docs-switcher-navbar-sidebar-swap.md","keywords":["navigation","versioned-docs-switcher"],"md":"# Versioned Docs Switcher Navbar Sidebar Swap\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add versioned-docs-switcher-navbar-sidebar-swap\n```\n\nRegistry JSON: https://ui.askewly.com/r/versioned-docs-switcher-navbar-sidebar-swap.json\n\n## 코드 경로\n\n`registry/askewly/versioned-docs-switcher-navbar-sidebar-swap/versioned-docs-switcher-navbar-sidebar-swap.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/versioned-docs-switcher-navbar-sidebar-swap\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/versioned-docs-switcher-navbar-sidebar-swap.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"vertical-horizontal-scroll","title":"Vertical to Horizontal Scroll","definition":"A vertical scroll segment remapped into a horizontal film reel while pinned, creating scene-change rhythm inside one continuous scroll.","install":"npx @askewly/design add vertical-horizontal-scroll","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/vertical-horizontal-scroll.md","keywords":["marketing","sticky-scroll-section"],"md":"# Vertical to Horizontal Scroll\n\n> A vertical scroll segment remapped into a horizontal film reel while pinned, creating scene-change rhythm inside one continuous scroll.\n\n## 설치\n\n```\nnpx @askewly/design add vertical-horizontal-scroll\n```\n\nRegistry JSON: https://ui.askewly.com/r/vertical-horizontal-scroll.json\n\n## 코드 경로\n\n`registry/askewly/vertical-horizontal-scroll/vertical-horizontal-scroll.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/vertical-horizontal-scroll\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/vertical-horizontal-scroll.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-horizontal-bar-chart","title":"Video Horizontal Bar Chart","definition":"항목 3개를 가로 막대로 비교하는 카드.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-horizontal-bar-chart.md","keywords":["data-display","bar-chart-card"],"md":"# Video Horizontal Bar Chart\n\n> 항목 3개를 가로 막대로 비교하는 카드.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-horizontal-bar-chart.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/horizontal-bar-chart.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-horizontal-bar-chart\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-horizontal-bar-chart.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-line-chart","title":"Video Line Chart","definition":"7점 추세선.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-line-chart.md","keywords":["data-display","line-chart-card"],"md":"# Video Line Chart\n\n> 7점 추세선.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-line-chart.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/line-chart.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-line-chart\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-line-chart.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-location-lower-third","title":"Video Location Lower Third","definition":"행사 장소를 핀과 함께 소개하는 오버레이.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/video-location-lower-third.md","keywords":["overlays"],"md":"# Video Location Lower Third\n\n> 행사 장소를 핀과 함께 소개하는 오버레이.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/video-location-lower-third.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/location-lower-third.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-location-lower-third\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/video-location-lower-third.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-name-lower-third","title":"Video Name Lower Third","definition":"화자·게스트를 화면 아래 3분의 1 지점에서 소개하고 스스로 물러나는 오버레이.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/video-name-lower-third.md","keywords":["overlays"],"md":"# Video Name Lower Third\n\n> 화자·게스트를 화면 아래 3분의 1 지점에서 소개하고 스스로 물러나는 오버레이.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/video-name-lower-third.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/name-lower-third.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-name-lower-third\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/video-name-lower-third.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-number-counter","title":"Video Number Counter","definition":"시작값에서 목표값까지 세어 올라가는 숫자 하나.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-number-counter.md","keywords":["data-display","number-ticker"],"md":"# Video Number Counter\n\n> 시작값에서 목표값까지 세어 올라가는 숫자 하나.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-number-counter.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/number-counter.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-number-counter\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-number-counter.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-on-screen-messages","title":"Video On-Screen Messages","definition":"대화 3턴을 화면에서 재연한다.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/video-on-screen-messages.md","keywords":["marketing","chat-bubble","chat-message"],"md":"# Video On-Screen Messages\n\n> 대화 3턴을 화면에서 재연한다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/video-on-screen-messages.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/on-screen-messages.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-on-screen-messages\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/video-on-screen-messages.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-pie-chart","title":"Video Pie Chart","definition":"4항목 구성비.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-pie-chart.md","keywords":["data-display","pie-chart-card"],"md":"# Video Pie Chart\n\n> 4항목 구성비.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-pie-chart.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/pie-chart.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-pie-chart\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-pie-chart.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-vertical-bar-chart","title":"Video Vertical Bar Chart","definition":"항목 3개를 세로 막대로 비교한다.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-vertical-bar-chart.md","keywords":["data-display","bar-chart-card"],"md":"# Video Vertical Bar Chart\n\n> 항목 3개를 세로 막대로 비교한다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-vertical-bar-chart.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/vertical-bar-chart.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-vertical-bar-chart\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-vertical-bar-chart.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"view-transition-language-crossfade","title":"View Transition Language Crossfade","definition":"When the user switches UI language (or any whole-surface content swap: locale, theme preview, A/B variant), re-rendering in place makes every line of text pop simultaneously — jarring and hard to trust.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/view-transition-language-crossfade.md","keywords":["application-ui","fade-transition","transition"],"md":"# View Transition Language Crossfade\n\n> When the user switches UI language (or any whole-surface content swap: locale, theme preview, A/B variant), re-rendering in place makes every line of text pop simultaneously — jarring and hard to trust.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/view-transition-language-crossfade.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/view-transition-language-crossfade.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"walkable-formal-garden","title":"Walkable Formal Garden","definition":"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.","install":"npx @askewly/design add walkable-formal-garden","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/walkable-formal-garden.md","keywords":["application-ui","skeleton","error-boundary","reduced-motion"],"md":"# Walkable Formal Garden\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add walkable-formal-garden\n```\n\nRegistry JSON: https://ui.askewly.com/r/walkable-formal-garden.json\n\n## 코드 경로\n\n`registry/askewly/walkable-formal-garden/walkable-formal-garden.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/walkable-formal-garden\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/walkable-formal-garden.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"window-edge-affordance","title":"Window Edge Affordance","definition":"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.","install":"npx @askewly/design add window-edge-affordance","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/window-edge-affordance.md","keywords":["application-ui","resizable-panel","floating-panel"],"md":"# Window Edge Affordance\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add window-edge-affordance\n```\n\nRegistry JSON: https://ui.askewly.com/r/window-edge-affordance.json\n\n## 코드 경로\n\n`registry/askewly/window-edge-affordance/window-edge-affordance.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/window-edge-affordance\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/window-edge-affordance.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"window-placement-cascade","title":"Window Placement Cascade","definition":"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.","install":"npx @askewly/design add window-placement-cascade","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/window-placement-cascade.md","keywords":["layout","floating-panel"],"md":"# Window Placement Cascade\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add window-placement-cascade\n```\n\nRegistry JSON: https://ui.askewly.com/r/window-placement-cascade.json\n\n## 코드 경로\n\n`registry/askewly/window-placement-cascade/window-placement-cascade.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/window-placement-cascade\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/window-placement-cascade.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"window-stack-focus","title":"Window Stack Focus","definition":"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.","install":"npx @askewly/design add window-stack-focus","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/window-stack-focus.md","keywords":["application-ui","z-index","stacking-context","floating-panel"],"md":"# Window Stack Focus\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add window-stack-focus\n```\n\nRegistry JSON: https://ui.askewly.com/r/window-stack-focus.json\n\n## 코드 경로\n\n`registry/askewly/window-stack-focus/window-stack-focus.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/window-stack-focus\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/window-stack-focus.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"zigzag-story-section","title":"Zigzag Story Section","definition":"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.","install":"npx @askewly/design add zigzag-story-section","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Zigzag Story Section\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add zigzag-story-section\n```\n\nRegistry JSON: https://ui.askewly.com/r/zigzag-story-section.json\n\n## 코드 경로\n\n`registry/askewly/zigzag-story-section/zigzag-story-section.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"}]
1	+ [{"id":"action-sheet-destructive-confirmation","title":"Action Sheet Destructive Confirmation","definition":"An `action-sheet` (vocabulary term) variant tuned for the common case where one of the listed actions is destructive and irreversible (delete).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/action-sheet-destructive-confirmation.md","keywords":["overlays","action-sheet"],"md":"# Action Sheet Destructive Confirmation\n\n> An `action-sheet` (vocabulary term) variant tuned for the common case where one of the listed actions is destructive and irreversible (delete).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/action-sheet-destructive-confirmation.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/action-sheet-destructive-confirmation.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/action-sheet-destructive-confirmation\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/action-sheet-destructive-confirmation.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"actionable-toast","title":"Actionable Toast","definition":"An actionable toast confirms a recent low-risk operation and may offer one short recovery action such as Undo or Retry.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/actionable-toast.md","keywords":[],"md":"# Actionable Toast\n\n> An actionable toast confirms a recent low-risk operation and may offer one short recovery action such as Undo or Retry.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/feedback/actionable-toast.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/actionable-toast.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/actionable-toast\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/actionable-toast.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"adaptive-navigation-container","title":"Adaptive Navigation Container","definition":"One destination set, three possible primary-navigation containers — resolved by rule, not taste.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/adaptive-navigation-container.md","keywords":["navigation","tab-bar","navigation-rail","tabs"],"md":"# Adaptive Navigation Container\n\n> One destination set, three possible primary-navigation containers — resolved by rule, not taste.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/adaptive-navigation-container.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/adaptive-navigation-container.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/adaptive-navigation-container\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/adaptive-navigation-container.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"add-to-cart-feedback-modes","title":"Add to Cart Feedback Modes","definition":"Three real answers to one event: full-page transition, anchored popover, auto-opening drawer. They share only the instant header count update.","install":"npx @askewly/design add add-to-cart-feedback-modes","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/add-to-cart-feedback-modes.md","keywords":["commerce","cart-summary","cart-summary-bar","drawer","toast"],"md":"# Add to Cart Feedback Modes\n\n> Three real answers to one event: full-page transition, anchored popover, auto-opening drawer. They share only the instant header count update.\n\n## 설치\n\n```\nnpx @askewly/design add add-to-cart-feedback-modes\n```\n\nRegistry JSON: https://ui.askewly.com/r/add-to-cart-feedback-modes.json\n\n## 코드 경로\n\n`registry/askewly/add-to-cart-feedback-modes/add-to-cart-feedback-modes.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/add-to-cart-feedback-modes\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/add-to-cart-feedback-modes.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"advanced-filter-builder","title":"Advanced Filter Builder","definition":"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)\".","install":"npx @askewly/design add advanced-filter-builder","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/advanced-filter-builder-condition-groups.md","keywords":["forms","advanced-filter-builder","select","text-field"],"md":"# Advanced Filter Builder\n\n> 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)\".\n\n## 설치\n\n```\nnpx @askewly/design add advanced-filter-builder\n```\n\nRegistry JSON: https://ui.askewly.com/r/advanced-filter-builder.json\n\n## 코드 경로\n\n`registry/askewly/advanced-filter-builder/advanced-filter-builder.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/advanced-filter-builder-condition-groups\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/advanced-filter-builder-condition-groups.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ambient-audio-mixer","title":"Ambient Audio Mixer","definition":"Background layers mix by on-screen position and duck when UI opens, building spatial presence out of sound.","install":"npx @askewly/design add ambient-audio-mixer","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/ambient-audio-mixer.md","keywords":["marketing"],"md":"# Ambient Audio Mixer\n\n> Background layers mix by on-screen position and duck when UI opens, building spatial presence out of sound.\n\n## 설치\n\n```\nnpx @askewly/design add ambient-audio-mixer\n```\n\nRegistry JSON: https://ui.askewly.com/r/ambient-audio-mixer.json\n\n## 코드 경로\n\n`registry/askewly/ambient-audio-mixer/ambient-audio-mixer.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/ambient-audio-mixer\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/ambient-audio-mixer.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"api-reference-layout","title":"Api Reference Layout","definition":"Api Reference Layout — verified recipe demo implementation from the Askewly Design site.","install":"npx @askewly/design add api-reference-layout","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Api Reference Layout\n\n> Api Reference Layout — verified recipe demo implementation from the Askewly Design site.\n\n## 설치\n\n```\nnpx @askewly/design add api-reference-layout\n```\n\nRegistry JSON: https://ui.askewly.com/r/api-reference-layout.json\n\n## 코드 경로\n\n`registry/askewly/api-reference-layout/api-reference-layout.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"api-reference-three-column-layout","title":"API Reference Three-Column Layout","definition":"An API reference page needs a reading path that is different from a prose article: the reader is scanning parameter names and types on the left while running or copying a request on the right.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/api-reference-three-column-layout.md","keywords":["docs","badge"],"md":"# API Reference Three-Column Layout\n\n> An API reference page needs a reading path that is different from a prose article: the reader is scanning parameter names and types on the left while running or copying a request on the right.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/docs/api-reference-three-column-layout.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/api-reference-layout.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/api-reference-three-column-layout\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/api-reference-three-column-layout.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"article-documentation-layout","title":"Article Documentation Layout","definition":"A documentation article layout turns a long implementation rule into a predictable reading path: breadcrumb and title establish context, a short lead states the decision the article helps make, ordered sections carry definitions and examples, and an on-this-page rail exposes the structure without competing with the body.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/article-documentation-layout.md","keywords":["docs","breadcrumb","typography","content-section","anchor-nav"],"md":"# Article Documentation Layout\n\n> A documentation article layout turns a long implementation rule into a predictable reading path: breadcrumb and title establish context, a short lead states the decision the article helps make, ordered sections carry definitions and examples, and an on-this-page rail exposes the structure without competing with the body.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/docs/article-documentation-layout.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/article-documentation-layout.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/article-documentation-layout\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/article-documentation-layout.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ascii-fluid-field","title":"ASCII Fluid Field","definition":"A transparent overlay where the cursor opens a fluid mask over a brightness source, so characters bloom under the pointer, drift with the flow, and fade through a fixed glyph ramp.","install":"npx @askewly/design add ascii-fluid-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/ascii-fluid-field.md","keywords":["marketing","hover-reveal"],"md":"# ASCII Fluid Field\n\n> A transparent overlay where the cursor opens a fluid mask over a brightness source, so characters bloom under the pointer, drift with the flow, and fade through a fixed glyph ramp.\n\n## 설치\n\n```\nnpx @askewly/design add ascii-fluid-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/ascii-fluid-field.json\n\n## 코드 경로\n\n`registry/askewly/ascii-fluid-field/ascii-fluid-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/ascii-fluid-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/ascii-fluid-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ascii-fluid-overlay","title":"ASCII Fluid Overlay","definition":"The reusable core of the ASCII fluid field: a transparent, pointer-events-none canvas that fills its positioned host, runs the cursor-driven fluid mask over an internal brightness source, and stamps the glyph ramp in currentColor. No background of its own; mount it over any hero.","install":"npx @askewly/design add ascii-fluid-overlay","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# ASCII Fluid Overlay\n\n> The reusable core of the ASCII fluid field: a transparent, pointer-events-none canvas that fills its positioned host, runs the cursor-driven fluid mask over an internal brightness source, and stamps the glyph ramp in currentColor. No background of its own; mount it over any hero.\n\n## 설치\n\n```\nnpx @askewly/design add ascii-fluid-overlay\n```\n\nRegistry JSON: https://ui.askewly.com/r/ascii-fluid-overlay.json\n\n## 코드 경로\n\n`registry/askewly/ascii-fluid-overlay/ascii-fluid-overlay.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ascii-particle-logo","title":"ASCII Particle Logo","definition":"A wordmark sampled into ASCII particles that scatter from the cursor, fall under gravity on click, and reassemble in staggered ease-out.","install":"npx @askewly/design add ascii-particle-logo","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/ascii-particle-logo.md","keywords":["marketing","logo"],"md":"# ASCII Particle Logo\n\n> A wordmark sampled into ASCII particles that scatter from the cursor, fall under gravity on click, and reassemble in staggered ease-out.\n\n## 설치\n\n```\nnpx @askewly/design add ascii-particle-logo\n```\n\nRegistry JSON: https://ui.askewly.com/r/ascii-particle-logo.json\n\n## 코드 경로\n\n`registry/askewly/ascii-particle-logo/ascii-particle-logo.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/ascii-particle-logo\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/ascii-particle-logo.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"ask-input-bar","title":"Ask Input Bar","definition":"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.","install":"npx @askewly/design add ask-input-bar","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Ask Input Bar\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add ask-input-bar\n```\n\nRegistry JSON: https://ui.askewly.com/r/ask-input-bar.json\n\n## 코드 경로\n\n`registry/askewly/ask-input-bar/ask-input-bar.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"askewly-otter-mascot","title":"Askewly Otter Mascot","definition":"Askewly's Korean-otter mascot as half-block pixel text: one canonical pixel map, four poses, punched-out eyes, and a single lavender ink that lives unchanged in web and terminal surfaces.","install":"npx @askewly/design add askewly-otter-mascot","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/askewly-otter-mascot.md","keywords":["marketing","logo"],"md":"# Askewly Otter Mascot\n\n> Askewly's Korean-otter mascot as half-block pixel text: one canonical pixel map, four poses, punched-out eyes, and a single lavender ink that lives unchanged in web and terminal surfaces.\n\n## 설치\n\n```\nnpx @askewly/design add askewly-otter-mascot\n```\n\nRegistry JSON: https://ui.askewly.com/r/askewly-otter-mascot.json\n\n## 코드 경로\n\n`registry/askewly/askewly-otter-mascot/askewly-otter-mascot.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/askewly-otter-mascot\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/askewly-otter-mascot.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"attr-declared-cursor-modes","title":"Attribute Declared Cursor Modes","definition":"A two-speed follower cursor whose dot leads and ring trails, with reaction targets declared through data attributes and rebound by a debounced MutationObserver.","install":"npx @askewly/design add attr-declared-cursor-modes","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/attr-declared-cursor-modes.md","keywords":["marketing"],"md":"# Attribute Declared Cursor Modes\n\n> A two-speed follower cursor whose dot leads and ring trails, with reaction targets declared through data attributes and rebound by a debounced MutationObserver.\n\n## 설치\n\n```\nnpx @askewly/design add attr-declared-cursor-modes\n```\n\nRegistry JSON: https://ui.askewly.com/r/attr-declared-cursor-modes.json\n\n## 코드 경로\n\n`registry/askewly/attr-declared-cursor-modes/attr-declared-cursor-modes.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/attr-declared-cursor-modes\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/attr-declared-cursor-modes.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"audio-sprite-sfx","title":"Audio Sprite SFX","definition":"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.","install":"npx @askewly/design add audio-sprite-sfx","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/audio-sprite-sfx.md","keywords":["feedback"],"md":"# Audio Sprite SFX\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add audio-sprite-sfx\n```\n\nRegistry JSON: https://ui.askewly.com/r/audio-sprite-sfx.json\n\n## 코드 경로\n\n`registry/askewly/audio-sprite-sfx/audio-sprite-sfx.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/audio-sprite-sfx\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/audio-sprite-sfx.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"audit-log-filterable-export-feed","title":"Audit Log Filterable Export Feed","definition":"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.","install":"npx @askewly/design add audit-log-filterable-export-feed","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/audit-log-filterable-export-feed.md","keywords":["data-display","audit-log","activity-feed"],"md":"# Audit Log Filterable Export Feed\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add audit-log-filterable-export-feed\n```\n\nRegistry JSON: https://ui.askewly.com/r/audit-log-filterable-export-feed.json\n\n## 코드 경로\n\n`registry/askewly/audit-log-filterable-export-feed/audit-log-filterable-export-feed.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/audit-log-filterable-export-feed\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/audit-log-filterable-export-feed.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"auth-card","title":"Auth Card","definition":"A centered card that carries only the auth form, its logo line, and two secondary link positions, leaving the page background to whatever it sits on.","install":"npx @askewly/design add auth-card","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/auth-card.md","keywords":["forms","auth-card","login-page","split-auth-layout","login-dialog"],"md":"# Auth Card\n\n> A centered card that carries only the auth form, its logo line, and two secondary link positions, leaving the page background to whatever it sits on.\n\n## 설치\n\n```\nnpx @askewly/design add auth-card\n```\n\nRegistry JSON: https://ui.askewly.com/r/auth-card.json\n\n## 코드 경로\n\n`registry/askewly/auth-card/auth-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/auth-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/auth-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"auth-gate-modal","title":"Auth Gate Modal","definition":"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.","install":"npx @askewly/design add auth-gate-modal","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Auth Gate Modal\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add auth-gate-modal\n```\n\nRegistry JSON: https://ui.askewly.com/r/auth-gate-modal.json\n\n## 코드 경로\n\n`registry/askewly/auth-gate-modal/auth-gate-modal.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"autoplay-tab-figure","title":"Autoplay Tab Figure","definition":"A tabbed figure that advances every 6.3 seconds, pauses on hover or focus, and scrolls its pill tab list horizontally with edge fades when it overflows.","install":"npx @askewly/design add autoplay-tab-figure","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/autoplay-tab-figure.md","keywords":["marketing","tabs","content-tabs"],"md":"# Autoplay Tab Figure\n\n> A tabbed figure that advances every 6.3 seconds, pauses on hover or focus, and scrolls its pill tab list horizontally with edge fades when it overflows.\n\n## 설치\n\n```\nnpx @askewly/design add autoplay-tab-figure\n```\n\nRegistry JSON: https://ui.askewly.com/r/autoplay-tab-figure.json\n\n## 코드 경로\n\n`registry/askewly/autoplay-tab-figure/autoplay-tab-figure.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/autoplay-tab-figure\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/autoplay-tab-figure.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"avatar-stack","title":"Avatar Stack","definition":"Overlapping rings that summarize headcount visually while the whole list is announced as one label, with the overflow chip sized like a person.","install":"npx @askewly/design add avatar-stack","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/avatar-stack.md","keywords":["data-display","avatar-stack","avatar-group","team-member-row"],"md":"# Avatar Stack\n\n> Overlapping rings that summarize headcount visually while the whole list is announced as one label, with the overflow chip sized like a person.\n\n## 설치\n\n```\nnpx @askewly/design add avatar-stack\n```\n\nRegistry JSON: https://ui.askewly.com/r/avatar-stack.json\n\n## 코드 경로\n\n`registry/askewly/avatar-stack/avatar-stack.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/avatar-stack\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/avatar-stack.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"bar-grid-glyph-morph","title":"Bar Grid Glyph Morph","definition":"A three-by-eight module grid renders a whole character set, and each transition is matched per row so modules travel, stretch, then split or merge into the next glyph.","install":"npx @askewly/design add bar-grid-glyph-morph","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/bar-grid-glyph-morph.md","keywords":["marketing","typography"],"md":"# Bar Grid Glyph Morph\n\n> A three-by-eight module grid renders a whole character set, and each transition is matched per row so modules travel, stretch, then split or merge into the next glyph.\n\n## 설치\n\n```\nnpx @askewly/design add bar-grid-glyph-morph\n```\n\nRegistry JSON: https://ui.askewly.com/r/bar-grid-glyph-morph.json\n\n## 코드 경로\n\n`registry/askewly/bar-grid-glyph-morph/bar-grid-glyph-morph.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/bar-grid-glyph-morph\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/bar-grid-glyph-morph.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"blur-char-entrance","title":"Blur Char Entrance","definition":"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.","install":"npx @askewly/design add blur-char-entrance","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/blur-char-entrance.md","keywords":["marketing","hero","blur-fade-in","typography"],"md":"# Blur Char Entrance\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add blur-char-entrance\n```\n\nRegistry JSON: https://ui.askewly.com/r/blur-char-entrance.json\n\n## 코드 경로\n\n`registry/askewly/blur-char-entrance/blur-char-entrance.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/blur-char-entrance\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/blur-char-entrance.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"bottom-sheet-detents","title":"Bottom Sheet Detents","definition":"A bottom sheet that carries two collapsed/expanded height presets (\"detents\") toggled from a drag handle, and can run in either of two structural modes: `standard-bottom-sheet` (no scrim — the screen behind stays visible and interactive) or `modal-bottom-sheet` (a scrim blocks the background until the sheet is dismissed).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/bottom-sheet-detents.md","keywords":[],"md":"# Bottom Sheet Detents\n\n> A bottom sheet that carries two collapsed/expanded height presets (\"detents\") toggled from a drag handle, and can run in either of two structural modes: `standard-bottom-sheet` (no scrim — the screen behind stays visible and interactive) or `modal-bottom-sheet` (a scrim blocks the background until the sheet is dismissed).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/bottom-sheet-detents.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/bottom-sheet-detents.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/bottom-sheet-detents\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/bottom-sheet-detents.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"bottom-tab-bar","title":"Bottom Tab Bar","definition":"A persistent bar fixed to the bottom of a mobile screen that switches between the app's top-level, equally-important destinations (`tab-bar` in the vocabulary).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/bottom-tab-bar.md","keywords":["navigation","tab-bar"],"md":"# Bottom Tab Bar\n\n> A persistent bar fixed to the bottom of a mobile screen that switches between the app's top-level, equally-important destinations (`tab-bar` in the vocabulary).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/bottom-tab-bar.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/bottom-tab-bar.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/bottom-tab-bar\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/bottom-tab-bar.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"bulk-action-toolbar","title":"Bulk Action Toolbar","definition":"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.","install":"npx @askewly/design add bulk-action-toolbar","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/bulk-action-toolbar-selection-model.md","keywords":[],"md":"# Bulk Action Toolbar\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add bulk-action-toolbar\n```\n\nRegistry JSON: https://ui.askewly.com/r/bulk-action-toolbar.json\n\n## 코드 경로\n\n`registry/askewly/bulk-action-toolbar/bulk-action-toolbar.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/bulk-action-toolbar-selection-model\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/bulk-action-toolbar-selection-model.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"button-size-scale","title":"Button Size Scale","definition":"Two independent size scales for buttons: fixed-height variable-width action CTAs versus fixed-dimension selection controls like size chips and swatches.","install":"npx @askewly/design add button-size-scale","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/button-size-scale.md","keywords":["forms","button","primary-button","secondary-button","variant-selector-buttons"],"md":"# Button Size Scale\n\n> Two independent size scales for buttons: fixed-height variable-width action CTAs versus fixed-dimension selection controls like size chips and swatches.\n\n## 설치\n\n```\nnpx @askewly/design add button-size-scale\n```\n\nRegistry JSON: https://ui.askewly.com/r/button-size-scale.json\n\n## 코드 경로\n\n`registry/askewly/button-size-scale/button-size-scale.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/button-size-scale\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/button-size-scale.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"button","title":"Button","definition":"A button lets a user trigger a single, immediate action (submit, save, confirm, cancel).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/button.md","keywords":["forms","button","primary-button","secondary-button"],"md":"# Button\n\n> A button lets a user trigger a single, immediate action (submit, save, confirm, cancel).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/forms/button.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/ui/button.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/button\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/button.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"canvas-particle-field","title":"Canvas Particle Field","definition":"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.","install":"npx @askewly/design add canvas-particle-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/canvas-particle-field.md","keywords":["application-ui"],"md":"# Canvas Particle Field\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add canvas-particle-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/canvas-particle-field.json\n\n## 코드 경로\n\n`registry/askewly/canvas-particle-field/canvas-particle-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/canvas-particle-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/canvas-particle-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"card-flip-3d","title":"3D Card Flip","definition":"A 3D card flip presents two faces of one object — summary and detail — rotating in perspective so the second face reads as the back of the same thing, not a new panel.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/card-flip-3d.md","keywords":["application-ui","card"],"md":"# 3D Card Flip\n\n> A 3D card flip presents two faces of one object — summary and detail — rotating in perspective so the second face reads as the back of the same thing, not a new panel.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/card-flip-3d.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/card-flip-3d.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/card-flip-3d\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/card-flip-3d.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cart-drawer","title":"Cart Drawer","definition":"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`.","install":"npx @askewly/design add cart-drawer","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/cart-drawer.md","keywords":["commerce","cart-summary","cart-summary-bar","quantity-stepper"],"md":"# Cart Drawer\n\n> 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`.\n\n## 설치\n\n```\nnpx @askewly/design add cart-drawer\n```\n\nRegistry JSON: https://ui.askewly.com/r/cart-drawer.json\n\n## 코드 경로\n\n`registry/askewly/cart-drawer/cart-drawer.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/cart-drawer\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/cart-drawer.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cart-line-item-anatomy","title":"Cart Line Item Anatomy","definition":"A three-column cart row with quantity and remove split into their own action bar, and a stepper corrected to a 44px touch target.","install":"npx @askewly/design add cart-line-item-anatomy","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/cart-line-item-anatomy.md","keywords":["commerce","quantity-stepper","cart-summary","cart-summary-bar"],"md":"# Cart Line Item Anatomy\n\n> A three-column cart row with quantity and remove split into their own action bar, and a stepper corrected to a 44px touch target.\n\n## 설치\n\n```\nnpx @askewly/design add cart-line-item-anatomy\n```\n\nRegistry JSON: https://ui.askewly.com/r/cart-line-item-anatomy.json\n\n## 코드 경로\n\n`registry/askewly/cart-line-item-anatomy/cart-line-item-anatomy.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/cart-line-item-anatomy\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/cart-line-item-anatomy.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"catalog-download-teaser","title":"Catalog Download Teaser","definition":"카탈로그 한 권을 받게 하는 2열 티저.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/catalog-download-teaser.md","keywords":[],"md":"# Catalog Download Teaser\n\n> 카탈로그 한 권을 받게 하는 2열 티저.\n\n## 사용 규칙\n\n- 언제 쓰나 — 긴 소개 뒤에 자료 한 건(카탈로그·백서)을 받게 하거나 견적으로 이어 줄 때.\n- 한 화면에 몇 개 — 하나. 이 블록의 주 행동은 아웃라인 버튼(카탈로그 PDF)이고 페이지의 primary 버튼은 헤더 견적·폼 보내기 둘이라 여기서는 쓰지 않는다 (리뷰 1회차 D1 뒤 정정).\n- 안 쓰는 곳 — 이미 primary CTA 가 있는 히어로 근처, 자료가 여러 건인 다운로드 센터.\n- 같이 쓰는 것 — 앞의 `product-line-card-trio`, 뒤의 `featured-news-rail`, 토큰 `action.primary`.\n- 한계 — 한 문장과 버튼 하나만 담는다. 파일 형식·용량 안내, 폼 입력은 따로 설계해야 한다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/catalog-download-teaser.md\n\n## 코드 경로\n\n`examples/robotics-site/src/components/catalog-download-teaser.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/catalog-download-teaser.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"category-product-grid","title":"Category Product Grid","definition":"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.","install":"npx @askewly/design add category-product-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/category-product-grid.md","keywords":["commerce","product-card","filter-bar","sort-control"],"md":"# Category Product Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add category-product-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/category-product-grid.json\n\n## 코드 경로\n\n`registry/askewly/category-product-grid/category-product-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/category-product-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/category-product-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"chaos-settle-grid","title":"Chaos Settle Grid","definition":"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.","install":"npx @askewly/design add chaos-settle-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/chaos-settle-grid.md","keywords":["data-display","card","grid"],"md":"# Chaos Settle Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add chaos-settle-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/chaos-settle-grid.json\n\n## 코드 경로\n\n`registry/askewly/chaos-settle-grid/chaos-settle-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/chaos-settle-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/chaos-settle-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-count-field","title":"Character Count Field","definition":"A visible counter that is never announced, paired with a separate hidden status copy that speaks only near the limit.","install":"npx @askewly/design add character-count-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/character-count-field.md","keywords":["forms","character-count-field","textarea","label"],"md":"# Character Count Field\n\n> A visible counter that is never announced, paired with a separate hidden status copy that speaks only near the limit.\n\n## 설치\n\n```\nnpx @askewly/design add character-count-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/character-count-field.json\n\n## 코드 경로\n\n`registry/askewly/character-count-field/character-count-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-count-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/character-count-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-login","title":"Character Login","definition":"A character login gives the most utilitarian surface in a product a personality whose motion is functional, not decorative: a mascot watches the username field as you type, covers its eyes when focus enters the password field, and peeks through when the user reveals the password.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/character-login.md","keywords":["forms","login-form","password-field"],"md":"# Character Login\n\n> A character login gives the most utilitarian surface in a product a personality whose motion is functional, not decorative: a mascot watches the username field as you type, covers its eyes when focus enters the password field, and peeks through when the user reveals the password.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/forms/character-login.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/character-login.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-login\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/character-login.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-sheet-stage","title":"Character Sheet Stage","definition":"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.","install":"npx @askewly/design add character-sheet-stage","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/character-sheet-stage.md","keywords":["marketing","content-section","image","noise-texture"],"md":"# Character Sheet Stage\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add character-sheet-stage\n```\n\nRegistry JSON: https://ui.askewly.com/r/character-sheet-stage.json\n\n## 코드 경로\n\n`registry/askewly/character-sheet-stage/character-sheet-stage.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-sheet-stage\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/character-sheet-stage.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-stack-crossfade","title":"Character Stack Crossfade","definition":"Stacked figures crossfade in place on selection, with a draggable pagination bar, so the selector reads as a stage rather than a catalog.","install":"npx @askewly/design add character-stack-crossfade","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/character-stack-crossfade.md","keywords":["marketing","pagination","fade-transition"],"md":"# Character Stack Crossfade\n\n> Stacked figures crossfade in place on selection, with a draggable pagination bar, so the selector reads as a stage rather than a catalog.\n\n## 설치\n\n```\nnpx @askewly/design add character-stack-crossfade\n```\n\nRegistry JSON: https://ui.askewly.com/r/character-stack-crossfade.json\n\n## 코드 경로\n\n`registry/askewly/character-stack-crossfade/character-stack-crossfade.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-stack-crossfade\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/character-stack-crossfade.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"character-zoom-isolation","title":"Character Zoom Isolation","definition":"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.","install":"npx @askewly/design add character-zoom-isolation","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/character-zoom-isolation.md","keywords":["overlays","lightbox","scrim","backdrop-blur"],"md":"# Character Zoom Isolation\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add character-zoom-isolation\n```\n\nRegistry JSON: https://ui.askewly.com/r/character-zoom-isolation.json\n\n## 코드 경로\n\n`registry/askewly/character-zoom-isolation/character-zoom-isolation.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/character-zoom-isolation\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/character-zoom-isolation.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"chart-series-ramp","title":"Chart Series Ramp","definition":"Per-series ink / bounded-fill / keyline colour roles at six steps, all derived from one semantic token with color-mix, with chart surfaces delegated to site tokens.","install":"npx @askewly/design add chart-series-ramp","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/chart-series-ramp.md","keywords":["data-display","chart","legend"],"md":"# Chart Series Ramp\n\n> Per-series ink / bounded-fill / keyline colour roles at six steps, all derived from one semantic token with color-mix, with chart surfaces delegated to site tokens.\n\n## 설치\n\n```\nnpx @askewly/design add chart-series-ramp\n```\n\nRegistry JSON: https://ui.askewly.com/r/chart-series-ramp.json\n\n## 코드 경로\n\n`registry/askewly/chart-series-ramp/chart-series-ramp.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/chart-series-ramp\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/chart-series-ramp.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"chat-conversation-panel","title":"Chat Conversation Panel","definition":"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.","install":"npx @askewly/design add chat-conversation-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/chat-conversation-panel.md","keywords":["application-ui","chat-message","chat-bubble","message-scroller"],"md":"# Chat Conversation Panel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add chat-conversation-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/chat-conversation-panel.json\n\n## 코드 경로\n\n`registry/askewly/chat-conversation-panel/chat-conversation-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/chat-conversation-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/chat-conversation-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"checkout-order-summary","title":"Checkout Order Summary","definition":"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.","install":"npx @askewly/design add checkout-order-summary","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/checkout-order-summary.md","keywords":["commerce","cart-summary","checkout-step","checkout-progress-header","payment-method-card","order-status"],"md":"# Checkout Order Summary\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add checkout-order-summary\n```\n\nRegistry JSON: https://ui.askewly.com/r/checkout-order-summary.json\n\n## 코드 경로\n\n`registry/askewly/checkout-order-summary/checkout-order-summary.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/checkout-order-summary\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/checkout-order-summary.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"citation-ladder","title":"Citation Ladder","definition":"A three-rung citation ladder: an inline 22px badge that keeps the line height, a fixed 420×420 hover popover with a scrolling excerpt and a 'view source' foot link, and a highlighted passage in the source text.","install":"npx @askewly/design add citation-ladder","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/citation-ladder.md","keywords":["overlays","popover","badge","tooltip"],"md":"# Citation Ladder\n\n> A three-rung citation ladder: an inline 22px badge that keeps the line height, a fixed 420×420 hover popover with a scrolling excerpt and a 'view source' foot link, and a highlighted passage in the source text.\n\n## 설치\n\n```\nnpx @askewly/design add citation-ladder\n```\n\nRegistry JSON: https://ui.askewly.com/r/citation-ladder.json\n\n## 코드 경로\n\n`registry/askewly/citation-ladder/citation-ladder.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/citation-ladder\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/citation-ladder.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"clip-reveal-wordmark","title":"Clip Reveal Wordmark","definition":"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.","install":"npx @askewly/design add clip-reveal-wordmark","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/clip-reveal-wordmark.md","keywords":["marketing","logo","clipping-mask","hover-reveal"],"md":"# Clip Reveal Wordmark\n\n> 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.\n\n## 사용 규칙\n\n- 언제 쓰나 — 헤더에서 짧은 로고를 두고 호버하면 전체 이름을 보여 주고 싶을 때\n- 한 화면에 몇 개 — 헤더당 1개\n- 안 쓰는 곳 — 터치 기기와 1280px 미만(호버가 없어 잘린 채 남는다), 풀네임이 읽혀야 하는 첫 방문 안내\n- 같이 쓰는 것 — 헤더 내비게이션, 모바일 메뉴 오버레이(열리면 로고가 사라진다)\n- 한계 — 자르는 값 130px 이 글자 폭에 묶여 서체·크기·브랜드명이 바뀌면 다시 계산해야 한다\n\n## 설치\n\n```\nnpx @askewly/design add clip-reveal-wordmark\n```\n\nRegistry JSON: https://ui.askewly.com/r/clip-reveal-wordmark.json\n\n## 코드 경로\n\n`registry/askewly/clip-reveal-wordmark/clip-reveal-wordmark.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/clip-reveal-wordmark\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/clip-reveal-wordmark.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"color-palette-generator","title":"Color Palette Generator","definition":"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.","install":"npx @askewly/design add color-palette-generator","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Color Palette Generator\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add color-palette-generator\n```\n\nRegistry JSON: https://ui.askewly.com/r/color-palette-generator.json\n\n## 코드 경로\n\n`registry/askewly/color-palette-generator/color-palette-generator.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"comparison-table-card","title":"Comparison Table Card","definition":"A marketing comparison rendered as a card that reads as an argument rather than a dataset, while keeping a real semantic table underneath.","install":"npx @askewly/design add comparison-table-card","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/comparison-table-card.md","keywords":["marketing","data-grid","table"],"md":"# Comparison Table Card\n\n> A marketing comparison rendered as a card that reads as an argument rather than a dataset, while keeping a real semantic table underneath.\n\n## 설치\n\n```\nnpx @askewly/design add comparison-table-card\n```\n\nRegistry JSON: https://ui.askewly.com/r/comparison-table-card.json\n\n## 코드 경로\n\n`registry/askewly/comparison-table-card/comparison-table-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/comparison-table-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/comparison-table-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"composite-bleach-mh","title":"Composite: bleach-mh Grain","definition":"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.","install":"npx @askewly/design add composite-bleach-mh","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/composite-bleach-mh.md","keywords":["marketing","thumbnail","fade-transition","backdrop-blur"],"md":"# Composite: bleach-mh Grain\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add composite-bleach-mh\n```\n\nRegistry JSON: https://ui.askewly.com/r/composite-bleach-mh.json\n\n## 코드 경로\n\n`registry/askewly/composite-bleach-mh/composite-bleach-mh.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/composite-bleach-mh\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/composite-bleach-mh.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"composite-nk-inspiring","title":"Composite: NK Inspiring Arc","definition":"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.","install":"npx @askewly/design add composite-nk-inspiring","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/composite-nk-inspiring.md","keywords":["marketing","hero","blur-fade-in","cta-section"],"md":"# Composite: NK Inspiring Arc\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add composite-nk-inspiring\n```\n\nRegistry JSON: https://ui.askewly.com/r/composite-nk-inspiring.json\n\n## 코드 경로\n\n`registry/askewly/composite-nk-inspiring/composite-nk-inspiring.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/composite-nk-inspiring\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/composite-nk-inspiring.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"composite-noth-in","title":"Composite: noth.in Grain","definition":"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.","install":"npx @askewly/design add composite-noth-in","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/composite-noth-in.md","keywords":["marketing","hero","loading-state"],"md":"# Composite: noth.in Grain\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add composite-noth-in\n```\n\nRegistry JSON: https://ui.askewly.com/r/composite-noth-in.json\n\n## 코드 경로\n\n`registry/askewly/composite-noth-in/composite-noth-in.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/composite-noth-in\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/composite-noth-in.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"composite-revelatio","title":"Composite: Revelatio Home Grain","definition":"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.","install":"npx @askewly/design add composite-revelatio","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/composite-revelatio.md","keywords":["marketing","loading-state","dark-mode","number-ticker","marquee-row"],"md":"# Composite: Revelatio Home Grain\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add composite-revelatio\n```\n\nRegistry JSON: https://ui.askewly.com/r/composite-revelatio.json\n\n## 코드 경로\n\n`registry/askewly/composite-revelatio/composite-revelatio.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/composite-revelatio\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/composite-revelatio.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"context-annotation","title":"Context Annotation","definition":"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.","install":"npx @askewly/design add context-annotation","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Context Annotation\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add context-annotation\n```\n\nRegistry JSON: https://ui.askewly.com/r/context-annotation.json\n\n## 코드 경로\n\n`registry/askewly/context-annotation/context-annotation.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"context-label-cursor","title":"Context Label Cursor","definition":"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.","install":"npx @askewly/design add context-label-cursor","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/context-label-cursor.md","keywords":["marketing","tooltip","gesture-hint"],"md":"# Context Label Cursor\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add context-label-cursor\n```\n\nRegistry JSON: https://ui.askewly.com/r/context-label-cursor.json\n\n## 코드 경로\n\n`registry/askewly/context-label-cursor/context-label-cursor.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/context-label-cursor\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/context-label-cursor.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"contrast-duo-card","title":"Contrast Duo Card","definition":"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.","install":"npx @askewly/design add contrast-duo-card","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Contrast Duo Card\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add contrast-duo-card\n```\n\nRegistry JSON: https://ui.askewly.com/r/contrast-duo-card.json\n\n## 코드 경로\n\n`registry/askewly/contrast-duo-card/contrast-duo-card.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"copy-field","title":"Copy Field","definition":"A read-only value that never reads as editable, with copy confirmation announced without moving focus and a spoken line that outlives the badge.","install":"npx @askewly/design add copy-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/copy-field.md","keywords":["forms","copy-field","api-key-field","keyboard-shortcut-key"],"md":"# Copy Field\n\n> A read-only value that never reads as editable, with copy confirmation announced without moving focus and a spoken line that outlives the badge.\n\n## 설치\n\n```\nnpx @askewly/design add copy-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/copy-field.json\n\n## 코드 경로\n\n`registry/askewly/copy-field/copy-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/copy-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/copy-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"copy-link-button","title":"Copy Link Button","definition":"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.","install":"npx @askewly/design add copy-link-button","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Copy Link Button\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add copy-link-button\n```\n\nRegistry JSON: https://ui.askewly.com/r/copy-link-button.json\n\n## 코드 경로\n\n`registry/askewly/copy-link-button/copy-link-button.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"crt-ascii-video","title":"CRT ASCII Video","definition":"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.","install":"npx @askewly/design add crt-ascii-video","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/crt-ascii-video.md","keywords":["marketing","clipping-mask","typography"],"md":"# CRT ASCII Video\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add crt-ascii-video\n```\n\nRegistry JSON: https://ui.askewly.com/r/crt-ascii-video.json\n\n## 코드 경로\n\n`registry/askewly/crt-ascii-video/crt-ascii-video.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/crt-ascii-video\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/crt-ascii-video.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"css-only-sticky-sequence","title":"CSS-Only Sticky Sequence","definition":"A pinned-rail scroll sequence built from position:sticky and a one-viewport gap rhythm, with no scroll controller in JavaScript.","install":"npx @askewly/design add css-only-sticky-sequence","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/css-only-sticky-sequence.md","keywords":["layout","sticky-scroll-section","scroll-area","grid"],"md":"# CSS-Only Sticky Sequence\n\n> A pinned-rail scroll sequence built from position:sticky and a one-viewport gap rhythm, with no scroll controller in JavaScript.\n\n## 설치\n\n```\nnpx @askewly/design add css-only-sticky-sequence\n```\n\nRegistry JSON: https://ui.askewly.com/r/css-only-sticky-sequence.json\n\n## 코드 경로\n\n`registry/askewly/css-only-sticky-sequence/css-only-sticky-sequence.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/css-only-sticky-sequence\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/css-only-sticky-sequence.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cursor-proximity-glow","title":"Cursor Proximity Glow","definition":"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.","install":"npx @askewly/design add cursor-proximity-glow","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Cursor Proximity Glow\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add cursor-proximity-glow\n```\n\nRegistry JSON: https://ui.askewly.com/r/cursor-proximity-glow.json\n\n## 코드 경로\n\n`registry/askewly/cursor-proximity-glow/cursor-proximity-glow.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cursor-reactive-field","title":"Cursor Reactive Field","definition":"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.","install":"npx @askewly/design add cursor-reactive-field","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Cursor Reactive Field\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add cursor-reactive-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/cursor-reactive-field.json\n\n## 코드 경로\n\n`registry/askewly/cursor-reactive-field/cursor-reactive-field.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"cursor-trail-shader","title":"Cursor Trail Shader","definition":"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.","install":"npx @askewly/design add cursor-trail-shader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/cursor-trail-shader.md","keywords":["marketing","noise-texture","gradient-fill"],"md":"# Cursor Trail Shader\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add cursor-trail-shader\n```\n\nRegistry JSON: https://ui.askewly.com/r/cursor-trail-shader.json\n\n## 코드 경로\n\n`registry/askewly/cursor-trail-shader/cursor-trail-shader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/cursor-trail-shader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/cursor-trail-shader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"curtain-page-transition","title":"Curtain Page Transition","definition":"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.","install":"npx @askewly/design add curtain-page-transition","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/curtain-page-transition.md","keywords":["navigation","transition","slide-transition"],"md":"# Curtain Page Transition\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add curtain-page-transition\n```\n\nRegistry JSON: https://ui.askewly.com/r/curtain-page-transition.json\n\n## 코드 경로\n\n`registry/askewly/curtain-page-transition/curtain-page-transition.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/curtain-page-transition\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/curtain-page-transition.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"data-import-wizard-validation-preview-steps","title":"Data Import Wizard Validation Preview Steps","definition":"A data import wizard validation preview steps recipe implements the `data-import-wizard-validation-preview` term's upload-to-summary contract as five discrete steps: upload, map, validate, preview, confirm.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/data-import-wizard-validation-preview-steps.md","keywords":[],"md":"# Data Import Wizard Validation Preview Steps\n\n> A data import wizard validation preview steps recipe implements the `data-import-wizard-validation-preview` term's upload-to-summary contract as five discrete steps: upload, map, validate, preview, confirm.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/forms/data-import-wizard-validation-preview-steps.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/data-import-wizard-validation-preview-steps.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/data-import-wizard-validation-preview-steps\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/data-import-wizard-validation-preview-steps.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"declarative-reveal-engine","title":"Declarative Reveal Engine","definition":"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.","install":"npx @askewly/design add declarative-reveal-engine","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/declarative-reveal-engine.md","keywords":["marketing","fade-transition","scale-transition"],"md":"# Declarative Reveal Engine\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add declarative-reveal-engine\n```\n\nRegistry JSON: https://ui.askewly.com/r/declarative-reveal-engine.json\n\n## 코드 경로\n\n`registry/askewly/declarative-reveal-engine/declarative-reveal-engine.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/declarative-reveal-engine\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/declarative-reveal-engine.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"deco-equalizer","title":"Deco Equalizer","definition":"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.","install":"npx @askewly/design add deco-equalizer","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/deco-equalizer.md","keywords":["marketing"],"md":"# Deco Equalizer\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add deco-equalizer\n```\n\nRegistry JSON: https://ui.askewly.com/r/deco-equalizer.json\n\n## 코드 경로\n\n`registry/askewly/deco-equalizer/deco-equalizer.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/deco-equalizer\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/deco-equalizer.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"device-frame","title":"Device Frame","definition":"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.","install":"npx @askewly/design add device-frame","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Device Frame\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add device-frame\n```\n\nRegistry JSON: https://ui.askewly.com/r/device-frame.json\n\n## 코드 경로\n\n`registry/askewly/device-frame/device-frame.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"diagonal-clip-reveal","title":"Diagonal Clip Reveal","definition":"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.","install":"npx @askewly/design add diagonal-clip-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/diagonal-clip-reveal.md","keywords":["marketing","clipping-mask"],"md":"# Diagonal Clip Reveal\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add diagonal-clip-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/diagonal-clip-reveal.json\n\n## 코드 경로\n\n`registry/askewly/diagonal-clip-reveal/diagonal-clip-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/diagonal-clip-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/diagonal-clip-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"diagonal-corner-shape-kit","title":"Diagonal Corner Shape Kit","definition":"Three-rounding shape system (diagonal pair, single tab, arch) with same-shape offset plates, leaf buttons and a thick frame section.","install":"npx @askewly/design add diagonal-corner-shape-kit","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/diagonal-corner-shape-kit.md","keywords":["marketing","border-radius","button","card"],"md":"# Diagonal Corner Shape Kit\n\n> Three-rounding shape system (diagonal pair, single tab, arch) with same-shape offset plates, leaf buttons and a thick frame section.\n\n## 설치\n\n```\nnpx @askewly/design add diagonal-corner-shape-kit\n```\n\nRegistry JSON: https://ui.askewly.com/r/diagonal-corner-shape-kit.json\n\n## 코드 경로\n\n`registry/askewly/diagonal-corner-shape-kit/diagonal-corner-shape-kit.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/diagonal-corner-shape-kit\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/diagonal-corner-shape-kit.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"directional-hover-fill","title":"Directional Hover Fill","definition":"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.","install":"npx @askewly/design add directional-hover-fill","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/directional-hover-fill.md","keywords":["marketing","button","hover-state"],"md":"# Directional Hover Fill\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add directional-hover-fill\n```\n\nRegistry JSON: https://ui.askewly.com/r/directional-hover-fill.json\n\n## 코드 경로\n\n`registry/askewly/directional-hover-fill/directional-hover-fill.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/directional-hover-fill\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/directional-hover-fill.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"directional-motion-bloom","title":"Directional Motion Bloom","definition":"Directional motion bloom takes the stock bloom pass and skews its blur direction so the glow stretches along an axis instead of spreading evenly.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/directional-motion-bloom.md","keywords":["marketing","hero"],"md":"# Directional Motion Bloom\n\n> Directional motion bloom takes the stock bloom pass and skews its blur direction so the glow stretches along an axis instead of spreading evenly.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/directional-motion-bloom.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/directional-motion-bloom.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/directional-motion-bloom\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/directional-motion-bloom.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"doc-search-cmdk-grouped-results-panel","title":"Doc Search Cmdk Grouped Results Panel","definition":"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.","install":"npx @askewly/design add doc-search-cmdk-grouped-results-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/doc-search-cmdk-grouped-results-panel.md","keywords":["navigation","command-palette","search-suggestions"],"md":"# Doc Search Cmdk Grouped Results Panel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add doc-search-cmdk-grouped-results-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/doc-search-cmdk-grouped-results-panel.json\n\n## 코드 경로\n\n`registry/askewly/doc-search-cmdk-grouped-results-panel/doc-search-cmdk-grouped-results-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/doc-search-cmdk-grouped-results-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/doc-search-cmdk-grouped-results-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"docs-changelog-category-filter-page","title":"Docs Changelog Category Filter Page","definition":"`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.","install":"npx @askewly/design add docs-changelog-category-filter-page","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/docs-changelog-category-filter-page.md","keywords":["docs","docs-changelog-page","release-note-card"],"md":"# Docs Changelog Category Filter Page\n\n> `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.\n\n## 설치\n\n```\nnpx @askewly/design add docs-changelog-category-filter-page\n```\n\nRegistry JSON: https://ui.askewly.com/r/docs-changelog-category-filter-page.json\n\n## 코드 경로\n\n`registry/askewly/docs-changelog-category-filter-page/docs-changelog-category-filter-page.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/docs-changelog-category-filter-page\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/docs-changelog-category-filter-page.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"docs-code-block","title":"Docs Code Block","definition":"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.","install":"npx @askewly/design add docs-code-block","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/docs-code-block-with-tabs-and-copy.md","keywords":["docs","copy-button"],"md":"# Docs Code Block\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add docs-code-block\n```\n\nRegistry JSON: https://ui.askewly.com/r/docs-code-block.json\n\n## 코드 경로\n\n`registry/askewly/docs-code-block/docs-code-block.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/docs-code-block-with-tabs-and-copy\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/docs-code-block-with-tabs-and-copy.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"docs-site","title":"Docs Site","definition":"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.","install":"npx @askewly/design add docs-site","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Docs Site\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add docs-site\n```\n\nRegistry JSON: https://ui.askewly.com/r/docs-site.json\n\n## 코드 경로\n\n`registry/askewly/docs-site/api-page.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"drag-quote-anchored-comments","title":"Drag-Quote Anchored Comments","definition":"Comments that point at nothing drift into a second, disconnected conversation.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/drag-quote-anchored-comments.md","keywords":["feedback","comment-composer","avatar"],"md":"# Drag-Quote Anchored Comments\n\n> Comments that point at nothing drift into a second, disconnected conversation.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/feedback/drag-quote-anchored-comments.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/drag-quote-anchored-comments.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"drag-scrub-handle","title":"Drag Scrub Handle","definition":"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.","install":"npx @askewly/design add drag-scrub-handle","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/drag-scrub-handle.md","keywords":["application-ui","scrubber","drag-state"],"md":"# Drag Scrub Handle\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add drag-scrub-handle\n```\n\nRegistry JSON: https://ui.askewly.com/r/drag-scrub-handle.json\n\n## 코드 경로\n\n`registry/askewly/drag-scrub-handle/drag-scrub-handle.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/drag-scrub-handle\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/drag-scrub-handle.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"dual-mode-line-reveal","title":"Dual Mode Line Reveal","definition":"Text lines declare their own reveal type in markup, so a curtain wipe and a blur resolve share one entrance stage and one observer.","install":"npx @askewly/design add dual-mode-line-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/dual-mode-line-reveal.md","keywords":["marketing","blur-fade-in","typography"],"md":"# Dual Mode Line Reveal\n\n> Text lines declare their own reveal type in markup, so a curtain wipe and a blur resolve share one entrance stage and one observer.\n\n## 설치\n\n```\nnpx @askewly/design add dual-mode-line-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/dual-mode-line-reveal.json\n\n## 코드 경로\n\n`registry/askewly/dual-mode-line-reveal/dual-mode-line-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/dual-mode-line-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/dual-mode-line-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"dual-ring-soft-point-sprite","title":"Dual Ring Soft Point Sprite","definition":"A dual ring soft point sprite decides what a single glowing particle looks like.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/dual-ring-soft-point-sprite.md","keywords":["marketing","hero"],"md":"# Dual Ring Soft Point Sprite\n\n> A dual ring soft point sprite decides what a single glowing particle looks like.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/dual-ring-soft-point-sprite.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/dual-ring-soft-point-sprite.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/dual-ring-soft-point-sprite\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/dual-ring-soft-point-sprite.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"edge-flare-lines","title":"Edge Flare Lines","definition":"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.","install":"npx @askewly/design add edge-flare-lines","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/edge-flare-lines.md","keywords":["marketing","background-beams","hero"],"md":"# Edge Flare Lines\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add edge-flare-lines\n```\n\nRegistry JSON: https://ui.askewly.com/r/edge-flare-lines.json\n\n## 코드 경로\n\n`registry/askewly/edge-flare-lines/edge-flare-lines.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/edge-flare-lines\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/edge-flare-lines.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"editable-text","title":"Editable Text","definition":"An inline editable heading or label: click to edit in place, Enter confirms, Escape restores, and an empty confirmation falls back to a default value so the title never disappears.","install":"npx @askewly/design add editable-text","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Editable Text\n\n> An inline editable heading or label: click to edit in place, Enter confirms, Escape restores, and an empty confirmation falls back to a default value so the title never disappears.\n\n## 설치\n\n```\nnpx @askewly/design add editable-text\n```\n\nRegistry JSON: https://ui.askewly.com/r/editable-text.json\n\n## 코드 경로\n\n`registry/askewly/editable-text/editable-text.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"entrance-three-stage","title":"Entrance Three Stage","definition":"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.","install":"npx @askewly/design add entrance-three-stage","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/entrance-three-stage.md","keywords":["marketing","loading-state","progress-bar"],"md":"# Entrance Three Stage\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add entrance-three-stage\n```\n\nRegistry JSON: https://ui.askewly.com/r/entrance-three-stage.json\n\n## 코드 경로\n\n`registry/askewly/entrance-three-stage/entrance-three-stage.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/entrance-three-stage\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/entrance-three-stage.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"entry-veil-color-relay","title":"Entry Veil Color Relay","definition":"An entry veil makes a hard route change feel continuous without a SPA transition framework: the departing page records its dominant background color, and the arriving page paints a full-screen veil of that color on its very first frame, then fades it out.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/entry-veil-color-relay.md","keywords":["marketing","fade-transition"],"md":"# Entry Veil Color Relay\n\n> An entry veil makes a hard route change feel continuous without a SPA transition framework: the departing page records its dominant background color, and the arriving page paints a full-screen veil of that color on its very first frame, then fades it out.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/entry-veil-color-relay.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/entry-veil-color-relay.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"exclusive-audio-playback","title":"Exclusive Audio Playback","definition":"A list where starting one track stops every other, with the playing state mirrored onto the card so the transfer of playback is visible.","install":"npx @askewly/design add exclusive-audio-playback","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/exclusive-audio-playback.md","keywords":["application-ui","audio-player-controls","list","media-card"],"md":"# Exclusive Audio Playback\n\n> A list where starting one track stops every other, with the playing state mirrored onto the card so the transfer of playback is visible.\n\n## 설치\n\n```\nnpx @askewly/design add exclusive-audio-playback\n```\n\nRegistry JSON: https://ui.askewly.com/r/exclusive-audio-playback.json\n\n## 코드 경로\n\n`registry/askewly/exclusive-audio-playback/exclusive-audio-playback.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/exclusive-audio-playback\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/exclusive-audio-playback.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"fake-progress-preloader","title":"Fake Progress Preloader","definition":"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.","install":"npx @askewly/design add fake-progress-preloader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/fake-progress-preloader.md","keywords":["feedback","loading-state","progress-bar"],"md":"# Fake Progress Preloader\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add fake-progress-preloader\n```\n\nRegistry JSON: https://ui.askewly.com/r/fake-progress-preloader.json\n\n## 코드 경로\n\n`registry/askewly/fake-progress-preloader/fake-progress-preloader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/fake-progress-preloader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/fake-progress-preloader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"falling-image-trail","title":"Falling Image Trail","definition":"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.","install":"npx @askewly/design add falling-image-trail","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/falling-image-trail.md","keywords":["marketing","image"],"md":"# Falling Image Trail\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add falling-image-trail\n```\n\nRegistry JSON: https://ui.askewly.com/r/falling-image-trail.json\n\n## 코드 경로\n\n`registry/askewly/falling-image-trail/falling-image-trail.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/falling-image-trail\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/falling-image-trail.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"feature-row-fixed-axis","title":"Feature Row (Fixed Axis)","definition":"Alternating feature rows that keep the body text on a fixed axis, so a scanning reader never has to re-find the text column.","install":"npx @askewly/design add feature-row-fixed-axis","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/feature-row-fixed-axis.md","keywords":["marketing","hero","container"],"md":"# Feature Row (Fixed Axis)\n\n> Alternating feature rows that keep the body text on a fixed axis, so a scanning reader never has to re-find the text column.\n\n## 사용 규칙\n\n- 언제 쓰나 — 기능 행을 여러 줄 반복하며 글을 한쪽에 고정해 훑어 읽게 할 때\n- 한 화면에 몇 개 — 페이지당 행 여러 개, 뒤집는 행은 최대 1개\n- 안 쓰는 곳 — 행마다 실루엣이 달라야 하는 긴 행 목록(지그재그 변형을 쓴다)\n- 같이 쓰는 것 — 미디어 슬롯(비워서 준다), 컨테이너가 쥔 가로 패딩\n- 한계 — 행을 전부 번갈아 놓으면 이 recipe 가 아니라 지그재그다, 좁은 화면에서는 모든 행이 글 먼저 쌓인다\n\n## 설치\n\n```\nnpx @askewly/design add feature-row-fixed-axis\n```\n\nRegistry JSON: https://ui.askewly.com/r/feature-row-fixed-axis.json\n\n## 코드 경로\n\n`registry/askewly/feature-row-fixed-axis/feature-row-fixed-axis.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/feature-row-fixed-axis\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/feature-row-fixed-axis.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"featured-news-rail","title":"Featured News Rail","definition":"소식·사례를 \"하나는 크게, 나머지는 목록으로\" 보여 주는 레일.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/featured-news-rail.md","keywords":[],"md":"# Featured News Rail\n\n> 소식·사례를 \"하나는 크게, 나머지는 목록으로\" 보여 주는 레일.\n\n## 사용 규칙\n\n- 언제 쓰나 — 최근 소식·사례 4건 안팎을 한 구간에서 소개하고 전체 목록으로 보낼 때.\n- 한 화면에 몇 개 — 하나.\n- 안 쓰는 곳 — 글이 수십 건인 아카이브, 읽기가 목적인 본문, 모바일 전용 피드.\n- 같이 쓰는 것 — 앞의 `catalog-download-teaser`, 뒤의 `network-dot-map-stat`, 토큰 `--scrim-card-to`·`--chip`.\n- 한계 — 탭 전환·필터가 없다. 목록은 3개 고정 높이 가정이라 긴 제목이 많으면 피처드와 높이가 어긋난다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/featured-news-rail.md\n\n## 코드 경로\n\n`examples/robotics-site/src/components/featured-news-rail.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/featured-news-rail.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"filter-stagger-grid","title":"Filter Stagger Grid","definition":"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.","install":"npx @askewly/design add filter-stagger-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/filter-stagger-grid.md","keywords":["marketing","card","grid","fade-transition"],"md":"# Filter Stagger Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add filter-stagger-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/filter-stagger-grid.json\n\n## 코드 경로\n\n`registry/askewly/filter-stagger-grid/filter-stagger-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/filter-stagger-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/filter-stagger-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"flip-heading-scrub","title":"Flip Heading Scrub","definition":"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.","install":"npx @askewly/design add flip-heading-scrub","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/flip-heading-scrub.md","keywords":["marketing","typography"],"md":"# Flip Heading Scrub\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add flip-heading-scrub\n```\n\nRegistry JSON: https://ui.askewly.com/r/flip-heading-scrub.json\n\n## 코드 경로\n\n`registry/askewly/flip-heading-scrub/flip-heading-scrub.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/flip-heading-scrub\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/flip-heading-scrub.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"floating-bars-hero","title":"Floating Bars Hero","definition":"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.","install":"npx @askewly/design add floating-bars-hero","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Floating Bars Hero\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add floating-bars-hero\n```\n\nRegistry JSON: https://ui.askewly.com/r/floating-bars-hero.json\n\n## 코드 경로\n\n`registry/askewly/floating-bars-hero/floating-bars-hero.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"floating-button-contrast","title":"Floating Button Contrast","definition":"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.","install":"npx @askewly/design add floating-button-contrast","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/floating-button-contrast.md","keywords":["navigation","floating-action-button","color-contrast"],"md":"# Floating Button Contrast\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add floating-button-contrast\n```\n\nRegistry JSON: https://ui.askewly.com/r/floating-button-contrast.json\n\n## 코드 경로\n\n`registry/askewly/floating-button-contrast/floating-button-contrast.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/floating-button-contrast\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/floating-button-contrast.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"fluid-cursor-background","title":"Fluid Cursor Background","definition":"A low-resolution WebGL fluid simulation stirred by pointer movement, so the whole background behaves like a living reactive surface.","install":"npx @askewly/design add fluid-cursor-background","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/fluid-cursor-background.md","keywords":["marketing","animated-gradient-background","aurora-background","hover-reveal"],"md":"# Fluid Cursor Background\n\n> A low-resolution WebGL fluid simulation stirred by pointer movement, so the whole background behaves like a living reactive surface.\n\n## 설치\n\n```\nnpx @askewly/design add fluid-cursor-background\n```\n\nRegistry JSON: https://ui.askewly.com/r/fluid-cursor-background.json\n\n## 코드 경로\n\n`registry/askewly/fluid-cursor-background/fluid-cursor-background.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/fluid-cursor-background\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/fluid-cursor-background.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"fluid-type-dual-clamp","title":"Fluid Type Dual Clamp","definition":"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.","install":"npx @askewly/design add fluid-type-dual-clamp","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/fluid-type-dual-clamp.md","keywords":["layout","typography","fluid-layout"],"md":"# Fluid Type Dual Clamp\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add fluid-type-dual-clamp\n```\n\nRegistry JSON: https://ui.askewly.com/r/fluid-type-dual-clamp.json\n\n## 코드 경로\n\n`registry/askewly/fluid-type-dual-clamp/fluid-type-dual-clamp.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/fluid-type-dual-clamp\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/fluid-type-dual-clamp.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"focus-hud-overlay","title":"Focus HUD Overlay","definition":"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.","install":"npx @askewly/design add focus-hud-overlay","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Focus HUD Overlay\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add focus-hud-overlay\n```\n\nRegistry JSON: https://ui.askewly.com/r/focus-hud-overlay.json\n\n## 코드 경로\n\n`registry/askewly/focus-hud-overlay/focus-hud-overlay.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"footnote-citation-loop","title":"Footnote Citation Loop","definition":"Body superscripts jump to numbered notes and each note links back to its citation, both anchors offset below a fixed header and focused on arrival.","install":"npx @askewly/design add footnote-citation-loop","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/docs/footnote-citation-loop.md","keywords":["docs","anchor-nav","sticky-header"],"md":"# Footnote Citation Loop\n\n> Body superscripts jump to numbered notes and each note links back to its citation, both anchors offset below a fixed header and focused on arrival.\n\n## 설치\n\n```\nnpx @askewly/design add footnote-citation-loop\n```\n\nRegistry JSON: https://ui.askewly.com/r/footnote-citation-loop.json\n\n## 코드 경로\n\n`registry/askewly/footnote-citation-loop/footnote-citation-loop.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/footnote-citation-loop\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/docs/footnote-citation-loop.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"forgiving-pointer-feel","title":"Forgiving Pointer Feel","definition":"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.","install":"npx @askewly/design add forgiving-pointer-feel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/forgiving-pointer-feel.md","keywords":["application-ui","slider","sheet-drag-handle"],"md":"# Forgiving Pointer Feel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add forgiving-pointer-feel\n```\n\nRegistry JSON: https://ui.askewly.com/r/forgiving-pointer-feel.json\n\n## 코드 경로\n\n`registry/askewly/forgiving-pointer-feel/forgiving-pointer-feel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/forgiving-pointer-feel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/forgiving-pointer-feel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"fullpage-snap-landing","title":"Fullpage Snap Landing","definition":"A fullpage snap landing divides a marketing narrative into viewport-height chapters that scroll-snap into place, with a section indicator that stays in sync with scroll position and with the URL.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/fullpage-snap-landing.md","keywords":["marketing","scroll-snap","sticky-scroll-section","hero"],"md":"# Fullpage Snap Landing\n\n> A fullpage snap landing divides a marketing narrative into viewport-height chapters that scroll-snap into place, with a section indicator that stays in sync with scroll position and with the URL.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/fullpage-snap-landing.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/fullpage-snap-landing.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/fullpage-snap-landing\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/fullpage-snap-landing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"glass-panel","title":"Glass Panel","definition":"A glass panel keeps foreground content legible over a busy backdrop by blurring what is behind it (`backdrop-filter`), instead of covering it with an opaque fill.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/glass-panel.md","keywords":[],"md":"# Glass Panel\n\n> A glass panel keeps foreground content legible over a busy backdrop by blurring what is behind it (`backdrop-filter`), instead of covering it with an opaque fill.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/glass-panel.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/glass-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/glass-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/glass-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"glow-points-scene-impl","title":"Glow Points Scene Impl","definition":"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.","install":"npx @askewly/design add glow-points-scene-impl","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Glow Points Scene Impl\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add glow-points-scene-impl\n```\n\nRegistry JSON: https://ui.askewly.com/r/glow-points-scene-impl.json\n\n## 코드 경로\n\n`registry/askewly/glow-points-scene-impl/glow-points-scene-impl.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"glow-points-scene","title":"Glow Points Scene","definition":"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.","install":"npx @askewly/design add glow-points-scene","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Glow Points Scene\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add glow-points-scene\n```\n\nRegistry JSON: https://ui.askewly.com/r/glow-points-scene.json\n\n## 코드 경로\n\n`registry/askewly/glow-points-scene/glow-points-scene.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"gpgpu-attract-repel-field","title":"GPGPU Attract Repel Field","definition":"A GPGPU attract repel field keeps particle position and velocity in floating point textures and steps them on the GPU, so tens of thousands of grains can be shoved aside by the cursor and drift back into shape without the CPU touching a single one.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/gpgpu-attract-repel-field.md","keywords":[],"md":"# GPGPU Attract Repel Field\n\n> A GPGPU attract repel field keeps particle position and velocity in floating point textures and steps them on the GPU, so tens of thousands of grains can be shoved aside by the cursor and drift back into shape without the CPU touching a single one.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/gpgpu-attract-repel-field.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/gpgpu-attract-repel-field.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/gpgpu-attract-repel-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grain-texture-overlay","title":"Grain Texture Overlay","definition":"A grain texture overlay layers subtle procedural noise above a gradient or brand surface — it removes visible banding on smooth gradients and adds analog film texture.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/grain-texture-overlay.md","keywords":[],"md":"# Grain Texture Overlay\n\n> A grain texture overlay layers subtle procedural noise above a gradient or brand surface — it removes visible banding on smooth gradients and adds analog film texture.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/grain-texture-overlay.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/grain-texture-overlay.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grain-texture-overlay\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/grain-texture-overlay.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"graph-legend-panel","title":"Graph Legend Panel","definition":"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.","install":"npx @askewly/design add graph-legend-panel","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Graph Legend Panel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add graph-legend-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/graph-legend-panel.json\n\n## 코드 경로\n\n`registry/askewly/graph-legend-panel/graph-legend-panel.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grid-anchored-icons","title":"Grid-Anchored Icons","definition":"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.","install":"npx @askewly/design add grid-anchored-icons","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/grid-anchored-icons.md","keywords":["layout","icon","grid","drag-state"],"md":"# Grid-Anchored Icons\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add grid-anchored-icons\n```\n\nRegistry JSON: https://ui.askewly.com/r/grid-anchored-icons.json\n\n## 코드 경로\n\n`registry/askewly/grid-anchored-icons/grid-anchored-icons.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grid-anchored-icons\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/grid-anchored-icons.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grid-rows-accordion","title":"Grid Rows Accordion","definition":"An accordion that animates grid-template-rows from 0fr to 1fr, so content of unknown height opens and closes smoothly without measuring it.","install":"npx @askewly/design add grid-rows-accordion","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/grid-rows-accordion.md","keywords":["marketing","accordion","disclosure"],"md":"# Grid Rows Accordion\n\n> An accordion that animates grid-template-rows from 0fr to 1fr, so content of unknown height opens and closes smoothly without measuring it.\n\n## 설치\n\n```\nnpx @askewly/design add grid-rows-accordion\n```\n\nRegistry JSON: https://ui.askewly.com/r/grid-rows-accordion.json\n\n## 코드 경로\n\n`registry/askewly/grid-rows-accordion/grid-rows-accordion.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grid-rows-accordion\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/grid-rows-accordion.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grid-track-magnitude-transition","title":"Grid Track Magnitude Transition","definition":"Magnitudes shown by transitioning the grid track itself, so bars grow and ranks reorder through two CSS declarations instead of a counter.","install":"npx @askewly/design add grid-track-magnitude-transition","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/grid-track-magnitude-transition.md","keywords":["data-display","progress-bar","chart","stat-list"],"md":"# Grid Track Magnitude Transition\n\n> Magnitudes shown by transitioning the grid track itself, so bars grow and ranks reorder through two CSS declarations instead of a counter.\n\n## 설치\n\n```\nnpx @askewly/design add grid-track-magnitude-transition\n```\n\nRegistry JSON: https://ui.askewly.com/r/grid-track-magnitude-transition.json\n\n## 코드 경로\n\n`registry/askewly/grid-track-magnitude-transition/grid-track-magnitude-transition.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grid-track-magnitude-transition\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/grid-track-magnitude-transition.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"grounded-source-panel","title":"Grounded Source Panel","definition":"A source list where the checkbox is the answer's grounding scope, rows show a favicon and a one-line title with a hover-only menu, and clicking a row swaps the same panel into the source's guide and highlighted passages.","install":"npx @askewly/design add grounded-source-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/grounded-source-panel.md","keywords":["application-ui","checkbox","accordion","empty-state"],"md":"# Grounded Source Panel\n\n> A source list where the checkbox is the answer's grounding scope, rows show a favicon and a one-line title with a hover-only menu, and clicking a row swaps the same panel into the source's guide and highlighted passages.\n\n## 설치\n\n```\nnpx @askewly/design add grounded-source-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/grounded-source-panel.json\n\n## 코드 경로\n\n`registry/askewly/grounded-source-panel/grounded-source-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/grounded-source-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/grounded-source-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"half-arch-cta-band","title":"Half Arch CTA Band","definition":"End-of-page call-to-action band centred over a faint half-circle arch, in light and dark variants with one or two buttons.","install":"npx @askewly/design add half-arch-cta-band","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/half-arch-cta-band.md","keywords":["marketing","cta-section"],"md":"# Half Arch CTA Band\n\n> End-of-page call-to-action band centred over a faint half-circle arch, in light and dark variants with one or two buttons.\n\n## 사용 규칙\n\n- 언제 쓰나 — 페이지 끝에서 제목·문단·버튼 1~2개로 행동을 마무리할 때\n- 한 화면에 몇 개 — 페이지당 1개(끝자락)\n- 안 쓰는 곳 — 페이지 중간 구간, 호 색이 20% 알파를 넘어야 하는 강조 배경\n- 같이 쓰는 것 — button recipe, 라이트·다크 두 변형\n- 한계 — 호는 폭 50%·알파 15% 이하의 장식일 뿐 대비를 만들어 주지 않는다, 원이나 덩어리 모양으로 바꾸면 안 된다\n\n## 설치\n\n```\nnpx @askewly/design add half-arch-cta-band\n```\n\nRegistry JSON: https://ui.askewly.com/r/half-arch-cta-band.json\n\n## 코드 경로\n\n`registry/askewly/half-arch-cta-band/half-arch-cta-band.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/half-arch-cta-band\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/half-arch-cta-band.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"heart-kelp-strand","title":"Heart Kelp Strand","definition":"A kelp forest generated rather than drawn: one walked-stem function sampled twenty-eight times across three depth layers, with heart leaves alternating up each strand and depth carried by blur, opacity, and height alone.","install":"npx @askewly/design add heart-kelp-strand","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/heart-kelp-strand.md","keywords":["marketing","hero","divider"],"md":"# Heart Kelp Strand\n\n> A kelp forest generated rather than drawn: one walked-stem function sampled twenty-eight times across three depth layers, with heart leaves alternating up each strand and depth carried by blur, opacity, and height alone.\n\n## 설치\n\n```\nnpx @askewly/design add heart-kelp-strand\n```\n\nRegistry JSON: https://ui.askewly.com/r/heart-kelp-strand.json\n\n## 코드 경로\n\n`registry/askewly/heart-kelp-strand/heart-kelp-strand.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/heart-kelp-strand\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/heart-kelp-strand.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"hero-composition","title":"Hero Composition Rotator","definition":"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.","install":"npx @askewly/design add hero-composition","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Hero Composition Rotator\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add hero-composition\n```\n\nRegistry JSON: https://ui.askewly.com/r/hero-composition.json\n\n## 코드 경로\n\n`registry/askewly/hero-composition/hero-composition.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"hero-reflection-stage","title":"Hero Reflection Stage","definition":"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.","install":"npx @askewly/design add hero-reflection-stage","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/hero-reflection-stage.md","keywords":["marketing","hero","image"],"md":"# Hero Reflection Stage\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add hero-reflection-stage\n```\n\nRegistry JSON: https://ui.askewly.com/r/hero-reflection-stage.json\n\n## 코드 경로\n\n`registry/askewly/hero-reflection-stage/hero-reflection-stage.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/hero-reflection-stage\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/hero-reflection-stage.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"hover-flicker-link","title":"Hover Flicker Link","definition":"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.","install":"npx @askewly/design add hover-flicker-link","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/hover-flicker-link.md","keywords":["marketing","link","hover-state"],"md":"# Hover Flicker Link\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add hover-flicker-link\n```\n\nRegistry JSON: https://ui.askewly.com/r/hover-flicker-link.json\n\n## 코드 경로\n\n`registry/askewly/hover-flicker-link/hover-flicker-link.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/hover-flicker-link\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/hover-flicker-link.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"hover-preview-follower","title":"Hover Preview Follower","definition":"A preview window follows the cursor over a list and swaps content per row, showing what each item holds before a click.","install":"npx @askewly/design add hover-preview-follower","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/hover-preview-follower.md","keywords":["marketing","hover-card","hover-reveal"],"md":"# Hover Preview Follower\n\n> A preview window follows the cursor over a list and swaps content per row, showing what each item holds before a click.\n\n## 설치\n\n```\nnpx @askewly/design add hover-preview-follower\n```\n\nRegistry JSON: https://ui.askewly.com/r/hover-preview-follower.json\n\n## 코드 경로\n\n`registry/askewly/hover-preview-follower/hover-preview-follower.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/hover-preview-follower\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/hover-preview-follower.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"idle-attract-demo","title":"Idle Attract Demo","definition":"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.","install":"npx @askewly/design add idle-attract-demo","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/idle-attract-demo.md","keywords":["application-ui","list","menu-item"],"md":"# Idle Attract Demo\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add idle-attract-demo\n```\n\nRegistry JSON: https://ui.askewly.com/r/idle-attract-demo.json\n\n## 코드 경로\n\n`registry/askewly/idle-attract-demo/idle-attract-demo.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/idle-attract-demo\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/idle-attract-demo.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"idle-cursor-prewarm","title":"Idle Cursor Prewarm","definition":"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.","install":"npx @askewly/design add idle-cursor-prewarm","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/idle-cursor-prewarm.md","keywords":["marketing"],"md":"# Idle Cursor Prewarm\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add idle-cursor-prewarm\n```\n\nRegistry JSON: https://ui.askewly.com/r/idle-cursor-prewarm.json\n\n## 코드 경로\n\n`registry/askewly/idle-cursor-prewarm/idle-cursor-prewarm.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/idle-cursor-prewarm\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/idle-cursor-prewarm.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"idle-nudge-hint","title":"Idle Nudge Hint","definition":"After a few idle seconds the surface nudges itself, ramping in over seconds so the invitation to interact arrives without a tooltip.","install":"npx @askewly/design add idle-nudge-hint","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/idle-nudge-hint.md","keywords":["application-ui","card","tooltip"],"md":"# Idle Nudge Hint\n\n> After a few idle seconds the surface nudges itself, ramping in over seconds so the invitation to interact arrives without a tooltip.\n\n## 설치\n\n```\nnpx @askewly/design add idle-nudge-hint\n```\n\nRegistry JSON: https://ui.askewly.com/r/idle-nudge-hint.json\n\n## 코드 경로\n\n`registry/askewly/idle-nudge-hint/idle-nudge-hint.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/idle-nudge-hint\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/idle-nudge-hint.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"image-trail-cursor","title":"Image Trail Cursor","definition":"Pointer travel spawns short-lived image clones along the path, turning mouse movement itself into a gallery preview.","install":"npx @askewly/design add image-trail-cursor","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/image-trail-cursor.md","keywords":["marketing","image"],"md":"# Image Trail Cursor\n\n> Pointer travel spawns short-lived image clones along the path, turning mouse movement itself into a gallery preview.\n\n## 설치\n\n```\nnpx @askewly/design add image-trail-cursor\n```\n\nRegistry JSON: https://ui.askewly.com/r/image-trail-cursor.json\n\n## 코드 경로\n\n`registry/askewly/image-trail-cursor/image-trail-cursor.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/image-trail-cursor\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/image-trail-cursor.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"image-treatment","title":"Image Treatment Rotator","definition":"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.","install":"npx @askewly/design add image-treatment","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Image Treatment Rotator\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add image-treatment\n```\n\nRegistry JSON: https://ui.askewly.com/r/image-treatment.json\n\n## 코드 경로\n\n`registry/askewly/image-treatment/image-treatment.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"input-group","title":"Input Group","definition":"Prefix and suffix segments sharing one border with the field, hidden from assistive tech so the label itself has to carry the unit.","install":"npx @askewly/design add input-group","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/input-group.md","keywords":["forms","input-group","text-field","label","fieldset"],"md":"# Input Group\n\n> Prefix and suffix segments sharing one border with the field, hidden from assistive tech so the label itself has to carry the unit.\n\n## 설치\n\n```\nnpx @askewly/design add input-group\n```\n\nRegistry JSON: https://ui.askewly.com/r/input-group.json\n\n## 코드 경로\n\n`registry/askewly/input-group/input-group.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/input-group\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/input-group.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"interactive-data-table","title":"Interactive Data Table","definition":"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.","install":"npx @askewly/design add interactive-data-table","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/interactive-data-table.md","keywords":["data-display","table","data-grid","data-table-toolbar","table-density-control","table-row-actions"],"md":"# Interactive Data Table\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add interactive-data-table\n```\n\nRegistry JSON: https://ui.askewly.com/r/interactive-data-table.json\n\n## 코드 경로\n\n`registry/askewly/interactive-data-table/interactive-data-table.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/interactive-data-table\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/interactive-data-table.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"kv-frame-stack-reveal","title":"KV Frame Stack Reveal","definition":"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.","install":"npx @askewly/design add kv-frame-stack-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/kv-frame-stack-reveal.md","keywords":["marketing","hero","image"],"md":"# KV Frame Stack Reveal\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add kv-frame-stack-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/kv-frame-stack-reveal.json\n\n## 코드 경로\n\n`registry/askewly/kv-frame-stack-reveal/kv-frame-stack-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/kv-frame-stack-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/kv-frame-stack-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"landing-hero","title":"Landing Hero","definition":"The first-viewport block for a public product/design-system homepage: a centered product name or direct promise, one line of supporting copy naming the two things the product actually is, two calls to action, and a single restrained proof surface underneath (here, a live search field) instead of a wall of decorative cards.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/landing-hero.md","keywords":["marketing","command-palette","autocomplete"],"md":"# Landing Hero\n\n> The first-viewport block for a public product/design-system homepage: a centered product name or direct promise, one line of supporting copy naming the two things the product actually is, two calls to action, and a single restrained proof surface underneath (here, a live search field) instead of a wall of decorative cards.\n\n## 사용 규칙\n\n- 언제 쓰나 — 공개 제품 홈페이지 첫 화면에서 약속 한 줄·버튼 둘·증거 면 하나를 보여 줄 때\n- 한 화면에 몇 개 — 페이지당 1개, h1 하나, 버튼 정확히 2개\n- 안 쓰는 곳 — 좌우 분할 히어로, 대시보드 모드 화면, 가짜 지표 목업이 필요한 화면\n- 같이 쓰는 것 — button recipe, 검색 필드 또는 워크스페이스 미리보기 한 장\n- 한계 — 중앙 한 칼럼 방향만 다룬다(분할 히어로는 다른 패턴), 실제 제품 화면이 없으면 증거 면이 약하다\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/landing-hero.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/landing-hero.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/landing-hero\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/landing-hero.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"large-title-collapsing-header","title":"Large Title Collapsing Header","definition":"`large-title-header` names the visual states (big title / collapsed) but not the transition contract.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/large-title-collapsing-header.md","keywords":["navigation","large-title-header","top-app-bar"],"md":"# Large Title Collapsing Header\n\n> `large-title-header` names the visual states (big title / collapsed) but not the transition contract.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/large-title-collapsing-header.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/large-title-collapsing-header.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/large-title-collapsing-header\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/large-title-collapsing-header.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"layered-noise-terrain","title":"Layered Noise Terrain","definition":"Terrain grain built by stacking noise layers whose resolution escalates per depth, so coarse swells carry fine wrinkles instead of one flat noise.","install":"npx @askewly/design add layered-noise-terrain","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/layered-noise-terrain.md","keywords":["marketing","canvas-toolbar","slider"],"md":"# Layered Noise Terrain\n\n> Terrain grain built by stacking noise layers whose resolution escalates per depth, so coarse swells carry fine wrinkles instead of one flat noise.\n\n## 설치\n\n```\nnpx @askewly/design add layered-noise-terrain\n```\n\nRegistry JSON: https://ui.askewly.com/r/layered-noise-terrain.json\n\n## 코드 경로\n\n`registry/askewly/layered-noise-terrain/layered-noise-terrain.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/layered-noise-terrain\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/layered-noise-terrain.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"lazy-three-object-scene","title":"Lazy Three Object Scene","definition":"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).","install":"npx @askewly/design add lazy-three-object-scene","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/lazy-three-object-scene.md","keywords":["application-ui"],"md":"# Lazy Three Object Scene\n\n> 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).\n\n## 설치\n\n```\nnpx @askewly/design add lazy-three-object-scene\n```\n\nRegistry JSON: https://ui.askewly.com/r/lazy-three-object-scene.json\n\n## 코드 경로\n\n`registry/askewly/lazy-three-object-scene/lazy-three-object-scene.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/lazy-three-object-scene\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/lazy-three-object-scene.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"linear-spring-easing","title":"Linear Spring Easing","definition":"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.","install":"npx @askewly/design add linear-spring-easing","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/linear-spring-easing.md","keywords":["marketing","easing","duration"],"md":"# Linear Spring Easing\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add linear-spring-easing\n```\n\nRegistry JSON: https://ui.askewly.com/r/linear-spring-easing.json\n\n## 코드 경로\n\n`registry/askewly/linear-spring-easing/linear-spring-easing.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/linear-spring-easing\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/linear-spring-easing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"locked-state","title":"Locked State","definition":"Values stay readable while only the controls go inert, with the reason and the way back stated as separate lines.","install":"npx @askewly/design add locked-state","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/locked-state.md","keywords":["feedback","locked-state","permission-state","upgrade-prompt"],"md":"# Locked State\n\n> Values stay readable while only the controls go inert, with the reason and the way back stated as separate lines.\n\n## 설치\n\n```\nnpx @askewly/design add locked-state\n```\n\nRegistry JSON: https://ui.askewly.com/r/locked-state.json\n\n## 코드 경로\n\n`registry/askewly/locked-state/locked-state.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/locked-state\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/locked-state.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"login-dialog","title":"Login Dialog","definition":"A modal that keeps the interrupted work visible behind the scrim, with three closing paths and focus returned to the trigger.","install":"npx @askewly/design add login-dialog","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/login-dialog.md","keywords":["overlays","login-dialog","auth-card","login-page","reauthentication-form"],"md":"# Login Dialog\n\n> A modal that keeps the interrupted work visible behind the scrim, with three closing paths and focus returned to the trigger.\n\n## 설치\n\n```\nnpx @askewly/design add login-dialog\n```\n\nRegistry JSON: https://ui.askewly.com/r/login-dialog.json\n\n## 코드 경로\n\n`registry/askewly/login-dialog/login-dialog.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/login-dialog\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/login-dialog.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"logo-marquee","title":"Logo Marquee","definition":"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.","install":"npx @askewly/design add logo-marquee","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Logo Marquee\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add logo-marquee\n```\n\nRegistry JSON: https://ui.askewly.com/r/logo-marquee.json\n\n## 코드 경로\n\n`registry/askewly/logo-marquee/logo-marquee.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"magic-link-sent-state","title":"Magic Link Sent State","definition":"The form gives way to the sent address and a resend countdown, with the remaining time carried in the button's accessible name.","install":"npx @askewly/design add magic-link-sent-state","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/magic-link-sent-state.md","keywords":["feedback","magic-link-sent-state","magic-link-login-form","email-verification-banner"],"md":"# Magic Link Sent State\n\n> The form gives way to the sent address and a resend countdown, with the remaining time carried in the button's accessible name.\n\n## 설치\n\n```\nnpx @askewly/design add magic-link-sent-state\n```\n\nRegistry JSON: https://ui.askewly.com/r/magic-link-sent-state.json\n\n## 코드 경로\n\n`registry/askewly/magic-link-sent-state/magic-link-sent-state.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/magic-link-sent-state\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/magic-link-sent-state.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"magnetic-hover-button","title":"Magnetic Hover Button","definition":"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.","install":"npx @askewly/design add magnetic-hover-button","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/magnetic-hover-button.md","keywords":["marketing","button","hover-state"],"md":"# Magnetic Hover Button\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add magnetic-hover-button\n```\n\nRegistry JSON: https://ui.askewly.com/r/magnetic-hover-button.json\n\n## 코드 경로\n\n`registry/askewly/magnetic-hover-button/magnetic-hover-button.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/magnetic-hover-button\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/magnetic-hover-button.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"magnetic-repulsion-cluster","title":"Magnetic Repulsion Cluster","definition":"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.","install":"npx @askewly/design add magnetic-repulsion-cluster","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/magnetic-repulsion-cluster.md","keywords":["marketing"],"md":"# Magnetic Repulsion Cluster\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add magnetic-repulsion-cluster\n```\n\nRegistry JSON: https://ui.askewly.com/r/magnetic-repulsion-cluster.json\n\n## 코드 경로\n\n`registry/askewly/magnetic-repulsion-cluster/magnetic-repulsion-cluster.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/magnetic-repulsion-cluster\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/magnetic-repulsion-cluster.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"marketing-landing","title":"Marketing Landing","definition":"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.","install":"npx @askewly/design add marketing-landing","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Marketing Landing\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add marketing-landing\n```\n\nRegistry JSON: https://ui.askewly.com/r/marketing-landing.json\n\n## 코드 경로\n\n`registry/askewly/marketing-landing/comparison-section.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mega-panel-hover-bridge","title":"Mega Panel with Hover Bridge","definition":"A wide navigation panel opened on hover, with a transparent bridge covering the trigger-to-panel gap so it does not close before the pointer arrives.","install":"npx @askewly/design add mega-panel-hover-bridge","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/mega-panel-hover-bridge.md","keywords":["navigation","popover","dropdown-menu"],"md":"# Mega Panel with Hover Bridge\n\n> A wide navigation panel opened on hover, with a transparent bridge covering the trigger-to-panel gap so it does not close before the pointer arrives.\n\n## 설치\n\n```\nnpx @askewly/design add mega-panel-hover-bridge\n```\n\nRegistry JSON: https://ui.askewly.com/r/mega-panel-hover-bridge.json\n\n## 코드 경로\n\n`registry/askewly/mega-panel-hover-bridge/mega-panel-hover-bridge.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mega-panel-hover-bridge\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/mega-panel-hover-bridge.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"membership-barcode-card","title":"Membership Barcode Card","definition":"매장에서 점원이나 스캐너에게 보여 주는 멤버십 카드.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/membership-barcode-card.md","keywords":["navigation","page-control"],"md":"# Membership Barcode Card\n\n> 매장에서 점원이나 스캐너에게 보여 주는 멤버십 카드.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/membership-barcode-card.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/membership-barcode-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/membership-barcode-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/membership-barcode-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mesh-gradient-surface","title":"Mesh Gradient Surface","definition":"A mesh gradient surface gives a hero, brand section, or empty backdrop an organic multi-point color field without imagery.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/mesh-gradient-surface.md","keywords":[],"md":"# Mesh Gradient Surface\n\n> A mesh gradient surface gives a hero, brand section, or empty backdrop an organic multi-point color field without imagery.\n\n## 사용 규칙\n\n- 언제 쓰나 — 이미지 없이 히어로·브랜드 구역·빈 배경에 여러 색점의 부드러운 색면이 필요할 때\n- 한 화면에 몇 개 — 화면당 1면, 같은 구역에 겹치지 않는다\n- 안 쓰는 곳 — 움직이는 유기적 노이즈가 필요한 곳(셰이더 단계), 대비를 확인 못 한 본문 뒷면\n- 같이 쓰는 것 — grain-texture-overlay(밴딩이 보일 때), 의미 토큰 색\n- 한계 — 정적 면이라 움직임이 없다, color-mix 를 못 쓰는 브라우저에서는 평평한 배경으로 내려앉는다\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/mesh-gradient-surface.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/mesh-gradient-surface.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mesh-gradient-surface\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/mesh-gradient-surface.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mindmap-spine-tree","title":"Mindmap Spine Tree","definition":"A left-to-right spine tree whose fan-out beziers leave the parent's collapse button, with depth-ramped node fills, direction affordances, zoom and pan, a roadmap layout, and an optional downward drawer with three empty consumer slots.","install":"npx @askewly/design add mindmap-spine-tree","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/mindmap-spine-tree.md","keywords":["data-display","tree-view"],"md":"# Mindmap Spine Tree\n\n> A left-to-right spine tree whose fan-out beziers leave the parent's collapse button, with depth-ramped node fills, direction affordances, zoom and pan, a roadmap layout, and an optional downward drawer with three empty consumer slots.\n\n## 설치\n\n```\nnpx @askewly/design add mindmap-spine-tree\n```\n\nRegistry JSON: https://ui.askewly.com/r/mindmap-spine-tree.json\n\n## 코드 경로\n\n`registry/askewly/mindmap-spine-tree/mindmap-spine-tree.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mindmap-spine-tree\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/mindmap-spine-tree.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mobile-buy-bar-sheet","title":"Mobile Buy Bar and Sheet","definition":"A fixed bottom buy bar whose option selection opens as either a bottom sheet or a centered modal, both observed in production.","install":"npx @askewly/design add mobile-buy-bar-sheet","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/mobile-buy-bar-sheet.md","keywords":["overlays","bottom-cta-bar","product-option-sheet","modal-bottom-sheet"],"md":"# Mobile Buy Bar and Sheet\n\n> A fixed bottom buy bar whose option selection opens as either a bottom sheet or a centered modal, both observed in production.\n\n## 설치\n\n```\nnpx @askewly/design add mobile-buy-bar-sheet\n```\n\nRegistry JSON: https://ui.askewly.com/r/mobile-buy-bar-sheet.json\n\n## 코드 경로\n\n`registry/askewly/mobile-buy-bar-sheet/mobile-buy-bar-sheet.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mobile-buy-bar-sheet\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/mobile-buy-bar-sheet.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"mobile-signup-field-stack","title":"Mobile Signup Field Stack","definition":"`mobile-form-field-stack` names the structural constraint (48×48 touch targets, next-field keyboard action) but not the field-level implementation.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/mobile-signup-field-stack.md","keywords":["forms","mobile-form-field-stack"],"md":"# Mobile Signup Field Stack\n\n> `mobile-form-field-stack` names the structural constraint (48×48 touch targets, next-field keyboard action) but not the field-level implementation.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/forms/mobile-signup-field-stack.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/mobile-signup-field-stack.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/mobile-signup-field-stack\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/mobile-signup-field-stack.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"modal-exit-choreography","title":"Modal Exit Choreography","definition":"React unmounts a modal the instant `open` flips false — the exit animation you wrote never plays.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/modal-exit-choreography.md","keywords":["overlays","dialog","transition"],"md":"# Modal Exit Choreography\n\n> React unmounts a modal the instant `open` flips false — the exit animation you wrote never plays.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/modal-exit-choreography.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/modal-exit-choreography.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"model-surface-particle-field","title":"Model Surface Particle Field","definition":"A model surface particle field turns an arbitrary 3D form into a cloud of light grains by sampling points across the mesh surface rather than reusing the mesh vertices.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/model-surface-particle-field.md","keywords":["marketing","hero"],"md":"# Model Surface Particle Field\n\n> A model surface particle field turns an arbitrary 3D form into a cloud of light grains by sampling points across the mesh surface rather than reusing the mesh vertices.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/model-surface-particle-field.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/model-surface-particle-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/model-surface-particle-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/model-surface-particle-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"multi-stage-entry-loader","title":"Multi Stage Entry Loader","definition":"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.","install":"npx @askewly/design add multi-stage-entry-loader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/multi-stage-entry-loader.md","keywords":["feedback","loading-state","progress-bar"],"md":"# Multi Stage Entry Loader\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add multi-stage-entry-loader\n```\n\nRegistry JSON: https://ui.askewly.com/r/multi-stage-entry-loader.json\n\n## 코드 경로\n\n`registry/askewly/multi-stage-entry-loader/multi-stage-entry-loader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/multi-stage-entry-loader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/multi-stage-entry-loader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"multicolor-segment-divider","title":"Multicolor Segment Divider","definition":"Section boundary drawn as equal segments in palette order: 3px between sections, 2px under the header, four segments above the footer.","install":"npx @askewly/design add multicolor-segment-divider","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/multicolor-segment-divider.md","keywords":["marketing","divider"],"md":"# Multicolor Segment Divider\n\n> Section boundary drawn as equal segments in palette order: 3px between sections, 2px under the header, four segments above the footer.\n\n## 설치\n\n```\nnpx @askewly/design add multicolor-segment-divider\n```\n\nRegistry JSON: https://ui.askewly.com/r/multicolor-segment-divider.json\n\n## 코드 경로\n\n`registry/askewly/multicolor-segment-divider/multicolor-segment-divider.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/multicolor-segment-divider\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/multicolor-segment-divider.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"name-crossfade-state-machine","title":"Name Crossfade State Machine","definition":"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.","install":"npx @askewly/design add name-crossfade-state-machine","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/name-crossfade-state-machine.md","keywords":["marketing","fade-transition","selected-state"],"md":"# Name Crossfade State Machine\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add name-crossfade-state-machine\n```\n\nRegistry JSON: https://ui.askewly.com/r/name-crossfade-state-machine.json\n\n## 코드 경로\n\n`registry/askewly/name-crossfade-state-machine/name-crossfade-state-machine.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/name-crossfade-state-machine\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/name-crossfade-state-machine.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"network-dot-map-stat","title":"Network Dot Map Stat","definition":"전 세계 거점 네트워크를 점·선 지도와 큰 숫자로 보여 주는 카드.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/network-dot-map-stat.md","keywords":[],"md":"# Network Dot Map Stat\n\n> 전 세계 거점 네트워크를 점·선 지도와 큰 숫자로 보여 주는 카드.\n\n## 사용 규칙\n\n- 언제 쓰나 — 거점·고객·설치 규모 같은 \"퍼져 있음\"을 숫자와 함께 신뢰 근거로 보여 줄 때.\n- 한 화면에 몇 개 — 하나.\n- 안 쓰는 곳 — 거점이 한두 곳뿐인 회사, 정확한 위치 탐색이 목적인 지도 UI, 위치 데이터가 비공개인 곳.\n- 같이 쓰는 것 — `odometer-counter`(필수), 앞의 `featured-news-rail`, 토큰 `action.primary`(점 색).\n- 한계 — 추상 점·선이라 위치 정보를 주지 않는다. 오도미터는 정수만 지원한다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/network-dot-map-stat.md\n\n## 코드 경로\n\n`examples/robotics-site/src/components/network-dot-map-stat.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/network-dot-map-stat.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"notebook-workspace-shell","title":"Notebook Workspace Shell","definition":"Three floating cards on a muted stage — sources, chat, studio or mindmap — each collapsing to a 56px icon rail with a 200ms collapse and instant expand, resizable gaps, and a detail mode that widens the right card to 960 while the others shrink.","install":"npx @askewly/design add notebook-workspace-shell","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/notebook-workspace-shell.md","keywords":["application-ui","app-shell","split-pane","dockable-panel","collapsible-sidebar"],"md":"# Notebook Workspace Shell\n\n> Three floating cards on a muted stage — sources, chat, studio or mindmap — each collapsing to a 56px icon rail with a 200ms collapse and instant expand, resizable gaps, and a detail mode that widens the right card to 960 while the others shrink.\n\n## 설치\n\n```\nnpx @askewly/design add notebook-workspace-shell\n```\n\nRegistry JSON: https://ui.askewly.com/r/notebook-workspace-shell.json\n\n## 코드 경로\n\n`registry/askewly/notebook-workspace-shell/notebook-workspace-shell.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/notebook-workspace-shell\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/notebook-workspace-shell.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"odometer-counter","title":"Odometer Counter","definition":"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.","install":"npx @askewly/design add odometer-counter","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/odometer-counter.md","keywords":["data-display","number-ticker","metric-card"],"md":"# Odometer Counter\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add odometer-counter\n```\n\nRegistry JSON: https://ui.askewly.com/r/odometer-counter.json\n\n## 코드 경로\n\n`registry/askewly/odometer-counter/odometer-counter.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/odometer-counter\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/odometer-counter.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"orbit-chips","title":"Orbit Chips","definition":"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.","install":"npx @askewly/design add orbit-chips","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Orbit Chips\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add orbit-chips\n```\n\nRegistry JSON: https://ui.askewly.com/r/orbit-chips.json\n\n## 코드 경로\n\n`registry/askewly/orbit-chips/orbit-chips.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"orbit-wall-impl","title":"Orbit Wall Impl","definition":"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.","install":"npx @askewly/design add orbit-wall-impl","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Orbit Wall Impl\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add orbit-wall-impl\n```\n\nRegistry JSON: https://ui.askewly.com/r/orbit-wall-impl.json\n\n## 코드 경로\n\n`registry/askewly/orbit-wall-impl/orbit-wall-impl.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"orbit-wall","title":"Orbit Wall","definition":"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.","install":"npx @askewly/design add orbit-wall","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Orbit Wall\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add orbit-wall\n```\n\nRegistry JSON: https://ui.askewly.com/r/orbit-wall.json\n\n## 코드 경로\n\n`registry/askewly/orbit-wall/orbit-wall.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"orbital-image-cloud-landing","title":"Orbital Image Cloud Landing","definition":"An orbital image cloud turns a content catalog into the landing hero itself: dozens of item thumbnails float as a slowly rotating 3D cloud the visitor can spin, and clicking an item focuses it, then navigates.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/orbital-image-cloud-landing.md","keywords":["marketing","hero","thumbnail"],"md":"# Orbital Image Cloud Landing\n\n> An orbital image cloud turns a content catalog into the landing hero itself: dozens of item thumbnails float as a slowly rotating 3D cloud the visitor can spin, and clicking an item focuses it, then navigates.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/orbital-image-cloud-landing.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/orbital-image-cloud-landing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"otp-code-input","title":"OTP Code Input","definition":"Split digit boxes that keep the code length and current position visible, while any box accepts a full pasted code so the separation never blocks entry.","install":"npx @askewly/design add otp-code-input","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/otp-code-input.md","keywords":["forms","otp-code-input","otp-input","one-time-code-autofill","secure-text-entry"],"md":"# OTP Code Input\n\n> Split digit boxes that keep the code length and current position visible, while any box accepts a full pasted code so the separation never blocks entry.\n\n## 설치\n\n```\nnpx @askewly/design add otp-code-input\n```\n\nRegistry JSON: https://ui.askewly.com/r/otp-code-input.json\n\n## 코드 경로\n\n`registry/askewly/otp-code-input/otp-code-input.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/otp-code-input\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/otp-code-input.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"padding-proportional-radius","title":"Padding Proportional Radius","definition":"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.","install":"npx @askewly/design add padding-proportional-radius","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/padding-proportional-radius.md","keywords":["forms","button","border-radius"],"md":"# Padding Proportional Radius\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add padding-proportional-radius\n```\n\nRegistry JSON: https://ui.askewly.com/r/padding-proportional-radius.json\n\n## 코드 경로\n\n`registry/askewly/padding-proportional-radius/padding-proportional-radius.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/padding-proportional-radius\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/padding-proportional-radius.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"page-transition-modes","title":"Page Transition Modes","definition":"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.","install":"npx @askewly/design add page-transition-modes","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/page-transition-modes.md","keywords":["navigation","transition","fade-transition","slide-transition"],"md":"# Page Transition Modes\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add page-transition-modes\n```\n\nRegistry JSON: https://ui.askewly.com/r/page-transition-modes.json\n\n## 코드 경로\n\n`registry/askewly/page-transition-modes/page-transition-modes.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/page-transition-modes\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/page-transition-modes.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"palette-generator-core","title":"Palette Generator Core","definition":"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.","install":"npx @askewly/design add palette-generator-core","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Palette Generator Core\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add palette-generator-core\n```\n\nRegistry JSON: https://ui.askewly.com/r/palette-generator-core.json\n\n## 코드 경로\n\n`registry/askewly/palette-generator-core/palette-generator-core.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"paper-card-reveal","title":"Paper Card Reveal","definition":"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.","install":"npx @askewly/design add paper-card-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/paper-card-reveal.md","keywords":["overlays","dialog","card"],"md":"# Paper Card Reveal\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add paper-card-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/paper-card-reveal.json\n\n## 코드 경로\n\n`registry/askewly/paper-card-reveal/paper-card-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/paper-card-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/paper-card-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"paragraph-reveal-modes","title":"Paragraph Reveal Modes","definition":"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.","install":"npx @askewly/design add paragraph-reveal-modes","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/paragraph-reveal-modes.md","keywords":["marketing","typography","scroll-fade"],"md":"# Paragraph Reveal Modes\n\n> 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.\n\n## 사용 규칙\n\n- 언제 쓰나 — 본문 문단을 줄 단위 등장 또는 스크롤 연동 밝기 변화로 드러낼 때\n- 한 화면에 몇 개 — 화면당 문단 리빌 1종\n- 안 쓰는 곳 — 읽는 중인 본문 전체를 위치형으로 움직이는 곳, 자체 스크롤 컨테이너(scroller 지정 없이)\n- 같이 쓰는 것 — 스크롤 트리거 라이브러리(GSAP ScrollTrigger), 줄 단위 분해\n- 한계 — 문단 안에서 리빌 종류를 섞는 요청은 dual-mode-line-reveal 이 답이다, 분해 조각은 접근성 트리에서 숨겨야 한다\n\n## 설치\n\n```\nnpx @askewly/design add paragraph-reveal-modes\n```\n\nRegistry JSON: https://ui.askewly.com/r/paragraph-reveal-modes.json\n\n## 코드 경로\n\n`registry/askewly/paragraph-reveal-modes/paragraph-reveal-modes.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/paragraph-reveal-modes\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/paragraph-reveal-modes.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"parallax-layer-stage","title":"Parallax Layer Stage","definition":"A hero-sized stage whose background splits into depth planes that drift at different rates — value, line and detail recede together, not just speed.","install":"npx @askewly/design add parallax-layer-stage","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/parallax-layer-stage.md","keywords":["marketing","hero","scroll-fade","sticky-scroll-section"],"md":"# Parallax Layer Stage\n\n> A hero-sized stage whose background splits into depth planes that drift at different rates — value, line and detail recede together, not just speed.\n\n## 설치\n\n```\nnpx @askewly/design add parallax-layer-stage\n```\n\nRegistry JSON: https://ui.askewly.com/r/parallax-layer-stage.json\n\n## 코드 경로\n\n`registry/askewly/parallax-layer-stage/parallax-layer-stage.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/parallax-layer-stage\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/parallax-layer-stage.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"parametric-helix-particles","title":"Parametric Helix Particles","definition":"A parametric helix particle field draws a double helix as orbiting points instead of a surfaced mesh, and it does so with no model file, no GPGPU pass, and no noise function.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/parametric-helix-particles.md","keywords":["marketing","hero"],"md":"# Parametric Helix Particles\n\n> A parametric helix particle field draws a double helix as orbiting points instead of a surfaced mesh, and it does so with no model file, no GPGPU pass, and no noise function.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/parametric-helix-particles.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/parametric-helix-particles.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/parametric-helix-particles\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/parametric-helix-particles.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"password-reveal-toggle","title":"Password Reveal Toggle","definition":"A masked field that reveals in place, exposing the toggle state programmatically and keeping the autocomplete token across the type swap.","install":"npx @askewly/design add password-reveal-toggle","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/password-reveal-toggle.md","keywords":["forms","password-reveal-toggle","secure-text-entry","password-field"],"md":"# Password Reveal Toggle\n\n> A masked field that reveals in place, exposing the toggle state programmatically and keeping the autocomplete token across the type swap.\n\n## 설치\n\n```\nnpx @askewly/design add password-reveal-toggle\n```\n\nRegistry JSON: https://ui.askewly.com/r/password-reveal-toggle.json\n\n## 코드 경로\n\n`registry/askewly/password-reveal-toggle/password-reveal-toggle.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/password-reveal-toggle\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/password-reveal-toggle.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"path-length-timed-drawing","title":"Path Length Timed Drawing","definition":"Hand-drawn SVG marks whose draw duration is derived from path length, so short strokes finish fast and long ones hold a constant pace.","install":"npx @askewly/design add path-length-timed-drawing","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/path-length-timed-drawing.md","keywords":["marketing","highlight-stroke","icon"],"md":"# Path Length Timed Drawing\n\n> Hand-drawn SVG marks whose draw duration is derived from path length, so short strokes finish fast and long ones hold a constant pace.\n\n## 설치\n\n```\nnpx @askewly/design add path-length-timed-drawing\n```\n\nRegistry JSON: https://ui.askewly.com/r/path-length-timed-drawing.json\n\n## 코드 경로\n\n`registry/askewly/path-length-timed-drawing/path-length-timed-drawing.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/path-length-timed-drawing\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/path-length-timed-drawing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"peek-testimonial-carousel","title":"Peek Testimonial Carousel","definition":"Centre-focused testimonial carousel with cut-off neighbours, 6s autoplay, 500ms moves, infinite loop, and reduced-motion and hover pause.","install":"npx @askewly/design add peek-testimonial-carousel","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/peek-testimonial-carousel.md","keywords":["marketing","carousel-peek","testimonial-section","carousel"],"md":"# Peek Testimonial Carousel\n\n> Centre-focused testimonial carousel with cut-off neighbours, 6s autoplay, 500ms moves, infinite loop, and reduced-motion and hover pause.\n\n## 사용 규칙\n\n- 언제 쓰나 — 후기 한 장을 크게 보이고 양옆을 잘라 보여 더 있음을 알릴 때\n- 한 화면에 몇 개 — 섹션당 1개\n- 안 쓰는 곳 — 이웃 카드를 가려야 하는 좁은 컨테이너, 후기가 한두 건뿐인 페이지\n- 같이 쓰는 것 — 원판 카드 조각 장식(모서리 100px), 화살표 버튼\n- 한계 — 6초 자동 재생이라 모션 줄이기에서 멈추고 즉시 이동하도록 바꿔 둔 점이 원본과 다르다, 후기 문구는 자리표시자다\n\n## 설치\n\n```\nnpx @askewly/design add peek-testimonial-carousel\n```\n\nRegistry JSON: https://ui.askewly.com/r/peek-testimonial-carousel.json\n\n## 코드 경로\n\n`registry/askewly/peek-testimonial-carousel/peek-testimonial-carousel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/peek-testimonial-carousel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/peek-testimonial-carousel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"peer-blur-focus","title":"Peer Blur Focus","definition":"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.","install":"npx @askewly/design add peer-blur-focus","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/peer-blur-focus.md","keywords":["application-ui","list","hover-state"],"md":"# Peer Blur Focus\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add peer-blur-focus\n```\n\nRegistry JSON: https://ui.askewly.com/r/peer-blur-focus.json\n\n## 코드 경로\n\n`registry/askewly/peer-blur-focus/peer-blur-focus.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/peer-blur-focus\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/peer-blur-focus.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"permission-matrix-editor-grid","title":"Permission Matrix Editor Grid","definition":"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.","install":"npx @askewly/design add permission-matrix-editor-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/permission-matrix-editor-grid.md","keywords":["data-display","permission-matrix-editor"],"md":"# Permission Matrix Editor Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add permission-matrix-editor-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/permission-matrix-editor-grid.json\n\n## 코드 경로\n\n`registry/askewly/permission-matrix-editor-grid/permission-matrix-editor-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/permission-matrix-editor-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/permission-matrix-editor-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"phase-broadcast-chrome","title":"Phase Broadcast Chrome","definition":"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.","install":"npx @askewly/design add phase-broadcast-chrome","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/phase-broadcast-chrome.md","keywords":["application-ui","app-shell"],"md":"# Phase Broadcast Chrome\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add phase-broadcast-chrome\n```\n\nRegistry JSON: https://ui.askewly.com/r/phase-broadcast-chrome.json\n\n## 코드 경로\n\n`registry/askewly/phase-broadcast-chrome/phase-broadcast-chrome.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/phase-broadcast-chrome\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/phase-broadcast-chrome.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"pinned-scroll-sequence","title":"Pinned Scroll Sequence","definition":"A pinned scroll sequence holds a section in the viewport while the user's scroll scrubs a multi-step narrative, then releases it back into the flow.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/pinned-scroll-sequence.md","keywords":[],"md":"# Pinned Scroll Sequence\n\n> A pinned scroll sequence holds a section in the viewport while the user's scroll scrubs a multi-step narrative, then releases it back into the flow.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/pinned-scroll-sequence.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/pinned-scroll-sequence.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/pinned-scroll-sequence\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/pinned-scroll-sequence.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"pixelation-reveal","title":"Pixelation Reveal","definition":"An image resolves from coarse mosaic to sharp in geometric column steps, giving the moment of disclosure a decoding texture.","install":"npx @askewly/design add pixelation-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/pixelation-reveal.md","keywords":["marketing","image"],"md":"# Pixelation Reveal\n\n> An image resolves from coarse mosaic to sharp in geometric column steps, giving the moment of disclosure a decoding texture.\n\n## 설치\n\n```\nnpx @askewly/design add pixelation-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/pixelation-reveal.json\n\n## 코드 경로\n\n`registry/askewly/pixelation-reveal/pixelation-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/pixelation-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/pixelation-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"popover-anatomy-variants","title":"Popover Anatomy Variants","definition":"Shallow shadow, near-zero radius, optional arrow. The minimal decoration commerce popovers converge on, with the arrow left as a choice.","install":"npx @askewly/design add popover-anatomy-variants","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/popover-anatomy-variants.md","keywords":["overlays","popover","dropdown-menu","tooltip"],"md":"# Popover Anatomy Variants\n\n> Shallow shadow, near-zero radius, optional arrow. The minimal decoration commerce popovers converge on, with the arrow left as a choice.\n\n## 설치\n\n```\nnpx @askewly/design add popover-anatomy-variants\n```\n\nRegistry JSON: https://ui.askewly.com/r/popover-anatomy-variants.json\n\n## 코드 경로\n\n`registry/askewly/popover-anatomy-variants/popover-anatomy-variants.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/popover-anatomy-variants\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/popover-anatomy-variants.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"popover","title":"Popover","definition":"A small floating panel anchored to a trigger, used for compact interactive content (a form field, a date picker, a short settings block) that does not need the modal weight of a `dialog` or the pure-text weight of a `tooltip`.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/popover.md","keywords":["overlays","popover","popover-form","dropdown-menu","tooltip","dialog"],"md":"# Popover\n\n> A small floating panel anchored to a trigger, used for compact interactive content (a form field, a date picker, a short settings block) that does not need the modal weight of a `dialog` or the pure-text weight of a `tooltip`.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/popover.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/ui/popover.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/popover\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/popover.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"preset-bundle-switch","title":"Preset Bundle Switch","definition":"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.","install":"npx @askewly/design add preset-bundle-switch","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/preset-bundle-switch.md","keywords":["application-ui","tabs","badge"],"md":"# Preset Bundle Switch\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add preset-bundle-switch\n```\n\nRegistry JSON: https://ui.askewly.com/r/preset-bundle-switch.json\n\n## 코드 경로\n\n`registry/askewly/preset-bundle-switch/preset-bundle-switch.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/preset-bundle-switch\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/preset-bundle-switch.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"price-hierarchy-stack","title":"Price Hierarchy Stack","definition":"Struck-through list price, a discount badge, then an oversized bold sale price. The size inversion three major commerce sites converge on.","install":"npx @askewly/design add price-hierarchy-stack","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/price-hierarchy-stack.md","keywords":["commerce","price-card"],"md":"# Price Hierarchy Stack\n\n> Struck-through list price, a discount badge, then an oversized bold sale price. The size inversion three major commerce sites converge on.\n\n## 설치\n\n```\nnpx @askewly/design add price-hierarchy-stack\n```\n\nRegistry JSON: https://ui.askewly.com/r/price-hierarchy-stack.json\n\n## 코드 경로\n\n`registry/askewly/price-hierarchy-stack/price-hierarchy-stack.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/price-hierarchy-stack\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/price-hierarchy-stack.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"pricing-plan-compare","title":"Pricing Plan Compare","definition":"Plan columns laid side by side for a decision, with the recommended badge overhanging the card edge to break the grid.","install":"npx @askewly/design add pricing-plan-compare","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/pricing-plan-compare.md","keywords":["marketing","plan-card","tabs"],"md":"# Pricing Plan Compare\n\n> Plan columns laid side by side for a decision, with the recommended badge overhanging the card edge to break the grid.\n\n## 설치\n\n```\nnpx @askewly/design add pricing-plan-compare\n```\n\nRegistry JSON: https://ui.askewly.com/r/pricing-plan-compare.json\n\n## 코드 경로\n\n`registry/askewly/pricing-plan-compare/pricing-plan-compare.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/pricing-plan-compare\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/pricing-plan-compare.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"procedural-court-line","title":"Procedural Court Line","definition":"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.","install":"npx @askewly/design add procedural-court-line","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/procedural-court-line.md","keywords":["marketing","divider","hero"],"md":"# Procedural Court Line\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add procedural-court-line\n```\n\nRegistry JSON: https://ui.askewly.com/r/procedural-court-line.json\n\n## 코드 경로\n\n`registry/askewly/procedural-court-line/procedural-court-line.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/procedural-court-line\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/procedural-court-line.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"product-coverflow","title":"Product Coverflow","definition":"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.","install":"npx @askewly/design add product-coverflow","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Product Coverflow\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add product-coverflow\n```\n\nRegistry JSON: https://ui.askewly.com/r/product-coverflow.json\n\n## 코드 경로\n\n`registry/askewly/product-coverflow/product-coverflow.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"product-detail-purchase-stack","title":"Product Detail Purchase Stack","definition":"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.","install":"npx @askewly/design add product-detail-purchase-stack","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/product-detail-purchase-stack.md","keywords":["commerce","product-option-sheet","quantity-stepper"],"md":"# Product Detail Purchase Stack\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add product-detail-purchase-stack\n```\n\nRegistry JSON: https://ui.askewly.com/r/product-detail-purchase-stack.json\n\n## 코드 경로\n\n`registry/askewly/product-detail-purchase-stack/product-detail-purchase-stack.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/product-detail-purchase-stack\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/product-detail-purchase-stack.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"product-grid-density-presets","title":"Product Grid Density Presets","definition":"Named density presets that redefine card width and gap per column count, plus the fixed badge, title, price rhythm inside each card.","install":"npx @askewly/design add product-grid-density-presets","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/product-grid-density-presets.md","keywords":["commerce","product-card"],"md":"# Product Grid Density Presets\n\n> Named density presets that redefine card width and gap per column count, plus the fixed badge, title, price rhythm inside each card.\n\n## 설치\n\n```\nnpx @askewly/design add product-grid-density-presets\n```\n\nRegistry JSON: https://ui.askewly.com/r/product-grid-density-presets.json\n\n## 코드 경로\n\n`registry/askewly/product-grid-density-presets/product-grid-density-presets.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/product-grid-density-presets\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/product-grid-density-presets.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"product-line-card-trio","title":"Product Line Card Trio","definition":"제품군을 한 줄 3열로 비교하게 하는 카드 묶음.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/product-line-card-trio.md","keywords":[],"md":"# Product Line Card Trio\n\n> 제품군을 한 줄 3열로 비교하게 하는 카드 묶음.\n\n## 사용 규칙\n\n- 언제 쓰나 — 제품군·플랜·서비스 라인 3개를 같은 형식으로 나란히 소개하고 각각 상세로 보낼 때.\n- 한 화면에 몇 개 — 하나(한 번에 3장). 같은 페이지에 두 줄 이상 쌓지 않는다.\n- 안 쓰는 곳 — 수치 비교가 본질인 표, 항목이 6개 이상인 목록, 카드 안에 별도 행동(버튼 여럿)이 필요한 곳.\n- 같이 쓰는 것 — 위의 인트로 문장, 아래의 `catalog-download-teaser`, 토큰 `--font-size-card-title`.\n- 한계 — 카드 높이를 열 간에 맞추지 않는다. 설명 길이가 크게 다르면 어긋난다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/product-line-card-trio.md\n\n## 코드 경로\n\n`examples/robotics-site/src/components/product-line-card-trio.tsx`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/product-line-card-trio.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"progressive-blur-edge","title":"Progressive Blur Edge","definition":"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.","install":"npx @askewly/design add progressive-blur-edge","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/progressive-blur-edge.md","keywords":["application-ui","backdrop-blur","scroll-area"],"md":"# Progressive Blur Edge\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add progressive-blur-edge\n```\n\nRegistry JSON: https://ui.askewly.com/r/progressive-blur-edge.json\n\n## 코드 경로\n\n`registry/askewly/progressive-blur-edge/progressive-blur-edge.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/progressive-blur-edge\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/progressive-blur-edge.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"promo-banner-system","title":"Promo Banner System","definition":"A promo banner system is one banner shape that carries different urgency-driven offer copy — a discount rate, a limited-time sale, a countdown — depending on where it's placed (top-of-site vs in-page).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/promo-banner-system.md","keywords":[],"md":"# Promo Banner System\n\n> A promo banner system is one banner shape that carries different urgency-driven offer copy — a discount rate, a limited-time sale, a countdown — depending on where it's placed (top-of-site vs in-page).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/commerce/promo-banner-system.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/promo-banner-system.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/promo-banner-system\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/promo-banner-system.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"pull-to-refresh-list-pattern","title":"Pull To Refresh List","definition":"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.","install":"npx @askewly/design add pull-to-refresh-list-pattern","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/pull-to-refresh-list-pattern.md","keywords":["data-display","pull-to-refresh","pull-to-refresh-indicator"],"md":"# Pull To Refresh List\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add pull-to-refresh-list-pattern\n```\n\nRegistry JSON: https://ui.askewly.com/r/pull-to-refresh-list-pattern.json\n\n## 코드 경로\n\n`registry/askewly/pull-to-refresh-list-pattern/pull-to-refresh-list-pattern.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/pull-to-refresh-list-pattern\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/pull-to-refresh-list-pattern.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"quiet-form-validation","title":"Quiet Form Validation","definition":"Validation that fires on blur and re-runs on input only to clear an error, so typing is never interrupted but corrections are instant.","install":"npx @askewly/design add quiet-form-validation","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/quiet-form-validation.md","keywords":["forms","validation-message","field-group","label","text-field"],"md":"# Quiet Form Validation\n\n> Validation that fires on blur and re-runs on input only to clear an error, so typing is never interrupted but corrections are instant.\n\n## 설치\n\n```\nnpx @askewly/design add quiet-form-validation\n```\n\nRegistry JSON: https://ui.askewly.com/r/quiet-form-validation.json\n\n## 코드 경로\n\n`registry/askewly/quiet-form-validation/quiet-form-validation.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/quiet-form-validation\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/quiet-form-validation.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"quota-warning","title":"Quota Warning","definition":"A meter that spells out used, limit, and remaining in words, paired with one path you can take yourself before the block lands.","install":"npx @askewly/design add quota-warning","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/quota-warning.md","keywords":["feedback","quota-warning","locked-state","rate-limit-state","upgrade-prompt"],"md":"# Quota Warning\n\n> A meter that spells out used, limit, and remaining in words, paired with one path you can take yourself before the block lands.\n\n## 설치\n\n```\nnpx @askewly/design add quota-warning\n```\n\nRegistry JSON: https://ui.askewly.com/r/quota-warning.json\n\n## 코드 경로\n\n`registry/askewly/quota-warning/quota-warning.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/quota-warning\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/quota-warning.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"quote-card-carousel","title":"Quote Card Carousel","definition":"A two-up quote card carousel whose pages crossfade in the same grid cell (250ms), with prev/next and per-quote buttons and no autoplay.","install":"npx @askewly/design add quote-card-carousel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/quote-card-carousel.md","keywords":["marketing","carousel","testimonial-section"],"md":"# Quote Card Carousel\n\n> A two-up quote card carousel whose pages crossfade in the same grid cell (250ms), with prev/next and per-quote buttons and no autoplay.\n\n## 설치\n\n```\nnpx @askewly/design add quote-card-carousel\n```\n\nRegistry JSON: https://ui.askewly.com/r/quote-card-carousel.json\n\n## 코드 경로\n\n`registry/askewly/quote-card-carousel/quote-card-carousel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/quote-card-carousel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/quote-card-carousel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"radial-dial-scroll","title":"Radial Dial Scroll","definition":"A ring of 130 ticks fills clockwise with reading progress, sitting near the reader's eye as a gauge instead of a distant scrollbar.","install":"npx @askewly/design add radial-dial-scroll","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/radial-dial-scroll.md","keywords":["feedback","meter"],"md":"# Radial Dial Scroll\n\n> A ring of 130 ticks fills clockwise with reading progress, sitting near the reader's eye as a gauge instead of a distant scrollbar.\n\n## 설치\n\n```\nnpx @askewly/design add radial-dial-scroll\n```\n\nRegistry JSON: https://ui.askewly.com/r/radial-dial-scroll.json\n\n## 코드 경로\n\n`registry/askewly/radial-dial-scroll/radial-dial-scroll.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/radial-dial-scroll\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/radial-dial-scroll.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"rail-measured-line","title":"Rail Measured Line","definition":"A hairline that measures a target element's edge at runtime and scales itself to stop exactly there at every viewport width.","install":"npx @askewly/design add rail-measured-line","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/rail-measured-line.md","keywords":["layout","hairline-border","divider"],"md":"# Rail Measured Line\n\n> A hairline that measures a target element's edge at runtime and scales itself to stop exactly there at every viewport width.\n\n## 설치\n\n```\nnpx @askewly/design add rail-measured-line\n```\n\nRegistry JSON: https://ui.askewly.com/r/rail-measured-line.json\n\n## 코드 경로\n\n`registry/askewly/rail-measured-line/rail-measured-line.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/rail-measured-line\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/rail-measured-line.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"recoverable-empty-state","title":"Recoverable Empty State","definition":"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.","install":"npx @askewly/design add recoverable-empty-state","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/recoverable-empty-state.md","keywords":["feedback","empty-state","empty-search-result","empty-filter-state","error-state"],"md":"# Recoverable Empty State\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add recoverable-empty-state\n```\n\nRegistry JSON: https://ui.askewly.com/r/recoverable-empty-state.json\n\n## 코드 경로\n\n`registry/askewly/recoverable-empty-state/recoverable-empty-state.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/recoverable-empty-state\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/recoverable-empty-state.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"recovery-code-panel","title":"Recovery Code Panel","definition":"Codes laid out like paper, stating separately that they cannot be shown again and that each one is used only once.","install":"npx @askewly/design add recovery-code-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/recovery-code-panel.md","keywords":["feedback","recovery-code-panel","recovery-code-warning","mfa-enrollment-card"],"md":"# Recovery Code Panel\n\n> Codes laid out like paper, stating separately that they cannot be shown again and that each one is used only once.\n\n## 설치\n\n```\nnpx @askewly/design add recovery-code-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/recovery-code-panel.json\n\n## 코드 경로\n\n`registry/askewly/recovery-code-panel/recovery-code-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/recovery-code-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/recovery-code-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"reduced-motion-timing-preserve","title":"Reduced Motion Timing Preserve","definition":"The common reduced-motion fallback deletes the animation (`transition: none`, `animation: none`), which also deletes the time it occupied.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/reduced-motion-timing-preserve.md","keywords":[],"md":"# Reduced Motion Timing Preserve\n\n> The common reduced-motion fallback deletes the animation (`transition: none`, `animation: none`), which also deletes the time it occupied.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/reduced-motion-timing-preserve.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/reduced-motion-timing-preserve.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/reduced-motion-timing-preserve\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/reduced-motion-timing-preserve.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"reference-viewport-sizing","title":"Reference Viewport Sizing","definition":"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.","install":"npx @askewly/design add reference-viewport-sizing","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/reference-viewport-sizing.md","keywords":["layout","dynamic-viewport-unit","fluid-layout","responsive-layout","breakpoint","button"],"md":"# Reference Viewport Sizing\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add reference-viewport-sizing\n```\n\nRegistry JSON: https://ui.askewly.com/r/reference-viewport-sizing.json\n\n## 코드 경로\n\n`registry/askewly/reference-viewport-sizing/reference-viewport-sizing.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/reference-viewport-sizing\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/reference-viewport-sizing.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"remote-data-screen","title":"Remote Data Screen","definition":"A remote data screen is the state contract for any view that fetches data over the network and renders it: one screen, five mutually exclusive states — loading, success, empty, error, and timeout — each visually distinct and each with its own next action.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/remote-data-screen.md","keywords":["data-display","skeleton","error-state","empty-state"],"md":"# Remote Data Screen\n\n> A remote data screen is the state contract for any view that fetches data over the network and renders it: one screen, five mutually exclusive states — loading, success, empty, error, and timeout — each visually distinct and each with its own next action.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/remote-data-screen.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/remote-data-screen.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/remote-data-screen\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/remote-data-screen.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"responsive-content-grid","title":"Responsive Content Grid","definition":"A responsive content grid arranges peer items into as many columns as the content can support, then collapses without changing their reading order.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/responsive-content-grid.md","keywords":[],"md":"# Responsive Content Grid\n\n> A responsive content grid arranges peer items into as many columns as the content can support, then collapses without changing their reading order.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/layout/responsive-content-grid.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/responsive-content-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/responsive-content-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/responsive-content-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"responsive-dashboard-panel","title":"Responsive Dashboard Panel","definition":"A responsive dashboard panel is the content pane of a dashboard — a filterable card/list collection with per-item state — with every state change carried on both channels: visual (class/style) and semantic (ARIA).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/responsive-dashboard-panel.md","keywords":["application-ui","sidebar-dashboard-layout","empty-search-result"],"md":"# Responsive Dashboard Panel\n\n> A responsive dashboard panel is the content pane of a dashboard — a filterable card/list collection with per-item state — with every state change carried on both channels: visual (class/style) and semantic (ARIA).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/responsive-dashboard-panel.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/responsive-dashboard-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/responsive-dashboard-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/responsive-dashboard-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"reward-reveal-loader","title":"Reward Reveal Loader","definition":"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.","install":"npx @askewly/design add reward-reveal-loader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/reward-reveal-loader.md","keywords":["feedback","loading-state","fade-transition"],"md":"# Reward Reveal Loader\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add reward-reveal-loader\n```\n\nRegistry JSON: https://ui.askewly.com/r/reward-reveal-loader.json\n\n## 코드 경로\n\n`registry/askewly/reward-reveal-loader/reward-reveal-loader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/reward-reveal-loader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/reward-reveal-loader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"rotating-label","title":"Rotating Label","definition":"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.","install":"npx @askewly/design add rotating-label","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Rotating Label\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add rotating-label\n```\n\nRegistry JSON: https://ui.askewly.com/r/rotating-label.json\n\n## 코드 경로\n\n`registry/askewly/rotating-label/rotating-label.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"saas-app-shell","title":"SaaS App Shell","definition":"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.","install":"npx @askewly/design add saas-app-shell","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# SaaS App Shell\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add saas-app-shell\n```\n\nRegistry JSON: https://ui.askewly.com/r/saas-app-shell.json\n\n## 코드 경로\n\n`registry/askewly/saas-app-shell/app-sidebar.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scene-sound-map","title":"Scene Sound Map","definition":"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.","install":"npx @askewly/design add scene-sound-map","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scene-sound-map.md","keywords":["marketing"],"md":"# Scene Sound Map\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add scene-sound-map\n```\n\nRegistry JSON: https://ui.askewly.com/r/scene-sound-map.json\n\n## 코드 경로\n\n`registry/askewly/scene-sound-map/scene-sound-map.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scene-sound-map\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scene-sound-map.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"schema-driven-settings","title":"Schema Driven Settings","definition":"A settings panel generated from field declarations (readable, desc, type, default) so adding an option costs a schema line rather than UI work.","install":"npx @askewly/design add schema-driven-settings","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/schema-driven-settings.md","keywords":["forms","switch","slider","select"],"md":"# Schema Driven Settings\n\n> A settings panel generated from field declarations (readable, desc, type, default) so adding an option costs a schema line rather than UI work.\n\n## 설치\n\n```\nnpx @askewly/design add schema-driven-settings\n```\n\nRegistry JSON: https://ui.askewly.com/r/schema-driven-settings.json\n\n## 코드 경로\n\n`registry/askewly/schema-driven-settings/schema-driven-settings.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/schema-driven-settings\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/schema-driven-settings.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scramble-text-reveal","title":"Scramble Text Reveal","definition":"One scramble engine reused across load, hover, and scroll triggers, so text entry becomes a single brand signature instead of three effects.","install":"npx @askewly/design add scramble-text-reveal","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scramble-text-reveal.md","keywords":["marketing","typography"],"md":"# Scramble Text Reveal\n\n> One scramble engine reused across load, hover, and scroll triggers, so text entry becomes a single brand signature instead of three effects.\n\n## 설치\n\n```\nnpx @askewly/design add scramble-text-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/scramble-text-reveal.json\n\n## 코드 경로\n\n`registry/askewly/scramble-text-reveal/scramble-text-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scramble-text-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scramble-text-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-cue-shape-converge","title":"Scroll Cue Shape Converge","definition":"A fixed particle backdrop bound to scroll: the field disperses past the hero, gathers onto the SVG outline of any cue element that enters the viewport, and scatters again after it — reversible in both directions.","install":"npx @askewly/design add scroll-cue-shape-converge","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-cue-shape-converge.md","keywords":["marketing","sticky-scroll-section","scroll-fade"],"md":"# Scroll Cue Shape Converge\n\n> A fixed particle backdrop bound to scroll: the field disperses past the hero, gathers onto the SVG outline of any cue element that enters the viewport, and scatters again after it — reversible in both directions.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-cue-shape-converge\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-cue-shape-converge.json\n\n## 코드 경로\n\n`registry/askewly/scroll-cue-shape-converge/scroll-cue-shape-converge.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-cue-shape-converge\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-cue-shape-converge.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-driven-reveal","title":"Scroll-Driven Reveal","definition":"A scroll-driven reveal fades/raises content in as it enters the scrollport, using CSS view-progress timelines (`animation-timeline: view()`).","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-driven-reveal.md","keywords":[],"md":"# Scroll-Driven Reveal\n\n> A scroll-driven reveal fades/raises content in as it enters the scrollport, using CSS view-progress timelines (`animation-timeline: view()`).\n\n## 사용 규칙\n\n- 언제 쓰나 — 스크롤로 뷰포트에 들어올 때 내용이 떠오르며 나타나게 할 때\n- 한 화면에 몇 개 — 뷰포트당 구조 단위 1개\n- 안 쓰는 곳 — 모든 섹션 요소에 순서를 거는 페이지, 핀 고정·스크럽·시퀀싱이 필요한 곳(GSAP 단계)\n- 같이 쓰는 것 — @supports 안에 둔 숨김 초기 상태, 모션 줄이기 끄기 블록\n- 한계 — opacity·transform 만 움직인다, 지원하지 않는 브라우저는 정적으로 보이는 것으로 끝난다\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/scroll-driven-reveal.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/scroll-driven-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-driven-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-driven-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-focus-list","title":"Scroll Focus List","definition":"A list whose items fade by their distance from the scroll progress point, so only the item in focus reads at full strength.","install":"npx @askewly/design add scroll-focus-list","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-focus-list.md","keywords":["marketing","list","scroll-fade"],"md":"# Scroll Focus List\n\n> A list whose items fade by their distance from the scroll progress point, so only the item in focus reads at full strength.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-focus-list\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-focus-list.json\n\n## 코드 경로\n\n`registry/askewly/scroll-focus-list/scroll-focus-list.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-focus-list\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-focus-list.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-fx","title":"Scroll FX Utilities","definition":"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).","install":"npx @askewly/design add scroll-fx","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Scroll FX Utilities\n\n> 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).\n\n## 설치\n\n```\nnpx @askewly/design add scroll-fx\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-fx.json\n\n## 코드 경로\n\n`registry/askewly/scroll-fx/scroll-fx.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-linked-word-band","title":"Scroll Linked Word Band","definition":"Dark strip of repeated phrases that slides sideways in proportion to scroll progress without pinning, and stays still under reduced motion.","install":"npx @askewly/design add scroll-linked-word-band","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-linked-word-band.md","keywords":["marketing","marquee-row"],"md":"# Scroll Linked Word Band\n\n> Dark strip of repeated phrases that slides sideways in proportion to scroll progress without pinning, and stays still under reduced motion.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-linked-word-band\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-linked-word-band.json\n\n## 코드 경로\n\n`registry/askewly/scroll-linked-word-band/scroll-linked-word-band.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-linked-word-band\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-linked-word-band.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-overrun-advance","title":"Scroll Overrun Advance","definition":"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.","install":"npx @askewly/design add scroll-overrun-advance","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/scroll-overrun-advance.md","keywords":["navigation","meter","gesture-hint"],"md":"# Scroll Overrun Advance\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-overrun-advance\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-overrun-advance.json\n\n## 코드 경로\n\n`registry/askewly/scroll-overrun-advance/scroll-overrun-advance.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-overrun-advance\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/scroll-overrun-advance.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-scrub-3d-scene","title":"Scroll-Scrub 3D Scene","definition":"A scroll-scrub 3D scene binds scroll progress to 3D state — a pinned canvas whose camera and object move as the page scrolls, turning a scroll distance into a narrative timeline the reader drives at their own pace.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/scroll-scrub-3d-scene.md","keywords":[],"md":"# Scroll-Scrub 3D Scene\n\n> A scroll-scrub 3D scene binds scroll progress to 3D state — a pinned canvas whose camera and object move as the page scrolls, turning a scroll distance into a narrative timeline the reader drives at their own pace.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/scroll-scrub-3d-scene.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/scroll-scrub-3d-scene.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-scrub-3d-scene\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/scroll-scrub-3d-scene.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"scroll-theme-inversion","title":"Scroll Theme Inversion","definition":"When a dark section crosses the viewport midline, the whole site chrome inverts to dark, letting section mood tint the UI.","install":"npx @askewly/design add scroll-theme-inversion","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/scroll-theme-inversion.md","keywords":["marketing","dark-mode","theme-token"],"md":"# Scroll Theme Inversion\n\n> When a dark section crosses the viewport midline, the whole site chrome inverts to dark, letting section mood tint the UI.\n\n## 설치\n\n```\nnpx @askewly/design add scroll-theme-inversion\n```\n\nRegistry JSON: https://ui.askewly.com/r/scroll-theme-inversion.json\n\n## 코드 경로\n\n`registry/askewly/scroll-theme-inversion/scroll-theme-inversion.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/scroll-theme-inversion\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/scroll-theme-inversion.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"section-padding-collapse","title":"Section Padding Collapse","definition":"Adjacent interchangeable sections declare their padding so neighboring blocks do not double the rhythm at the seam.","install":"npx @askewly/design add section-padding-collapse","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/section-padding-collapse.md","keywords":["marketing","container"],"md":"# Section Padding Collapse\n\n> Adjacent interchangeable sections declare their padding so neighboring blocks do not double the rhythm at the seam.\n\n## 설치\n\n```\nnpx @askewly/design add section-padding-collapse\n```\n\nRegistry JSON: https://ui.askewly.com/r/section-padding-collapse.json\n\n## 코드 경로\n\n`registry/askewly/section-padding-collapse/section-padding-collapse.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/section-padding-collapse\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/section-padding-collapse.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"seed-deeplink-share","title":"Seed Deeplink Share","definition":"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.","install":"npx @askewly/design add seed-deeplink-share","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/seed-deeplink-share.md","keywords":["application-ui","number-input","button"],"md":"# Seed Deeplink Share\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add seed-deeplink-share\n```\n\nRegistry JSON: https://ui.askewly.com/r/seed-deeplink-share.json\n\n## 코드 경로\n\n`registry/askewly/seed-deeplink-share/seed-deeplink-share.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/seed-deeplink-share\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/seed-deeplink-share.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"shader-gradient-surface","title":"Shader Gradient Surface","definition":"A shader gradient surface gives a hero or brand section an animated organic color field computed per-frame on the GPU (Paper Shaders `MeshGradient`).","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/shader-gradient-surface.md","keywords":["marketing","animated-gradient-background","gradient-fill"],"md":"# Shader Gradient Surface\n\n> A shader gradient surface gives a hero or brand section an animated organic color field computed per-frame on the GPU (Paper Shaders `MeshGradient`).\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/shader-gradient-surface.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/shader-gradient-surface.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/shader-gradient-surface\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/shader-gradient-surface.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"shared-container-ladder","title":"Shared Container Ladder","definition":"Every section wrapper shares one horizontal rule — a single max-width and gutter ladder across breakpoints — so sections line up on one edge no matter how many kinds there are.","install":"npx @askewly/design add shared-container-ladder","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/shared-container-ladder.md","keywords":["layout","container","grid"],"md":"# Shared Container Ladder\n\n> Every section wrapper shares one horizontal rule — a single max-width and gutter ladder across breakpoints — so sections line up on one edge no matter how many kinds there are.\n\n## 설치\n\n```\nnpx @askewly/design add shared-container-ladder\n```\n\nRegistry JSON: https://ui.askewly.com/r/shared-container-ladder.json\n\n## 코드 경로\n\n`registry/askewly/shared-container-ladder/shared-container-ladder.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/shared-container-ladder\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/shared-container-ladder.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"shared-element-flip-transition","title":"Shared Element FLIP Transition","definition":"The clicked card flies into the next view's hero via a FLIP clone, keeping context unbroken across the page swap.","install":"npx @askewly/design add shared-element-flip-transition","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/shared-element-flip-transition.md","keywords":["navigation","transition"],"md":"# Shared Element FLIP Transition\n\n> The clicked card flies into the next view's hero via a FLIP clone, keeping context unbroken across the page swap.\n\n## 설치\n\n```\nnpx @askewly/design add shared-element-flip-transition\n```\n\nRegistry JSON: https://ui.askewly.com/r/shared-element-flip-transition.json\n\n## 코드 경로\n\n`registry/askewly/shared-element-flip-transition/shared-element-flip-transition.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/shared-element-flip-transition\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/shared-element-flip-transition.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"shipping-method-selector","title":"Shipping Method Selector","definition":"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.","install":"npx @askewly/design add shipping-method-selector","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/commerce/shipping-method-selector.md","keywords":["commerce","checkout-step","checkout-progress-header","payment-method-card","cart-summary"],"md":"# Shipping Method Selector\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add shipping-method-selector\n```\n\nRegistry JSON: https://ui.askewly.com/r/shipping-method-selector.json\n\n## 코드 경로\n\n`registry/askewly/shipping-method-selector/shipping-method-selector.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/shipping-method-selector\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/commerce/shipping-method-selector.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"showcase-card","title":"Showcase Card","definition":"A showcase card is a self-contained shell that proves an interaction capability rather than describing it: a header (icon, title, one-line copy) sits above a bounded demo region that runs a live, interactive product-interface behavior.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/showcase-card.md","keywords":["application-ui","card","hero"],"md":"# Showcase Card\n\n> A showcase card is a self-contained shell that proves an interaction capability rather than describing it: a header (icon, title, one-line copy) sits above a bounded demo region that runs a live, interactive product-interface behavior.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/showcase-card.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/showcase-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/showcase-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/showcase-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"sidebar-application-shell","title":"Sidebar Application Shell","definition":"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.","install":"npx @askewly/design add sidebar-application-shell","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/sidebar-application-shell.md","keywords":["layout","app-shell","sidebar-nav","collapsible-sidebar","sidebar-dashboard-layout"],"md":"# Sidebar Application Shell\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add sidebar-application-shell\n```\n\nRegistry JSON: https://ui.askewly.com/r/sidebar-application-shell.json\n\n## 코드 경로\n\n`registry/askewly/sidebar-application-shell/sidebar-application-shell.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/sidebar-application-shell\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/sidebar-application-shell.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"skeleton-card-loading","title":"Skeleton Card Loading","definition":"Skeleton card loading is the shape contract for the loading state itself: placeholder cards that preview the true structure of what will arrive — same layout, same count, same proportions — so the wait reads as \"your content is forming\" rather than \"something is spinning\".","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/skeleton-card-loading.md","keywords":["feedback","skeleton","error-state"],"md":"# Skeleton Card Loading\n\n> Skeleton card loading is the shape contract for the loading state itself: placeholder cards that preview the true structure of what will arrive — same layout, same count, same proportions — so the wait reads as \"your content is forming\" rather than \"something is spinning\".\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/feedback/skeleton-card-loading.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/skeleton-card-loading.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/skeleton-card-loading\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/skeleton-card-loading.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"sound-onboarding-gate","title":"Sound Onboarding Gate","definition":"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.","install":"npx @askewly/design add sound-onboarding-gate","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/sound-onboarding-gate.md","keywords":["marketing"],"md":"# Sound Onboarding Gate\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add sound-onboarding-gate\n```\n\nRegistry JSON: https://ui.askewly.com/r/sound-onboarding-gate.json\n\n## 코드 경로\n\n`registry/askewly/sound-onboarding-gate/sound-onboarding-gate.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/sound-onboarding-gate\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/sound-onboarding-gate.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"speed-sensitive-marquee","title":"Speed Sensitive Marquee","definition":"A looping logo strip that maps drag velocity and direction onto its flow, so visitors can grab the stream and play with it.","install":"npx @askewly/design add speed-sensitive-marquee","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/speed-sensitive-marquee.md","keywords":["marketing","marquee-row"],"md":"# Speed Sensitive Marquee\n\n> A looping logo strip that maps drag velocity and direction onto its flow, so visitors can grab the stream and play with it.\n\n## 설치\n\n```\nnpx @askewly/design add speed-sensitive-marquee\n```\n\nRegistry JSON: https://ui.askewly.com/r/speed-sensitive-marquee.json\n\n## 코드 경로\n\n`registry/askewly/speed-sensitive-marquee/speed-sensitive-marquee.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/speed-sensitive-marquee\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/speed-sensitive-marquee.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"spiral-star-field-hero","title":"Spiral Star Field Hero","definition":"A hero star field whose points sit on curved rails with density falloff, converge from a dispersed intro, and rotate by drag or arrow keys — with a still slot when WebGL is unavailable.","install":"npx @askewly/design add spiral-star-field-hero","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/spiral-star-field-hero.md","keywords":["marketing","hero"],"md":"# Spiral Star Field Hero\n\n> A hero star field whose points sit on curved rails with density falloff, converge from a dispersed intro, and rotate by drag or arrow keys — with a still slot when WebGL is unavailable.\n\n## 설치\n\n```\nnpx @askewly/design add spiral-star-field-hero\n```\n\nRegistry JSON: https://ui.askewly.com/r/spiral-star-field-hero.json\n\n## 코드 경로\n\n`registry/askewly/spiral-star-field-hero/spiral-star-field-hero.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/spiral-star-field-hero\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/spiral-star-field-hero.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"split-auth-layout","title":"Split Auth Layout","definition":"Two columns where the form comes first in DOM order and the brand panel folds beneath it rather than disappearing on narrow screens.","install":"npx @askewly/design add split-auth-layout","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/split-auth-layout.md","keywords":["layout","split-auth-layout","auth-card","login-page"],"md":"# Split Auth Layout\n\n> Two columns where the form comes first in DOM order and the brand panel folds beneath it rather than disappearing on narrow screens.\n\n## 설치\n\n```\nnpx @askewly/design add split-auth-layout\n```\n\nRegistry JSON: https://ui.askewly.com/r/split-auth-layout.json\n\n## 코드 경로\n\n`registry/askewly/split-auth-layout/split-auth-layout.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/split-auth-layout\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/split-auth-layout.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"split-tone-hero","title":"Split Tone Hero","definition":"Two-column hero whose background splits into two tones at the same line as the grid, with a diagonal-corner media frame and a stacked mobile fallback.","install":"npx @askewly/design add split-tone-hero","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/split-tone-hero.md","keywords":["marketing","hero"],"md":"# Split Tone Hero\n\n> Two-column hero whose background splits into two tones at the same line as the grid, with a diagonal-corner media frame and a stacked mobile fallback.\n\n## 설치\n\n```\nnpx @askewly/design add split-tone-hero\n```\n\nRegistry JSON: https://ui.askewly.com/r/split-tone-hero.json\n\n## 코드 경로\n\n`registry/askewly/split-tone-hero/split-tone-hero.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/split-tone-hero\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/split-tone-hero.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"spotlight-mask-reveal","title":"Spotlight Mask Reveal","definition":"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.","install":"npx @askewly/design add spotlight-mask-reveal","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/spotlight-mask-reveal.md","keywords":["marketing","clipping-mask","hover-reveal"],"md":"# Spotlight Mask Reveal\n\n> 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.\n\n## 사용 규칙\n\n- 언제 쓰나 — 마우스를 따라 다니는 손전등 원으로 숨은 내용을 탐색하게 하고 클릭으로 전체를 열 때\n- 한 화면에 몇 개 — 화면당 1개\n- 안 쓰는 곳 — 키보드·터치만 쓰는 화면에서 클릭 경로가 없을 때, 번짐 구간에서 글자 대비를 못 지키는 본문\n- 같이 쓰는 것 — 마스크 변수를 움직이는 GSAP 트윈, 클릭으로 전체 공개하는 버튼 영역\n- 한계 — 전체 공개 뒤에는 이동 핸들러가 멈춘다, 모션 줄이기에서는 손전등을 빼고 클릭 공개만 남는다\n\n## 설치\n\n```\nnpx @askewly/design add spotlight-mask-reveal\n```\n\nRegistry JSON: https://ui.askewly.com/r/spotlight-mask-reveal.json\n\n## 코드 경로\n\n`registry/askewly/spotlight-mask-reveal/spotlight-mask-reveal.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/spotlight-mask-reveal\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/spotlight-mask-reveal.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"spring-drag-snap-card","title":"Spring Drag Snap Card","definition":"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.","install":"npx @askewly/design add spring-drag-snap-card","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/spring-drag-snap-card.md","keywords":["application-ui","drag-state","card"],"md":"# Spring Drag Snap Card\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add spring-drag-snap-card\n```\n\nRegistry JSON: https://ui.askewly.com/r/spring-drag-snap-card.json\n\n## 코드 경로\n\n`registry/askewly/spring-drag-snap-card/spring-drag-snap-card.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/spring-drag-snap-card\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/spring-drag-snap-card.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"staggered-entrance-group","title":"Staggered Entrance Group","definition":"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.","install":"npx @askewly/design add staggered-entrance-group","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/staggered-entrance-group.md","keywords":["application-ui","fade-transition"],"md":"# Staggered Entrance Group\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add staggered-entrance-group\n```\n\nRegistry JSON: https://ui.askewly.com/r/staggered-entrance-group.json\n\n## 코드 경로\n\n`registry/askewly/staggered-entrance-group/staggered-entrance-group.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/staggered-entrance-group\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/staggered-entrance-group.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"stat-summary-grid","title":"Stat Summary Grid","definition":"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.","install":"npx @askewly/design add stat-summary-grid","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/stat-summary-grid.md","keywords":["data-display","stat-list","dashboard-grid","status-indicator"],"md":"# Stat Summary Grid\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add stat-summary-grid\n```\n\nRegistry JSON: https://ui.askewly.com/r/stat-summary-grid.json\n\n## 코드 경로\n\n`registry/askewly/stat-summary-grid/stat-summary-grid.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/stat-summary-grid\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/stat-summary-grid.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"sticky-intro-faq","title":"Sticky Intro FAQ","definition":"Two-column FAQ with an intro pinned while tinted question bars scroll past; answers expand in about 400ms as the plus turns into a cross.","install":"npx @askewly/design add sticky-intro-faq","has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/sticky-intro-faq.md","keywords":["marketing","faq-list","accordion","sticky-scroll-section"],"md":"# Sticky Intro FAQ\n\n> Two-column FAQ with an intro pinned while tinted question bars scroll past; answers expand in about 400ms as the plus turns into a cross.\n\n## 사용 규칙\n\n- 언제 쓰나 — 질문이 길게 이어질 때 왼쪽 소개를 고정하고 오른쪽 질문 막대를 스크롤시킬 때\n- 한 화면에 몇 개 — 페이지당 1개\n- 안 쓰는 곳 — 992px 미만(고정하면 질문을 가린다), 질문이 대여섯 개 이하인 짧은 목록\n- 같이 쓰는 것 — grid-rows-accordion 펼침 기법, 소개 영역의 버튼\n- 한계 — 질문·답은 자리표시자다, 높이를 자바스크립트로 재서 움직이는 방식은 쓰지 않는다\n\n## 설치\n\n```\nnpx @askewly/design add sticky-intro-faq\n```\n\nRegistry JSON: https://ui.askewly.com/r/sticky-intro-faq.json\n\n## 코드 경로\n\n`registry/askewly/sticky-intro-faq/sticky-intro-faq.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/sticky-intro-faq\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/sticky-intro-faq.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"sticky-steps","title":"Sticky Steps Scrollytelling","definition":"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.","install":"npx @askewly/design add sticky-steps","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Sticky Steps Scrollytelling\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add sticky-steps\n```\n\nRegistry JSON: https://ui.askewly.com/r/sticky-steps.json\n\n## 코드 경로\n\n`registry/askewly/sticky-steps/sticky-steps.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"studio-artifact-panel","title":"Studio Artifact Panel","definition":"A 3×3 grid of artifact-kind tiles tinted by group with icon and label carrying identity, an artifact list whose subtitle is source count plus freshness, a sticky add-note action, and a detail mode with breadcrumb, source-count link and feedback pair.","install":"npx @askewly/design add studio-artifact-panel","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/studio-artifact-panel.md","keywords":["application-ui","grid","card","floating-action-button","badge"],"md":"# Studio Artifact Panel\n\n> A 3×3 grid of artifact-kind tiles tinted by group with icon and label carrying identity, an artifact list whose subtitle is source count plus freshness, a sticky add-note action, and a detail mode with breadcrumb, source-count link and feedback pair.\n\n## 설치\n\n```\nnpx @askewly/design add studio-artifact-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/studio-artifact-panel.json\n\n## 코드 경로\n\n`registry/askewly/studio-artifact-panel/studio-artifact-panel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/studio-artifact-panel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/studio-artifact-panel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"studio-finder-split","title":"Studio Finder Split","definition":"Two-state location finder box: choose a city, then filter studio cards beside a map slot; a booking button on wide screens and whole-card tap on narrow ones.","install":"npx @askewly/design add studio-finder-split","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/studio-finder-split.md","keywords":["navigation","office-location-card","map-marker","search-field"],"md":"# Studio Finder Split\n\n> Two-state location finder box: choose a city, then filter studio cards beside a map slot; a booking button on wide screens and whole-card tap on narrow ones.\n\n## 설치\n\n```\nnpx @askewly/design add studio-finder-split\n```\n\nRegistry JSON: https://ui.askewly.com/r/studio-finder-split.json\n\n## 코드 경로\n\n`registry/askewly/studio-finder-split/studio-finder-split.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/studio-finder-split\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/studio-finder-split.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"svg-stroke-assembly-loader","title":"SVG Stroke Assembly Loader","definition":"Scattered logo strokes assemble in shuffled stagger order while a percent counter runs, so loading progress doubles as brand imprint.","install":"npx @askewly/design add svg-stroke-assembly-loader","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/svg-stroke-assembly-loader.md","keywords":["feedback","loading-state","logo"],"md":"# SVG Stroke Assembly Loader\n\n> Scattered logo strokes assemble in shuffled stagger order while a percent counter runs, so loading progress doubles as brand imprint.\n\n## 설치\n\n```\nnpx @askewly/design add svg-stroke-assembly-loader\n```\n\nRegistry JSON: https://ui.askewly.com/r/svg-stroke-assembly-loader.json\n\n## 코드 경로\n\n`registry/askewly/svg-stroke-assembly-loader/svg-stroke-assembly-loader.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/svg-stroke-assembly-loader\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/svg-stroke-assembly-loader.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"swipe-action-row-pattern","title":"Swipe Action Row","definition":"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.","install":"npx @askewly/design add swipe-action-row-pattern","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/swipe-action-row-pattern.md","keywords":["data-display","swipe-action-row","swipe-to-delete","swipe-action"],"md":"# Swipe Action Row\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add swipe-action-row-pattern\n```\n\nRegistry JSON: https://ui.askewly.com/r/swipe-action-row-pattern.json\n\n## 코드 경로\n\n`registry/askewly/swipe-action-row-pattern/swipe-action-row-pattern.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/swipe-action-row-pattern\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/swipe-action-row-pattern.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"tabbed-progress-hero-carousel","title":"Tabbed Progress Hero Carousel","definition":"풀폭 히어로 한 장에 소식 4개를 돌려 보여 주는 블록.","install":null,"has_usage_rules":true,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/tabbed-progress-hero-carousel.md","keywords":["marketing","carousel","tabs","hero","progress-bar"],"md":"# Tabbed Progress Hero Carousel\n\n> 풀폭 히어로 한 장에 소식 4개를 돌려 보여 주는 블록.\n\n## 사용 규칙\n\n- 언제 쓰나 — 첫 화면에서 서로 독립된 소식·제품 3~5개를 한 자리에 번갈아 보여 줄 때.\n- 한 화면에 몇 개 — 하나. 페이지 맨 위 한 번만.\n- 안 쓰는 곳 — 한 가지 메시지가 핵심인 랜딩, 본문 중간 구간, 슬라이드가 6개를 넘는 경우.\n- 같이 쓰는 것 — 바로 아래 `page-intro` 류 인트로, 토큰 `--scrim-from/--scrim-to`·`--slot-`.\n- 한계* — 사진 없이는 톤 차이로만 전환을 보여 준다. 호버 정지가 없어 읽는 속도가 느린 사용자에게 불리하니 긴 문장에는 맞지 않는다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/tabbed-progress-hero-carousel.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/tabbed-progress-hero-carousel.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/tabbed-progress-hero-carousel\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/tabbed-progress-hero-carousel.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"team-member-row","title":"Team Member Row","definition":"A row built for operating on one person: every control carries that member's name in its accessible name, and status is words before it is a dot.","install":"npx @askewly/design add team-member-row","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/team-member-row.md","keywords":["data-display","team-member-row","avatar-stack","profile-card","role-badge"],"md":"# Team Member Row\n\n> A row built for operating on one person: every control carries that member's name in its accessible name, and status is words before it is a dot.\n\n## 설치\n\n```\nnpx @askewly/design add team-member-row\n```\n\nRegistry JSON: https://ui.askewly.com/r/team-member-row.json\n\n## 코드 경로\n\n`registry/askewly/team-member-row/team-member-row.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/team-member-row\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/team-member-row.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"terminal-demo-panel","title":"Terminal Demo Panel","definition":"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.","install":"npx @askewly/design add terminal-demo-panel","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Terminal Demo Panel\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add terminal-demo-panel\n```\n\nRegistry JSON: https://ui.askewly.com/r/terminal-demo-panel.json\n\n## 코드 경로\n\n`registry/askewly/terminal-demo-panel/terminal-demo-panel.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"text-explosion-physics","title":"Text Explosion Physics","definition":"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.","install":"npx @askewly/design add text-explosion-physics","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/text-explosion-physics.md","keywords":["marketing","typography"],"md":"# Text Explosion Physics\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add text-explosion-physics\n```\n\nRegistry JSON: https://ui.askewly.com/r/text-explosion-physics.json\n\n## 코드 경로\n\n`registry/askewly/text-explosion-physics/text-explosion-physics.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/text-explosion-physics\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/text-explosion-physics.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"topbar-command-search","title":"Topbar Command Search","definition":"A collapsed topbar icon that expands into a full-width search input with a live suggestion popover underneath it.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/topbar-command-search.md","keywords":["navigation","command-palette","autocomplete"],"md":"# Topbar Command Search\n\n> A collapsed topbar icon that expands into a full-width search input with a live suggestion popover underneath it.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/navigation/topbar-command-search.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/topbar-search.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/topbar-command-search\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/topbar-command-search.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"transparent-chrome-header","title":"Transparent Chrome Header","definition":"A header that never paints a background; a 112px blur layer beneath it is visible over the hero and fades out in 0.2s once scrolling starts.","install":"npx @askewly/design add transparent-chrome-header","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/transparent-chrome-header.md","keywords":["navigation","sticky-header","backdrop-blur","global-header"],"md":"# Transparent Chrome Header\n\n> A header that never paints a background; a 112px blur layer beneath it is visible over the hero and fades out in 0.2s once scrolling starts.\n\n## 설치\n\n```\nnpx @askewly/design add transparent-chrome-header\n```\n\nRegistry JSON: https://ui.askewly.com/r/transparent-chrome-header.json\n\n## 코드 경로\n\n`registry/askewly/transparent-chrome-header/transparent-chrome-header.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/transparent-chrome-header\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/transparent-chrome-header.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"twinkle-star-field","title":"Twinkle Star Field","definition":"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.","install":"npx @askewly/design add twinkle-star-field","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/twinkle-star-field.md","keywords":["marketing","hero"],"md":"# Twinkle Star Field\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add twinkle-star-field\n```\n\nRegistry JSON: https://ui.askewly.com/r/twinkle-star-field.json\n\n## 코드 경로\n\n`registry/askewly/twinkle-star-field/twinkle-star-field.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/twinkle-star-field\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/twinkle-star-field.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"two-mode-footer-nav","title":"Two-Mode Footer Nav","definition":"The full navigation tree in the footer, written once in markup and driven as desktop columns or a mobile accordion from the same DOM.","install":"npx @askewly/design add two-mode-footer-nav","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/two-mode-footer-nav.md","keywords":["navigation","accordion","navigation-menu"],"md":"# Two-Mode Footer Nav\n\n> The full navigation tree in the footer, written once in markup and driven as desktop columns or a mobile accordion from the same DOM.\n\n## 설치\n\n```\nnpx @askewly/design add two-mode-footer-nav\n```\n\nRegistry JSON: https://ui.askewly.com/r/two-mode-footer-nav.json\n\n## 코드 경로\n\n`registry/askewly/two-mode-footer-nav/two-mode-footer-nav.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/two-mode-footer-nav\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/two-mode-footer-nav.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"typing-headline","title":"Typing Headline","definition":"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.","install":"npx @askewly/design add typing-headline","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Typing Headline\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add typing-headline\n```\n\nRegistry JSON: https://ui.askewly.com/r/typing-headline.json\n\n## 코드 경로\n\n`registry/askewly/typing-headline/typing-headline.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"underline-bridge-sweep","title":"Underline Bridge Sweep","definition":"A hero headline whose emphasis underlines sweep in alternating directions and on staggered offsets while the characters are still arriving.","install":"npx @askewly/design add underline-bridge-sweep","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/underline-bridge-sweep.md","keywords":["marketing","typography","highlight-stroke"],"md":"# Underline Bridge Sweep\n\n> A hero headline whose emphasis underlines sweep in alternating directions and on staggered offsets while the characters are still arriving.\n\n## 설치\n\n```\nnpx @askewly/design add underline-bridge-sweep\n```\n\nRegistry JSON: https://ui.askewly.com/r/underline-bridge-sweep.json\n\n## 코드 경로\n\n`registry/askewly/underline-bridge-sweep/underline-bridge-sweep.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/underline-bridge-sweep\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/underline-bridge-sweep.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"upgrade-prompt","title":"Upgrade Prompt","definition":"A preview of the locked feature above a badge that names both the current plan and the required one, so the block never reads as an error.","install":"npx @askewly/design add upgrade-prompt","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/feedback/upgrade-prompt.md","keywords":["feedback","upgrade-prompt","locked-state","permission-state","plan-card"],"md":"# Upgrade Prompt\n\n> A preview of the locked feature above a badge that names both the current plan and the required one, so the block never reads as an error.\n\n## 설치\n\n```\nnpx @askewly/design add upgrade-prompt\n```\n\nRegistry JSON: https://ui.askewly.com/r/upgrade-prompt.json\n\n## 코드 경로\n\n`registry/askewly/upgrade-prompt/upgrade-prompt.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/upgrade-prompt\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/feedback/upgrade-prompt.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"upload-dropzone","title":"Upload Dropzone","definition":"A drop area with an always-visible file picker beside it, so the drag path is the extra one and the pointer path is the contract.","install":"npx @askewly/design add upload-dropzone","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/forms/upload-dropzone.md","keywords":["forms","upload-dropzone","file-upload","drop-target"],"md":"# Upload Dropzone\n\n> A drop area with an always-visible file picker beside it, so the drag path is the extra one and the pointer path is the contract.\n\n## 설치\n\n```\nnpx @askewly/design add upload-dropzone\n```\n\nRegistry JSON: https://ui.askewly.com/r/upload-dropzone.json\n\n## 코드 경로\n\n`registry/askewly/upload-dropzone/upload-dropzone.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/upload-dropzone\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/forms/upload-dropzone.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"velocity-driven-particle-glow","title":"Velocity Driven Particle Glow","definition":"Velocity driven particle glow maps how fast a grain is moving straight onto how bright it is.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/velocity-driven-particle-glow.md","keywords":["marketing","hero"],"md":"# Velocity Driven Particle Glow\n\n> Velocity driven particle glow maps how fast a grain is moving straight onto how bright it is.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/velocity-driven-particle-glow.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/components/velocity-driven-particle-glow.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/velocity-driven-particle-glow\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/velocity-driven-particle-glow.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"versioned-docs-switcher-navbar-sidebar-swap","title":"Versioned Docs Switcher Navbar Sidebar Swap","definition":"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.","install":"npx @askewly/design add versioned-docs-switcher-navbar-sidebar-swap","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/navigation/versioned-docs-switcher-navbar-sidebar-swap.md","keywords":["navigation","versioned-docs-switcher"],"md":"# Versioned Docs Switcher Navbar Sidebar Swap\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add versioned-docs-switcher-navbar-sidebar-swap\n```\n\nRegistry JSON: https://ui.askewly.com/r/versioned-docs-switcher-navbar-sidebar-swap.json\n\n## 코드 경로\n\n`registry/askewly/versioned-docs-switcher-navbar-sidebar-swap/versioned-docs-switcher-navbar-sidebar-swap.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/versioned-docs-switcher-navbar-sidebar-swap\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/navigation/versioned-docs-switcher-navbar-sidebar-swap.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"vertical-horizontal-scroll","title":"Vertical to Horizontal Scroll","definition":"A vertical scroll segment remapped into a horizontal film reel while pinned, creating scene-change rhythm inside one continuous scroll.","install":"npx @askewly/design add vertical-horizontal-scroll","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/vertical-horizontal-scroll.md","keywords":["marketing","sticky-scroll-section"],"md":"# Vertical to Horizontal Scroll\n\n> A vertical scroll segment remapped into a horizontal film reel while pinned, creating scene-change rhythm inside one continuous scroll.\n\n## 설치\n\n```\nnpx @askewly/design add vertical-horizontal-scroll\n```\n\nRegistry JSON: https://ui.askewly.com/r/vertical-horizontal-scroll.json\n\n## 코드 경로\n\n`registry/askewly/vertical-horizontal-scroll/vertical-horizontal-scroll.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/vertical-horizontal-scroll\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/vertical-horizontal-scroll.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-horizontal-bar-chart","title":"Video Horizontal Bar Chart","definition":"항목 3개를 가로 막대로 비교하는 카드.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-horizontal-bar-chart.md","keywords":["data-display","bar-chart-card"],"md":"# Video Horizontal Bar Chart\n\n> 항목 3개를 가로 막대로 비교하는 카드.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-horizontal-bar-chart.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/horizontal-bar-chart.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-horizontal-bar-chart\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-horizontal-bar-chart.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-line-chart","title":"Video Line Chart","definition":"7점 추세선.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-line-chart.md","keywords":["data-display","line-chart-card"],"md":"# Video Line Chart\n\n> 7점 추세선.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-line-chart.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/line-chart.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-line-chart\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-line-chart.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-location-lower-third","title":"Video Location Lower Third","definition":"행사 장소를 핀과 함께 소개하는 오버레이.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/video-location-lower-third.md","keywords":["overlays"],"md":"# Video Location Lower Third\n\n> 행사 장소를 핀과 함께 소개하는 오버레이.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/video-location-lower-third.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/location-lower-third.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-location-lower-third\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/video-location-lower-third.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-name-lower-third","title":"Video Name Lower Third","definition":"화자·게스트를 화면 아래 3분의 1 지점에서 소개하고 스스로 물러나는 오버레이.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/overlays/video-name-lower-third.md","keywords":["overlays"],"md":"# Video Name Lower Third\n\n> 화자·게스트를 화면 아래 3분의 1 지점에서 소개하고 스스로 물러나는 오버레이.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/overlays/video-name-lower-third.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/name-lower-third.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-name-lower-third\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/overlays/video-name-lower-third.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-number-counter","title":"Video Number Counter","definition":"시작값에서 목표값까지 세어 올라가는 숫자 하나.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-number-counter.md","keywords":["data-display","number-ticker"],"md":"# Video Number Counter\n\n> 시작값에서 목표값까지 세어 올라가는 숫자 하나.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-number-counter.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/number-counter.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-number-counter\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-number-counter.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-on-screen-messages","title":"Video On-Screen Messages","definition":"대화 3턴을 화면에서 재연한다.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/marketing/video-on-screen-messages.md","keywords":["marketing","chat-bubble","chat-message"],"md":"# Video On-Screen Messages\n\n> 대화 3턴을 화면에서 재연한다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/marketing/video-on-screen-messages.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/on-screen-messages.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-on-screen-messages\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/marketing/video-on-screen-messages.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-pie-chart","title":"Video Pie Chart","definition":"4항목 구성비.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-pie-chart.md","keywords":["data-display","pie-chart-card"],"md":"# Video Pie Chart\n\n> 4항목 구성비.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-pie-chart.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/pie-chart.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-pie-chart\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-pie-chart.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"video-vertical-bar-chart","title":"Video Vertical Bar Chart","definition":"항목 3개를 세로 막대로 비교한다.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/data-display/video-vertical-bar-chart.md","keywords":["data-display","bar-chart-card"],"md":"# Video Vertical Bar Chart\n\n> 항목 3개를 세로 막대로 비교한다.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/data-display/video-vertical-bar-chart.md\n\n## 코드 경로\n\n`examples/ui-vocabulary-site/src/video/elements/vertical-bar-chart.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/video-vertical-bar-chart\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/data-display/video-vertical-bar-chart.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"view-transition-language-crossfade","title":"View Transition Language Crossfade","definition":"When the user switches UI language (or any whole-surface content swap: locale, theme preview, A/B variant), re-rendering in place makes every line of text pop simultaneously — jarring and hard to trust.","install":null,"has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/view-transition-language-crossfade.md","keywords":["application-ui","fade-transition","transition"],"md":"# View Transition Language Crossfade\n\n> When the user switches UI language (or any whole-surface content swap: locale, theme preview, A/B variant), re-rendering in place makes every line of text pop simultaneously — jarring and hard to trust.\n\n## 설치\n\n설치 명령이 없다(레지스트리 미등재 또는 소스 임베드 제외 자산). recipe 를 읽고 짓는다: https://ui.askewly.com/llms/recipes/application-ui/view-transition-language-crossfade.md\n\n## 코드 경로\n\n`pending`\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/view-transition-language-crossfade.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"walkable-formal-garden","title":"Walkable Formal Garden","definition":"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.","install":"npx @askewly/design add walkable-formal-garden","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/walkable-formal-garden.md","keywords":["application-ui","skeleton","error-boundary","reduced-motion"],"md":"# Walkable Formal Garden\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add walkable-formal-garden\n```\n\nRegistry JSON: https://ui.askewly.com/r/walkable-formal-garden.json\n\n## 코드 경로\n\n`registry/askewly/walkable-formal-garden/walkable-formal-garden.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/walkable-formal-garden\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/walkable-formal-garden.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"window-edge-affordance","title":"Window Edge Affordance","definition":"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.","install":"npx @askewly/design add window-edge-affordance","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/window-edge-affordance.md","keywords":["application-ui","resizable-panel","floating-panel"],"md":"# Window Edge Affordance\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add window-edge-affordance\n```\n\nRegistry JSON: https://ui.askewly.com/r/window-edge-affordance.json\n\n## 코드 경로\n\n`registry/askewly/window-edge-affordance/window-edge-affordance.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/window-edge-affordance\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/window-edge-affordance.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"window-placement-cascade","title":"Window Placement Cascade","definition":"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.","install":"npx @askewly/design add window-placement-cascade","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/layout/window-placement-cascade.md","keywords":["layout","floating-panel"],"md":"# Window Placement Cascade\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add window-placement-cascade\n```\n\nRegistry JSON: https://ui.askewly.com/r/window-placement-cascade.json\n\n## 코드 경로\n\n`registry/askewly/window-placement-cascade/window-placement-cascade.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/window-placement-cascade\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/layout/window-placement-cascade.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"window-stack-focus","title":"Window Stack Focus","definition":"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.","install":"npx @askewly/design add window-stack-focus","has_usage_rules":false,"recipe_url":"https://ui.askewly.com/llms/recipes/application-ui/window-stack-focus.md","keywords":["application-ui","z-index","stacking-context","floating-panel"],"md":"# Window Stack Focus\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add window-stack-focus\n```\n\nRegistry JSON: https://ui.askewly.com/r/window-stack-focus.json\n\n## 코드 경로\n\n`registry/askewly/window-stack-focus/window-stack-focus.tsx`\n\n## 데모\n\nhttps://ui.askewly.com/effects/window-stack-focus\n\n## Recipe 전문\n\nhttps://ui.askewly.com/llms/recipes/application-ui/window-stack-focus.md\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"},{"id":"zigzag-story-section","title":"Zigzag Story Section","definition":"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.","install":"npx @askewly/design add zigzag-story-section","has_usage_rules":false,"recipe_url":null,"keywords":[],"md":"# Zigzag Story Section\n\n> 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.\n\n## 설치\n\n```\nnpx @askewly/design add zigzag-story-section\n```\n\nRegistry JSON: https://ui.askewly.com/r/zigzag-story-section.json\n\n## 코드 경로\n\n`registry/askewly/zigzag-story-section/zigzag-story-section.tsx`\n\nGenerated by scripts/generate-asset-md.mjs — do not edit by hand.\n"}]