[
  {
    "id": "aurora-ribbon-field--editorial-ink",
    "name": "Editorial Ink Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--luminous-grid",
    "name": "Luminous Grid Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--soft-material",
    "name": "Soft Material Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--liquid-chrome",
    "name": "Liquid Chrome Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--swiss-signal",
    "name": "Swiss Signal Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--atmospheric-film",
    "name": "Atmospheric Film Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--neo-industrial",
    "name": "Neo Industrial Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--botanical-system",
    "name": "Botanical System Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--playful-plastic",
    "name": "Playful Plastic Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--monochrome-atelier",
    "name": "Monochrome Atelier Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--retro-terminal",
    "name": "Retro Terminal Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "aurora-ribbon-field--spatial-glass",
    "name": "Spatial Glass Aurora Ribbon Field",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "Layered ribbons bend through a responsive ambient color field. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS conic gradients, masks, transforms, and an optional pointer spring. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "brand hero; launch page; premium empty state",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; aria-hidden; static reduced-motion frame",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "dense dashboards; low-contrast brand palettes",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#aurora-ribbon-field--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--editorial-ink",
    "name": "Editorial Ink Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--luminous-grid",
    "name": "Luminous Grid Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--soft-material",
    "name": "Soft Material Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--liquid-chrome",
    "name": "Liquid Chrome Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--swiss-signal",
    "name": "Swiss Signal Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--atmospheric-film",
    "name": "Atmospheric Film Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--neo-industrial",
    "name": "Neo Industrial Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--botanical-system",
    "name": "Botanical System Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--playful-plastic",
    "name": "Playful Plastic Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--monochrome-atelier",
    "name": "Monochrome Atelier Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--retro-terminal",
    "name": "Retro Terminal Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactive-dot-lattice--spatial-glass",
    "name": "Spatial Glass Reactive Dot Lattice",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "A dot grid locally bends, brightens, or repels around input. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS radial gradients or canvas with a capped pointer influence radius. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "technical hero; developer product; interactive section break",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; touch fallback; reduced-motion static grid",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "text-heavy surfaces; continuous low-power mobile use",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactive-dot-lattice--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--editorial-ink",
    "name": "Editorial Ink Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--luminous-grid",
    "name": "Luminous Grid Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--soft-material",
    "name": "Soft Material Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--liquid-chrome",
    "name": "Liquid Chrome Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--swiss-signal",
    "name": "Swiss Signal Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--atmospheric-film",
    "name": "Atmospheric Film Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--neo-industrial",
    "name": "Neo Industrial Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--botanical-system",
    "name": "Botanical System Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--playful-plastic",
    "name": "Playful Plastic Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--monochrome-atelier",
    "name": "Monochrome Atelier Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--retro-terminal",
    "name": "Retro Terminal Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "noise-light-mesh--spatial-glass",
    "name": "Spatial Glass Noise-Light Mesh",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "Soft light pools drift beneath a restrained grain surface. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Layered radial gradients, blend modes, and a tiny generated noise tile. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "luxury hero; editorial cover; calm product page",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative; preserve text contrast; static by default",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "highly patterned brand systems",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#noise-light-mesh--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--editorial-ink",
    "name": "Editorial Ink Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--luminous-grid",
    "name": "Luminous Grid Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--soft-material",
    "name": "Soft Material Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--liquid-chrome",
    "name": "Liquid Chrome Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--swiss-signal",
    "name": "Swiss Signal Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--atmospheric-film",
    "name": "Atmospheric Film Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--neo-industrial",
    "name": "Neo Industrial Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--botanical-system",
    "name": "Botanical System Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--playful-plastic",
    "name": "Playful Plastic Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--monochrome-atelier",
    "name": "Monochrome Atelier Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--retro-terminal",
    "name": "Retro Terminal Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "topographic-pulse-map--spatial-glass",
    "name": "Spatial Glass Topographic Pulse Map",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "Contour lines carry a slow signal pulse through a section. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Procedural SVG paths, stroke-dash animation, and tokenized line density. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "geospatial product; infrastructure; process storytelling",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; reduced-motion removes pulse",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "organic lifestyle brands without a mapping metaphor",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#topographic-pulse-map--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--editorial-ink",
    "name": "Editorial Ink Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 83,
    "novelty_score": 88,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--luminous-grid",
    "name": "Luminous Grid Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--soft-material",
    "name": "Soft Material Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 83,
    "novelty_score": 88,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--liquid-chrome",
    "name": "Liquid Chrome Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--swiss-signal",
    "name": "Swiss Signal Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 83,
    "novelty_score": 88,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--atmospheric-film",
    "name": "Atmospheric Film Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--neo-industrial",
    "name": "Neo Industrial Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--botanical-system",
    "name": "Botanical System Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--playful-plastic",
    "name": "Playful Plastic Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 83,
    "novelty_score": 88,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--monochrome-atelier",
    "name": "Monochrome Atelier Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 83,
    "novelty_score": 88,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--retro-terminal",
    "name": "Retro Terminal Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "particle-constellation--spatial-glass",
    "name": "Spatial Glass Particle Constellation",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "Sparse points form temporary relationships around meaningful content. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Canvas particles with a hard density cap and proximity-based lines. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "network product; AI product; community story",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "decorative canvas; pause offscreen; static reduced-motion poster",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "budget devices; pages already using WebGL",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-constellation--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--editorial-ink",
    "name": "Editorial Ink Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--luminous-grid",
    "name": "Luminous Grid Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--soft-material",
    "name": "Soft Material Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--liquid-chrome",
    "name": "Liquid Chrome Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--swiss-signal",
    "name": "Swiss Signal Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--atmospheric-film",
    "name": "Atmospheric Film Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--neo-industrial",
    "name": "Neo Industrial Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--botanical-system",
    "name": "Botanical System Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--playful-plastic",
    "name": "Playful Plastic Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--monochrome-atelier",
    "name": "Monochrome Atelier Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--retro-terminal",
    "name": "Retro Terminal Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "liquid-lens-field--spatial-glass",
    "name": "Spatial Glass Liquid Lens Field",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "Translucent lenses magnify and distort a branded color field. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS backdrop filters and masks with an optional SVG displacement map. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "beauty; creative technology; campaign hero",
    "dependencies": "css; optional-svg-filter",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe fallback without backdrop-filter",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "large low-end mobile surfaces; strict utilitarian products",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-lens-field--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "kinetic-mask-heading--editorial-ink",
    "name": "Editorial Ink Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--luminous-grid",
    "name": "Luminous Grid Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--soft-material",
    "name": "Soft Material Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--liquid-chrome",
    "name": "Liquid Chrome Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--swiss-signal",
    "name": "Swiss Signal Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--atmospheric-film",
    "name": "Atmospheric Film Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--neo-industrial",
    "name": "Neo Industrial Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--botanical-system",
    "name": "Botanical System Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--playful-plastic",
    "name": "Playful Plastic Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--monochrome-atelier",
    "name": "Monochrome Atelier Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--retro-terminal",
    "name": "Retro Terminal Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "kinetic-mask-heading--spatial-glass",
    "name": "Spatial Glass Kinetic Mask Heading",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "Display text reveals through directional masks tied to reading rhythm. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Split semantic lines, clip-path masks, and transform-only animation. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "hero headline; campaign statement; chapter opening",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic heading; visual duplicates aria-hidden",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "long localized copy; dense application headings",
    "impact": "signature",
    "quality_score": 80,
    "novelty_score": 86,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#kinetic-mask-heading--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--editorial-ink",
    "name": "Editorial Ink Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Variable-font axis interpolation with a measured stagger. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--luminous-grid",
    "name": "Luminous Grid Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Variable-font axis interpolation with a measured stagger. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--soft-material",
    "name": "Soft Material Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Variable-font axis interpolation with a measured stagger. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--liquid-chrome",
    "name": "Liquid Chrome Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Variable-font axis interpolation with a measured stagger. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--swiss-signal",
    "name": "Swiss Signal Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Variable-font axis interpolation with a measured stagger. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--atmospheric-film",
    "name": "Atmospheric Film Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Variable-font axis interpolation with a measured stagger. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--neo-industrial",
    "name": "Neo Industrial Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Variable-font axis interpolation with a measured stagger. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--botanical-system",
    "name": "Botanical System Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Variable-font axis interpolation with a measured stagger. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--playful-plastic",
    "name": "Playful Plastic Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Variable-font axis interpolation with a measured stagger. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--monochrome-atelier",
    "name": "Monochrome Atelier Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Variable-font axis interpolation with a measured stagger. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--retro-terminal",
    "name": "Retro Terminal Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Variable-font axis interpolation with a measured stagger. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "variable-font-wave--spatial-glass",
    "name": "Spatial Glass Variable Font Wave",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "Characters breathe through weight, width, or slant axes in sequence. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Variable-font axis interpolation with a measured stagger. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "type-led identity; music; culture; creative portfolio",
    "dependencies": "variable-font; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "semantic text remains intact; reduced-motion uses final axes",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "fonts without suitable axes; body copy",
    "impact": "signature",
    "quality_score": 80,
    "novelty_score": 86,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#variable-font-wave--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--editorial-ink",
    "name": "Editorial Ink Path Marquee",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--luminous-grid",
    "name": "Luminous Grid Path Marquee",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--soft-material",
    "name": "Soft Material Path Marquee",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--liquid-chrome",
    "name": "Liquid Chrome Path Marquee",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--swiss-signal",
    "name": "Swiss Signal Path Marquee",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--atmospheric-film",
    "name": "Atmospheric Film Path Marquee",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--neo-industrial",
    "name": "Neo Industrial Path Marquee",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--botanical-system",
    "name": "Botanical System Path Marquee",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--playful-plastic",
    "name": "Playful Plastic Path Marquee",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--monochrome-atelier",
    "name": "Monochrome Atelier Path Marquee",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--retro-terminal",
    "name": "Retro Terminal Path Marquee",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "path-marquee--spatial-glass",
    "name": "Spatial Glass Path Marquee",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "A short phrase follows a curved route around media or a focal object. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "SVG textPath or transform-following spans with loop boundaries. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "badge; editorial media; product orbit annotation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "provide one hidden plain-text equivalent; pause on reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "critical instructions; long copy",
    "impact": "supporting",
    "quality_score": 81,
    "novelty_score": 83,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#path-marquee--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--editorial-ink",
    "name": "Editorial Ink Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Time-bounded character substitution rendered separately from source text. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--luminous-grid",
    "name": "Luminous Grid Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Time-bounded character substitution rendered separately from source text. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--soft-material",
    "name": "Soft Material Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Time-bounded character substitution rendered separately from source text. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--liquid-chrome",
    "name": "Liquid Chrome Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Time-bounded character substitution rendered separately from source text. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--swiss-signal",
    "name": "Swiss Signal Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Time-bounded character substitution rendered separately from source text. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--atmospheric-film",
    "name": "Atmospheric Film Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Time-bounded character substitution rendered separately from source text. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--neo-industrial",
    "name": "Neo Industrial Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Time-bounded character substitution rendered separately from source text. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--botanical-system",
    "name": "Botanical System Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Time-bounded character substitution rendered separately from source text. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--playful-plastic",
    "name": "Playful Plastic Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Time-bounded character substitution rendered separately from source text. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--monochrome-atelier",
    "name": "Monochrome Atelier Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Time-bounded character substitution rendered separately from source text. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--retro-terminal",
    "name": "Retro Terminal Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Time-bounded character substitution rendered separately from source text. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "semantic-scramble-reveal--spatial-glass",
    "name": "Spatial Glass Semantic Scramble Reveal",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "A brief symbol scramble resolves cleanly into the real label. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Time-bounded character substitution rendered separately from source text. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "technical label; nav accent; launch headline fragment",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "keep stable DOM text for assistive technology; never scramble inputs",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "long paragraphs; localization-sensitive content",
    "impact": "supporting",
    "quality_score": 81,
    "novelty_score": 83,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#semantic-scramble-reveal--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--editorial-ink",
    "name": "Editorial Ink Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--luminous-grid",
    "name": "Luminous Grid Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--soft-material",
    "name": "Soft Material Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--liquid-chrome",
    "name": "Liquid Chrome Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--swiss-signal",
    "name": "Swiss Signal Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--atmospheric-film",
    "name": "Atmospheric Film Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--neo-industrial",
    "name": "Neo Industrial Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--botanical-system",
    "name": "Botanical System Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--playful-plastic",
    "name": "Playful Plastic Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--monochrome-atelier",
    "name": "Monochrome Atelier Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--retro-terminal",
    "name": "Retro Terminal Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "typographic-cutout-window--spatial-glass",
    "name": "Spatial Glass Typographic Cutout Window",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "Oversized letterforms become windows into image or moving color. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS background-clip or SVG masks with a legible fallback headline. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "fashion; entertainment; editorial hero",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "retain semantic text and minimum outline contrast",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "small headings; low-impact typography",
    "impact": "signature",
    "quality_score": 80,
    "novelty_score": 86,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#typographic-cutout-window--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--editorial-ink",
    "name": "Editorial Ink Counter Cascade",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--luminous-grid",
    "name": "Luminous Grid Counter Cascade",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--soft-material",
    "name": "Soft Material Counter Cascade",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--liquid-chrome",
    "name": "Liquid Chrome Counter Cascade",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--swiss-signal",
    "name": "Swiss Signal Counter Cascade",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--atmospheric-film",
    "name": "Atmospheric Film Counter Cascade",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--neo-industrial",
    "name": "Neo Industrial Counter Cascade",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--botanical-system",
    "name": "Botanical System Counter Cascade",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--playful-plastic",
    "name": "Playful Plastic Counter Cascade",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--monochrome-atelier",
    "name": "Monochrome Atelier Counter Cascade",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--retro-terminal",
    "name": "Retro Terminal Counter Cascade",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "counter-cascade--spatial-glass",
    "name": "Spatial Glass Counter Cascade",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "Numerals roll by place value while labels arrive on a separate beat. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Clipped digit columns driven by intersection and locale-aware formatting. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "metrics; pricing; milestones; impact report",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "announce only final value; respect locale and reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "rapidly changing live data; decorative fake metrics",
    "impact": "supporting",
    "quality_score": 81,
    "novelty_score": 83,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#counter-cascade--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--editorial-ink",
    "name": "Editorial Ink Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Editorial Ink",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--luminous-grid",
    "name": "Luminous Grid Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Luminous Grid",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--soft-material",
    "name": "Soft Material Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Soft Material",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--liquid-chrome",
    "name": "Liquid Chrome Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Liquid Chrome",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--swiss-signal",
    "name": "Swiss Signal Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Swiss Signal",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--atmospheric-film",
    "name": "Atmospheric Film Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Atmospheric Film",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--neo-industrial",
    "name": "Neo Industrial Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Neo Industrial",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--botanical-system",
    "name": "Botanical System Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Botanical System",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--playful-plastic",
    "name": "Playful Plastic Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Playful Plastic",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--monochrome-atelier",
    "name": "Monochrome Atelier Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Monochrome Atelier",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--retro-terminal",
    "name": "Retro Terminal Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Retro Terminal",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-cta--spatial-glass",
    "name": "Spatial Glass Magnetic CTA",
    "category": "buttons-controls",
    "art_direction": "Spatial Glass",
    "summary": "The control subtly meets the pointer while its label counterbalances. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pointer-distance spring on transform with a small capped displacement. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "primary CTA; portfolio contact; campaign conversion",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native button/link; keyboard state; disable magnetism on touch",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "dense toolbars; repeated list actions",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-cta--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--editorial-ink",
    "name": "Editorial Ink Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Editorial Ink",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--luminous-grid",
    "name": "Luminous Grid Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Luminous Grid",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--soft-material",
    "name": "Soft Material Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Soft Material",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--liquid-chrome",
    "name": "Liquid Chrome Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Liquid Chrome",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--swiss-signal",
    "name": "Swiss Signal Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Swiss Signal",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--atmospheric-film",
    "name": "Atmospheric Film Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Atmospheric Film",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--neo-industrial",
    "name": "Neo Industrial Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Neo Industrial",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--botanical-system",
    "name": "Botanical System Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Botanical System",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--playful-plastic",
    "name": "Playful Plastic Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Playful Plastic",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--monochrome-atelier",
    "name": "Monochrome Atelier Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Monochrome Atelier",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--retro-terminal",
    "name": "Retro Terminal Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Retro Terminal",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "liquid-fill-button--spatial-glass",
    "name": "Spatial Glass Liquid Fill Button",
    "category": "buttons-controls",
    "art_direction": "Spatial Glass",
    "summary": "A branded fill rises or sweeps through the control on intent. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pseudo-element masks, border radius inheritance, and transform-only fill. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "bold CTA; purchase action; playful brand",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "preserve contrast throughout transition; visible focus ring",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "destructive actions without explicit labeling",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#liquid-fill-button--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--editorial-ink",
    "name": "Editorial Ink Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Editorial Ink",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--luminous-grid",
    "name": "Luminous Grid Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Luminous Grid",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--soft-material",
    "name": "Soft Material Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Soft Material",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--liquid-chrome",
    "name": "Liquid Chrome Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Liquid Chrome",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--swiss-signal",
    "name": "Swiss Signal Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Swiss Signal",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--atmospheric-film",
    "name": "Atmospheric Film Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Atmospheric Film",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--neo-industrial",
    "name": "Neo Industrial Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Neo Industrial",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--botanical-system",
    "name": "Botanical System Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Botanical System",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--playful-plastic",
    "name": "Playful Plastic Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Playful Plastic",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--monochrome-atelier",
    "name": "Monochrome Atelier Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Monochrome Atelier",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--retro-terminal",
    "name": "Retro Terminal Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Retro Terminal",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-label-arrow-button--spatial-glass",
    "name": "Spatial Glass Split-Label Arrow Button",
    "category": "buttons-controls",
    "art_direction": "Spatial Glass",
    "summary": "Label and directional glyph trade space in a precise hover choreography. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Overflow-hidden label tracks and inline icon translation. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "editorial links; case-study CTA; product navigation",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "stable accessible name; direction mirrors in RTL",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "icon-only action bars",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-label-arrow-button--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--editorial-ink",
    "name": "Editorial Ink Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Editorial Ink",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--luminous-grid",
    "name": "Luminous Grid Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Luminous Grid",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--soft-material",
    "name": "Soft Material Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Soft Material",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--liquid-chrome",
    "name": "Liquid Chrome Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Liquid Chrome",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--swiss-signal",
    "name": "Swiss Signal Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Swiss Signal",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--atmospheric-film",
    "name": "Atmospheric Film Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Atmospheric Film",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--neo-industrial",
    "name": "Neo Industrial Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Neo Industrial",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--botanical-system",
    "name": "Botanical System Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Botanical System",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--playful-plastic",
    "name": "Playful Plastic Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Playful Plastic",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--monochrome-atelier",
    "name": "Monochrome Atelier Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Monochrome Atelier",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--retro-terminal",
    "name": "Retro Terminal Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Retro Terminal",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-icon-switch--spatial-glass",
    "name": "Spatial Glass Elastic Icon Switch",
    "category": "buttons-controls",
    "art_direction": "Spatial Glass",
    "summary": "A compact toggle morphs its icon and surface to communicate state. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "SVG path or layered icon transition driven by actual checked state. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "theme; sound; view mode; favorite",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native checkbox semantics; state label; keyboard and focus support",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "states that need explanatory text",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-icon-switch--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--editorial-ink",
    "name": "Editorial Ink Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--luminous-grid",
    "name": "Luminous Grid Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--soft-material",
    "name": "Soft Material Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--liquid-chrome",
    "name": "Liquid Chrome Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--swiss-signal",
    "name": "Swiss Signal Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--atmospheric-film",
    "name": "Atmospheric Film Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--neo-industrial",
    "name": "Neo Industrial Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--botanical-system",
    "name": "Botanical System Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--playful-plastic",
    "name": "Playful Plastic Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--monochrome-atelier",
    "name": "Monochrome Atelier Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--retro-terminal",
    "name": "Retro Terminal Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "tilt-spotlight-card--spatial-glass",
    "name": "Spatial Glass Tilt Spotlight Card",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "A shallow perspective tilt and local light reveal material depth. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pointer-relative CSS variables, perspective, and radial highlight. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "product feature; team profile; premium plan",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "content remains static and reachable; disable tilt on touch",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "large card grids; text-dense comparison tables",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#tilt-spotlight-card--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--editorial-ink",
    "name": "Editorial Ink Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--luminous-grid",
    "name": "Luminous Grid Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--soft-material",
    "name": "Soft Material Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--liquid-chrome",
    "name": "Liquid Chrome Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--swiss-signal",
    "name": "Swiss Signal Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--atmospheric-film",
    "name": "Atmospheric Film Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--neo-industrial",
    "name": "Neo Industrial Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--botanical-system",
    "name": "Botanical System Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--playful-plastic",
    "name": "Playful Plastic Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--monochrome-atelier",
    "name": "Monochrome Atelier Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--retro-terminal",
    "name": "Retro Terminal Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "peel-away-card--spatial-glass",
    "name": "Spatial Glass Peel-Away Card",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "A corner peels back to reveal a secondary fact or action. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Layered pseudo-elements, clip paths, and a short spring. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "offer; hidden detail; collectible item; playful feature",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "secondary content is not hover-only; provide explicit control",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "critical information; dense enterprise UI",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#peel-away-card--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--editorial-ink",
    "name": "Editorial Ink Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Absolute layers with transform and z-index state choreography. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--luminous-grid",
    "name": "Luminous Grid Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Absolute layers with transform and z-index state choreography. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--soft-material",
    "name": "Soft Material Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Absolute layers with transform and z-index state choreography. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--liquid-chrome",
    "name": "Liquid Chrome Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Absolute layers with transform and z-index state choreography. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--swiss-signal",
    "name": "Swiss Signal Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Absolute layers with transform and z-index state choreography. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--atmospheric-film",
    "name": "Atmospheric Film Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Absolute layers with transform and z-index state choreography. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--neo-industrial",
    "name": "Neo Industrial Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Absolute layers with transform and z-index state choreography. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--botanical-system",
    "name": "Botanical System Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Absolute layers with transform and z-index state choreography. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--playful-plastic",
    "name": "Playful Plastic Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Absolute layers with transform and z-index state choreography. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--monochrome-atelier",
    "name": "Monochrome Atelier Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Absolute layers with transform and z-index state choreography. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--retro-terminal",
    "name": "Retro Terminal Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Absolute layers with transform and z-index state choreography. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "depth-stack-card--spatial-glass",
    "name": "Spatial Glass Depth Stack Card",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "Layered cards compress, fan, or advance to expose ordered content. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Absolute layers with transform and z-index state choreography. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "testimonials; steps; saved items; small collections",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM order follows reading order; explicit next/previous controls",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "large datasets; content requiring simultaneous comparison",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#depth-stack-card--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--editorial-ink",
    "name": "Editorial Ink Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--luminous-grid",
    "name": "Luminous Grid Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--soft-material",
    "name": "Soft Material Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--liquid-chrome",
    "name": "Liquid Chrome Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--swiss-signal",
    "name": "Swiss Signal Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--atmospheric-film",
    "name": "Atmospheric Film Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--neo-industrial",
    "name": "Neo Industrial Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--botanical-system",
    "name": "Botanical System Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--playful-plastic",
    "name": "Playful Plastic Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--monochrome-atelier",
    "name": "Monochrome Atelier Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--retro-terminal",
    "name": "Retro Terminal Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-reveal-comparison-card--spatial-glass",
    "name": "Spatial Glass Cursor-Reveal Comparison Card",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "A local reveal lens compares two visual states inside one card. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pointer/touch position drives a clipped overlay with a keyboard slider fallback. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "before-after; theme comparison; image processing",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "range semantics; keyboard controls; descriptive labels",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "unrelated images; comparisons needing exact measurement",
    "impact": "signature",
    "quality_score": 97,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-reveal-comparison-card--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--editorial-ink",
    "name": "Editorial Ink Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--luminous-grid",
    "name": "Luminous Grid Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--soft-material",
    "name": "Soft Material Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--liquid-chrome",
    "name": "Liquid Chrome Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--swiss-signal",
    "name": "Swiss Signal Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 89,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--atmospheric-film",
    "name": "Atmospheric Film Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 89,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--neo-industrial",
    "name": "Neo Industrial Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--botanical-system",
    "name": "Botanical System Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--playful-plastic",
    "name": "Playful Plastic Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--monochrome-atelier",
    "name": "Monochrome Atelier Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--retro-terminal",
    "name": "Retro Terminal Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 89,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "expandable-story-card--spatial-glass",
    "name": "Spatial Glass Expandable Story Card",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "A compact preview expands into an anchored story without losing context. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Shared-layout or View Transition animation with focus transfer. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "case study; team bio; project gallery; article preview",
    "dependencies": "optional-motion-or-view-transition",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "dialog/article semantics; focus restoration; escape support",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "simple external links; long application workflows",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#expandable-story-card--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--editorial-ink",
    "name": "Editorial Ink Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Editorial Ink",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Shared container geometry and state-driven content crossfades. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--luminous-grid",
    "name": "Luminous Grid Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Luminous Grid",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Shared container geometry and state-driven content crossfades. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--soft-material",
    "name": "Soft Material Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Soft Material",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Shared container geometry and state-driven content crossfades. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--liquid-chrome",
    "name": "Liquid Chrome Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Liquid Chrome",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Shared container geometry and state-driven content crossfades. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--swiss-signal",
    "name": "Swiss Signal Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Swiss Signal",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Shared container geometry and state-driven content crossfades. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--atmospheric-film",
    "name": "Atmospheric Film Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Atmospheric Film",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Shared container geometry and state-driven content crossfades. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--neo-industrial",
    "name": "Neo Industrial Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Neo Industrial",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Shared container geometry and state-driven content crossfades. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--botanical-system",
    "name": "Botanical System Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Botanical System",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Shared container geometry and state-driven content crossfades. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--playful-plastic",
    "name": "Playful Plastic Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Playful Plastic",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Shared container geometry and state-driven content crossfades. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--monochrome-atelier",
    "name": "Monochrome Atelier Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Monochrome Atelier",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Shared container geometry and state-driven content crossfades. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--retro-terminal",
    "name": "Retro Terminal Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Retro Terminal",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Shared container geometry and state-driven content crossfades. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-island-nav--spatial-glass",
    "name": "Spatial Glass Morphing Island Nav",
    "category": "navigation",
    "art_direction": "Spatial Glass",
    "summary": "A compact navigation island expands into contextual controls or a menu. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Shared container geometry and state-driven content crossfades. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "portfolio; mobile-first product; immersive landing page",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "landmark semantics; focus trap only when modal; escape support",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "deep information architecture; many primary destinations",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-island-nav--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--editorial-ink",
    "name": "Editorial Ink Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Editorial Ink",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--luminous-grid",
    "name": "Luminous Grid Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Luminous Grid",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--soft-material",
    "name": "Soft Material Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Soft Material",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--liquid-chrome",
    "name": "Liquid Chrome Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Liquid Chrome",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--swiss-signal",
    "name": "Swiss Signal Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Swiss Signal",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--atmospheric-film",
    "name": "Atmospheric Film Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Atmospheric Film",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--neo-industrial",
    "name": "Neo Industrial Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Neo Industrial",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--botanical-system",
    "name": "Botanical System Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Botanical System",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--playful-plastic",
    "name": "Playful Plastic Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Playful Plastic",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--monochrome-atelier",
    "name": "Monochrome Atelier Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Monochrome Atelier",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--retro-terminal",
    "name": "Retro Terminal Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Retro Terminal",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "editorial-rail-menu--spatial-glass",
    "name": "Spatial Glass Editorial Rail Menu",
    "category": "navigation",
    "art_direction": "Spatial Glass",
    "summary": "A side rail pairs oversized section names with compact metadata. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Sticky grid rail, active-section observer, and restrained text transitions. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "portfolio; report; long editorial page",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; current-page state; mobile linear fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "short landing pages; narrow content without chapters",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#editorial-rail-menu--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--editorial-ink",
    "name": "Editorial Ink Command Dock",
    "category": "navigation",
    "art_direction": "Editorial Ink",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--luminous-grid",
    "name": "Luminous Grid Command Dock",
    "category": "navigation",
    "art_direction": "Luminous Grid",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--soft-material",
    "name": "Soft Material Command Dock",
    "category": "navigation",
    "art_direction": "Soft Material",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--liquid-chrome",
    "name": "Liquid Chrome Command Dock",
    "category": "navigation",
    "art_direction": "Liquid Chrome",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--swiss-signal",
    "name": "Swiss Signal Command Dock",
    "category": "navigation",
    "art_direction": "Swiss Signal",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--atmospheric-film",
    "name": "Atmospheric Film Command Dock",
    "category": "navigation",
    "art_direction": "Atmospheric Film",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--neo-industrial",
    "name": "Neo Industrial Command Dock",
    "category": "navigation",
    "art_direction": "Neo Industrial",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--botanical-system",
    "name": "Botanical System Command Dock",
    "category": "navigation",
    "art_direction": "Botanical System",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--playful-plastic",
    "name": "Playful Plastic Command Dock",
    "category": "navigation",
    "art_direction": "Playful Plastic",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--monochrome-atelier",
    "name": "Monochrome Atelier Command Dock",
    "category": "navigation",
    "art_direction": "Monochrome Atelier",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--retro-terminal",
    "name": "Retro Terminal Command Dock",
    "category": "navigation",
    "art_direction": "Retro Terminal",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "command-dock--spatial-glass",
    "name": "Spatial Glass Command Dock",
    "category": "navigation",
    "art_direction": "Spatial Glass",
    "summary": "A compact dock exposes frequent destinations and one command surface. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Roving focus, tooltip labels, and optional proximity scaling. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "creative tool; dashboard; desktop-like web app",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "roving tabindex; tooltips; text alternative; touch sizing",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "content sites with conventional navigation expectations",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#command-dock--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--editorial-ink",
    "name": "Editorial Ink Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Editorial Ink",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--luminous-grid",
    "name": "Luminous Grid Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Luminous Grid",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--soft-material",
    "name": "Soft Material Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Soft Material",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--liquid-chrome",
    "name": "Liquid Chrome Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Liquid Chrome",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--swiss-signal",
    "name": "Swiss Signal Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Swiss Signal",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--atmospheric-film",
    "name": "Atmospheric Film Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Atmospheric Film",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--neo-industrial",
    "name": "Neo Industrial Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Neo Industrial",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--botanical-system",
    "name": "Botanical System Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Botanical System",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--playful-plastic",
    "name": "Playful Plastic Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Playful Plastic",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--monochrome-atelier",
    "name": "Monochrome Atelier Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Monochrome Atelier",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--retro-terminal",
    "name": "Retro Terminal Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Retro Terminal",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-mega-menu--spatial-glass",
    "name": "Spatial Glass Magnetic Mega Menu",
    "category": "navigation",
    "art_direction": "Spatial Glass",
    "summary": "Navigation groups gain responsive emphasis as intent moves between them. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Accessible menubar/list navigation with local pointer-weighted transforms. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "agency; product suite; media catalog",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard navigation; no hover-only access; escape closes",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "few destinations; mobile-only experiences",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-mega-menu--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--editorial-ink",
    "name": "Editorial Ink Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "Small proof points orbit a central product or proposition. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--luminous-grid",
    "name": "Luminous Grid Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "Small proof points orbit a central product or proposition. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--soft-material",
    "name": "Soft Material Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "Small proof points orbit a central product or proposition. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--liquid-chrome",
    "name": "Liquid Chrome Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "Small proof points orbit a central product or proposition. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--swiss-signal",
    "name": "Swiss Signal Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "Small proof points orbit a central product or proposition. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--atmospheric-film",
    "name": "Atmospheric Film Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "Small proof points orbit a central product or proposition. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--neo-industrial",
    "name": "Neo Industrial Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "Small proof points orbit a central product or proposition. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--botanical-system",
    "name": "Botanical System Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "Small proof points orbit a central product or proposition. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--playful-plastic",
    "name": "Playful Plastic Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "Small proof points orbit a central product or proposition. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--monochrome-atelier",
    "name": "Monochrome Atelier Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "Small proof points orbit a central product or proposition. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--retro-terminal",
    "name": "Retro Terminal Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "Small proof points orbit a central product or proposition. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "product-orbit-hero--spatial-glass",
    "name": "Spatial Glass Product Orbit Hero",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "Small proof points orbit a central product or proposition. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS/SVG orbital tracks or a lightweight 3D scene with semantic callouts. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "platform; ecosystem; connected product; device launch",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "linear semantic list; pause control; reduced-motion static constellation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "single-feature products; pages already carrying heavy 3D",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#product-orbit-hero--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--editorial-ink",
    "name": "Editorial Ink Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--luminous-grid",
    "name": "Luminous Grid Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--soft-material",
    "name": "Soft Material Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--liquid-chrome",
    "name": "Liquid Chrome Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--swiss-signal",
    "name": "Swiss Signal Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--atmospheric-film",
    "name": "Atmospheric Film Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--neo-industrial",
    "name": "Neo Industrial Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--botanical-system",
    "name": "Botanical System Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--playful-plastic",
    "name": "Playful Plastic Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--monochrome-atelier",
    "name": "Monochrome Atelier Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--retro-terminal",
    "name": "Retro Terminal Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-narrative-hero--spatial-glass",
    "name": "Spatial Glass Layered Narrative Hero",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "Headline, media, annotation, and proof overlap in an editorial composition. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Asymmetric CSS grid, controlled overlap, and a staged entrance sequence. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "brand launch; agency; editorial product",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "DOM follows reading order; overlap collapses cleanly on mobile",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "long legal copy; generic low-quality imagery",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-narrative-hero--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--editorial-ink",
    "name": "Editorial Ink Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "A gapless grid turns features into small live product signals. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--luminous-grid",
    "name": "Luminous Grid Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "A gapless grid turns features into small live product signals. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--soft-material",
    "name": "Soft Material Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "A gapless grid turns features into small live product signals. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--liquid-chrome",
    "name": "Liquid Chrome Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "A gapless grid turns features into small live product signals. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--swiss-signal",
    "name": "Swiss Signal Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "A gapless grid turns features into small live product signals. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--atmospheric-film",
    "name": "Atmospheric Film Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "A gapless grid turns features into small live product signals. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--neo-industrial",
    "name": "Neo Industrial Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "A gapless grid turns features into small live product signals. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--botanical-system",
    "name": "Botanical System Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "A gapless grid turns features into small live product signals. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--playful-plastic",
    "name": "Playful Plastic Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "A gapless grid turns features into small live product signals. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--monochrome-atelier",
    "name": "Monochrome Atelier Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "A gapless grid turns features into small live product signals. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--retro-terminal",
    "name": "Retro Terminal Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "A gapless grid turns features into small live product signals. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "bento-signal-grid--spatial-glass",
    "name": "Spatial Glass Bento Signal Grid",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "A gapless grid turns features into small live product signals. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS grid with one purposeful micro-demo per cell and shared tokens. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "feature overview; product suite; technical capability",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "logical reading order; demos do not conceal the written explanation",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "features cannot be demonstrated visually; excessive card counts",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#bento-signal-grid--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--editorial-ink",
    "name": "Editorial Ink Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--luminous-grid",
    "name": "Luminous Grid Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--soft-material",
    "name": "Soft Material Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--liquid-chrome",
    "name": "Liquid Chrome Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--swiss-signal",
    "name": "Swiss Signal Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--atmospheric-film",
    "name": "Atmospheric Film Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--neo-industrial",
    "name": "Neo Industrial Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--botanical-system",
    "name": "Botanical System Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--playful-plastic",
    "name": "Playful Plastic Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--monochrome-atelier",
    "name": "Monochrome Atelier Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--retro-terminal",
    "name": "Retro Terminal Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pinned-feature-story--spatial-glass",
    "name": "Spatial Glass Pinned Feature Story",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "Media remains anchored while short chapters advance the product story. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS sticky layout, intersection state, and discrete media transitions. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "product walkthrough; method; process; case study",
    "dependencies": "css; javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content reads linearly without sticky behavior; no scroll hijacking",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "short pages; many chapters; mobile viewport instability",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pinned-feature-story--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--editorial-ink",
    "name": "Editorial Ink Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--luminous-grid",
    "name": "Luminous Grid Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 94,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--soft-material",
    "name": "Soft Material Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 94,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--liquid-chrome",
    "name": "Liquid Chrome Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--swiss-signal",
    "name": "Swiss Signal Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--atmospheric-film",
    "name": "Atmospheric Film Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--neo-industrial",
    "name": "Neo Industrial Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 94,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--botanical-system",
    "name": "Botanical System Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--playful-plastic",
    "name": "Playful Plastic Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 94,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--monochrome-atelier",
    "name": "Monochrome Atelier Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--retro-terminal",
    "name": "Retro Terminal Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 94,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "logo-current-strip--spatial-glass",
    "name": "Spatial Glass Logo Current Strip",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "Proof logos travel in alternating currents with controlled edge fades. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS marquee tracks with duplicated aria-hidden visuals and pause behavior. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "customer proof; partner ecosystem; press",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "plain semantic logo list; pause on hover/focus; reduced-motion static wrap",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "fewer than five marks; inconsistent logo assets",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 91,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#logo-current-strip--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--editorial-ink",
    "name": "Editorial Ink Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Editorial Ink",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--luminous-grid",
    "name": "Luminous Grid Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Luminous Grid",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--soft-material",
    "name": "Soft Material Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Soft Material",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 75,
    "novelty_score": 88,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--liquid-chrome",
    "name": "Liquid Chrome Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Liquid Chrome",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--swiss-signal",
    "name": "Swiss Signal Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Swiss Signal",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--atmospheric-film",
    "name": "Atmospheric Film Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Atmospheric Film",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 95,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--neo-industrial",
    "name": "Neo Industrial Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Neo Industrial",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--botanical-system",
    "name": "Botanical System Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Botanical System",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--playful-plastic",
    "name": "Playful Plastic Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Playful Plastic",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 75,
    "novelty_score": 88,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--monochrome-atelier",
    "name": "Monochrome Atelier Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Monochrome Atelier",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--retro-terminal",
    "name": "Retro Terminal Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Retro Terminal",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "curtain-section-reveal--spatial-glass",
    "name": "Spatial Glass Curtain Section Reveal",
    "category": "scroll-transitions",
    "art_direction": "Spatial Glass",
    "summary": "One section parts or lifts to disclose the next visual chapter. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Sticky overlap with clip-path or transform-only panels. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "campaign chapter; portfolio transition; dramatic product reveal",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal document flow fallback; reduced-motion immediate reveal",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "long forms; dense documentation; repeated use",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#curtain-section-reveal--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--editorial-ink",
    "name": "Editorial Ink Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Editorial Ink",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--luminous-grid",
    "name": "Luminous Grid Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Luminous Grid",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--soft-material",
    "name": "Soft Material Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Soft Material",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--liquid-chrome",
    "name": "Liquid Chrome Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Liquid Chrome",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--swiss-signal",
    "name": "Swiss Signal Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Swiss Signal",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--atmospheric-film",
    "name": "Atmospheric Film Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Atmospheric Film",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 92,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--neo-industrial",
    "name": "Neo Industrial Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Neo Industrial",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--botanical-system",
    "name": "Botanical System Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Botanical System",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--playful-plastic",
    "name": "Playful Plastic Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Playful Plastic",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--monochrome-atelier",
    "name": "Monochrome Atelier Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Monochrome Atelier",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--retro-terminal",
    "name": "Retro Terminal Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Retro Terminal",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "parallax-type-image-pair--spatial-glass",
    "name": "Spatial Glass Parallax Type/Image Pair",
    "category": "scroll-transitions",
    "art_direction": "Spatial Glass",
    "summary": "Headline and image travel at slightly different rates to create depth. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Scroll-linked transforms with narrow ranges and compositor-safe properties. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "editorial feature; fashion; case study",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "reduced-motion zeroes offsets; preserve crop and readability",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "small screens with little vertical space; essential diagrams",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#parallax-type-image-pair--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--editorial-ink",
    "name": "Editorial Ink Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Editorial Ink",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--luminous-grid",
    "name": "Luminous Grid Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Luminous Grid",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--soft-material",
    "name": "Soft Material Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Soft Material",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 75,
    "novelty_score": 88,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--liquid-chrome",
    "name": "Liquid Chrome Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Liquid Chrome",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--swiss-signal",
    "name": "Swiss Signal Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Swiss Signal",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--atmospheric-film",
    "name": "Atmospheric Film Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Atmospheric Film",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 95,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--neo-industrial",
    "name": "Neo Industrial Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Neo Industrial",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--botanical-system",
    "name": "Botanical System Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Botanical System",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--playful-plastic",
    "name": "Playful Plastic Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Playful Plastic",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 75,
    "novelty_score": 88,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--monochrome-atelier",
    "name": "Monochrome Atelier Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Monochrome Atelier",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--retro-terminal",
    "name": "Retro Terminal Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Retro Terminal",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-scrub-timeline--spatial-glass",
    "name": "Spatial Glass Scroll-Scrub Timeline",
    "category": "scroll-transitions",
    "art_direction": "Spatial Glass",
    "summary": "A timeline advances in direct proportion to a bounded narrative region. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Scroll progress mapped to transforms, SVG strokes, and discrete chapter labels. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "history; roadmap; process; scientific explanation",
    "dependencies": "motion-or-gsap",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all milestones exist as semantic content; reduced-motion shows final state",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "scroll is not part of the story; unbounded page-length animation",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-scrub-timeline--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--editorial-ink",
    "name": "Editorial Ink View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Editorial Ink",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--luminous-grid",
    "name": "Luminous Grid View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Luminous Grid",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--soft-material",
    "name": "Soft Material View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Soft Material",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--liquid-chrome",
    "name": "Liquid Chrome View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Liquid Chrome",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--swiss-signal",
    "name": "Swiss Signal View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Swiss Signal",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--atmospheric-film",
    "name": "Atmospheric Film View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Atmospheric Film",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 92,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--neo-industrial",
    "name": "Neo Industrial View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Neo Industrial",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--botanical-system",
    "name": "Botanical System View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Botanical System",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--playful-plastic",
    "name": "Playful Plastic View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Playful Plastic",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--monochrome-atelier",
    "name": "Monochrome Atelier View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Monochrome Atelier",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--retro-terminal",
    "name": "Retro Terminal View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Retro Terminal",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "view-transition-portal--spatial-glass",
    "name": "Spatial Glass View-Transition Portal",
    "category": "scroll-transitions",
    "art_direction": "Spatial Glass",
    "summary": "A selected card or media object becomes the anchor of the next page. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "View Transition API with stable names and a non-animated navigation fallback. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "gallery-to-detail; article index; product catalog",
    "dependencies": "view-transition-api; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real navigation semantics; focus lands on destination heading",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "cross-origin destinations; unstable object identity",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#view-transition-portal--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--editorial-ink",
    "name": "Editorial Ink Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Editorial Ink",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--luminous-grid",
    "name": "Luminous Grid Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Luminous Grid",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--soft-material",
    "name": "Soft Material Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Soft Material",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--liquid-chrome",
    "name": "Liquid Chrome Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Liquid Chrome",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--swiss-signal",
    "name": "Swiss Signal Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Swiss Signal",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--atmospheric-film",
    "name": "Atmospheric Film Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Atmospheric Film",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--neo-industrial",
    "name": "Neo Industrial Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Neo Industrial",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--botanical-system",
    "name": "Botanical System Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Botanical System",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--playful-plastic",
    "name": "Playful Plastic Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Playful Plastic",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--monochrome-atelier",
    "name": "Monochrome Atelier Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Monochrome Atelier",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--retro-terminal",
    "name": "Retro Terminal Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Retro Terminal",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "chromatic-cursor-trail--spatial-glass",
    "name": "Spatial Glass Chromatic Cursor Trail",
    "category": "pointer-media",
    "art_direction": "Spatial Glass",
    "summary": "A short-lived color echo follows intent without obscuring content. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pooled DOM or canvas particles with capped lifetime and distance sampling. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "creative portfolio; music; event campaign",
    "dependencies": "javascript-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; desktop pointer only; reduced-motion disabled",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "productivity apps; pages with another continuous pointer effect",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#chromatic-cursor-trail--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--editorial-ink",
    "name": "Editorial Ink Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Editorial Ink",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--luminous-grid",
    "name": "Luminous Grid Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Luminous Grid",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--soft-material",
    "name": "Soft Material Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Soft Material",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--liquid-chrome",
    "name": "Liquid Chrome Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Liquid Chrome",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--swiss-signal",
    "name": "Swiss Signal Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Swiss Signal",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--atmospheric-film",
    "name": "Atmospheric Film Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Atmospheric Film",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--neo-industrial",
    "name": "Neo Industrial Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Neo Industrial",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--botanical-system",
    "name": "Botanical System Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Botanical System",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--playful-plastic",
    "name": "Playful Plastic Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Playful Plastic",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--monochrome-atelier",
    "name": "Monochrome Atelier Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Monochrome Atelier",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--retro-terminal",
    "name": "Retro Terminal Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Retro Terminal",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "magnetic-media-lens--spatial-glass",
    "name": "Spatial Glass Magnetic Media Lens",
    "category": "pointer-media",
    "art_direction": "Spatial Glass",
    "summary": "A restrained lens reveals alternate crop, metadata, or material detail. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pointer-positioned mask with touch tap mode and bounded transforms. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "product material; art detail; photography portfolio",
    "dependencies": "css; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alternate information remains available outside the lens",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "essential content exists only inside the effect",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#magnetic-media-lens--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--editorial-ink",
    "name": "Editorial Ink Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Editorial Ink",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--luminous-grid",
    "name": "Luminous Grid Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Luminous Grid",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--soft-material",
    "name": "Soft Material Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Soft Material",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--liquid-chrome",
    "name": "Liquid Chrome Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Liquid Chrome",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--swiss-signal",
    "name": "Swiss Signal Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Swiss Signal",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--atmospheric-film",
    "name": "Atmospheric Film Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Atmospheric Film",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--neo-industrial",
    "name": "Neo Industrial Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Neo Industrial",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--botanical-system",
    "name": "Botanical System Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Botanical System",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--playful-plastic",
    "name": "Playful Plastic Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Playful Plastic",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--monochrome-atelier",
    "name": "Monochrome Atelier Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Monochrome Atelier",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--retro-terminal",
    "name": "Retro Terminal Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Retro Terminal",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-coverflow--spatial-glass",
    "name": "Spatial Glass Draggable Coverflow",
    "category": "pointer-media",
    "art_direction": "Spatial Glass",
    "summary": "A tactile image sequence bends into depth as users drag or navigate. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Horizontal drag physics, snap points, perspective, and keyboard controls. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "work gallery; products; album art; destinations",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons and arrow keys; selected state; lazy-loaded images",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "content needs side-by-side comparison; very large collections",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-coverflow--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--editorial-ink",
    "name": "Editorial Ink Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Editorial Ink",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--luminous-grid",
    "name": "Luminous Grid Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Luminous Grid",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--soft-material",
    "name": "Soft Material Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Soft Material",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--liquid-chrome",
    "name": "Liquid Chrome Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Liquid Chrome",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--swiss-signal",
    "name": "Swiss Signal Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Swiss Signal",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--atmospheric-film",
    "name": "Atmospheric Film Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Atmospheric Film",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--neo-industrial",
    "name": "Neo Industrial Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Neo Industrial",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--botanical-system",
    "name": "Botanical System Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Botanical System",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--playful-plastic",
    "name": "Playful Plastic Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Playful Plastic",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--monochrome-atelier",
    "name": "Monochrome Atelier Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Monochrome Atelier",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--retro-terminal",
    "name": "Retro Terminal Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Retro Terminal",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "infinite-ribbon-gallery--spatial-glass",
    "name": "Spatial Glass Infinite Ribbon Gallery",
    "category": "pointer-media",
    "art_direction": "Spatial Glass",
    "summary": "Images travel along a looped ribbon that can be scrubbed in either direction. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Virtualized loop, transform track, velocity damping, and edge-safe focus. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "visual portfolio; event recap; collection preview",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "separate semantic gallery; pause and explicit navigation controls",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "text-heavy items; low image quality",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#infinite-ribbon-gallery--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--editorial-ink",
    "name": "Editorial Ink Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Editorial Ink",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--luminous-grid",
    "name": "Luminous Grid Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Luminous Grid",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--soft-material",
    "name": "Soft Material Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Soft Material",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--liquid-chrome",
    "name": "Liquid Chrome Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Liquid Chrome",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 85,
    "novelty_score": 71,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--swiss-signal",
    "name": "Swiss Signal Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Swiss Signal",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--atmospheric-film",
    "name": "Atmospheric Film Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Atmospheric Film",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 85,
    "novelty_score": 71,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--neo-industrial",
    "name": "Neo Industrial Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Neo Industrial",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 85,
    "novelty_score": 71,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--botanical-system",
    "name": "Botanical System Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Botanical System",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--playful-plastic",
    "name": "Playful Plastic Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Playful Plastic",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--monochrome-atelier",
    "name": "Monochrome Atelier Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Monochrome Atelier",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--retro-terminal",
    "name": "Retro Terminal Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Retro Terminal",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "focus-halo-field--spatial-glass",
    "name": "Spatial Glass Focus Halo Field",
    "category": "forms-status",
    "art_direction": "Spatial Glass",
    "summary": "Focused fields gain a soft local halo and a precise supporting label response. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "focus-visible, container queries, pseudo-elements, and tokenized status colors. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "signup; contact; premium checkout",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native controls; persistent labels; error text and contrast",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "dense spreadsheet-like entry surfaces",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#focus-halo-field--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--editorial-ink",
    "name": "Editorial Ink Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Editorial Ink",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--luminous-grid",
    "name": "Luminous Grid Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Luminous Grid",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--soft-material",
    "name": "Soft Material Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Soft Material",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--liquid-chrome",
    "name": "Liquid Chrome Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Liquid Chrome",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--swiss-signal",
    "name": "Swiss Signal Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Swiss Signal",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--atmospheric-film",
    "name": "Atmospheric Film Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Atmospheric Film",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--neo-industrial",
    "name": "Neo Industrial Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Neo Industrial",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--botanical-system",
    "name": "Botanical System Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Botanical System",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--playful-plastic",
    "name": "Playful Plastic Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Playful Plastic",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--monochrome-atelier",
    "name": "Monochrome Atelier Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Monochrome Atelier",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--retro-terminal",
    "name": "Retro Terminal Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Retro Terminal",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "progressive-form-stepper--spatial-glass",
    "name": "Spatial Glass Progressive Form Stepper",
    "category": "forms-status",
    "art_direction": "Spatial Glass",
    "summary": "A multi-step form turns progress into a compact visual narrative. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "State machine, semantic fieldsets, directional transitions, and saved progress. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "onboarding; quote; application; configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "fieldsets and legends; error summary; focus new step heading",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "forms short enough for one screen",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#progressive-form-stepper--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--editorial-ink",
    "name": "Editorial Ink Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Editorial Ink",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "State-driven icon/label geometry with live-region announcements. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--luminous-grid",
    "name": "Luminous Grid Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Luminous Grid",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "State-driven icon/label geometry with live-region announcements. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--soft-material",
    "name": "Soft Material Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Soft Material",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "State-driven icon/label geometry with live-region announcements. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--liquid-chrome",
    "name": "Liquid Chrome Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Liquid Chrome",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "State-driven icon/label geometry with live-region announcements. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--swiss-signal",
    "name": "Swiss Signal Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Swiss Signal",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "State-driven icon/label geometry with live-region announcements. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--atmospheric-film",
    "name": "Atmospheric Film Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Atmospheric Film",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "State-driven icon/label geometry with live-region announcements. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--neo-industrial",
    "name": "Neo Industrial Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Neo Industrial",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "State-driven icon/label geometry with live-region announcements. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--botanical-system",
    "name": "Botanical System Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Botanical System",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "State-driven icon/label geometry with live-region announcements. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--playful-plastic",
    "name": "Playful Plastic Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Playful Plastic",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "State-driven icon/label geometry with live-region announcements. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--monochrome-atelier",
    "name": "Monochrome Atelier Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Monochrome Atelier",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "State-driven icon/label geometry with live-region announcements. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--retro-terminal",
    "name": "Retro Terminal Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Retro Terminal",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "State-driven icon/label geometry with live-region announcements. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-async-status--spatial-glass",
    "name": "Spatial Glass Morphing Async Status",
    "category": "forms-status",
    "art_direction": "Spatial Glass",
    "summary": "One compact status surface transforms through pending, success, and error. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "State-driven icon/label geometry with live-region announcements. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "upload; save; generation; payment confirmation",
    "dependencies": "optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "polite live region; stable text; errors persist until resolved",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "background operations users do not need to track",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-async-status--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--editorial-ink",
    "name": "Editorial Ink Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Editorial Ink",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 77,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--luminous-grid",
    "name": "Luminous Grid Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Luminous Grid",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--soft-material",
    "name": "Soft Material Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Soft Material",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 77,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--liquid-chrome",
    "name": "Liquid Chrome Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Liquid Chrome",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--swiss-signal",
    "name": "Swiss Signal Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Swiss Signal",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--atmospheric-film",
    "name": "Atmospheric Film Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Atmospheric Film",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 77,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--neo-industrial",
    "name": "Neo Industrial Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Neo Industrial",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--botanical-system",
    "name": "Botanical System Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Botanical System",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 77,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--playful-plastic",
    "name": "Playful Plastic Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Playful Plastic",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 77,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--monochrome-atelier",
    "name": "Monochrome Atelier Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Monochrome Atelier",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 77,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--retro-terminal",
    "name": "Retro Terminal Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Retro Terminal",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbital-metric-cluster--spatial-glass",
    "name": "Spatial Glass Orbital Metric Cluster",
    "category": "data-3d",
    "art_direction": "Spatial Glass",
    "summary": "Related metrics orbit a primary outcome to expose hierarchy and connection. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS/SVG radial layout with semantic metric list and subtle phase motion. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "impact summary; system health; ecosystem data",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "plain metric list; color is never the only relationship cue",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "precise comparison across many values",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbital-metric-cluster--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--editorial-ink",
    "name": "Editorial Ink Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Editorial Ink",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--luminous-grid",
    "name": "Luminous Grid Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Luminous Grid",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--soft-material",
    "name": "Soft Material Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Soft Material",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--liquid-chrome",
    "name": "Liquid Chrome Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Liquid Chrome",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--swiss-signal",
    "name": "Swiss Signal Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Swiss Signal",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--atmospheric-film",
    "name": "Atmospheric Film Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Atmospheric Film",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--neo-industrial",
    "name": "Neo Industrial Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Neo Industrial",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--botanical-system",
    "name": "Botanical System Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Botanical System",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--playful-plastic",
    "name": "Playful Plastic Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Playful Plastic",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--monochrome-atelier",
    "name": "Monochrome Atelier Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Monochrome Atelier",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--retro-terminal",
    "name": "Retro Terminal Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Retro Terminal",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shader-product-pedestal--spatial-glass",
    "name": "Spatial Glass Shader Product Pedestal",
    "category": "data-3d",
    "art_direction": "Spatial Glass",
    "summary": "A product object rests on a restrained reactive shader surface. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "R3F/OGL plane shader, environment lighting, and pointer damping. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "hardware; footwear; packaging; 3D brand object",
    "dependencies": "three-or-ogl",
    "framework_fit": "framework-neutral Three.js/OGL; wrapper components for React/Vue/Svelte",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "descriptive poster fallback; reduced-motion static render",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "no optimized model; another WebGL scene already runs",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shader-product-pedestal--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--editorial-ink",
    "name": "Editorial Ink Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Editorial Ink",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--luminous-grid",
    "name": "Luminous Grid Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Luminous Grid",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--soft-material",
    "name": "Soft Material Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Soft Material",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--liquid-chrome",
    "name": "Liquid Chrome Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Liquid Chrome",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--swiss-signal",
    "name": "Swiss Signal Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Swiss Signal",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--atmospheric-film",
    "name": "Atmospheric Film Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Atmospheric Film",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--neo-industrial",
    "name": "Neo Industrial Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Neo Industrial",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--botanical-system",
    "name": "Botanical System Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Botanical System",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--playful-plastic",
    "name": "Playful Plastic Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Playful Plastic",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--monochrome-atelier",
    "name": "Monochrome Atelier Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Monochrome Atelier",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--retro-terminal",
    "name": "Retro Terminal Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Retro Terminal",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "particle-data-globe--spatial-glass",
    "name": "Spatial Glass Particle Data Globe",
    "category": "data-3d",
    "art_direction": "Spatial Glass",
    "summary": "Geographic points and arcs communicate reach without a literal map UI. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Instanced points and arcs in R3F with a capped draw count. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "global network; logistics; community; infrastructure",
    "dependencies": "r3f; drei",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "equivalent region list/table; static poster on reduced motion",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "exact geographic analysis; weak global relevance",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#particle-data-globe--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--editorial-ink",
    "name": "Editorial Ink Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Editorial Ink",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--luminous-grid",
    "name": "Luminous Grid Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Luminous Grid",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--soft-material",
    "name": "Soft Material Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Soft Material",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--liquid-chrome",
    "name": "Liquid Chrome Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Liquid Chrome",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--swiss-signal",
    "name": "Swiss Signal Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Swiss Signal",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--atmospheric-film",
    "name": "Atmospheric Film Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Atmospheric Film",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--neo-industrial",
    "name": "Neo Industrial Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Neo Industrial",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--botanical-system",
    "name": "Botanical System Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Botanical System",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--playful-plastic",
    "name": "Playful Plastic Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Playful Plastic",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--monochrome-atelier",
    "name": "Monochrome Atelier Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Monochrome Atelier",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--retro-terminal",
    "name": "Retro Terminal Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Retro Terminal",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "isometric-process-scene--spatial-glass",
    "name": "Spatial Glass Isometric Process Scene",
    "category": "data-3d",
    "art_direction": "Spatial Glass",
    "summary": "A lightweight isometric scene turns process stages into a spatial system. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS transforms, SVG, or low-poly R3F depending on required depth. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "workflow; manufacturing; platform architecture; service process",
    "dependencies": "css-or-svg; optional-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "numbered semantic process list; animation is supplementary",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "process has no stable sequence; decorative complexity only",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#isometric-process-scene--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "vector-flow-field--editorial-ink",
    "name": "Editorial Ink Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--luminous-grid",
    "name": "Luminous Grid Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--soft-material",
    "name": "Soft Material Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--liquid-chrome",
    "name": "Liquid Chrome Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--swiss-signal",
    "name": "Swiss Signal Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--atmospheric-film",
    "name": "Atmospheric Film Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--neo-industrial",
    "name": "Neo Industrial Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--botanical-system",
    "name": "Botanical System Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--playful-plastic",
    "name": "Playful Plastic Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--monochrome-atelier",
    "name": "Monochrome Atelier Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--retro-terminal",
    "name": "Retro Terminal Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "vector-flow-field--spatial-glass",
    "name": "Spatial Glass Vector Flow Field",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "Fine directional strokes reveal an invisible current around the composition. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Canvas or SVG vectors sampled from a low-resolution noise field with strict density caps. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "technology hero; energy; logistics; generative identity",
    "dependencies": "canvas-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static vector poster for reduced motion; pause offscreen",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "dense content; low-power devices with another animated canvas",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#vector-flow-field--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--editorial-ink",
    "name": "Editorial Ink Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--luminous-grid",
    "name": "Luminous Grid Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--soft-material",
    "name": "Soft Material Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--liquid-chrome",
    "name": "Liquid Chrome Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--swiss-signal",
    "name": "Swiss Signal Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--atmospheric-film",
    "name": "Atmospheric Film Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--neo-industrial",
    "name": "Neo Industrial Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--botanical-system",
    "name": "Botanical System Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--playful-plastic",
    "name": "Playful Plastic Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--monochrome-atelier",
    "name": "Monochrome Atelier Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--retro-terminal",
    "name": "Retro Terminal Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "halftone-light-field--spatial-glass",
    "name": "Spatial Glass Halftone Light Field",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "A halftone matrix changes scale and density under a moving light source. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS radial masks or canvas dots driven by one damped light coordinate. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "editorial hero; music; fashion; art event",
    "dependencies": "css-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; contrast-safe static halftone fallback",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "small body text over the pattern; already noisy imagery",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halftone-light-field--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--editorial-ink",
    "name": "Editorial Ink Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--luminous-grid",
    "name": "Luminous Grid Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--soft-material",
    "name": "Soft Material Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--liquid-chrome",
    "name": "Liquid Chrome Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--swiss-signal",
    "name": "Swiss Signal Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--atmospheric-film",
    "name": "Atmospheric Film Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--neo-industrial",
    "name": "Neo Industrial Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--botanical-system",
    "name": "Botanical System Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--playful-plastic",
    "name": "Playful Plastic Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--monochrome-atelier",
    "name": "Monochrome Atelier Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 85,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--retro-terminal",
    "name": "Retro Terminal Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "paper-cut-terrain--spatial-glass",
    "name": "Spatial Glass Paper Cut Terrain",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "Layered contour silhouettes create tactile depth without a full 3D scene. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Nested SVG paths or clip-path layers with tokenized elevation and shadow. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "outdoor brand; architecture; sustainability; cultural storytelling",
    "dependencies": "svg-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative SVG; preserve text contrast; remove depth motion when reduced",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "strictly technical interfaces; tiny containers",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 88,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#paper-cut-terrain--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--editorial-ink",
    "name": "Editorial Ink Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Editorial Ink",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--luminous-grid",
    "name": "Luminous Grid Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Luminous Grid",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--soft-material",
    "name": "Soft Material Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Soft Material",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--liquid-chrome",
    "name": "Liquid Chrome Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Liquid Chrome",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--swiss-signal",
    "name": "Swiss Signal Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Swiss Signal",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--atmospheric-film",
    "name": "Atmospheric Film Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Atmospheric Film",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--neo-industrial",
    "name": "Neo Industrial Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Neo Industrial",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--botanical-system",
    "name": "Botanical System Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Botanical System",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--playful-plastic",
    "name": "Playful Plastic Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Playful Plastic",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--monochrome-atelier",
    "name": "Monochrome Atelier Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Monochrome Atelier",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 88,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--retro-terminal",
    "name": "Retro Terminal Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Retro Terminal",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pixel-weather-map--spatial-glass",
    "name": "Spatial Glass Pixel Weather Map",
    "category": "backgrounds",
    "art_direction": "Spatial Glass",
    "summary": "A coarse pixel field shifts like atmospheric radar around a focal message. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Low-resolution canvas buffer scaled with image-rendering and a bounded color ramp. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "music; gaming; climate; experimental campaign",
    "dependencies": "canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative; static generated bitmap; never encode data without a legend",
    "content_contract": "Remain decorative; keep primary content, contrast, and interaction independent of the effect.",
    "responsive_strategy": "Reduce density, blur, particle count, and pointer response below tablet width; crop intentionally.",
    "interaction_inputs": "ambient; optional fine pointer; viewport visibility",
    "fallback_strategy": "Render a token-matched static CSS/SVG/image frame before enhancement initializes.",
    "test_focus": "text contrast; resize stability; offscreen pause; reduced motion; low-power mobile",
    "implementation_steps": "establish static surface; add decorative layer; cap animation and pointer work; verify content independence",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "professional data dashboards; pages with another pixel aesthetic",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixel-weather-map--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "glyph-cascade--editorial-ink",
    "name": "Editorial Ink Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--luminous-grid",
    "name": "Luminous Grid Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--soft-material",
    "name": "Soft Material Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--liquid-chrome",
    "name": "Liquid Chrome Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--swiss-signal",
    "name": "Swiss Signal Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--atmospheric-film",
    "name": "Atmospheric Film Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--neo-industrial",
    "name": "Neo Industrial Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--botanical-system",
    "name": "Botanical System Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--playful-plastic",
    "name": "Playful Plastic Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--monochrome-atelier",
    "name": "Monochrome Atelier Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--retro-terminal",
    "name": "Retro Terminal Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 93,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "glyph-cascade--spatial-glass",
    "name": "Spatial Glass Glyph Cascade",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "A heading assembles from falling glyph fragments before settling into readable type. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Stable semantic heading plus aria-hidden clipped glyph layers with transform-only timing. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "launch title; festival; creative portfolio; chapter opener",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "low",
    "accessibility_contract": "one semantic heading; final text visible immediately for reduced motion",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "body copy; long translations; urgent instructions",
    "impact": "signature",
    "quality_score": 80,
    "novelty_score": 86,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#glyph-cascade--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--editorial-ink",
    "name": "Editorial Ink Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--luminous-grid",
    "name": "Luminous Grid Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--soft-material",
    "name": "Soft Material Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--liquid-chrome",
    "name": "Liquid Chrome Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--swiss-signal",
    "name": "Swiss Signal Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--atmospheric-film",
    "name": "Atmospheric Film Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--neo-industrial",
    "name": "Neo Industrial Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--botanical-system",
    "name": "Botanical System Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--playful-plastic",
    "name": "Playful Plastic Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--monochrome-atelier",
    "name": "Monochrome Atelier Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--retro-terminal",
    "name": "Retro Terminal Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "outline-echo-heading--spatial-glass",
    "name": "Spatial Glass Outline Echo Heading",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "Offset outlines trail a display heading and collapse into one sharp wordmark. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Layered aria-hidden text, text-stroke, and short pointer or entrance transforms. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "fashion; sports; event; bold product launch",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "semantic foreground text; outline layers ignored by assistive technology",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "small text; weak display fonts; crowded headers",
    "impact": "supporting",
    "quality_score": 81,
    "novelty_score": 83,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#outline-echo-heading--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--editorial-ink",
    "name": "Editorial Ink Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 93,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--luminous-grid",
    "name": "Luminous Grid Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--soft-material",
    "name": "Soft Material Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--liquid-chrome",
    "name": "Liquid Chrome Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--swiss-signal",
    "name": "Swiss Signal Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 93,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--atmospheric-film",
    "name": "Atmospheric Film Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 93,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--neo-industrial",
    "name": "Neo Industrial Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 93,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--botanical-system",
    "name": "Botanical System Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 93,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--playful-plastic",
    "name": "Playful Plastic Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 90,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--monochrome-atelier",
    "name": "Monochrome Atelier Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 93,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--retro-terminal",
    "name": "Retro Terminal Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 93,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scroll-weave-sentence--spatial-glass",
    "name": "Spatial Glass Scroll Weave Sentence",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "Two short phrases interleave as the reader advances through one bounded section. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Sticky line groups with clipped transforms mapped to local scroll progress. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "brand manifesto; before-after narrative; paired concepts",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "plain sentences remain in DOM order; reduced motion shows both without overlap",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "long paragraphs; mobile pages with unstable viewport height",
    "impact": "signature",
    "quality_score": 77,
    "novelty_score": 86,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scroll-weave-sentence--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--editorial-ink",
    "name": "Editorial Ink Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Editorial Ink",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--luminous-grid",
    "name": "Luminous Grid Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Luminous Grid",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--soft-material",
    "name": "Soft Material Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Soft Material",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--liquid-chrome",
    "name": "Liquid Chrome Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Liquid Chrome",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--swiss-signal",
    "name": "Swiss Signal Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Swiss Signal",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--atmospheric-film",
    "name": "Atmospheric Film Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Atmospheric Film",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--neo-industrial",
    "name": "Neo Industrial Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Neo Industrial",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--botanical-system",
    "name": "Botanical System Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Botanical System",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--playful-plastic",
    "name": "Playful Plastic Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Playful Plastic",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 87,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--monochrome-atelier",
    "name": "Monochrome Atelier Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Monochrome Atelier",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--retro-terminal",
    "name": "Retro Terminal Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Retro Terminal",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 90,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "word-orbit-cloud--spatial-glass",
    "name": "Spatial Glass Word Orbit Cloud",
    "category": "text-effects",
    "art_direction": "Spatial Glass",
    "summary": "Short capability words orbit a central concept with meaningful hierarchy. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS or SVG radial placement with slow phase offsets and a semantic list. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "ecosystem; services; skills; community values",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "equivalent semantic list; pause behavior; static arrangement when reduced",
    "content_contract": "Keep one untouched semantic text source and make every animated duplicate non-semantic.",
    "responsive_strategy": "Reflow by semantic lines/words; avoid fixed character positions and test long localized copy.",
    "interaction_inputs": "entrance; local scroll; optional hover/focus",
    "fallback_strategy": "Show the final readable text with normal wrapping and no clipping.",
    "test_focus": "semantic heading; localization; zoom; reduced motion; font loading",
    "implementation_steps": "render semantic copy; derive visual layers; animate bounded units; restore final readable state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "precise comparison; more than twelve labels",
    "impact": "supporting",
    "quality_score": 81,
    "novelty_score": 83,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#word-orbit-cloud--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text / typography treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--editorial-ink",
    "name": "Editorial Ink Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Editorial Ink",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--luminous-grid",
    "name": "Luminous Grid Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Luminous Grid",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--soft-material",
    "name": "Soft Material Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Soft Material",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--liquid-chrome",
    "name": "Liquid Chrome Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Liquid Chrome",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--swiss-signal",
    "name": "Swiss Signal Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Swiss Signal",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--atmospheric-film",
    "name": "Atmospheric Film Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Atmospheric Film",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--neo-industrial",
    "name": "Neo Industrial Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Neo Industrial",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--botanical-system",
    "name": "Botanical System Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Botanical System",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--playful-plastic",
    "name": "Playful Plastic Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Playful Plastic",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--monochrome-atelier",
    "name": "Monochrome Atelier Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Monochrome Atelier",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--retro-terminal",
    "name": "Retro Terminal Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Retro Terminal",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "orbit-icon-button--spatial-glass",
    "name": "Spatial Glass Orbit Icon Button",
    "category": "buttons-controls",
    "art_direction": "Spatial Glass",
    "summary": "A directional icon takes a short orbital path as the action gains intent. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Inline SVG icon on a bounded motion path with a static touch state. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "explore CTA; next project; external link; submit",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native control; stable accessible name; RTL-aware path direction",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "dense action groups; destructive controls",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#orbit-icon-button--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--editorial-ink",
    "name": "Editorial Ink Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Editorial Ink",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--luminous-grid",
    "name": "Luminous Grid Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Luminous Grid",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--soft-material",
    "name": "Soft Material Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Soft Material",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--liquid-chrome",
    "name": "Liquid Chrome Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Liquid Chrome",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--swiss-signal",
    "name": "Swiss Signal Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Swiss Signal",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--atmospheric-film",
    "name": "Atmospheric Film Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Atmospheric Film",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--neo-industrial",
    "name": "Neo Industrial Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Neo Industrial",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--botanical-system",
    "name": "Botanical System Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Botanical System",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--playful-plastic",
    "name": "Playful Plastic Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Playful Plastic",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--monochrome-atelier",
    "name": "Monochrome Atelier Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Monochrome Atelier",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--retro-terminal",
    "name": "Retro Terminal Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Retro Terminal",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pressure-depth-button--spatial-glass",
    "name": "Spatial Glass Pressure Depth Button",
    "category": "buttons-controls",
    "art_direction": "Spatial Glass",
    "summary": "A layered control compresses convincingly under press without moving layout. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pseudo-element depth layers and translate/scale states tied to active and keyboard input. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "playful CTA; game-like action; tactile product UI",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "native control; visible focus; active state never replaces disabled semantics",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "formal legal workflows; repeated compact table actions",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pressure-depth-button--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--editorial-ink",
    "name": "Editorial Ink Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Editorial Ink",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--luminous-grid",
    "name": "Luminous Grid Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Luminous Grid",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--soft-material",
    "name": "Soft Material Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Soft Material",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--liquid-chrome",
    "name": "Liquid Chrome Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Liquid Chrome",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--swiss-signal",
    "name": "Swiss Signal Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Swiss Signal",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--atmospheric-film",
    "name": "Atmospheric Film Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Atmospheric Film",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--neo-industrial",
    "name": "Neo Industrial Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Neo Industrial",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--botanical-system",
    "name": "Botanical System Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Botanical System",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--playful-plastic",
    "name": "Playful Plastic Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Playful Plastic",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--monochrome-atelier",
    "name": "Monochrome Atelier Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Monochrome Atelier",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--retro-terminal",
    "name": "Retro Terminal Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Retro Terminal",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "halo-border-cta--spatial-glass",
    "name": "Spatial Glass Halo Border CTA",
    "category": "buttons-controls",
    "art_direction": "Spatial Glass",
    "summary": "A narrow moving highlight travels around the control border once on intent. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Masked conic gradient border with animation limited to hover, focus, or first reveal. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "premium CTA; AI action; launch signup",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "contrast-safe inner control; reduced motion uses a static accent border",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "multiple adjacent CTAs; permanent spinning borders",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#halo-border-cta--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--editorial-ink",
    "name": "Editorial Ink Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Editorial Ink",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--luminous-grid",
    "name": "Luminous Grid Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Luminous Grid",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--soft-material",
    "name": "Soft Material Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Soft Material",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--liquid-chrome",
    "name": "Liquid Chrome Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Liquid Chrome",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--swiss-signal",
    "name": "Swiss Signal Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Swiss Signal",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--atmospheric-film",
    "name": "Atmospheric Film Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Atmospheric Film",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--neo-industrial",
    "name": "Neo Industrial Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Neo Industrial",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--botanical-system",
    "name": "Botanical System Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Botanical System",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--playful-plastic",
    "name": "Playful Plastic Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Playful Plastic",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--monochrome-atelier",
    "name": "Monochrome Atelier Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Monochrome Atelier",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--retro-terminal",
    "name": "Retro Terminal Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Retro Terminal",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 82,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-choice-cluster--spatial-glass",
    "name": "Spatial Glass Radial Choice Cluster",
    "category": "buttons-controls",
    "art_direction": "Spatial Glass",
    "summary": "A small set of mutually exclusive choices fans around a compact trigger. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Radio group semantics with polar layout, roving focus, and linear mobile fallback. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "view mode; tool selection; creative configuration",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real radio group; arrow-key support; labels always visible on focus",
    "content_contract": "Preserve native control semantics, stable accessible names, and unambiguous action/state labels.",
    "responsive_strategy": "Disable pointer-specific behavior on coarse input and preserve at least 44px touch targets.",
    "interaction_inputs": "hover; focus-visible; press; keyboard; touch",
    "fallback_strategy": "Keep a fully styled static native control with visible focus and state.",
    "test_focus": "keyboard; touch; RTL; disabled/loading state; contrast throughout motion",
    "implementation_steps": "build native control; add focus/press states; add optional pointer effect; test every state",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "more than six options; primary site navigation",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 79,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-choice-cluster--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--editorial-ink",
    "name": "Editorial Ink Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--luminous-grid",
    "name": "Luminous Grid Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--soft-material",
    "name": "Soft Material Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--liquid-chrome",
    "name": "Liquid Chrome Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--swiss-signal",
    "name": "Swiss Signal Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 89,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--atmospheric-film",
    "name": "Atmospheric Film Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 89,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--neo-industrial",
    "name": "Neo Industrial Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--botanical-system",
    "name": "Botanical System Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--playful-plastic",
    "name": "Playful Plastic Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--monochrome-atelier",
    "name": "Monochrome Atelier Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--retro-terminal",
    "name": "Retro Terminal Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 89,
    "novelty_score": 86,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-identity-card--spatial-glass",
    "name": "Spatial Glass Holographic Identity Card",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "A portrait or product card catches a restrained spectral foil under pointer movement. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pointer-relative gradient layers, blend modes, and capped perspective. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "membership; profile; collectible product; premium credential",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "content stays static; effect disabled on touch/reduced motion; preserve contrast",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "large grids; serious compliance credentials; low-quality photography",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 89,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-identity-card--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--editorial-ink",
    "name": "Editorial Ink Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--luminous-grid",
    "name": "Luminous Grid Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--soft-material",
    "name": "Soft Material Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--liquid-chrome",
    "name": "Liquid Chrome Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--swiss-signal",
    "name": "Swiss Signal Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--atmospheric-film",
    "name": "Atmospheric Film Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--neo-industrial",
    "name": "Neo Industrial Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--botanical-system",
    "name": "Botanical System Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--playful-plastic",
    "name": "Playful Plastic Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--monochrome-atelier",
    "name": "Monochrome Atelier Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--retro-terminal",
    "name": "Retro Terminal Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "timeline-fold-card--spatial-glass",
    "name": "Spatial Glass Timeline Fold Card",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "A card unfolds one chronological layer at a time while preserving context. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Disclosure semantics with clipped panels and height-aware transitions. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "milestones; release history; case study; process",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "button-controlled disclosure; expanded state; content readable without animation",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "simultaneous comparison; timelines with dozens of items",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#timeline-fold-card--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--editorial-ink",
    "name": "Editorial Ink Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--luminous-grid",
    "name": "Luminous Grid Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--soft-material",
    "name": "Soft Material Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--liquid-chrome",
    "name": "Liquid Chrome Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--swiss-signal",
    "name": "Swiss Signal Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 92,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--atmospheric-film",
    "name": "Atmospheric Film Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 92,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--neo-industrial",
    "name": "Neo Industrial Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--botanical-system",
    "name": "Botanical System Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--playful-plastic",
    "name": "Playful Plastic Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--monochrome-atelier",
    "name": "Monochrome Atelier Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--retro-terminal",
    "name": "Retro Terminal Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 92,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "shimmer-edge-feature--spatial-glass",
    "name": "Spatial Glass Shimmer Edge Feature",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "A single light pass traces the edge of a featured surface at meaningful moments. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Masked linear gradient with one-shot state and no permanent loop. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "featured plan; launch item; new capability",
    "dependencies": "css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "decorative highlight; strong static border; reduced motion removes travel",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "every card in a grid; urgent warning states",
    "impact": "subtle",
    "quality_score": 97,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#shimmer-edge-feature--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--editorial-ink",
    "name": "Editorial Ink Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Editorial Ink",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--luminous-grid",
    "name": "Luminous Grid Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Luminous Grid",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--soft-material",
    "name": "Soft Material Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Soft Material",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--liquid-chrome",
    "name": "Liquid Chrome Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Liquid Chrome",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--swiss-signal",
    "name": "Swiss Signal Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Swiss Signal",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--atmospheric-film",
    "name": "Atmospheric Film Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Atmospheric Film",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--neo-industrial",
    "name": "Neo Industrial Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Neo Industrial",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--botanical-system",
    "name": "Botanical System Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Botanical System",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--playful-plastic",
    "name": "Playful Plastic Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Playful Plastic",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--monochrome-atelier",
    "name": "Monochrome Atelier Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Monochrome Atelier",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--retro-terminal",
    "name": "Retro Terminal Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Retro Terminal",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 83,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "spatial-bento-cell--spatial-glass",
    "name": "Spatial Glass Spatial Bento Cell",
    "category": "cards-surfaces",
    "art_direction": "Spatial Glass",
    "summary": "A bento cell contains a miniature spatial demonstration rather than generic decoration. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Container-query layout with a bounded CSS/SVG/canvas micro-demo. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "feature proof; workflow preview; product capability",
    "dependencies": "css; optional-svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "written explanation remains primary; demo pauses offscreen",
    "content_contract": "Keep information hierarchy and actions usable without tilt, reveal, depth, or hover.",
    "responsive_strategy": "Flatten perspective and expose secondary content explicitly on touch and narrow layouts.",
    "interaction_inputs": "hover; focus-within; press; optional drag",
    "fallback_strategy": "Render a static card with all essential content and actions visible.",
    "test_focus": "focus order; touch parity; content overflow; grid repetition; reduced motion",
    "implementation_steps": "structure semantic content; establish static surface; add bounded depth/reveal; test repeated instances",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "features without a demonstrable behavior; too many animated cells",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 86,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#spatial-bento-cell--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--editorial-ink",
    "name": "Editorial Ink Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Editorial Ink",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--luminous-grid",
    "name": "Luminous Grid Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Luminous Grid",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--soft-material",
    "name": "Soft Material Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Soft Material",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--liquid-chrome",
    "name": "Liquid Chrome Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Liquid Chrome",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--swiss-signal",
    "name": "Swiss Signal Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Swiss Signal",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--atmospheric-film",
    "name": "Atmospheric Film Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Atmospheric Film",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--neo-industrial",
    "name": "Neo Industrial Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Neo Industrial",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--botanical-system",
    "name": "Botanical System Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Botanical System",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--playful-plastic",
    "name": "Playful Plastic Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Playful Plastic",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--monochrome-atelier",
    "name": "Monochrome Atelier Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Monochrome Atelier",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--retro-terminal",
    "name": "Retro Terminal Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Retro Terminal",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "ribbon-chapter-nav--spatial-glass",
    "name": "Spatial Glass Ribbon Chapter Nav",
    "category": "navigation",
    "art_direction": "Spatial Glass",
    "summary": "A slim ribbon marks page chapters and bends around the active label. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Sticky semantic nav with SVG or CSS active track and intersection state. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "long editorial; annual report; case study",
    "dependencies": "css; svg; javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav landmark; aria-current; compact select/list fallback on mobile",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "short pages; unpredictable dynamic section heights",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#ribbon-chapter-nav--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--editorial-ink",
    "name": "Editorial Ink Radial Context Menu",
    "category": "navigation",
    "art_direction": "Editorial Ink",
    "summary": "A small contextual action set opens around the invocation point. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--luminous-grid",
    "name": "Luminous Grid Radial Context Menu",
    "category": "navigation",
    "art_direction": "Luminous Grid",
    "summary": "A small contextual action set opens around the invocation point. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--soft-material",
    "name": "Soft Material Radial Context Menu",
    "category": "navigation",
    "art_direction": "Soft Material",
    "summary": "A small contextual action set opens around the invocation point. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--liquid-chrome",
    "name": "Liquid Chrome Radial Context Menu",
    "category": "navigation",
    "art_direction": "Liquid Chrome",
    "summary": "A small contextual action set opens around the invocation point. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--swiss-signal",
    "name": "Swiss Signal Radial Context Menu",
    "category": "navigation",
    "art_direction": "Swiss Signal",
    "summary": "A small contextual action set opens around the invocation point. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--atmospheric-film",
    "name": "Atmospheric Film Radial Context Menu",
    "category": "navigation",
    "art_direction": "Atmospheric Film",
    "summary": "A small contextual action set opens around the invocation point. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--neo-industrial",
    "name": "Neo Industrial Radial Context Menu",
    "category": "navigation",
    "art_direction": "Neo Industrial",
    "summary": "A small contextual action set opens around the invocation point. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--botanical-system",
    "name": "Botanical System Radial Context Menu",
    "category": "navigation",
    "art_direction": "Botanical System",
    "summary": "A small contextual action set opens around the invocation point. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--playful-plastic",
    "name": "Playful Plastic Radial Context Menu",
    "category": "navigation",
    "art_direction": "Playful Plastic",
    "summary": "A small contextual action set opens around the invocation point. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--monochrome-atelier",
    "name": "Monochrome Atelier Radial Context Menu",
    "category": "navigation",
    "art_direction": "Monochrome Atelier",
    "summary": "A small contextual action set opens around the invocation point. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--retro-terminal",
    "name": "Retro Terminal Radial Context Menu",
    "category": "navigation",
    "art_direction": "Retro Terminal",
    "summary": "A small contextual action set opens around the invocation point. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "radial-context-menu--spatial-glass",
    "name": "Spatial Glass Radial Context Menu",
    "category": "navigation",
    "art_direction": "Spatial Glass",
    "summary": "A small contextual action set opens around the invocation point. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Menu semantics with polar visual layout and linear keyboard reading order. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "creative canvas; map; diagram; media editor",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "full keyboard menu; escape/restore focus; conventional list fallback",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "primary navigation; more than eight actions; mobile-only products",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#radial-context-menu--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--editorial-ink",
    "name": "Editorial Ink Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Editorial Ink",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--luminous-grid",
    "name": "Luminous Grid Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Luminous Grid",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--soft-material",
    "name": "Soft Material Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Soft Material",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--liquid-chrome",
    "name": "Liquid Chrome Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Liquid Chrome",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--swiss-signal",
    "name": "Swiss Signal Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Swiss Signal",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--atmospheric-film",
    "name": "Atmospheric Film Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Atmospheric Film",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--neo-industrial",
    "name": "Neo Industrial Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Neo Industrial",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--botanical-system",
    "name": "Botanical System Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Botanical System",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 81,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--playful-plastic",
    "name": "Playful Plastic Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Playful Plastic",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--monochrome-atelier",
    "name": "Monochrome Atelier Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Monochrome Atelier",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--retro-terminal",
    "name": "Retro Terminal Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Retro Terminal",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "breadcrumb-motion-track--spatial-glass",
    "name": "Spatial Glass Breadcrumb Motion Track",
    "category": "navigation",
    "art_direction": "Spatial Glass",
    "summary": "A compact track shows route depth and animates only the changed segment. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Real breadcrumb list with shared underline/marker transition. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "portfolio detail; docs; product hierarchy",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "nav label; ordered list; aria-current; no content hidden by animation",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "flat sites; route names too long for compact layouts",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 84,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#breadcrumb-motion-track--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--editorial-ink",
    "name": "Editorial Ink Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Editorial Ink",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--luminous-grid",
    "name": "Luminous Grid Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Luminous Grid",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--soft-material",
    "name": "Soft Material Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Soft Material",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--liquid-chrome",
    "name": "Liquid Chrome Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Liquid Chrome",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 84,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--swiss-signal",
    "name": "Swiss Signal Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Swiss Signal",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--atmospheric-film",
    "name": "Atmospheric Film Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Atmospheric Film",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 84,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--neo-industrial",
    "name": "Neo Industrial Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Neo Industrial",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--botanical-system",
    "name": "Botanical System Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Botanical System",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 84,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--playful-plastic",
    "name": "Playful Plastic Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Playful Plastic",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--monochrome-atelier",
    "name": "Monochrome Atelier Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Monochrome Atelier",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--retro-terminal",
    "name": "Retro Terminal Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Retro Terminal",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "split-screen-menu--spatial-glass",
    "name": "Spatial Glass Split-Screen Menu",
    "category": "navigation",
    "art_direction": "Spatial Glass",
    "summary": "Primary destinations control a coordinated image or message panel. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Accessible disclosure/navigation list with lazy media crossfades and focus-driven parity. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "agency; hospitality; cultural institution; portfolio",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "keyboard focus updates preview; media is supplementary; escape closes overlay",
    "content_contract": "Preserve landmarks, destination labels, current state, predictable focus, and real links.",
    "responsive_strategy": "Switch to a conventional compact menu/list when the expressive layout no longer fits.",
    "interaction_inputs": "keyboard; focus; hover; touch; route/section state",
    "fallback_strategy": "Provide a standard ordered navigation list with the same destinations.",
    "test_focus": "keyboard model; escape; focus restoration; current state; mobile reachability",
    "implementation_steps": "implement semantic navigation; wire state/focus; add presentation motion; verify mobile fallback",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "many destinations; weak imagery; task-focused SaaS navigation",
    "impact": "signature",
    "quality_score": 96,
    "novelty_score": 87,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#split-screen-menu--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--editorial-ink",
    "name": "Editorial Ink Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--luminous-grid",
    "name": "Luminous Grid Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--soft-material",
    "name": "Soft Material Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--liquid-chrome",
    "name": "Liquid Chrome Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--swiss-signal",
    "name": "Swiss Signal Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--atmospheric-film",
    "name": "Atmospheric Film Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--neo-industrial",
    "name": "Neo Industrial Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--botanical-system",
    "name": "Botanical System Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--playful-plastic",
    "name": "Playful Plastic Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--monochrome-atelier",
    "name": "Monochrome Atelier Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--retro-terminal",
    "name": "Retro Terminal Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "masked-film-hero--spatial-glass",
    "name": "Spatial Glass Masked Film Hero",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "A short muted film is revealed through brand geometry behind a clear proposition. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Responsive video with SVG/CSS mask, poster-first loading, and explicit motion fallback. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "hospitality; fashion; architecture; culture; product craft",
    "dependencies": "html-video; css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster fallback; no autoplay audio; pause/reduced-motion handling; readable text",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "weak video; slow connections; pages already using heavy hero media",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#masked-film-hero--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--editorial-ink",
    "name": "Editorial Ink Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--luminous-grid",
    "name": "Luminous Grid Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--soft-material",
    "name": "Soft Material Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--liquid-chrome",
    "name": "Liquid Chrome Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--swiss-signal",
    "name": "Swiss Signal Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--atmospheric-film",
    "name": "Atmospheric Film Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--neo-industrial",
    "name": "Neo Industrial Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--botanical-system",
    "name": "Botanical System Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--playful-plastic",
    "name": "Playful Plastic Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--monochrome-atelier",
    "name": "Monochrome Atelier Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--retro-terminal",
    "name": "Retro Terminal Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "exploded-product-hero--spatial-glass",
    "name": "Spatial Glass Exploded Product Hero",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "Product layers separate just enough to explain construction or capability. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "SVG layers, CSS transforms, or an optimized 3D model with labeled steps. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "hardware; packaging; technical product; modular platform",
    "dependencies": "svg-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "semantic feature list; poster fallback; reduced motion shows final exploded view",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "products without meaningful layers; unoptimized 3D assets",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#exploded-product-hero--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--editorial-ink",
    "name": "Editorial Ink Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--luminous-grid",
    "name": "Luminous Grid Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--soft-material",
    "name": "Soft Material Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--liquid-chrome",
    "name": "Liquid Chrome Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--swiss-signal",
    "name": "Swiss Signal Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--atmospheric-film",
    "name": "Atmospheric Film Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--neo-industrial",
    "name": "Neo Industrial Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--botanical-system",
    "name": "Botanical System Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--playful-plastic",
    "name": "Playful Plastic Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--monochrome-atelier",
    "name": "Monochrome Atelier Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--retro-terminal",
    "name": "Retro Terminal Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "process-diagram-hero--spatial-glass",
    "name": "Spatial Glass Process Diagram Hero",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "A concise system diagram makes the value proposition visible above the fold. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Semantic steps connected by responsive SVG paths with one bounded flow signal. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "workflow SaaS; infrastructure; automation; service method",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "ordered process list; connectors are decorative; final state on reduced motion",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "processes too complex for three to five steps",
    "impact": "signature",
    "quality_score": 98,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#process-diagram-hero--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--editorial-ink",
    "name": "Editorial Ink Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Editorial Ink",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--luminous-grid",
    "name": "Luminous Grid Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Luminous Grid",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--soft-material",
    "name": "Soft Material Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Soft Material",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--liquid-chrome",
    "name": "Liquid Chrome Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Liquid Chrome",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--swiss-signal",
    "name": "Swiss Signal Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Swiss Signal",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--atmospheric-film",
    "name": "Atmospheric Film Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Atmospheric Film",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--neo-industrial",
    "name": "Neo Industrial Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Neo Industrial",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--botanical-system",
    "name": "Botanical System Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Botanical System",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--playful-plastic",
    "name": "Playful Plastic Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Playful Plastic",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--monochrome-atelier",
    "name": "Monochrome Atelier Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Monochrome Atelier",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--retro-terminal",
    "name": "Retro Terminal Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Retro Terminal",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "stacked-feature-deck--spatial-glass",
    "name": "Spatial Glass Stacked Feature Deck",
    "category": "heroes-sections",
    "art_direction": "Spatial Glass",
    "summary": "Feature panels advance as a compact deck while a stable summary anchors the story. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS sticky or explicit controls with shared-layout card transitions. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "product tour; services; portfolio chapters",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "linear document fallback; explicit controls; no scroll hijack",
    "content_contract": "Lead with a real proposition, proof, primary action, and media that supports the message.",
    "responsive_strategy": "Collapse overlap and spatial composition into a clear reading sequence on narrow screens.",
    "interaction_inputs": "entrance; local scroll; optional pointer; explicit controls",
    "fallback_strategy": "Render complete headline, proof, CTA, and optimized poster/static composition.",
    "test_focus": "LCP; reading order; CTA visibility; mobile crop; reduced motion; no-JS content",
    "implementation_steps": "lock content hierarchy; build responsive static layout; add one signature behavior; measure LCP and CLS",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "long mobile pages; features needing simultaneous comparison",
    "impact": "signature",
    "quality_score": 95,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#stacked-feature-deck--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--editorial-ink",
    "name": "Editorial Ink Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Editorial Ink",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--luminous-grid",
    "name": "Luminous Grid Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Luminous Grid",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--soft-material",
    "name": "Soft Material Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Soft Material",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 75,
    "novelty_score": 88,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--liquid-chrome",
    "name": "Liquid Chrome Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Liquid Chrome",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--swiss-signal",
    "name": "Swiss Signal Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Swiss Signal",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--atmospheric-film",
    "name": "Atmospheric Film Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Atmospheric Film",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 95,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--neo-industrial",
    "name": "Neo Industrial Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Neo Industrial",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--botanical-system",
    "name": "Botanical System Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Botanical System",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--playful-plastic",
    "name": "Playful Plastic Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Playful Plastic",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 75,
    "novelty_score": 88,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--monochrome-atelier",
    "name": "Monochrome Atelier Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Monochrome Atelier",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--retro-terminal",
    "name": "Retro Terminal Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Retro Terminal",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "horizontal-story-track--spatial-glass",
    "name": "Spatial Glass Horizontal Story Track",
    "category": "scroll-transitions",
    "art_direction": "Spatial Glass",
    "summary": "A bounded desktop chapter moves laterally while mobile remains vertical. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Sticky local section mapping vertical progress to a transform track with snap fallback. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "timeline; visual case study; process; collection",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "normal vertical DOM order; mobile disables horizontal mapping; reduced motion static",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "entire-page hijacking; text-heavy chapters; nested horizontal gestures",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 92,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#horizontal-story-track--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--editorial-ink",
    "name": "Editorial Ink Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Editorial Ink",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--luminous-grid",
    "name": "Luminous Grid Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Luminous Grid",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--soft-material",
    "name": "Soft Material Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Soft Material",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--liquid-chrome",
    "name": "Liquid Chrome Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Liquid Chrome",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--swiss-signal",
    "name": "Swiss Signal Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Swiss Signal",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--atmospheric-film",
    "name": "Atmospheric Film Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Atmospheric Film",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 92,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--neo-industrial",
    "name": "Neo Industrial Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Neo Industrial",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--botanical-system",
    "name": "Botanical System Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Botanical System",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--playful-plastic",
    "name": "Playful Plastic Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Playful Plastic",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--monochrome-atelier",
    "name": "Monochrome Atelier Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Monochrome Atelier",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--retro-terminal",
    "name": "Retro Terminal Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Retro Terminal",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-zoom-chapter--spatial-glass",
    "name": "Spatial Glass Image Zoom Chapter",
    "category": "scroll-transitions",
    "art_direction": "Spatial Glass",
    "summary": "A single image crop widens to reveal context as its story becomes specific. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Local scroll progress maps to scale and clip-path with reserved dimensions. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "architecture; travel; before-context story; photography",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "alt text and caption remain stable; reduced motion shows final crop",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "diagrams requiring a fixed scale; low-resolution media",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-zoom-chapter--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--editorial-ink",
    "name": "Editorial Ink Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Editorial Ink",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--luminous-grid",
    "name": "Luminous Grid Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Luminous Grid",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--soft-material",
    "name": "Soft Material Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Soft Material",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--liquid-chrome",
    "name": "Liquid Chrome Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Liquid Chrome",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--swiss-signal",
    "name": "Swiss Signal Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Swiss Signal",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--atmospheric-film",
    "name": "Atmospheric Film Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Atmospheric Film",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 92,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--neo-industrial",
    "name": "Neo Industrial Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Neo Industrial",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--botanical-system",
    "name": "Botanical System Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Botanical System",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--playful-plastic",
    "name": "Playful Plastic Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Playful Plastic",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--monochrome-atelier",
    "name": "Monochrome Atelier Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Monochrome Atelier",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--retro-terminal",
    "name": "Retro Terminal Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Retro Terminal",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "text-wipe-progress--spatial-glass",
    "name": "Spatial Glass Text Wipe Progress",
    "category": "scroll-transitions",
    "art_direction": "Spatial Glass",
    "summary": "A short statement gains contrast word by word as its section is read. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Background-clip or layered text driven by bounded scroll progress. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "manifesto; key claim; transition statement",
    "dependencies": "css-scroll-timeline-or-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "single semantic text node; baseline contrast remains readable",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "paragraphs; essential instructions; low-contrast palettes",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#text-wipe-progress--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--editorial-ink",
    "name": "Editorial Ink Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Editorial Ink",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--luminous-grid",
    "name": "Luminous Grid Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Luminous Grid",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--soft-material",
    "name": "Soft Material Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Soft Material",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--liquid-chrome",
    "name": "Liquid Chrome Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Liquid Chrome",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--swiss-signal",
    "name": "Swiss Signal Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Swiss Signal",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--atmospheric-film",
    "name": "Atmospheric Film Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Atmospheric Film",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 95,
    "novelty_score": 92,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--neo-industrial",
    "name": "Neo Industrial Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Neo Industrial",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--botanical-system",
    "name": "Botanical System Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Botanical System",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--playful-plastic",
    "name": "Playful Plastic Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Playful Plastic",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 79,
    "novelty_score": 85,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--monochrome-atelier",
    "name": "Monochrome Atelier Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Monochrome Atelier",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--retro-terminal",
    "name": "Retro Terminal Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Retro Terminal",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "sticky-comparison-rail--spatial-glass",
    "name": "Spatial Glass Sticky Comparison Rail",
    "category": "scroll-transitions",
    "art_direction": "Spatial Glass",
    "summary": "A stable criterion rail aligns changing options for easier comparison. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS sticky columns with semantic comparison table/list and discrete state changes. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "plans; product versions; before-after systems",
    "dependencies": "css; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "subtle",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: subtle.",
    "performance_cost": "low",
    "accessibility_contract": "table/list semantics; mobile stacks criteria with labels; no hidden cells",
    "content_contract": "Keep document order, scrolling, and content comprehension intact without scroll-linked motion.",
    "responsive_strategy": "Disable pinning/horizontal mapping on small screens unless proven stable and essential.",
    "interaction_inputs": "bounded local scroll; explicit navigation controls where needed",
    "fallback_strategy": "Use normal document flow with discrete sections and final visual states.",
    "test_focus": "scroll freedom; mobile viewport changes; reduced motion; deep links; content height",
    "implementation_steps": "build linear document; define bounded section; map minimal properties; test native scrolling first",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "few simple differences; very wide unprioritized datasets",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 89,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#sticky-comparison-rail--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll / transition",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--editorial-ink",
    "name": "Editorial Ink Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Editorial Ink",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--luminous-grid",
    "name": "Luminous Grid Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Luminous Grid",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--soft-material",
    "name": "Soft Material Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Soft Material",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--liquid-chrome",
    "name": "Liquid Chrome Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Liquid Chrome",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--swiss-signal",
    "name": "Swiss Signal Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Swiss Signal",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--atmospheric-film",
    "name": "Atmospheric Film Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Atmospheric Film",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--neo-industrial",
    "name": "Neo Industrial Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Neo Industrial",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--botanical-system",
    "name": "Botanical System Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Botanical System",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--playful-plastic",
    "name": "Playful Plastic Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Playful Plastic",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--monochrome-atelier",
    "name": "Monochrome Atelier Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Monochrome Atelier",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--retro-terminal",
    "name": "Retro Terminal Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Retro Terminal",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "image-trail-gallery--spatial-glass",
    "name": "Spatial Glass Image Trail Gallery",
    "category": "pointer-media",
    "art_direction": "Spatial Glass",
    "summary": "Sparse image fragments briefly follow deliberate pointer travel. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Pooled image nodes sampled by distance with hard count/lifetime limits. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "artist portfolio; event; fashion; music",
    "dependencies": "javascript",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "decorative pointer-only layer; semantic gallery remains; disabled on touch/reduced",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "task interfaces; pages with another cursor effect; large source images",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#image-trail-gallery--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--editorial-ink",
    "name": "Editorial Ink Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Editorial Ink",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--luminous-grid",
    "name": "Luminous Grid Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Luminous Grid",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--soft-material",
    "name": "Soft Material Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Soft Material",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--liquid-chrome",
    "name": "Liquid Chrome Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Liquid Chrome",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--swiss-signal",
    "name": "Swiss Signal Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Swiss Signal",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--atmospheric-film",
    "name": "Atmospheric Film Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Atmospheric Film",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--neo-industrial",
    "name": "Neo Industrial Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Neo Industrial",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--botanical-system",
    "name": "Botanical System Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Botanical System",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--playful-plastic",
    "name": "Playful Plastic Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Playful Plastic",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--monochrome-atelier",
    "name": "Monochrome Atelier Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Monochrome Atelier",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--retro-terminal",
    "name": "Retro Terminal Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Retro Terminal",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pixelate-reveal-gallery--spatial-glass",
    "name": "Spatial Glass Pixelate Reveal Gallery",
    "category": "pointer-media",
    "art_direction": "Spatial Glass",
    "summary": "Gallery images resolve from coarse pixels into sharp media on selection. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Canvas downsample/upscale or CSS image-set swap with bounded transition. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "digital art; gaming; technology archive; teaser gallery",
    "dependencies": "canvas-or-css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "alt text and captions load immediately; reduced motion uses direct swap",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "photography where first-impression clarity is essential",
    "impact": "supporting",
    "quality_score": 88,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pixelate-reveal-gallery--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--editorial-ink",
    "name": "Editorial Ink Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Editorial Ink",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--luminous-grid",
    "name": "Luminous Grid Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Luminous Grid",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--soft-material",
    "name": "Soft Material Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Soft Material",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--liquid-chrome",
    "name": "Liquid Chrome Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Liquid Chrome",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--swiss-signal",
    "name": "Swiss Signal Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Swiss Signal",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--atmospheric-film",
    "name": "Atmospheric Film Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Atmospheric Film",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--neo-industrial",
    "name": "Neo Industrial Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Neo Industrial",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--botanical-system",
    "name": "Botanical System Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Botanical System",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--playful-plastic",
    "name": "Playful Plastic Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Playful Plastic",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--monochrome-atelier",
    "name": "Monochrome Atelier Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Monochrome Atelier",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 97,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--retro-terminal",
    "name": "Retro Terminal Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Retro Terminal",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "draggable-mosaic--spatial-glass",
    "name": "Spatial Glass Draggable Mosaic",
    "category": "pointer-media",
    "art_direction": "Spatial Glass",
    "summary": "A bounded image mosaic can be explored by drag without losing navigation. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Transformable plane with clamped bounds, inertia cap, and explicit directional controls. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "large portfolio; map-like collection; visual archive",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "buttons/keyboard pan; item links remain focusable; mobile snap-grid fallback",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "small collections; precision maps; nested page scrolling conflicts",
    "impact": "signature",
    "quality_score": 87,
    "novelty_score": 94,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#draggable-mosaic--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--editorial-ink",
    "name": "Editorial Ink Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Editorial Ink",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--luminous-grid",
    "name": "Luminous Grid Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Luminous Grid",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--soft-material",
    "name": "Soft Material Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Soft Material",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--liquid-chrome",
    "name": "Liquid Chrome Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Liquid Chrome",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--swiss-signal",
    "name": "Swiss Signal Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Swiss Signal",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--atmospheric-film",
    "name": "Atmospheric Film Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Atmospheric Film",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--neo-industrial",
    "name": "Neo Industrial Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Neo Industrial",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--botanical-system",
    "name": "Botanical System Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Botanical System",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--playful-plastic",
    "name": "Playful Plastic Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Playful Plastic",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--monochrome-atelier",
    "name": "Monochrome Atelier Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Monochrome Atelier",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 96,
    "novelty_score": 94,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--retro-terminal",
    "name": "Retro Terminal Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Retro Terminal",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "cursor-label-preview--spatial-glass",
    "name": "Spatial Glass Cursor Label Preview",
    "category": "pointer-media",
    "art_direction": "Spatial Glass",
    "summary": "A compact label and thumbnail follow links only while intent is clear. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "One fixed preview layer driven by focused/hovered item data and damped transforms. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "project index; article list; product collection",
    "dependencies": "javascript; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "link text remains complete; keyboard focus triggers anchored preview; touch inline media",
    "content_contract": "Keep media captions, actions, and alternate information available without a pointer effect.",
    "responsive_strategy": "Replace hover/cursor behavior with explicit controls, inline media, or snap layouts on touch.",
    "interaction_inputs": "fine pointer; focus; touch controls; optional drag",
    "fallback_strategy": "Render a conventional accessible gallery, comparison, or media list.",
    "test_focus": "touch parity; keyboard controls; image loading; offscreen cleanup; reduced motion",
    "implementation_steps": "build semantic media collection; add explicit controls; layer pointer behavior; cap resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "links with no useful preview; task menus; custom cursor already present",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 91,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#cursor-label-preview--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "pointer / media treatment",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--editorial-ink",
    "name": "Editorial Ink Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Editorial Ink",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--luminous-grid",
    "name": "Luminous Grid Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Luminous Grid",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--soft-material",
    "name": "Soft Material Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Soft Material",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--liquid-chrome",
    "name": "Liquid Chrome Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Liquid Chrome",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--swiss-signal",
    "name": "Swiss Signal Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Swiss Signal",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--atmospheric-film",
    "name": "Atmospheric Film Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Atmospheric Film",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--neo-industrial",
    "name": "Neo Industrial Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Neo Industrial",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--botanical-system",
    "name": "Botanical System Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Botanical System",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--playful-plastic",
    "name": "Playful Plastic Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Playful Plastic",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--monochrome-atelier",
    "name": "Monochrome Atelier Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Monochrome Atelier",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--retro-terminal",
    "name": "Retro Terminal Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Retro Terminal",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "elastic-search-command--spatial-glass",
    "name": "Spatial Glass Elastic Search Command",
    "category": "forms-status",
    "art_direction": "Spatial Glass",
    "summary": "Search expands from a compact trigger into a focused command surface. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Dialog/combobox primitives with shared geometry and query-aware results. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "documentation; catalog; dashboard; content archive",
    "dependencies": "accessible-primitives; optional-motion",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "combobox/dialog semantics; focus management; escape closes; results announced",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "sites with only a handful of pages; search without meaningful indexing",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#elastic-search-command--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--editorial-ink",
    "name": "Editorial Ink Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Editorial Ink",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Native range control with tokenized visual track and discrete content states. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--luminous-grid",
    "name": "Luminous Grid Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Luminous Grid",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Native range control with tokenized visual track and discrete content states. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--soft-material",
    "name": "Soft Material Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Soft Material",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Native range control with tokenized visual track and discrete content states. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--liquid-chrome",
    "name": "Liquid Chrome Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Liquid Chrome",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Native range control with tokenized visual track and discrete content states. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--swiss-signal",
    "name": "Swiss Signal Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Swiss Signal",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Native range control with tokenized visual track and discrete content states. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--atmospheric-film",
    "name": "Atmospheric Film Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Atmospheric Film",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Native range control with tokenized visual track and discrete content states. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--neo-industrial",
    "name": "Neo Industrial Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Neo Industrial",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Native range control with tokenized visual track and discrete content states. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--botanical-system",
    "name": "Botanical System Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Botanical System",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Native range control with tokenized visual track and discrete content states. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--playful-plastic",
    "name": "Playful Plastic Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Playful Plastic",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Native range control with tokenized visual track and discrete content states. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--monochrome-atelier",
    "name": "Monochrome Atelier Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Monochrome Atelier",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Native range control with tokenized visual track and discrete content states. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--retro-terminal",
    "name": "Retro Terminal Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Retro Terminal",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Native range control with tokenized visual track and discrete content states. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "narrative-slider-control--spatial-glass",
    "name": "Spatial Glass Narrative Slider Control",
    "category": "forms-status",
    "art_direction": "Spatial Glass",
    "summary": "A range input updates a visual story and its plain-language value together. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Native range control with tokenized visual track and discrete content states. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "pricing estimator; before-after; configuration; impact calculator",
    "dependencies": "javascript; css",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "native range semantics; keyboard steps; live value label; motion optional",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "values requiring exact typed input; decorative sliders with no decision value",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#narrative-slider-control--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--editorial-ink",
    "name": "Editorial Ink Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Editorial Ink",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--luminous-grid",
    "name": "Luminous Grid Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Luminous Grid",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--soft-material",
    "name": "Soft Material Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Soft Material",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--liquid-chrome",
    "name": "Liquid Chrome Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Liquid Chrome",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--swiss-signal",
    "name": "Swiss Signal Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Swiss Signal",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--atmospheric-film",
    "name": "Atmospheric Film Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Atmospheric Film",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--neo-industrial",
    "name": "Neo Industrial Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Neo Industrial",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 71,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--botanical-system",
    "name": "Botanical System Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Botanical System",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--playful-plastic",
    "name": "Playful Plastic Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Playful Plastic",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--monochrome-atelier",
    "name": "Monochrome Atelier Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Monochrome Atelier",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--retro-terminal",
    "name": "Retro Terminal Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Retro Terminal",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "upload-drop-reactor--spatial-glass",
    "name": "Spatial Glass Upload Drop Reactor",
    "category": "forms-status",
    "art_direction": "Spatial Glass",
    "summary": "A dropzone responds locally to drag intent and clearly stages selected files. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Native file input with drag overlay, file list, validation, and bounded visual reaction. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "creative tool; document workflow; media product",
    "dependencies": "accessible-primitives; css",
    "framework_fit": "React/Vue/Svelte using equivalent accessible primitives; framework-neutral behavior contract",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "real file input; keyboard browse; errors per file; no drag-only requirement",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "single tiny attachment actions; unsupported file-processing flows",
    "impact": "supporting",
    "quality_score": 97,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#upload-drop-reactor--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--editorial-ink",
    "name": "Editorial Ink Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Editorial Ink",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--editorial-ink",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--luminous-grid",
    "name": "Luminous Grid Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Luminous Grid",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--luminous-grid",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--soft-material",
    "name": "Soft Material Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Soft Material",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--soft-material",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--liquid-chrome",
    "name": "Liquid Chrome Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Liquid Chrome",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 85,
    "novelty_score": 71,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--liquid-chrome",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--swiss-signal",
    "name": "Swiss Signal Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Swiss Signal",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--swiss-signal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--atmospheric-film",
    "name": "Atmospheric Film Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Atmospheric Film",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 85,
    "novelty_score": 71,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--atmospheric-film",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--neo-industrial",
    "name": "Neo Industrial Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Neo Industrial",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 85,
    "novelty_score": 71,
    "compatibility": "good",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--neo-industrial",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--botanical-system",
    "name": "Botanical System Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Botanical System",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--botanical-system",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--playful-plastic",
    "name": "Playful Plastic Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Playful Plastic",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--playful-plastic",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--monochrome-atelier",
    "name": "Monochrome Atelier Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Monochrome Atelier",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--monochrome-atelier",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--retro-terminal",
    "name": "Retro Terminal Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Retro Terminal",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 98,
    "novelty_score": 78,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--retro-terminal",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "success-signal-burst--spatial-glass",
    "name": "Spatial Glass Success Signal Burst",
    "category": "forms-status",
    "art_direction": "Spatial Glass",
    "summary": "A small brand-shaped burst confirms a meaningful completed action once. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "CSS/SVG particles emitted from the result icon with a strict one-shot duration. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "purchase; publish; onboarding completion; saved milestone",
    "dependencies": "css-or-svg",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "low",
    "accessibility_contract": "persistent success text/live region; reduced motion shows static mark",
    "content_contract": "Keep native fields, persistent labels, validation, status text, and recoverable errors.",
    "responsive_strategy": "Prioritize one-column flow, mobile keyboards, readable errors, and stable controls.",
    "interaction_inputs": "keyboard; touch; focus; input state; async state",
    "fallback_strategy": "Use native controls and plain status/error messaging without decorative motion.",
    "test_focus": "labels; autocomplete; errors; live regions; loading; touch target; reduced motion",
    "implementation_steps": "implement native semantics; wire validation/state; add restrained feedback; test failure paths",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "routine autosave; repeated rapid actions; error recovery",
    "impact": "subtle",
    "quality_score": 96,
    "novelty_score": 75,
    "compatibility": "excellent",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#success-signal-burst--spatial-glass",
    "selection_pass": "structure",
    "selection_pass_label": "Structure / layout",
    "component_role": "base-composition",
    "enhancement_family": "layout / interface structure",
    "can_be_structural": true,
    "pairing_guidance": "This record can provide page or section hierarchy and can be combined with any other catalog records.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity and at any point in the design process.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--editorial-ink",
    "name": "Editorial Ink Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Editorial Ink",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--luminous-grid",
    "name": "Luminous Grid Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Luminous Grid",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--soft-material",
    "name": "Soft Material Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Soft Material",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--liquid-chrome",
    "name": "Liquid Chrome Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Liquid Chrome",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--swiss-signal",
    "name": "Swiss Signal Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Swiss Signal",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--atmospheric-film",
    "name": "Atmospheric Film Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Atmospheric Film",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--neo-industrial",
    "name": "Neo Industrial Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Neo Industrial",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--botanical-system",
    "name": "Botanical System Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Botanical System",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--playful-plastic",
    "name": "Playful Plastic Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Playful Plastic",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--monochrome-atelier",
    "name": "Monochrome Atelier Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Monochrome Atelier",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--retro-terminal",
    "name": "Retro Terminal Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Retro Terminal",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "morphing-chart-story--spatial-glass",
    "name": "Spatial Glass Morphing Chart Story",
    "category": "data-3d",
    "art_direction": "Spatial Glass",
    "summary": "One dataset changes visual form as the narrative question changes. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Shared data model mapped between SVG chart geometries with labeled state controls. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "annual report; research story; product analytics explanation",
    "dependencies": "svg; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "data table; chart title/description; direct state controls; reduced motion crossfade",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "live operational dashboards; unrelated datasets; misleading transitions",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#morphing-chart-story--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--editorial-ink",
    "name": "Editorial Ink Layered Network Map",
    "category": "data-3d",
    "art_direction": "Editorial Ink",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--luminous-grid",
    "name": "Luminous Grid Layered Network Map",
    "category": "data-3d",
    "art_direction": "Luminous Grid",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--soft-material",
    "name": "Soft Material Layered Network Map",
    "category": "data-3d",
    "art_direction": "Soft Material",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--liquid-chrome",
    "name": "Liquid Chrome Layered Network Map",
    "category": "data-3d",
    "art_direction": "Liquid Chrome",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--swiss-signal",
    "name": "Swiss Signal Layered Network Map",
    "category": "data-3d",
    "art_direction": "Swiss Signal",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--atmospheric-film",
    "name": "Atmospheric Film Layered Network Map",
    "category": "data-3d",
    "art_direction": "Atmospheric Film",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--neo-industrial",
    "name": "Neo Industrial Layered Network Map",
    "category": "data-3d",
    "art_direction": "Neo Industrial",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--botanical-system",
    "name": "Botanical System Layered Network Map",
    "category": "data-3d",
    "art_direction": "Botanical System",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--playful-plastic",
    "name": "Playful Plastic Layered Network Map",
    "category": "data-3d",
    "art_direction": "Playful Plastic",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--monochrome-atelier",
    "name": "Monochrome Atelier Layered Network Map",
    "category": "data-3d",
    "art_direction": "Monochrome Atelier",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--retro-terminal",
    "name": "Retro Terminal Layered Network Map",
    "category": "data-3d",
    "art_direction": "Retro Terminal",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "layered-network-map--spatial-glass",
    "name": "Spatial Glass Layered Network Map",
    "category": "data-3d",
    "art_direction": "Spatial Glass",
    "summary": "A network separates into meaningful layers instead of becoming a hairball. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "SVG/canvas graph with explicit grouping, progressive disclosure, and capped nodes. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "systems architecture; organization; infrastructure; research",
    "dependencies": "svg-or-canvas",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "balanced",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: balanced.",
    "performance_cost": "medium",
    "accessibility_contract": "equivalent grouped list/table; keyboard selection; color plus labels",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "networks without meaningful grouping; thousands of interactive nodes",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#layered-network-map--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--editorial-ink",
    "name": "Editorial Ink Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Editorial Ink",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--luminous-grid",
    "name": "Luminous Grid Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Luminous Grid",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--soft-material",
    "name": "Soft Material Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Soft Material",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--liquid-chrome",
    "name": "Liquid Chrome Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Liquid Chrome",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--swiss-signal",
    "name": "Swiss Signal Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Swiss Signal",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--atmospheric-film",
    "name": "Atmospheric Film Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Atmospheric Film",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--neo-industrial",
    "name": "Neo Industrial Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Neo Industrial",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--botanical-system",
    "name": "Botanical System Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Botanical System",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--playful-plastic",
    "name": "Playful Plastic Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Playful Plastic",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--monochrome-atelier",
    "name": "Monochrome Atelier Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Monochrome Atelier",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 74,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--retro-terminal",
    "name": "Retro Terminal Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Retro Terminal",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "scrollytelling-data-canvas--spatial-glass",
    "name": "Spatial Glass Scrollytelling Data Canvas",
    "category": "data-3d",
    "art_direction": "Spatial Glass",
    "summary": "A single data canvas updates through a short sequence of annotated claims. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "Sticky SVG/canvas with discrete chapter state, not continuous freeform morphing. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "research; impact; public data; market narrative",
    "dependencies": "svg-or-canvas; optional-motion",
    "framework_fit": "framework-neutral concept; React/Next; Vue/Nuxt; Svelte/SvelteKit; HTML/CSS where applicable",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "medium",
    "accessibility_contract": "all chapters and data available linearly; reduced motion uses static small multiples",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "exploratory dashboards; more than six narrative chapters",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#scrollytelling-data-canvas--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--editorial-ink",
    "name": "Editorial Ink Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Editorial Ink",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: warm paper surfaces, decisive display type, hairline rules, and ink-like interruptions.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Apply paper/ink tokens, asymmetric spacing, hard masks, and measured step-to-ease timing.",
    "style_tags": "editorial; tactile; high-contrast; art-directed",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use measured reveals, crisp masks, and pauses that follow reading order. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.paper; color.ink; color.mark; type.display; line.hairline; motion.measured",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--editorial-ink",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--luminous-grid",
    "name": "Luminous Grid Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Luminous Grid",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: dark technical surfaces, sparse grid signals, precise glows, and cool spectral accents.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Apply dark surface tokens, one spectral accent, grid overlays, and restrained light falloff.",
    "style_tags": "technical; luminous; dark; futuristic",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use damped springs, signal pulses, and low-amplitude ambient response. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.void; color.signal; color.grid; glow.signal; type.mono; motion.spring",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--luminous-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--soft-material",
    "name": "Soft Material Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Soft Material",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: calm tactile layers, muted color, pillowy depth, and friendly elastic feedback.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Apply muted surface tokens, broad radii, inset highlights, soft borders, and gentle spring timing.",
    "style_tags": "tactile; friendly; calm; soft",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use gentle springs, soft compression, and friendly state continuity. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.canvas; color.soft-accent; radius.soft; shadow.inset; type.humanist; motion.gentle",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--soft-material",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--liquid-chrome",
    "name": "Liquid Chrome Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Liquid Chrome",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: reflective gradients, fluid lenses, crisp black anchors, and controlled iridescence.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Apply metallic gradients, mask-based reflections, liquid easing, and a high-contrast fallback.",
    "style_tags": "reflective; fluid; premium; experimental",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use fluid easing, surface-following highlights, and bounded refraction. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.chrome; color.anchor; color.iridescent; radius.liquid; type.precise; motion.fluid",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--liquid-chrome",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--swiss-signal",
    "name": "Swiss Signal Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Swiss Signal",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: strict grids, oversized utility type, bright signal blocks, and immediate snappy motion.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Apply a rigid grid, square geometry, one signal color, numeric labels, and short linear-to-ease timing.",
    "style_tags": "swiss; utilitarian; bold; structured",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use immediate state changes, short linear travel, and typographic rhythm. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.field; color.signal; grid.strict; radius.none; type.grotesk; motion.snappy",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--swiss-signal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--atmospheric-film",
    "name": "Atmospheric Film Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Atmospheric Film",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: cinematic image crops, shadowed edges, soft light leaks, grain, and patient dissolves.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Apply image-led composition, filmic contrast, a small grain tile, edge vignettes, and slow bounded fades.",
    "style_tags": "cinematic; atmospheric; image-led; emotive",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use patient dissolves, slow crop changes, and no busy micro-motion. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.shadow; color.light-leak; texture.grain; type.cinematic; crop.editorial; motion.patient",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--atmospheric-film",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--neo-industrial",
    "name": "Neo Industrial Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Neo Industrial",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: exposed structure, mechanical spacing, stamped labels, dark metal, and one safety accent.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Expose grid logic, use squared geometry, technical annotations, restrained wear, and decisive mechanical timing.",
    "style_tags": "industrial; brutalist; mechanical; technical",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use direct travel, hard stops, and one short overshoot only for physical feedback. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.metal; color.safety; color.stencil; grid.exposed; type.condensed; motion.mechanical",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--neo-industrial",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--botanical-system",
    "name": "Botanical System Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Botanical System",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: mineral neutrals, leaf-like curves, translucent fibers, and slow growth rhythms.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Use earth-derived colors, branching geometry, fine organic texture, and growth/reveal timing without literal decoration.",
    "style_tags": "organic; botanical; calm; sustainable",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use slow directional growth, soft damping, and irregular but bounded phase offsets. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.mineral; color.leaf; color.soil; curve.organic; texture.fiber; motion.growth",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--botanical-system",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--playful-plastic",
    "name": "Playful Plastic Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Playful Plastic",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: saturated molded surfaces, chunky type, toy-like depth, and elastic state changes.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Use bold color roles, molded highlights, thick geometry, friendly icons, and short elastic feedback.",
    "style_tags": "playful; colorful; tactile; youthful",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use quick anticipation, one elastic settle, and clear press/release states. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.candy; color.plastic-shadow; radius.chunky; shadow.molded; type.round; motion.elastic",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--playful-plastic",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--monochrome-atelier",
    "name": "Monochrome Atelier Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Monochrome Atelier",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: ivory and near-black, disciplined whitespace, refined serif contrast, and quiet material detail.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Use a narrow monochrome range, large negative space, fine rules, exact crops, and nearly invisible transitions.",
    "style_tags": "luxury; monochrome; minimal; refined",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use patient fades, very short travel, and no decorative looping. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.ivory; color.carbon; color.graphite; space.atelier; type.didone; motion.quiet",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 70,
    "novelty_score": 92,
    "compatibility": "experimental",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--monochrome-atelier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--retro-terminal",
    "name": "Retro Terminal Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Retro Terminal",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: phosphor signals, raster grids, pixel typography, scan artifacts, and command-line precision.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Use a restrained phosphor palette, bitmap rhythm, subtle scan texture, stepped reveals, and modern readability.",
    "style_tags": "retro; terminal; pixel; cyber",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use stepped reveals, cursor blinks only where meaningful, and short signal glitches. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.phosphor; color.crt-black; grid.raster; type.pixel-mono; texture.scan; motion.stepped",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--retro-terminal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "holographic-model-viewer--spatial-glass",
    "name": "Spatial Glass Holographic Model Viewer",
    "category": "data-3d",
    "art_direction": "Spatial Glass",
    "summary": "An optimized model viewer uses restrained scan and annotation layers. Art direction: clear layered planes, edge refraction, cool depth, and physically coherent transparency.",
    "technique": "R3F/Three model with orbit limits, hotspots, poster fallback, and optional scan shader. Use few translucent planes, real depth ordering, edge highlights, backdrop fallbacks, and controlled spatial motion.",
    "style_tags": "spatial; glass; dimensional; clean",
    "best_for": "industrial design; architecture; product anatomy; museum object",
    "dependencies": "three-or-r3f",
    "framework_fit": "React/Next via R3F; adapt with Three.js or OGL for Vue/Svelte/vanilla",
    "motion_level": "expressive",
    "motion_choreography": "Use depth-aware parallax, slow damping, and avoid perpetual floating. Base intensity: expressive.",
    "performance_cost": "high",
    "accessibility_contract": "poster and textual hotspot list; keyboard controls; reduced motion disables scan",
    "content_contract": "Provide an equivalent table, list, annotation, or poster and never distort analytical meaning.",
    "responsive_strategy": "Reduce geometry/data density, cap DPR, simplify interaction, and prefer static posters on weak devices.",
    "interaction_inputs": "explicit controls; keyboard; touch; optional orbit/scroll",
    "fallback_strategy": "Render a labeled SVG, table/list, or optimized poster with the same conclusion.",
    "test_focus": "data accuracy; keyboard; color independence; cleanup; memory; reduced motion; device capability",
    "implementation_steps": "model semantic data/content; build static fallback; add rendering layer; cap and dispose resources",
    "brand_tokens": "color.glass; color.edge; depth.layer; blur.controlled; type.sans; motion.spatial",
    "avoid_when": "unoptimized models; decorative 3D with no explanatory value",
    "impact": "signature",
    "quality_score": 86,
    "novelty_score": 99,
    "compatibility": "strong",
    "source_kind": "owned-original-recipe",
    "license": "owned-original",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#holographic-model-viewer--spatial-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3D / data visual",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-3d-stagger-flip",
    "name": "3D Stagger Flip",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "3D Stagger Flip is a Framer code component that flips text character by character in 3D on hover or load, with adjustable stagger and spring transitions.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; 3d; stagger; flip",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/3d-stagger-flip",
    "official_source_url": "https://www.originkit.dev/components/3d-stagger-flip",
    "preview_video_url": "https://cdn.originkit.dev/components/3d-stagger-flip-gallery-720.mp4?v=ms485ctc",
    "preview_poster_url": "https://cdn.originkit.dev/components/3d-stagger-flip-gallery-poster.jpg?v=ms485ddr",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-3d-stagger-flip",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-3d-text-unfold",
    "name": "3D Text Unfold",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "3D Text Unfold is a Framer code component that animates text unfolding character by character with 3D rotation. Customize rotation, origin, and transition.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; 3d; unfold",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/3d-text-unfold",
    "official_source_url": "https://www.originkit.dev/components/3d-text-unfold",
    "preview_video_url": "https://cdn.originkit.dev/components/3d-text-unfold-gallery-720.mp4?v=ms48dkhs",
    "preview_poster_url": "https://cdn.originkit.dev/components/3d-text-unfold-gallery-poster.jpg?v=ms48dl21",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-3d-text-unfold",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-appear-text",
    "name": "Appear Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Appear Text is a looping kinetic typography component for Framer: a staggered word grid that zooms, wipes, and reveals one centered word on repeat.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; appear",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/appear-text",
    "official_source_url": "https://www.originkit.dev/components/appear-text",
    "preview_video_url": "https://cdn.originkit.dev/components/appear-text-gallery-720.mp4?v=ms4emhxz",
    "preview_poster_url": "https://cdn.originkit.dev/components/appear-text-gallery-poster.jpg?v=ms4emii0",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-appear-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-ascii-flame",
    "name": "Ascii Flame",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Ascii Flame is a real-time text-based fire animation for the web — customizable colors, wind, sparks, and embers, built with pure ASCII characters.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; ascii; flame",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/ascii-flame",
    "official_source_url": "https://www.originkit.dev/components/ascii-flame",
    "preview_video_url": "https://cdn.originkit.dev/components/ascii-flame-gallery-720.mp4?v=mrz4p1ra",
    "preview_poster_url": "https://cdn.originkit.dev/components/ascii-flame-gallery-poster.jpg?v=mrz4p2ab",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-ascii-flame",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-ascii-rain",
    "name": "ASCII Rain",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "ASCII Rain is a Framer code component that renders a Matrix-style falling glyph background, with adjustable speed, angle, density, and colors.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; ascii; rain",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/ascii-rain",
    "official_source_url": "https://www.originkit.dev/components/ascii-rain",
    "preview_video_url": "https://cdn.originkit.dev/components/ascii-rain-gallery-720.mp4?v=mrz7hz29",
    "preview_poster_url": "https://cdn.originkit.dev/components/ascii-rain-gallery-poster.jpg?v=mrz7hzp7",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-ascii-rain",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-ascii-reveal",
    "name": "ASCII Reveal",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "ASCII Reveal turns any image into live ASCII art with a hover-triggered porthole that reveals the real photo. Customizable ramp, columns, contrast, and color.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; ascii; reveal",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/ascii-reveal",
    "official_source_url": "https://www.originkit.dev/components/ascii-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/ascii-reveal-gallery-720.mp4?v=mrv5s010",
    "preview_poster_url": "https://cdn.originkit.dev/components/ascii-reveal-gallery-poster.jpg?v=mrv5s0m1",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-ascii-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-axis-cursor",
    "name": "Axis Cursor",
    "category": "Cursor interactions",
    "source_category": "cursor",
    "art_direction": "OriginKit",
    "summary": "Axis Cursor is a Framer code component that replaces the pointer with a live crosshair and X/Y coordinate label. Fully customizable colors, dot, and label styling.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; cursor; axis",
    "best_for": "desktop-first showcases; portfolio exploration; playful discovery",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/axis-cursor",
    "official_source_url": "https://www.originkit.dev/components/axis-cursor",
    "preview_video_url": "https://cdn.originkit.dev/components/axis-cursor-gallery-720.mp4?v=mrkqw0gi",
    "preview_poster_url": "https://cdn.originkit.dev/components/axis-cursor-gallery-poster.jpg?v=mrkquxev",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-axis-cursor",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "cursor",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-blackhole",
    "name": "Black Hole",
    "category": "Interactive elements",
    "source_category": "interactive-elements",
    "art_direction": "OriginKit",
    "summary": "A physically convincing 3D black hole — orbiting particles, simulated gravity inflow. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; interactive-elements; blackhole",
    "best_for": "immersive heroes; experimental features; high-attention product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/blackhole",
    "official_source_url": "https://www.originkit.dev/components/blackhole",
    "preview_video_url": "https://cdn.originkit.dev/components/blackhole-gallery-720.mp4?v=mr12u41y",
    "preview_poster_url": "https://cdn.originkit.dev/components/blackhole-gallery-poster.jpg?v=mr0864bf",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-blackhole",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-blinkingsquares",
    "name": "Blinking Squares",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "A grid of independently twinkling squares, shaped by a directional density fade and a cursor-following. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; blinkingsquares",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/blinkingsquares",
    "official_source_url": "https://www.originkit.dev/components/blinkingsquares",
    "preview_video_url": "https://cdn.originkit.dev/components/blinkingsquares-gallery-720.mp4?v=mr12u5x1",
    "preview_poster_url": "https://cdn.originkit.dev/components/blinkingsquares-gallery-poster.jpg?v=mr0hs24y",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-blinkingsquares",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-blob-text-reveal",
    "name": "Blob Text Reveal",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Blob Text Reveal is a Framer code component that wipes and reveals cycling words with a gooey blob, blurred character transitions, and full color control.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; blob; reveal",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/blob-text-reveal",
    "official_source_url": "https://www.originkit.dev/components/blob-text-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/blob-text-reveal-gallery-720.mp4?v=ms48x5og",
    "preview_poster_url": "https://cdn.originkit.dev/components/blob-text-reveal-gallery-poster.jpg?v=ms48x65j",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-blob-text-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-blurcarousel",
    "name": "Blur Carousel",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "An image carousel with a soft blur that creeps in on arrow hover and a 3D press-tilt that springs back. Copy it into Framer or React — or reach it via MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; blurcarousel",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/blurcarousel",
    "official_source_url": "https://www.originkit.dev/components/blurcarousel",
    "preview_video_url": "https://cdn.originkit.dev/components/blurcarousel-gallery-720.mp4?v=mr12u85g",
    "preview_poster_url": "https://cdn.originkit.dev/components/blurcarousel-gallery-poster.jpg?v=mr0h3rsk",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-blurcarousel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-boxcarousel",
    "name": "Box Carousel",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Rotate images and videos across the four faces of a 3D cube in Framer, driven by autoplay, drag. Framer-native, React-ready, and built for MCP workflows.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; boxcarousel",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/boxcarousel",
    "official_source_url": "https://www.originkit.dev/components/boxcarousel",
    "preview_video_url": "https://cdn.originkit.dev/components/boxcarousel-gallery-720.mp4?v=mr12u9jb",
    "preview_poster_url": "https://cdn.originkit.dev/components/boxcarousel-gallery-poster.jpg?v=mr0g56t4",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-boxcarousel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-brush-reveal",
    "name": "Brush Reveal",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Brush Reveal is a cursor-activated text effect where letters paint from ghost to full color as you move over them. Customizable font, colors, and auto-reset for Framer.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; brush; reveal",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/brush-reveal",
    "official_source_url": "https://www.originkit.dev/components/brush-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/brush-reveal-gallery-720.mp4?v=ms493ffz",
    "preview_poster_url": "https://cdn.originkit.dev/components/brush-reveal-gallery-poster.jpg?v=ms493g0p",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-brush-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-button-carousel",
    "name": "Button Carousel",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Button Carousel is a curved arc of clickable thumbnails that animates a featured image and label into view on click. Drop-in Framer component for Originkit.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; button; carousel",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/button-carousel",
    "official_source_url": "https://www.originkit.dev/components/button-carousel",
    "preview_video_url": "https://cdn.originkit.dev/components/button-carousel-gallery-720.mp4?v=mrkr1g61",
    "preview_poster_url": "https://cdn.originkit.dev/components/button-carousel-gallery-poster.jpg?v=mrkr0fb7",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-button-carousel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-character-waves",
    "name": "Character Waves",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "A flowing field of ASCII characters driven by layered noise waves that ripple away from the cursor. Use it in Framer or React, or pull it in through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; character; waves",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/character-waves",
    "official_source_url": "https://www.originkit.dev/components/character-waves",
    "preview_video_url": "https://cdn.originkit.dev/components/asciiwaves-gallery-720.mp4?v=mr12u255",
    "preview_poster_url": "https://cdn.originkit.dev/components/asciiwaves-gallery-poster.jpg?v=mr0k5uq0",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-character-waves",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-chromatic-waves",
    "name": "Chromatic Waves",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Chromatic Waves is a WebGL background animation that turns flowing Perlin noise into a halftone dot grid with a customizable multi-color gradient palette.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; chromatic; waves",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/chromatic-waves",
    "official_source_url": "https://www.originkit.dev/components/chromatic-waves",
    "preview_video_url": "https://cdn.originkit.dev/components/chromatic-waves-gallery-720.mp4?v=mrkr51xj",
    "preview_poster_url": "https://cdn.originkit.dev/components/chromatic-waves-gallery-poster.jpg?v=mrkr3uxi",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-chromatic-waves",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-clickeffects",
    "name": "Click Effects",
    "category": "Cursor interactions",
    "source_category": "cursor",
    "art_direction": "OriginKit",
    "summary": "Click Effects adds rings, bursts, particles, crosshairs, wavy trails, or sniper hits to every click. Customizable, GSAP-powered, ready to drop into any site.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; cursor; clickeffects",
    "best_for": "desktop-first showcases; portfolio exploration; playful discovery",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/clickeffects",
    "official_source_url": "https://www.originkit.dev/components/clickeffects",
    "preview_video_url": "https://cdn.originkit.dev/components/clickeffects-gallery-720.mp4?v=mrgd2vuk",
    "preview_poster_url": "https://cdn.originkit.dev/components/clickeffects-gallery-poster.jpg?v=mrgd1t4q",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-clickeffects",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "cursor",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-cosmic-orb",
    "name": "Cosmic Orb",
    "category": "Interactive elements",
    "source_category": "interactive-elements",
    "art_direction": "OriginKit",
    "summary": "Cosmic Orb is a real-time WebGL galaxy sphere for Framer — customizable colors, archetypes, speed, and a chromatic lens edge effect. Drop it into any project.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; interactive-elements; cosmic; orb",
    "best_for": "immersive heroes; experimental features; high-attention product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/cosmic-orb",
    "official_source_url": "https://www.originkit.dev/components/cosmic-orb",
    "preview_video_url": "https://cdn.originkit.dev/components/cosmic-orb-gallery-720.mp4?v=mrv24gl8",
    "preview_poster_url": "https://cdn.originkit.dev/components/cosmic-orb-gallery-poster.jpg?v=mrv24h64",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-cosmic-orb",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-coverflowcarousel",
    "name": "Coverflow Carousel",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "An infinite cover-flow reel where the centered image grows into a landscape hero while its neighbors. Ships for Framer and React, plus MCP for AI tools.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; coverflowcarousel",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/coverflowcarousel",
    "official_source_url": "https://www.originkit.dev/components/coverflowcarousel",
    "preview_video_url": "https://cdn.originkit.dev/components/coverflowcarousel-gallery-720.mp4?v=mr12ubxj",
    "preview_poster_url": "https://cdn.originkit.dev/components/coverflowcarousel-gallery-poster.jpg?v=mr0hl763",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-coverflowcarousel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-coverflowgallery",
    "name": "Coverflow Gallery",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "A smooth 3D coverflow carousel with perspective animation, autoplay, and fully customizable slide titles. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; coverflowgallery",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/coverflowgallery",
    "official_source_url": "https://www.originkit.dev/components/coverflowgallery",
    "preview_video_url": "https://cdn.originkit.dev/components/coverflowgallery-gallery-720.mp4?v=mr6dwnu3",
    "preview_poster_url": "https://cdn.originkit.dev/components/coverflowgallery-gallery-poster.jpg?v=mr6cw2mr",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-coverflowgallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-crystal-glow",
    "name": "Crystal Glow",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Crystal Glow is a Framer button component with a hover-triggered glare sweep and sparkling accents. Customize colors, speed, and direction with no code.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; crystal; glow",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/crystal-glow",
    "official_source_url": "https://www.originkit.dev/components/crystal-glow",
    "preview_video_url": "https://cdn.originkit.dev/components/crystal-glow-gallery-720.mp4?v=ms4973bh",
    "preview_poster_url": "https://cdn.originkit.dev/components/crystal-glow-gallery-poster.jpg?v=ms4973w0",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-crystal-glow",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-cube",
    "name": "Cube",
    "category": "Interactive elements",
    "source_category": "interactive-elements",
    "art_direction": "OriginKit",
    "summary": "Cube is a Framer code component that renders a self-scrambling, draggable 3D particle Rubik's cube on canvas. Fully customizable and ready to drop in.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; interactive-elements; cube",
    "best_for": "immersive heroes; experimental features; high-attention product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/cube",
    "official_source_url": "https://www.originkit.dev/components/cube",
    "preview_video_url": "https://cdn.originkit.dev/components/particle-cube-gallery-720.mp4?v=mrz7km8t",
    "preview_poster_url": "https://cdn.originkit.dev/components/particle-cube-gallery-poster.jpg?v=mrz7kmrg",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-cube",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-cube-roll-letter-role",
    "name": "Cube Roll Letter Role",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add a looping 3D cube-roll text animation to your Framer site. Per-letter rotation, seamless looping, adjustable fade and direction — no code required.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; cube; roll; letter; role",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/cube-roll-letter-role",
    "official_source_url": "https://www.originkit.dev/components/cube-roll-letter-role",
    "preview_video_url": "https://cdn.originkit.dev/components/cube-roll-letter-role-gallery-720.mp4?v=ms4apg3k",
    "preview_poster_url": "https://cdn.originkit.dev/components/cube-roll-letter-role-gallery-poster.jpg?v=ms4apgoc",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-cube-roll-letter-role",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-cursor-image-gallery",
    "name": "Cursor Image Gallery",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Add a cursor-driven image gallery to Framer. The pointer turns into a directional arrow — hover and click to slide through images with smooth transitions.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; cursor; image; gallery",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/cursor-image-gallery",
    "official_source_url": "https://www.originkit.dev/components/cursor-image-gallery",
    "preview_video_url": "https://cdn.originkit.dev/components/cursor-image-gallery-gallery-720.mp4?v=mrkr9liy",
    "preview_poster_url": "https://cdn.originkit.dev/components/cursor-image-gallery-gallery-poster.jpg?v=mrkr8m6t",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-cursor-image-gallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-cursor-image-trail",
    "name": "Cursor Image Trail",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Cursor Image Trail adds a hover-triggered image trail that follows the mouse with spring-based fade and blur animation. Free Framer code component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; cursor; image; trail",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/cursor-image-trail",
    "official_source_url": "https://www.originkit.dev/components/cursor-image-trail",
    "preview_video_url": "https://cdn.originkit.dev/components/cursor-image-trail-gallery-720.mp4?v=mrv43901",
    "preview_poster_url": "https://cdn.originkit.dev/components/cursor-image-trail-gallery-poster.jpg?v=mrv439go",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-cursor-image-trail",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-curvedmarquee",
    "name": "Curved Marquee",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Curved Marquee is a draggable scrolling text component that bends along a curved path, with adjustable speed, curve depth, and edge fade for Framer.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; curvedmarquee",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/curvedmarquee",
    "official_source_url": "https://www.originkit.dev/components/curvedmarquee",
    "preview_video_url": "https://cdn.originkit.dev/components/curvedmarquee-gallery-720.mp4?v=mriujdo7",
    "preview_poster_url": "https://cdn.originkit.dev/components/curvedmarquee-gallery-poster.jpg?v=mriuia60",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-curvedmarquee",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-directionhover",
    "name": "Direction Hover",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text that swaps to an accent-colored copy sliding in from the top or bottom edge the cursor enters. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; directionhover",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/directionhover",
    "official_source_url": "https://www.originkit.dev/components/directionhover",
    "preview_video_url": "https://cdn.originkit.dev/components/directionhover-gallery-720.mp4?v=mr12uesn",
    "preview_poster_url": "https://cdn.originkit.dev/components/directionhover-gallery-poster.jpg?v=mr0hw4z8",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-directionhover",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-domino-text-fall",
    "name": "Domino Text Fall",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Domino Text Fall animates text character by character with a rotating, spring-powered reveal — like dominoes tipping upright. Drop into any Framer project.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; domino; fall",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/domino-text-fall",
    "official_source_url": "https://www.originkit.dev/components/domino-text-fall",
    "preview_video_url": "https://cdn.originkit.dev/components/domino-text-fall-gallery-720.mp4?v=ms49cbnx",
    "preview_poster_url": "https://cdn.originkit.dev/components/domino-text-fall-gallery-poster.jpg?v=ms49cc5q",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-domino-text-fall",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-dot-image-reveal",
    "name": "Dot Image Reveal",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Dot Image Reveal turns any image into an interactive dot grid that opens around your cursor. Adjustable dots, gap, radius, and intensity for Framer.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; dot; reveal",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/dot-image-reveal",
    "official_source_url": "https://www.originkit.dev/components/dot-image-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/dot-image-reveal-gallery-720.mp4?v=mrkrcyvf",
    "preview_poster_url": "https://cdn.originkit.dev/components/dot-image-reveal-gallery-poster.jpg?v=mrkrc1om",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-dot-image-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-dotmatrix",
    "name": "Dot Matrix",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Dot Matrix is an animated WebGL dot-grid background with Perlin noise motion, custom color gradients, and an optional glyph mode for character-based effects.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; dotmatrix",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/dotmatrix",
    "official_source_url": "https://www.originkit.dev/components/dotmatrix",
    "preview_video_url": "https://cdn.originkit.dev/components/dotmatrix-gallery-720.mp4?v=mrgczlmk",
    "preview_poster_url": "https://cdn.originkit.dev/components/dotmatrix-gallery-poster.jpg?v=mrgcym9h",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-dotmatrix",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-dot-scatter",
    "name": "Dot Scatter",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Dot Scatter is a Framer code component that renders text as dots and dashes, scattering into a soft drifting cloud on hover. Word or cursor-radius modes.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; dot; scatter",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/dot-scatter",
    "official_source_url": "https://www.originkit.dev/components/dot-scatter",
    "preview_video_url": "https://cdn.originkit.dev/components/dot-scatter-gallery-720.mp4?v=ms49hmw2",
    "preview_poster_url": "https://cdn.originkit.dev/components/dot-scatter-gallery-poster.jpg?v=ms49hndi",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-dot-scatter",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-draggable-grid",
    "name": "Draggable Grid",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "An infinitely draggable image canvas with smooth momentum and seamless gallery exploration. Copy it into Framer or React — or reach it via MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; draggable; grid",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/draggable-grid",
    "official_source_url": "https://www.originkit.dev/components/draggable-grid",
    "preview_video_url": "https://cdn.originkit.dev/components/draggable-grid-gallery-720.mp4?v=mr6fb732",
    "preview_poster_url": "https://cdn.originkit.dev/components/draggable-grid-gallery-poster.jpg?v=mr6f8381",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-draggable-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-draggablesticker",
    "name": "Draggable Sticker",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Drag an image around like a real sticker that peels off the surface, tilts to your motion. Framer-native, React-ready, and built for MCP workflows.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; draggablesticker",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/draggablesticker",
    "official_source_url": "https://www.originkit.dev/components/draggablesticker",
    "preview_video_url": "https://cdn.originkit.dev/components/draggablesticker-gallery-720.mp4?v=mr12uhz4",
    "preview_poster_url": "https://cdn.originkit.dev/components/draggablesticker-gallery-poster.jpg?v=mr0kswst",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-draggablesticker",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-dust-text-reveal",
    "name": "Dust Text Reveal",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add Dust Text Reveal to Framer: text that forms out of drifting particles on hover or scroll. Adjustable density, noise, color, and easing. Copy-paste ready.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; dust; reveal",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/dust-text-reveal",
    "official_source_url": "https://www.originkit.dev/components/dust-text-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/dust-text-reveal-gallery-720.mp4?v=mrkrg46f",
    "preview_poster_url": "https://cdn.originkit.dev/components/dust-text-reveal-gallery-poster.jpg?v=mrkrf2yo",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-dust-text-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-dynamic-weight",
    "name": "Dynamic Weight",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Morph each letter between two font weights based on its distance from the cursor for a live. Use it in Framer or React, or pull it in through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; dynamic; weight",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/dynamic-weight",
    "official_source_url": "https://www.originkit.dev/components/dynamic-weight",
    "preview_video_url": "https://cdn.originkit.dev/components/dynamic-weight-gallery-720.mp4?v=mr12ukuo",
    "preview_poster_url": "https://cdn.originkit.dev/components/dynamic-weight-gallery-poster.jpg?v=mr0fdkh8",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-dynamic-weight",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-elastic-text",
    "name": "Elastic Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Elastic Text is a draggable Framer component where letters stretch like elastic and spring back into place. Customize font, color, and follow strength.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; elastic",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/elastic-text",
    "official_source_url": "https://www.originkit.dev/components/elastic-text",
    "preview_video_url": "https://cdn.originkit.dev/components/elastic-text-gallery-720.mp4?v=ms49t6xj",
    "preview_poster_url": "https://cdn.originkit.dev/components/elastic-text-gallery-poster.jpg?v=ms49t7lv",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-elastic-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-electricborder",
    "name": "Electric Border",
    "category": "Borders",
    "source_category": "border",
    "art_direction": "OriginKit",
    "summary": "Electric Border is a Framer code component that wraps any frame in a crackling, noise-driven glow outline. Customize color, chaos, speed, and glow intensity.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; border; electricborder",
    "best_for": "feature cards; focused calls to action; interactive framing",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/electricborder",
    "official_source_url": "https://www.originkit.dev/components/electricborder",
    "preview_video_url": "https://cdn.originkit.dev/components/electricborder-gallery-720.mp4?v=mrgd6qn8",
    "preview_poster_url": "https://cdn.originkit.dev/components/electricborder-gallery-poster.jpg?v=mrgd5cxd",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-electricborder",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "border",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-emojiburst",
    "name": "Emoji Burst",
    "category": "Buttons",
    "source_category": "button",
    "art_direction": "OriginKit",
    "summary": "Launch a burst of custom emojis from a tappable button. Ships for Framer and React, plus MCP for AI tools.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; button; emojiburst",
    "best_for": "campaign calls to action; playful controls; product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/emojiburst",
    "official_source_url": "https://www.originkit.dev/components/emojiburst",
    "preview_video_url": "https://cdn.originkit.dev/components/emojiburst-gallery-720.mp4?v=mr12umct",
    "preview_poster_url": "https://cdn.originkit.dev/components/emojiburst-gallery-poster.jpg?v=mr0kidbc",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-emojiburst",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "button",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-emoji-particle",
    "name": "Emoji Particle",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Emoji Particle turns any word into a swarm of emojis that fly and pop into formation, then react to your cursor. A Framer code component for expressive hero text.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; emoji; particle",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/emoji-particle",
    "official_source_url": "https://www.originkit.dev/components/emoji-particle",
    "preview_video_url": "https://cdn.originkit.dev/components/emoji-particle-gallery-720.mp4?v=mrv48nhy",
    "preview_poster_url": "https://cdn.originkit.dev/components/emoji-particle-gallery-poster.jpg?v=mrv48nv7",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-emoji-particle",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-encrypt-button",
    "name": "Encrypt Button",
    "category": "Buttons",
    "source_category": "button",
    "art_direction": "OriginKit",
    "summary": "Encrypt Button scrambles its label into junk on hover, then decrypts it back letter by letter with a sweeping light effect. Drop-in Framer code component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; button; encrypt",
    "best_for": "campaign calls to action; playful controls; product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/encrypt-button",
    "official_source_url": "https://www.originkit.dev/components/encrypt-button",
    "preview_video_url": "https://cdn.originkit.dev/components/encrypt-button-gallery-720.mp4?v=mrvuxi19",
    "preview_poster_url": "https://cdn.originkit.dev/components/encrypt-button-gallery-poster.jpg?v=mrvuximo",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-encrypt-button",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "button",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-eye-gallery",
    "name": "Eye Gallery",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Eye Gallery is a Framer code component with two arcing rows of photo cards drifting in an endless loop — independent direction, speed, arc, and fade per row.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; eye; gallery",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/eye-gallery",
    "official_source_url": "https://www.originkit.dev/components/eye-gallery",
    "preview_video_url": "https://cdn.originkit.dev/components/eye-gallery-gallery-720.mp4?v=mrz494rx",
    "preview_poster_url": "https://cdn.originkit.dev/components/eye-gallery-gallery-poster.jpg?v=mrz495vg",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-eye-gallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-falling-text",
    "name": "Falling Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Falling Text drops your headline in letter by letter or word by word with springy, gravity-like physics. Fully customizable in Framer — no code required.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; falling",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/falling-text",
    "official_source_url": "https://www.originkit.dev/components/falling-text",
    "preview_video_url": "https://cdn.originkit.dev/components/falling-text-gallery-720.mp4?v=ms49qq9n",
    "preview_poster_url": "https://cdn.originkit.dev/components/falling-text-gallery-poster.jpg?v=ms49qqoi",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-falling-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-flickertext",
    "name": "Flicker Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Bring text and images to life with customizable flicker and outline effects, triggered on enter or hover. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; flickertext",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/flickertext",
    "official_source_url": "https://www.originkit.dev/components/flickertext",
    "preview_video_url": "https://cdn.originkit.dev/components/random-gallery-720.mp4?v=mr12uodv",
    "preview_poster_url": "https://cdn.originkit.dev/components/flickertext-gallery-poster.png?v=mr1t2fvk",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-flickertext",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-flip-gallery",
    "name": "Flip Gallery",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Flip Gallery is a 3D flip-card image gallery with cursor tilt. Click to flip through photos like a stack being dealt, with attract/repel hover tilt built in.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; flip; gallery",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/flip-gallery",
    "official_source_url": "https://www.originkit.dev/components/flip-gallery",
    "preview_video_url": "https://cdn.originkit.dev/components/flip-gallery-gallery-720.mp4?v=mrvqt5nn",
    "preview_poster_url": "https://cdn.originkit.dev/components/flip-gallery-gallery-poster.jpg?v=mrvqt688",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-flip-gallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-floatingicons",
    "name": "Floating Icons",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Floating Icons is a Framer code component that animates emoji or images drifting upward in organic, randomized batches — perfect for heroes, empty states, and playful UI moments.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; floatingicons",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/floatingicons",
    "official_source_url": "https://www.originkit.dev/components/floatingicons",
    "preview_video_url": "https://cdn.originkit.dev/components/floatingicons-gallery-720.mp4?v=mrgeeq76",
    "preview_poster_url": "https://cdn.originkit.dev/components/floatingicons-gallery-poster.jpg?v=mrgeddnn",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-floatingicons",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-fluid-image-reveal",
    "name": "Fluid Image Reveal",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Fluid Image Reveal is a WebGL shader component that unveils images through organic, morphing blobs. Scroll-triggered, replayable, and fully customizable.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; fluid; reveal",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/fluid-image-reveal",
    "official_source_url": "https://www.originkit.dev/components/fluid-image-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/fluid-image-reveal-gallery-720.mp4?v=mrkrjso7",
    "preview_poster_url": "https://cdn.originkit.dev/components/fluid-image-reveal-gallery-poster.jpg?v=mrkrinxc",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-fluid-image-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-fluidtrail",
    "name": "Fluid Trail",
    "category": "Cursor interactions",
    "source_category": "cursor",
    "art_direction": "OriginKit",
    "summary": "A glowing, GPU-simulated fluid trail that swirls and drifts behind the cursor with real Navier-Stokes. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; cursor; fluidtrail",
    "best_for": "desktop-first showcases; portfolio exploration; playful discovery",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/fluidtrail",
    "official_source_url": "https://www.originkit.dev/components/fluidtrail",
    "preview_video_url": "https://cdn.originkit.dev/components/fluidtrail-gallery-720.mp4?v=mr12us98",
    "preview_poster_url": "https://cdn.originkit.dev/components/fluidtrail-gallery-poster.jpg?v=mr0au1bd",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-fluidtrail",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "cursor",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-focus-reveal",
    "name": "Focus Reveal",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Focus Reveal is a Framer code component that brings headlines into focus character by character with a soft blur-to-sharp animation and configurable stagger.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; focus; reveal",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/focus-reveal",
    "official_source_url": "https://www.originkit.dev/components/focus-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/focus-reveal-gallery-720.mp4?v=ms49z5s9",
    "preview_poster_url": "https://cdn.originkit.dev/components/focus-reveal-gallery-poster.jpg?v=ms49z69w",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-focus-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-gallery-tunnel",
    "name": "Gallery Tunnel",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Gallery Tunnel is a WebGL component that flies visitors through an endless tunnel of images and color, accelerating on click. Drop-in Framer code component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; gallery; tunnel",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/gallery-tunnel",
    "official_source_url": "https://www.originkit.dev/components/gallery-tunnel",
    "preview_video_url": "https://cdn.originkit.dev/components/gallery-tunnel-gallery-720.mp4?v=mrvavvo5",
    "preview_poster_url": "https://cdn.originkit.dev/components/gallery-tunnel-gallery-poster.jpg?v=mrvavw46",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-gallery-tunnel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-glitch-text",
    "name": "Glitch Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add eye-catching glitch text or image effects to Framer with adjustable shake, RGB slice distortion, and hover or scroll-triggered playback. Fully customizable, no code required.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; glitch",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/glitch-text",
    "official_source_url": "https://www.originkit.dev/components/glitch-text",
    "preview_video_url": "https://cdn.originkit.dev/components/glitch-text-gallery-720.mp4?v=mrkrmk96",
    "preview_poster_url": "https://cdn.originkit.dev/components/glitch-text-gallery-poster.jpg?v=mrkrlkeb",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-glitch-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-glitterwrap",
    "name": "Glitter Wrap",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "A glittering starfield of particles warping outward or inward from center. Copy it into Framer or React — or reach it via MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; glitterwrap",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/glitterwrap",
    "official_source_url": "https://www.originkit.dev/components/glitterwrap",
    "preview_video_url": "https://cdn.originkit.dev/components/glitterwrap-gallery-720.mp4?v=mr12uu06",
    "preview_poster_url": "https://cdn.originkit.dev/components/glitterwrap-gallery-poster.jpg?v=mr08o0kb",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-glitterwrap",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-globe",
    "name": "Globe",
    "category": "Interactive elements",
    "source_category": "interactive-elements",
    "art_direction": "OriginKit",
    "summary": "Globe is a draggable, auto-rotating 3D world map component with dot or solid fill, custom map markers, and full color control. Add global reach to any page.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; interactive-elements; globe",
    "best_for": "immersive heroes; experimental features; high-attention product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/globe",
    "official_source_url": "https://www.originkit.dev/components/globe",
    "preview_video_url": "https://cdn.originkit.dev/components/globe-gallery-720.mp4?v=mrgcqwuz",
    "preview_poster_url": "https://cdn.originkit.dev/components/globe-gallery-poster.jpg?v=mrgcps76",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-globe",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-gradient-text",
    "name": "Gradient Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add flowing animated gradient text to your Framer site. Customize colors, direction, speed, and scroll or hover reveal triggers. Free code component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; gradient",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/gradient-text",
    "official_source_url": "https://www.originkit.dev/components/gradient-text",
    "preview_video_url": "https://cdn.originkit.dev/components/gradient-text-gallery-720.mp4?v=ms4a7cjg",
    "preview_poster_url": "https://cdn.originkit.dev/components/gradient-text-gallery-poster.jpg?v=ms4a7d4o",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-gradient-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-gravitygallery",
    "name": "Gravity Gallery",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Drop image-filled squares or circles into a Matter.js physics world with gravity, walls. Framer-native, React-ready, and built for MCP workflows.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; gravitygallery",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/gravitygallery",
    "official_source_url": "https://www.originkit.dev/components/gravitygallery",
    "preview_video_url": "https://cdn.originkit.dev/components/gravitygallery-gallery-720.mp4?v=mr12ux27",
    "preview_poster_url": "https://cdn.originkit.dev/components/gravitygallery-gallery-poster.jpg?v=mr0jy1kz",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-gravitygallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-grid-hole",
    "name": "Grid Hole",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Grid Hole is an animated canvas background component that bends a glowing wireframe grid into a gravity well, with customizable particles, colors, and glow.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; grid; hole",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/grid-hole",
    "official_source_url": "https://www.originkit.dev/components/grid-hole",
    "preview_video_url": "https://cdn.originkit.dev/components/grid-hole-gallery-720.mp4?v=mrvqx7dz",
    "preview_poster_url": "https://cdn.originkit.dev/components/grid-hole-gallery-poster.jpg?v=mrvqx8ij",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-grid-hole",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-hover-image-reveal",
    "name": "Hover Image Reveal",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "A hover-triggered image reveal list for Framer: move through named rows and a cursor-following image window switches to match, with spring motion and full style controls.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; hover; image; reveal",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/hover-image-reveal",
    "official_source_url": "https://www.originkit.dev/components/hover-image-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/hover-image-reveal-gallery-720.mp4?v=mrkrpjhn",
    "preview_poster_url": "https://cdn.originkit.dev/components/hover-image-reveal-gallery-poster.jpg?v=mrkrokeb",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-hover-image-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-image-flipper",
    "name": "Image Flipper",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Image Flipper is a Framer code component that reveals photos through a split-flap tile animation, with per-image crop control, adjustable angle, and flip intensity.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; flipper",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/image-flipper",
    "official_source_url": "https://www.originkit.dev/components/image-flipper",
    "preview_video_url": "https://cdn.originkit.dev/components/flip-image-gallery-720.mp4?v=mrz2xoqu",
    "preview_poster_url": "https://cdn.originkit.dev/components/flip-image-gallery-poster.jpg?v=mrz2xpbr",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-image-flipper",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-imagefold",
    "name": "Image Fold",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Image Fold unrolls any photo like a rolled-up scroll using a real WebGL 3D shader. Scroll-triggered or on-load, with adjustable angle, rolls, and duration.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; imagefold",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/imagefold",
    "official_source_url": "https://www.originkit.dev/components/imagefold",
    "preview_video_url": "https://cdn.originkit.dev/components/imagefold-gallery-720.mp4?v=mrgcmdqa",
    "preview_poster_url": "https://cdn.originkit.dev/components/imagefold-gallery-poster.jpg?v=mrgcky3a",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-imagefold",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-imagegallery",
    "name": "Image Gallery",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Continuously stream images that fly outward or spiral from the center, with configurable density, easing. Use it in Framer or React, or pull it in through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; imagegallery",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/imagegallery",
    "official_source_url": "https://www.originkit.dev/components/imagegallery",
    "preview_video_url": "https://cdn.originkit.dev/components/imagegallery-gallery-720.mp4?v=mr12uy70",
    "preview_poster_url": "https://cdn.originkit.dev/components/imagegallery-gallery-poster.jpg?v=mqzg6qmb",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-imagegallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-image-group-circle",
    "name": "Image Group Circle",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Image Group Circle arranges photos into rotating concentric rings around a center point. Customize ring count, spacing, card size, and rotation direction.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; image; group; circle",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/image-group-circle",
    "official_source_url": "https://www.originkit.dev/components/image-group-circle",
    "preview_video_url": "https://cdn.originkit.dev/components/image-group-circle-gallery-720.mp4?v=mrz7862p",
    "preview_poster_url": "https://cdn.originkit.dev/components/image-group-circle-gallery-poster.jpg?v=mrz786oi",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-image-group-circle",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-image-magnifier",
    "name": "Image Magnifier",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Add a cursor-following magnifying glass to any image in Framer. Adjustable zoom, lens size, fit, and rim styling — no code required.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; magnifier",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/image-magnifier",
    "official_source_url": "https://www.originkit.dev/components/image-magnifier",
    "preview_video_url": "https://cdn.originkit.dev/components/image-magnifier-gallery-720.mp4?v=mrv5dkus",
    "preview_poster_url": "https://cdn.originkit.dev/components/image-magnifier-gallery-poster.jpg?v=mrv5dlii",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-image-magnifier",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-image-ripple",
    "name": "Image Ripple",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Reveal any image with a colorful particle ripple. Pick from 7 wave shapes, customize colors, and trigger on load, scroll, or click. Copy-paste ready.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; ripple",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/image-ripple",
    "official_source_url": "https://www.originkit.dev/components/image-ripple",
    "preview_video_url": "https://cdn.originkit.dev/components/image-ripple-gallery-720.mp4?v=mrkrug0n",
    "preview_poster_url": "https://cdn.originkit.dev/components/image-ripple-gallery-poster.jpg?v=mrkrselh",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-image-ripple",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-image-spotlight",
    "name": "Image Spotlight",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Image Spotlight is a Framer code component that hides an image behind a dark veil and reveals it through a soft, cursor-following spotlight.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; spotlight",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/image-spotlight",
    "official_source_url": "https://www.originkit.dev/components/image-spotlight",
    "preview_video_url": "https://cdn.originkit.dev/components/image-spotlight-gallery-720.mp4?v=mrz7ltql",
    "preview_poster_url": "https://cdn.originkit.dev/components/image-spotlight-gallery-poster.jpg?v=mrz7lucl",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-image-spotlight",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-infinite-text-passage",
    "name": "Infinite Text Passage",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Infinite Text Passage is a Framer code component that zooms endlessly through a list of words. Customize font, color, scale, and transition — no code needed.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; infinite; passage",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/infinite-text-passage",
    "official_source_url": "https://www.originkit.dev/components/infinite-text-passage",
    "preview_video_url": "https://cdn.originkit.dev/components/infinite-text-passage-gallery-720.mp4?v=ms4adme3",
    "preview_poster_url": "https://cdn.originkit.dev/components/infinite-text-passage-gallery-poster.jpg?v=ms4adn0m",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-infinite-text-passage",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-infinitegallery",
    "name": "Infinity Canvas",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "An infinitely zoomable and draggable image gallery with smooth motion, momentum, and immersive navigation. Ships for Framer and React, plus MCP for AI tools.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; infinitegallery",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/infinitegallery",
    "official_source_url": "https://www.originkit.dev/components/infinitegallery",
    "preview_video_url": "https://cdn.originkit.dev/components/infinitegallery-gallery-720.mp4?v=mr6fbb9o",
    "preview_poster_url": "https://cdn.originkit.dev/components/infinitegallery-gallery-poster.jpg?v=mr6fap5x",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-infinitegallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-inkbleed",
    "name": "Inkbleed",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Interactive ink bleed effects that react fluidly to cursor movement, for a liquid, hand-drawn feel. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; inkbleed",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/inkbleed",
    "official_source_url": "https://www.originkit.dev/components/inkbleed",
    "preview_video_url": "https://cdn.originkit.dev/components/inkbleed-gallery-720.mp4?v=mr12v0sq",
    "preview_poster_url": "https://cdn.originkit.dev/components/inkbleed-gallery-poster.jpg?v=mqzexf5g",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-inkbleed",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-interactive-grid",
    "name": "Interactive Grid",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Interactive Grid is a Framer code component for a 3D hover logo wall — cards lift and ripple into neighbours with an optional glow pulse. Fully customizable.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; interactive; grid",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/interactive-grid",
    "official_source_url": "https://www.originkit.dev/components/interactive-grid",
    "preview_video_url": "https://cdn.originkit.dev/components/interactive-grid-gallery-720.mp4?v=mrvr1q7f",
    "preview_poster_url": "https://cdn.originkit.dev/components/interactive-grid-gallery-poster.jpg?v=mrvr1qr2",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-interactive-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-juiceeffect",
    "name": "Juice Effect",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Fill an image silhouette with gooey, rising-and-falling liquid particles that fuse into organic blobs. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; juiceeffect",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/juiceeffect",
    "official_source_url": "https://www.originkit.dev/components/juiceeffect",
    "preview_video_url": "https://cdn.originkit.dev/components/juiceeffect-gallery-720.mp4?v=mr12v43y",
    "preview_poster_url": "https://cdn.originkit.dev/components/juiceeffect-gallery-poster.jpg?v=mr09m7bw",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-juiceeffect",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-kineticgrid",
    "name": "Kinetic Grid",
    "category": "Cursor interactions",
    "source_category": "cursor",
    "art_direction": "OriginKit",
    "summary": "An interactive grid background that dynamically reacts to cursor movement with smooth attraction. Copy it into Framer or React — or reach it via MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; cursor; kineticgrid",
    "best_for": "desktop-first showcases; portfolio exploration; playful discovery",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/kineticgrid",
    "official_source_url": "https://www.originkit.dev/components/kineticgrid",
    "preview_video_url": "https://cdn.originkit.dev/components/kineticgrid-gallery-720.mp4?v=mr6el8x5",
    "preview_poster_url": "https://cdn.originkit.dev/components/kineticgrid-gallery-poster.jpg?v=mr6dwvwg",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-kineticgrid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "cursor",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-letter-drop",
    "name": "Letter Drop",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Letter Drop animates text character-by-character with a smooth drop-in effect. Customize stagger direction, offset, opacity, and easing in Framer.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; letter; drop",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/letter-drop",
    "official_source_url": "https://www.originkit.dev/components/letter-drop",
    "preview_video_url": "https://cdn.originkit.dev/components/letter-drop-gallery-720.mp4?v=ms4alcpj",
    "preview_poster_url": "https://cdn.originkit.dev/components/letter-drop-gallery-poster.jpg?v=ms4ald5g",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-letter-drop",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-letter-swing",
    "name": "Letter Swing",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Letter Swing animates text character-by-character with spring physics, swinging each letter in from a rotated, faded start. Trigger on load, hover, or scroll.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; letter; swing",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/letter-swing",
    "official_source_url": "https://www.originkit.dev/components/letter-swing",
    "preview_video_url": "https://cdn.originkit.dev/components/letter-swing-gallery-720.mp4?v=ms4au9kg",
    "preview_poster_url": "https://cdn.originkit.dev/components/letter-swing-gallery-poster.jpg?v=ms4aua64",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-letter-swing",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-line-ripple-background",
    "name": "Line Ripple Background",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Line Ripple Background is a Framer code component with a noise-driven field of streaks that ripple and swirl on hover. Customize count, speed, and colors.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; line; ripple; background",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/line-ripple-background",
    "official_source_url": "https://www.originkit.dev/components/line-ripple-background",
    "preview_video_url": "https://cdn.originkit.dev/components/line-ripple-background-gallery-720.mp4?v=mrkrwlkl",
    "preview_poster_url": "https://cdn.originkit.dev/components/line-ripple-background-gallery-poster.jpg?v=mrkrvcq5",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-line-ripple-background",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-link-preview",
    "name": "Link Preview",
    "category": "Buttons",
    "source_category": "button",
    "art_direction": "OriginKit",
    "summary": "A floating thumbnail of any linked page revealed on hover, leaning toward your cursor as it moves. Framer-native, React-ready, and built for MCP workflows.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; button; link; preview",
    "best_for": "campaign calls to action; playful controls; product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/link-preview",
    "official_source_url": "https://www.originkit.dev/components/link-preview",
    "preview_video_url": "https://cdn.originkit.dev/components/link-preview-gallery-720.mp4?v=mr12v6f5",
    "preview_poster_url": "https://cdn.originkit.dev/components/link-preview-gallery-poster.jpg?v=mr0lf0l8",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-link-preview",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "button",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-liquid-distortion",
    "name": "Liquid Distortion",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Add a Liquid Distortion effect to any image with real-time WebGL fluid simulation. Cursor-driven ripples, adjustable intensity and resolution. Copy-paste into Framer.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; liquid; distortion",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/liquid-distortion",
    "official_source_url": "https://www.originkit.dev/components/liquid-distortion",
    "preview_video_url": "https://cdn.originkit.dev/components/liquid-distortion-gallery-720.mp4?v=mrm0p9j8",
    "preview_poster_url": "https://cdn.originkit.dev/components/liquid-distortion-gallery-poster.jpg?v=mrm0p5ut",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-liquid-distortion",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-live-chat",
    "name": "Live Chat",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Add a realistic animated chat UI to your Framer site. Live Chat features staggered message bubbles, a bouncing typing indicator, and full style controls.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; live; chat",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/live-chat",
    "official_source_url": "https://www.originkit.dev/components/live-chat",
    "preview_video_url": "https://cdn.originkit.dev/components/live-chat-gallery-720.mp4?v=mrz3j4xb",
    "preview_poster_url": "https://cdn.originkit.dev/components/live-chat-gallery-poster.jpg?v=mrz3j5b5",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-live-chat",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-magneticcarousel",
    "name": "Magnetic Carousel",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Magnify a row of image bars macOS dock style as the cursor nears. Use it in Framer or React, or pull it in through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; magneticcarousel",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/magneticcarousel",
    "official_source_url": "https://www.originkit.dev/components/magneticcarousel",
    "preview_video_url": "https://cdn.originkit.dev/components/magneticcarousel-gallery-720.mp4?v=mr12v8q2",
    "preview_poster_url": "https://cdn.originkit.dev/components/magneticcarousel-gallery-poster.jpg?v=mr0jh0k6",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-magneticcarousel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-magnetic-hover-button",
    "name": "Magnetic Hover Button",
    "category": "Buttons",
    "source_category": "button",
    "art_direction": "OriginKit",
    "summary": "Add a Magnetic Hover Button to your Framer site: it pulls toward the cursor and wipes in a new color on hover. Fully customizable, no code required.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; button; magnetic; hover",
    "best_for": "campaign calls to action; playful controls; product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/magnetic-hover-button",
    "official_source_url": "https://www.originkit.dev/components/magnetic-hover-button",
    "preview_video_url": "https://cdn.originkit.dev/components/magnetic-hover-button-gallery-720.mp4?v=mrvtvbqk",
    "preview_poster_url": "https://cdn.originkit.dev/components/magnetic-hover-button-gallery-poster.jpg?v=mrvtvc7k",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-magnetic-hover-button",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "button",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-mask-text-reveal",
    "name": "Mask Text Reveal",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Mask Text Reveal is a Framer code component that unveils text with a smooth clip-path animation. Six directions, tunable easing, and semantic HTML tags.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; mask; reveal",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/mask-text-reveal",
    "official_source_url": "https://www.originkit.dev/components/mask-text-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/mask-text-reveal-gallery-720.mp4?v=ms4aykoe",
    "preview_poster_url": "https://cdn.originkit.dev/components/mask-text-reveal-gallery-poster.jpg?v=ms4ayl45",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-mask-text-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-mechanical-flip",
    "name": "Mechanical Flip",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Mechanical Flip is a GSAP-powered text component that flips each character into place in 3D on enter or hover. Customize angle, stagger, and easing.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; mechanical; flip",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/mechanical-flip",
    "official_source_url": "https://www.originkit.dev/components/mechanical-flip",
    "preview_video_url": "https://cdn.originkit.dev/components/mechanical-flip-gallery-720.mp4?v=ms4b2fpp",
    "preview_poster_url": "https://cdn.originkit.dev/components/mechanical-flip-gallery-poster.jpg?v=ms4b2gay",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-mechanical-flip",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-meshtexthover",
    "name": "Mesh Text Hover",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Warp text across a WebGL mesh that drags and springs back under the cursor. Ships for Framer and React, plus MCP for AI tools.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; meshtexthover",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/meshtexthover",
    "official_source_url": "https://www.originkit.dev/components/meshtexthover",
    "preview_video_url": "https://cdn.originkit.dev/components/meshtexthover-gallery-720.mp4?v=mr12v9z0",
    "preview_poster_url": "https://cdn.originkit.dev/components/meshtexthover-gallery-poster.jpg?v=mqzghdfv",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-meshtexthover",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-motion-text-wave",
    "name": "Motion Text Wave",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Motion Text Wave animates text character-by-character in a springy ripple. Customize wave range, opacity, font, and scroll triggers. Copy-paste into Framer.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; motion; wave",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/motion-text-wave",
    "official_source_url": "https://www.originkit.dev/components/motion-text-wave",
    "preview_video_url": "https://cdn.originkit.dev/components/motion-text-wave-gallery-720.mp4?v=ms4b6ay4",
    "preview_poster_url": "https://cdn.originkit.dev/components/motion-text-wave-gallery-poster.jpg?v=ms4b6bfu",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-motion-text-wave",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-particlesphere",
    "name": "Particle Sphere",
    "category": "Interactive elements",
    "source_category": "interactive-elements",
    "art_direction": "OriginKit",
    "summary": "Spin an interactive 3D sphere of thousands of glowing particles that scatter away from your cursor and. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; interactive-elements; particlesphere",
    "best_for": "immersive heroes; experimental features; high-attention product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/particlesphere",
    "official_source_url": "https://www.originkit.dev/components/particlesphere",
    "preview_video_url": "https://cdn.originkit.dev/components/particlesphere-gallery-720.mp4?v=mr12vdgb",
    "preview_poster_url": "https://cdn.originkit.dev/components/particlesphere-gallery-poster.jpg?v=mr07ce9g",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-particlesphere",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-particletunnel",
    "name": "Particle Tunnel",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Flow particles along radial spokes toward a central black void with perspective depth. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; particletunnel",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/particletunnel",
    "official_source_url": "https://www.originkit.dev/components/particletunnel",
    "preview_video_url": "https://cdn.originkit.dev/components/particletunnel-gallery-720.mp4?v=mr12vgdv",
    "preview_poster_url": "https://cdn.originkit.dev/components/particletunnel-gallery-poster.jpg?v=mr0exyfr",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-particletunnel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-pixelcard",
    "name": "Pixel Card",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Fill a card with a shimmering canvas grid of pixels that grow in from the center or any edge on hover. Copy it into Framer or React — or reach it via MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; pixelcard",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/pixelcard",
    "official_source_url": "https://www.originkit.dev/components/pixelcard",
    "preview_video_url": "https://cdn.originkit.dev/components/pixelcard-gallery-720.mp4?v=mr12vjby",
    "preview_poster_url": "https://cdn.originkit.dev/components/pixelcard-gallery-poster.jpg?v=mr0n9qyw",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-pixelcard",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-pixeldrift",
    "name": "Pixel Drift",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Interactive particle typography that assembles, disperses. Framer-native, React-ready, and built for MCP workflows.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; pixeldrift",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/pixeldrift",
    "official_source_url": "https://www.originkit.dev/components/pixeldrift",
    "preview_video_url": "https://cdn.originkit.dev/components/pixeldrift-gallery-720.mp4?v=mr6fbi2e",
    "preview_poster_url": "https://cdn.originkit.dev/components/pixeldrift-gallery-poster.jpg?v=mr6exkot",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-pixeldrift",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-pixel-led-display",
    "name": "Pixel LED Display",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add a retro pixel LED display to your site with this Framer code component. Scrolling dot-matrix text, adjustable glow, flicker, and dot detail — fully customizable.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; pixel; led; display",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/pixel-led-display",
    "official_source_url": "https://www.originkit.dev/components/pixel-led-display",
    "preview_video_url": "https://cdn.originkit.dev/components/pixel-led-display-gallery-720.mp4?v=mrv5o49g",
    "preview_poster_url": "https://cdn.originkit.dev/components/pixel-led-display-gallery-poster.jpg?v=mrv5o4vv",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-pixel-led-display",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-pixelreveal",
    "name": "Pixel Reveal",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Dissolve a grid of colored pixel squares to reveal an image, sweeping up, down, left. Use it in Framer or React, or pull it in through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; pixelreveal",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/pixelreveal",
    "official_source_url": "https://www.originkit.dev/components/pixelreveal",
    "preview_video_url": "https://cdn.originkit.dev/components/pixelreveal-gallery-720.mp4?v=mr12vllp",
    "preview_poster_url": "https://cdn.originkit.dev/components/pixelreveal-gallery-poster.jpg?v=mr0dt9le",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-pixelreveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-pixel-unfold",
    "name": "Pixel Unfold",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Pixel Unfold reveals images tile by tile as you scroll, with crisp full-res rendering, adjustable pixel size, and optional replay. Drop-in Framer component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; pixel; unfold",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/pixel-unfold",
    "official_source_url": "https://www.originkit.dev/components/pixel-unfold",
    "preview_video_url": "https://cdn.originkit.dev/components/pixel-unfold-gallery-720.mp4?v=mrswbz77",
    "preview_poster_url": "https://cdn.originkit.dev/components/pixel-unfold-gallery-poster.jpg?v=mrswb14h",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-pixel-unfold",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-pixelate-image",
    "name": "Pixelate Image",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Reveal or conceal an image through a real-time SVG pixelation filter driven by cursor distance or a. Ships for Framer and React, plus MCP for AI tools.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; pixelate",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/pixelate-image",
    "official_source_url": "https://www.originkit.dev/components/pixelate-image",
    "preview_video_url": "https://cdn.originkit.dev/components/pixelate-image-gallery-720.mp4?v=mr12vhvd",
    "preview_poster_url": "https://cdn.originkit.dev/components/pixelate-image-gallery-poster.jpg?v=mr0mn56c",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-pixelate-image",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-popcorn-text",
    "name": "Popcorn Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Popcorn Text pops each letter into place with a springy, randomly rotated bounce. Trigger on load, hover, or scroll — free Framer code component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; popcorn",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/popcorn-text",
    "official_source_url": "https://www.originkit.dev/components/popcorn-text",
    "preview_video_url": "https://cdn.originkit.dev/components/popcorn-text-gallery-720.mp4?v=ms4b9tj6",
    "preview_poster_url": "https://cdn.originkit.dev/components/popcorn-text-gallery-poster.jpg?v=ms4b9u74",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-popcorn-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-prism-grid",
    "name": "Prism Grid",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Prism Grid is a Framer code component that lights up grid cells in random colors as you hover, with true 3D tilt. Fully customizable palette, box size, and borders.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; prism; grid",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/prism-grid",
    "official_source_url": "https://www.originkit.dev/components/prism-grid",
    "preview_video_url": "https://cdn.originkit.dev/components/prism-grid-gallery-720.mp4?v=mrks6pg3",
    "preview_poster_url": "https://cdn.originkit.dev/components/prism-grid-gallery-poster.jpg?v=mrks5mlw",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-prism-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-proximityorbit",
    "name": "Proximity Orbit",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Proximity Orbit arranges a set of images along a circular path that rotates continuously. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; proximityorbit",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/proximityorbit",
    "official_source_url": "https://www.originkit.dev/components/proximityorbit",
    "preview_video_url": "https://cdn.originkit.dev/components/proximityorbit-gallery-720.mp4?v=mr12vn28",
    "preview_poster_url": "https://cdn.originkit.dev/components/proximityorbit-gallery-poster.jpg?v=mqzek8ie",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-proximityorbit",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-pulse-lines",
    "name": "Pulse Lines",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Pulse Lines is an animated Framer background with sweeping colored lines, dots, or squares. Customizable palette, speed, direction, and shape — drop-in and responsive.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; pulse; lines",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/pulse-lines",
    "official_source_url": "https://www.originkit.dev/components/pulse-lines",
    "preview_video_url": "https://cdn.originkit.dev/components/pulse-lines-gallery-720.mp4?v=mrks8wtt",
    "preview_poster_url": "https://cdn.originkit.dev/components/pulse-lines-gallery-poster.jpg?v=mrks7uej",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-pulse-lines",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-random-letter-swap",
    "name": "Random Letter Swap",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Swap each letter of a heading vertically on hover, revealing a duplicate glyph in a randomized. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; random; letter; swap",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/random-letter-swap",
    "official_source_url": "https://www.originkit.dev/components/random-letter-swap",
    "preview_video_url": "https://cdn.originkit.dev/components/random-letter-swap-gallery-720.mp4?v=mr12votb",
    "preview_poster_url": "https://cdn.originkit.dev/components/random-letter-swap-gallery-poster.jpg?v=mr0dlon1",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-random-letter-swap",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-reactivegrid",
    "name": "Reactive Grid",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Reactive Grid is a canvas particle grid that blooms around your cursor with smooth easing. Customize shape, fill, size, and color for Framer sites.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; reactivegrid",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/reactivegrid",
    "official_source_url": "https://www.originkit.dev/components/reactivegrid",
    "preview_video_url": "https://cdn.originkit.dev/components/reactivegrid-gallery-720.mp4?v=mrgchped",
    "preview_poster_url": "https://cdn.originkit.dev/components/reactivegrid-gallery-poster.jpg?v=mrgcgipn",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-reactivegrid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-reactive-lines",
    "name": "Reactive Lines",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Reactive Lines is a Framer code component with curved lines that respond to cursor position in real time. Customizable color, density, thickness, and fade.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; reactive; lines",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/reactive-lines",
    "official_source_url": "https://www.originkit.dev/components/reactive-lines",
    "preview_video_url": "https://cdn.originkit.dev/components/reactive-lines-gallery-720.mp4?v=mrksc33m",
    "preview_poster_url": "https://cdn.originkit.dev/components/reactive-lines-gallery-poster.jpg?v=mrksb29t",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-reactive-lines",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-ribbon-trails",
    "name": "Ribbon Trails",
    "category": "Cursor interactions",
    "source_category": "cursor",
    "art_direction": "OriginKit",
    "summary": "Ribbon Trails is a Framer code component that draws a glowing, color-cycling cursor trail using spring-rope physics. Fully customizable colors, trail count, and length.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; cursor; ribbon; trails",
    "best_for": "desktop-first showcases; portfolio exploration; playful discovery",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/ribbon-trails",
    "official_source_url": "https://www.originkit.dev/components/ribbon-trails",
    "preview_video_url": "https://cdn.originkit.dev/components/ribbon-trails-gallery-720.mp4?v=mrvrtdnj",
    "preview_poster_url": "https://cdn.originkit.dev/components/ribbon-trails-gallery-poster.jpg?v=mrvrte2t",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-ribbon-trails",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "cursor",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-ring-gallery",
    "name": "Ring Gallery",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Ring Gallery is a Framer code component that arranges photos on a spinning elliptical ring, draggable with momentum and fully customizable size, tilt, and speed.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; ring; gallery",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/ring-gallery",
    "official_source_url": "https://www.originkit.dev/components/ring-gallery",
    "preview_video_url": "https://cdn.originkit.dev/components/ring-gallery-gallery-720.mp4?v=mrvs0gy9",
    "preview_poster_url": "https://cdn.originkit.dev/components/ring-gallery-gallery-poster.jpg?v=mrvs0hhz",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-ring-gallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-risinglines",
    "name": "Rising Lines",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Two layers of glowing particles — thin line sparks and soft blobs — rising or falling from a luminous. Copy it into Framer or React — or reach it via MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; risinglines",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/risinglines",
    "official_source_url": "https://www.originkit.dev/components/risinglines",
    "preview_video_url": "https://cdn.originkit.dev/components/risinglines-gallery-720.mp4?v=mr12vren",
    "preview_poster_url": "https://cdn.originkit.dev/components/risinglines-gallery-poster.jpg?v=mr0fyoj3",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-risinglines",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-rolling-letters",
    "name": "Rolling Letters",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Rolling Letters is a Framer code component that animates text in character by character with a slot-machine roll. Customize direction, stagger, and easing.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; rolling; letters",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/rolling-letters",
    "official_source_url": "https://www.originkit.dev/components/rolling-letters",
    "preview_video_url": "https://cdn.originkit.dev/components/rolling-letters-gallery-720.mp4?v=ms4bf2gh",
    "preview_poster_url": "https://cdn.originkit.dev/components/rolling-letters-gallery-poster.jpg?v=ms4bf2xk",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-rolling-letters",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-roundcarousel",
    "name": "Round Carousel",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Round Carousel is a draggable 3D cylinder gallery for Framer with auto-rotation, momentum spin, and mirrored two-sided cards. Fully customizable.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; roundcarousel",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/roundcarousel",
    "official_source_url": "https://www.originkit.dev/components/roundcarousel",
    "preview_video_url": "https://cdn.originkit.dev/components/roundcarousel-gallery-720.mp4?v=mrgcdypy",
    "preview_poster_url": "https://cdn.originkit.dev/components/roundcarousel-gallery-poster.jpg?v=mrgccz24",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-roundcarousel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-scrambletext",
    "name": "Scramble Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Animate text with cinematic glitch reveals and interactive character-based hover effects. Framer-native, React-ready, and built for MCP workflows.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; scrambletext",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/scrambletext",
    "official_source_url": "https://www.originkit.dev/components/scrambletext",
    "preview_video_url": "https://cdn.originkit.dev/components/scrambletext-gallery-720.mp4?v=mr12vu67",
    "preview_poster_url": "https://cdn.originkit.dev/components/scrambletext-gallery-poster.jpg?v=mqzgv17u",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-scrambletext",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-scroll-text-highlight",
    "name": "Scroll Text Highlight",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add a scroll-triggered text highlight to Framer. Words or letters light up as visitors scroll, with custom colors, scrub, and trigger points.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; scroll; highlight",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/scroll-text-highlight",
    "official_source_url": "https://www.originkit.dev/components/scroll-text-highlight",
    "preview_video_url": "https://cdn.originkit.dev/components/scroll-text-highlight-gallery-720.mp4?v=ms48ljhc",
    "preview_poster_url": "https://cdn.originkit.dev/components/scroll-text-highlight-gallery-poster.jpg?v=ms48lk3a",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-scroll-text-highlight",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-scroll-text-reveal",
    "name": "Scroll Text Reveal",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add a scroll-triggered text reveal to Framer with per-character, word, or line masking, adjustable blur, offset, and replay behavior. Drop-in code component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; scroll; reveal",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/scroll-text-reveal",
    "official_source_url": "https://www.originkit.dev/components/scroll-text-reveal",
    "preview_video_url": "https://cdn.originkit.dev/components/scroll-text-reveal-gallery-720.mp4?v=mrkset1i",
    "preview_poster_url": "https://cdn.originkit.dev/components/scroll-text-reveal-gallery-poster.jpg?v=mrksdmay",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-scroll-text-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-shiny-pill",
    "name": "Shiny Pill",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Sweep a bright sheen across a line of text on an endless loop, with tunable shine color and sweep speed. Use it in Framer or React, or pull it in through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; shiny; pill",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/shiny-pill",
    "official_source_url": "https://www.originkit.dev/components/shiny-pill",
    "preview_video_url": "https://cdn.originkit.dev/components/shiny-pill-gallery-720.mp4?v=mr12vwxq",
    "preview_poster_url": "https://cdn.originkit.dev/components/shiny-pill-gallery-poster.jpg?v=mr0kazgn",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-shiny-pill",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-skew-in-text-effect",
    "name": "Skew in text effect",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add a skewed slide-and-fade text reveal to your Framer site. Trigger on load, hover, or scroll, with full control over angle, offset, and easing.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; skew; in; effect",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/skew-in-text-effect",
    "official_source_url": "https://www.originkit.dev/components/skew-in-text-effect",
    "preview_video_url": "https://cdn.originkit.dev/components/skew-in-text-effect-gallery-720.mp4?v=ms4bm7kx",
    "preview_poster_url": "https://cdn.originkit.dev/components/skew-in-text-effect-gallery-poster.jpg?v=ms4bm80l",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-skew-in-text-effect",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-smokytext",
    "name": "Smoky Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Animate text with realistic smoke diffusion, customizable reveal directions, trigger modes. Ships for Framer and React, plus MCP for AI tools.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; smokytext",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/smokytext",
    "official_source_url": "https://www.originkit.dev/components/smokytext",
    "preview_video_url": "https://cdn.originkit.dev/components/smokytext-gallery-720.mp4?v=mr12vymq",
    "preview_poster_url": "https://cdn.originkit.dev/components/smokytext-gallery-poster.png?v=mr1t2z82",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-smokytext",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-snake-grid",
    "name": "Snake Grid",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Add a self-playing snake animation to your site with the Snake Grid Framer component. Customize colors, grid size, speed, and growth — no code required.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; snake; grid",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/snake-grid",
    "official_source_url": "https://www.originkit.dev/components/snake-grid",
    "preview_video_url": "https://cdn.originkit.dev/components/snake-grid-gallery-720.mp4?v=mrv58r1t",
    "preview_poster_url": "https://cdn.originkit.dev/components/snake-grid-gallery-poster.jpg?v=mrv58rls",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-snake-grid",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-snowfall",
    "name": "Snow Fall",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Fill any frame with drifting canvas snow, tuning per-flake size, speed, opacity, wind sway. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; snowfall",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/snowfall",
    "official_source_url": "https://www.originkit.dev/components/snowfall",
    "preview_video_url": "https://cdn.originkit.dev/components/snowfall-gallery-720.mp4?v=mr12w1rp",
    "preview_poster_url": "https://cdn.originkit.dev/components/snowfall-gallery-poster.jpg?v=mr0l54gh",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-snowfall",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-spinimage",
    "name": "Spin Image",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Orbit a set of images along a tilted 3D ellipse with continuous spin, depth-based scaling. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; spinimage",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/spinimage",
    "official_source_url": "https://www.originkit.dev/components/spinimage",
    "preview_video_url": "https://cdn.originkit.dev/components/spinimage-gallery-720.mp4?v=mr12w3ce",
    "preview_poster_url": "https://cdn.originkit.dev/components/spinimage-gallery-poster.jpg?v=mr0azbsd",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-spinimage",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-spiralimages",
    "name": "Spiral Images",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Images flow along an Archimedean spiral vortex from the edge into the center. Copy it into Framer or React — or reach it via MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; spiralimages",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/spiralimages",
    "official_source_url": "https://www.originkit.dev/components/spiralimages",
    "preview_video_url": "https://cdn.originkit.dev/components/spiralimages-gallery-720.mp4?v=mr12w4of",
    "preview_poster_url": "https://cdn.originkit.dev/components/spiralimages-gallery-poster.jpg?v=mr099vuz",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-spiralimages",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-spiral-text",
    "name": "Spiral Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Spiral Text is a Framer code component that spins each character in from a trigonometric orbit. Customizable radius, rotation, and scroll or hover triggers.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; spiral",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/spiral-text",
    "official_source_url": "https://www.originkit.dev/components/spiral-text",
    "preview_video_url": "https://cdn.originkit.dev/components/spiral-text-gallery-720.mp4?v=ms4btonz",
    "preview_poster_url": "https://cdn.originkit.dev/components/spiral-text-gallery-poster.jpg?v=ms4btp76",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-spiral-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-spotlighttext",
    "name": "Spotlight Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Dim a block of text and sweep a soft cursor-following spotlight across it to reveal the bright letters. Framer-native, React-ready, and built for MCP workflows.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; spotlighttext",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/spotlighttext",
    "official_source_url": "https://www.originkit.dev/components/spotlighttext",
    "preview_video_url": "https://cdn.originkit.dev/components/spotlighttext-gallery-720.mp4?v=mr12w6mh",
    "preview_poster_url": "https://cdn.originkit.dev/components/spotlighttext-gallery-poster.jpg?v=mr0hct1h",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-spotlighttext",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-spring-text",
    "name": "Spring Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Spring Text is a Framer code component where a word magnetically chases your cursor with chromatic trailing color layers, then springs back home. Fully customizable.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; spring",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/spring-text",
    "official_source_url": "https://www.originkit.dev/components/spring-text",
    "preview_video_url": "https://cdn.originkit.dev/components/spring-text-gallery-720.mp4?v=mrvuczqz",
    "preview_poster_url": "https://cdn.originkit.dev/components/spring-text-gallery-poster.jpg?v=mrvud03k",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-spring-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-stagger-text-rise",
    "name": "Stagger Text Rise",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Stagger Text Rise animates text letter by letter with spring physics. Trigger on load, hover, or scroll. Fully customizable font, timing, and offset for Framer.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; stagger; rise",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/stagger-text-rise",
    "official_source_url": "https://www.originkit.dev/components/stagger-text-rise",
    "preview_video_url": "https://cdn.originkit.dev/components/stagger-text-rise-gallery-720.mp4?v=ms4bxtqj",
    "preview_poster_url": "https://cdn.originkit.dev/components/stagger-text-rise-gallery-poster.jpg?v=ms4bxubo",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-stagger-text-rise",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-starburst",
    "name": "Star Burst",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Radiate glowing streaks outward from a movable focal point to form a twinkling starburst with a soft. Use it in Framer or React, or pull it in through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; starburst",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/starburst",
    "official_source_url": "https://www.originkit.dev/components/starburst",
    "preview_video_url": "https://cdn.originkit.dev/components/starburst-gallery-720.mp4?v=mr12w80a",
    "preview_poster_url": "https://cdn.originkit.dev/components/starburst-gallery-poster.jpg?v=mr0eowq1",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-starburst",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-stardust",
    "name": "Stardust",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Add a drifting Stardust particle background to your site. Tune density, size, speed, drift angle, and color for a glowing, ambient canvas effect.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; stardust",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/stardust",
    "official_source_url": "https://www.originkit.dev/components/stardust",
    "preview_video_url": "https://cdn.originkit.dev/components/stardust-gallery-720.mp4?v=mrkshjzz",
    "preview_poster_url": "https://cdn.originkit.dev/components/stardust-gallery-poster.jpg?v=mrksggc0",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-stardust",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-sticker-peel",
    "name": "Sticker Peel",
    "category": "Image effects",
    "source_category": "image",
    "art_direction": "OriginKit",
    "summary": "Peel and curl a 3D image sticker away from the surface on hover and press. Ships for Framer and React, plus MCP for AI tools.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image; sticker; peel",
    "best_for": "editorial imagery; project reveals; art-directed media transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/sticker-peel",
    "official_source_url": "https://www.originkit.dev/components/sticker-peel",
    "preview_video_url": "https://cdn.originkit.dev/components/sticker-peel-gallery-720.mp4?v=mr12wanx",
    "preview_poster_url": "https://cdn.originkit.dev/components/sticker-peel-gallery-poster.jpg?v=mr0m20r9",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-sticker-peel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-svgparticles",
    "name": "SVG Particle",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Transform images and SVGs into interactive particle animations with hover and repulsion effects. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; svgparticles",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/svgparticles",
    "official_source_url": "https://www.originkit.dev/components/svgparticles",
    "preview_video_url": "https://cdn.originkit.dev/components/svgparticles-gallery-720.mp4?v=mr12wden",
    "preview_poster_url": "https://cdn.originkit.dev/components/svgparticles-gallery-poster.png?v=mr1t3xee",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-svgparticles",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-swipe-stack",
    "name": "Swipe Stack",
    "category": "Image galleries",
    "source_category": "image-gallery",
    "art_direction": "OriginKit",
    "summary": "Flick through a fanned 3D stack of image cards that tilt, scale, and cycle to the back on every swipe. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; image-gallery; swipe; stack",
    "best_for": "case studies; portfolios; product collections; campaign storytelling",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/swipe-stack",
    "official_source_url": "https://www.originkit.dev/components/swipe-stack",
    "preview_video_url": "https://cdn.originkit.dev/components/swipe-stack-gallery-720.mp4?v=mr12wem0",
    "preview_poster_url": "https://cdn.originkit.dev/components/swipe-stack-gallery-poster.jpg?v=mr0i1wtt",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-swipe-stack",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-sync-scroll",
    "name": "Sync Scroll",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Sync Scroll is a Framer code component that drives an infinite text marquee with your scroll direction and speed, fully customizable in the props panel.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; sync; scroll",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/sync-scroll",
    "official_source_url": "https://www.originkit.dev/components/sync-scroll",
    "preview_video_url": "https://cdn.originkit.dev/components/sync-scroll-gallery-720.mp4?v=ms4eit3p",
    "preview_poster_url": "https://cdn.originkit.dev/components/sync-scroll-gallery-poster.jpg?v=ms4eitns",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-sync-scroll",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-pixel-tetris",
    "name": "Tetris",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Pixel Tetris is a self-playing, AI-driven tetris board for Framer. Customize colors, cell size, gaps, and drop speed to build a looping pixel background.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; pixel; tetris",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/pixel-tetris",
    "official_source_url": "https://www.originkit.dev/components/pixel-tetris",
    "preview_video_url": "https://cdn.originkit.dev/components/pixel-tetris-gallery-720.mp4?v=mrvrx765",
    "preview_poster_url": "https://cdn.originkit.dev/components/pixel-tetris-gallery-poster.jpg?v=mrvrx7p2",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-pixel-tetris",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-carousel",
    "name": "Text Carousel",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Carousel is a Framer code component that cycles headline words in a resizing badge with smooth GSAP character, word, or line animations.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; carousel",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-carousel",
    "official_source_url": "https://www.originkit.dev/components/text-carousel",
    "preview_video_url": "https://cdn.originkit.dev/components/text-carousel-gallery-720.mp4?v=ms4c1kfx",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-carousel-gallery-poster.jpg?v=ms4c1ky9",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-carousel",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-colour-sweep",
    "name": "Text Colour Sweep",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Colour Sweep animates text letter-by-letter with a moving color band that settles into its final color. On load, hover, or scroll triggers.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; colour; sweep",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-colour-sweep",
    "official_source_url": "https://www.originkit.dev/components/text-colour-sweep",
    "preview_video_url": "https://cdn.originkit.dev/components/text-colour-sweep-gallery-720.mp4?v=ms4c5ob0",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-colour-sweep-gallery-poster.jpg?v=ms4c5oqs",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-colour-sweep",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-distortion",
    "name": "Text Distortion",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Add Text Distortion to Framer: a WebGL shader component that ripples any headline with customizable speed, amplitude, and gradient fill. Copy, paste, done.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; distortion",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-distortion",
    "official_source_url": "https://www.originkit.dev/components/text-distortion",
    "preview_video_url": "https://cdn.originkit.dev/components/text-distortion-gallery-720.mp4?v=ms4c956i",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-distortion-gallery-poster.jpg?v=ms4c95m6",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-distortion",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-emerge",
    "name": "Text Emerge",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Emerge animates words scaling and blurring into view with a configurable stagger origin. A Framer code component for cinematic text reveals.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; emerge",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-emerge",
    "official_source_url": "https://www.originkit.dev/components/text-emerge",
    "preview_video_url": "https://cdn.originkit.dev/components/text-emerge-gallery-720.mp4?v=ms4cbj94",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-emerge-gallery-poster.jpg?v=ms4cbjr6",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-emerge",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-gather",
    "name": "Text Gather",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Gather animates headings letter by letter, scattering and rotating characters before they snap into place. A GSAP-powered Framer code component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; gather",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-gather",
    "official_source_url": "https://www.originkit.dev/components/text-gather",
    "preview_video_url": "https://cdn.originkit.dev/components/text-gather-gallery-720.mp4?v=ms4doeqd",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-gather-gallery-poster.jpg?v=ms4dof4o",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-gather",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-textlift",
    "name": "Text Lift",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Stack each letter into a layered 3D extrusion that expands and lifts off the surface when you hover it. Copy it into Framer or React — or reach it via MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; textlift",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/textlift",
    "official_source_url": "https://www.originkit.dev/components/textlift",
    "preview_video_url": "https://cdn.originkit.dev/components/textlift-gallery-720.mp4?v=mr12wgsx",
    "preview_poster_url": "https://cdn.originkit.dev/components/textlift-gallery-poster.jpg?v=mr0gy073",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-textlift",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-textmorph",
    "name": "Text Morph",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Cycle through a word list with a gooey blur-and-scale morph that melts each word smoothly into the next. Framer-native, React-ready, and built for MCP workflows.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; textmorph",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/textmorph",
    "official_source_url": "https://www.originkit.dev/components/textmorph",
    "preview_video_url": "https://cdn.originkit.dev/components/textmorph-gallery-720.mp4?v=mr12wi9g",
    "preview_poster_url": "https://cdn.originkit.dev/components/textmorph-gallery-poster.jpg?v=mqzgkj3b",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-textmorph",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-noise",
    "name": "Text Noise",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Noise is a Framer code component that renders text as shifting canvas static, with hover, click, and glitch-triggered distortion. Free to add to any Framer site.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; noise",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-noise",
    "official_source_url": "https://www.originkit.dev/components/text-noise",
    "preview_video_url": "https://cdn.originkit.dev/components/text-noise-gallery-720.mp4?v=ms47zld2",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-noise-gallery-poster.jpg?v=ms47zlxz",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-noise",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-textpath",
    "name": "Text Path",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Scroll repeating text seamlessly along a procedural sine-wave path with adjustable frequency, height. Use it in Framer or React, or pull it in through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; textpath",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/textpath",
    "official_source_url": "https://www.originkit.dev/components/textpath",
    "preview_video_url": "https://cdn.originkit.dev/components/textpath-gallery-720.mp4?v=mr12wk9n",
    "preview_poster_url": "https://cdn.originkit.dev/components/textpath-gallery-poster.jpg?v=mr0dzdbw",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-textpath",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-reveal-wall",
    "name": "Text Reveal Wall",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Reveal Wall animates your words out of a grid of randomly scrambling characters, line by line, then dissolves them back. Fully customizable and font-aware.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; reveal; wall",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-reveal-wall",
    "official_source_url": "https://www.originkit.dev/components/text-reveal-wall",
    "preview_video_url": "https://cdn.originkit.dev/components/text-reveal-wall-gallery-720.mp4?v=mrksk6sk",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-reveal-wall-gallery-poster.jpg?v=mrksj8a0",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-reveal-wall",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-ring",
    "name": "Text Ring",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Ring spins your words in a full circle with hover-reactive speed, pause, or scale effects. Drop into Framer and customize font, size, and separator.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; ring",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-ring",
    "official_source_url": "https://www.originkit.dev/components/text-ring",
    "preview_video_url": "https://cdn.originkit.dev/components/text-ring-gallery-720.mp4?v=ms4ds1sd",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-ring-gallery-poster.jpg?v=ms4ds284",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-ring",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-vaporize",
    "name": "Text Vaporize",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Vaporize dissolves words into particles and reassembles them into the next, with tunable spread, density, and per-phase timing. Drop-in Framer component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; vaporize",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-vaporize",
    "official_source_url": "https://www.originkit.dev/components/text-vaporize",
    "preview_video_url": "https://cdn.originkit.dev/components/text-vaporize-gallery-720.mp4?v=mrktjmzf",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-vaporize-gallery-poster.jpg?v=mrktir8p",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-vaporize",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-text-wave",
    "name": "Text Wave",
    "category": "Background animation",
    "source_category": "background-animation",
    "art_direction": "OriginKit",
    "summary": "Text Wave fills any area with a rippling grid of characters and a smooth color gradient sweep. Customizable text, palette, speed, and direction for Framer.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; background-animation; text; wave",
    "best_for": "hero backgrounds; section atmosphere; immersive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-wave",
    "official_source_url": "https://www.originkit.dev/components/text-wave",
    "preview_video_url": "https://cdn.originkit.dev/components/text-wave-gallery-720.mp4?v=mrkt61xc",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-wave-gallery-poster.jpg?v=mrkt4mhr",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-wave",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "originkit-text-wipe",
    "name": "Text Wipe",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Text Wipe is a Framer code component that reveals headlines with a directional clip-path wipe on enter or hover. Customizable font, color, and easing.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; wipe",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/text-wipe",
    "official_source_url": "https://www.originkit.dev/components/text-wipe",
    "preview_video_url": "https://cdn.originkit.dev/components/text-wipe-gallery-720.mp4?v=ms4dzfb9",
    "preview_poster_url": "https://cdn.originkit.dev/components/text-wipe-gallery-poster.jpg?v=ms4dzfpc",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-text-wipe",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-thunderstrike",
    "name": "Thunder Strike",
    "category": "Interactive elements",
    "source_category": "interactive-elements",
    "art_direction": "OriginKit",
    "summary": "Thunder Strike is a customizable WebGL lightning shader for web pages. Control color, speed, intensity, size, and angle for a live electric bolt effect.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; interactive-elements; thunderstrike",
    "best_for": "immersive heroes; experimental features; high-attention product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/thunderstrike",
    "official_source_url": "https://www.originkit.dev/components/thunderstrike",
    "preview_video_url": "https://cdn.originkit.dev/components/thunderstrike-gallery-720.mp4?v=mrgc3g1v",
    "preview_poster_url": "https://cdn.originkit.dev/components/thunderstrike-gallery-poster.jpg?v=mrgc26wl",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-thunderstrike",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-tornado",
    "name": "Tornado",
    "category": "Interactive elements",
    "source_category": "interactive-elements",
    "art_direction": "OriginKit",
    "summary": "Tornado is a WebGL particle vortex background for hero sections — glowing strands, flickering dots, racing comets, and cursor repel, fully customizable.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; interactive-elements; tornado",
    "best_for": "immersive heroes; experimental features; high-attention product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/tornado",
    "official_source_url": "https://www.originkit.dev/components/tornado",
    "preview_video_url": "https://cdn.originkit.dev/components/tornado-gallery-720.mp4?v=mrz4ik98",
    "preview_poster_url": "https://cdn.originkit.dev/components/tornado-gallery-poster.jpg?v=mrz4ikto",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": true,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-tornado",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-type-sequence",
    "name": "Type Sequence",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Type Sequence is a Framer code component that types, holds, and deletes a rotating list of phrases with a customizable blinking cursor. Fully styleable and accessible.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; type; sequence",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/type-sequence",
    "official_source_url": "https://www.originkit.dev/components/type-sequence",
    "preview_video_url": "https://cdn.originkit.dev/components/type-sequence-gallery-720.mp4?v=ms4ea858",
    "preview_poster_url": "https://cdn.originkit.dev/components/type-sequence-gallery-poster.jpg?v=ms4ea8n2",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-type-sequence",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-typewriter",
    "name": "Type Writer",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Types out a rotating list of phrases one character at a time with a blinking cursor and a static. Ships for Framer and React, plus MCP for AI tools.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; typewriter",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/typewriter",
    "official_source_url": "https://www.originkit.dev/components/typewriter",
    "preview_video_url": "https://cdn.originkit.dev/components/typewriter-gallery-720.mp4?v=mr12wm44",
    "preview_poster_url": "https://cdn.originkit.dev/components/typewriter-gallery-poster.jpg?v=mr0e9f8x",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-typewriter",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-usercursor",
    "name": "User Cursor",
    "category": "Cursor interactions",
    "source_category": "cursor",
    "art_direction": "OriginKit",
    "summary": "Replace the native pointer inside any surface with a spring-tracked arrow and a trailing name pill that. Built for Framer, React, and AI tools through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; cursor; usercursor",
    "best_for": "desktop-first showcases; portfolio exploration; playful discovery",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/usercursor",
    "official_source_url": "https://www.originkit.dev/components/usercursor",
    "preview_video_url": "https://cdn.originkit.dev/components/usercursor-gallery-720.mp4?v=mr12woug",
    "preview_poster_url": "https://cdn.originkit.dev/components/usercursor-gallery-poster.jpg?v=mr0gcxxv",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-usercursor",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "cursor",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-video-text",
    "name": "Video Text",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Video Text fills bold typography with a looping video clip. Upload or link a video, style the font, and control autoplay, loop, and mute for a striking animated headline.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; video",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/video-text",
    "official_source_url": "https://www.originkit.dev/components/video-text",
    "preview_video_url": "https://cdn.originkit.dev/components/video-text-gallery-720.mp4?v=ms4eflul",
    "preview_poster_url": "https://cdn.originkit.dev/components/video-text-gallery-poster.jpg?v=ms4efmbp",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-video-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-water-button",
    "name": "Water Button",
    "category": "Buttons",
    "source_category": "button",
    "art_direction": "OriginKit",
    "summary": "Water Button is a Framer code component with a real fluid simulation inside a frosted glass pane — sloshes, splashes, and sprays on hover, drag, and click.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; button; water",
    "best_for": "campaign calls to action; playful controls; product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/water-button",
    "official_source_url": "https://www.originkit.dev/components/water-button",
    "preview_video_url": "https://cdn.originkit.dev/components/water-button-gallery-720.mp4?v=mrvtjkk3",
    "preview_poster_url": "https://cdn.originkit.dev/components/water-button-gallery-poster.jpg?v=mrvtjl01",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-water-button",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "button",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-wave-arcs",
    "name": "Wave Arcs",
    "category": "Animation",
    "source_category": "animation",
    "art_direction": "OriginKit",
    "summary": "Wave Arcs is a cursor-reactive canvas background with glowing, sweeping arc lines. Customize color, count, speed, and glow for any hero section.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; animation; wave; arcs",
    "best_for": "hero accents; feature storytelling; expressive transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/wave-arcs",
    "official_source_url": "https://www.originkit.dev/components/wave-arcs",
    "preview_video_url": "https://cdn.originkit.dev/components/wave-arcs-gallery-720.mp4?v=mrkt95c0",
    "preview_poster_url": "https://cdn.originkit.dev/components/wave-arcs-gallery-poster.jpg?v=mrkt832z",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-wave-arcs",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-weight-hover",
    "name": "Weight Hover",
    "category": "Text effects",
    "source_category": "text",
    "art_direction": "OriginKit",
    "summary": "Morph each letter's variable-font weight on hover, staggered letter-by-letter with a spring that eases. Works in Framer and React, or connect through MCP.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; text; weight; hover",
    "best_for": "display headlines; campaign statements; editorial transitions",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/weight-hover",
    "official_source_url": "https://www.originkit.dev/components/weight-hover",
    "preview_video_url": "https://cdn.originkit.dev/components/weight-hover-gallery-720.mp4?v=mr12wqxr",
    "preview_poster_url": "https://cdn.originkit.dev/components/weight-hover-gallery-poster.jpg?v=mr0f56wu",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-weight-hover",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "originkit-word-globe",
    "name": "Word Globe",
    "category": "Interactive elements",
    "source_category": "interactive-elements",
    "art_direction": "OriginKit",
    "summary": "Word Globe is a rotating 3D sphere made entirely of repeated text, with adjustable speed, twist, and spacing. A canvas-based kinetic typography component.",
    "technique": "Open the official OriginKit component page, inspect the current source and dependencies, then adapt its props, colors, density, timing, and content to the project.",
    "style_tags": "animated; OriginKit; interactive-elements; word; globe",
    "best_for": "immersive heroes; experimental features; high-attention product moments",
    "dependencies": "Inspect the current official component source; dependencies vary by component.",
    "framework_fit": "React; Framer; adapt the official source for the target stack",
    "motion_level": "varies",
    "motion_choreography": "Preserve the component's core interaction idea while retiming it to the brand and stopping decorative motion when it no longer serves attention.",
    "performance_cost": "varies",
    "accessibility_contract": "Audit semantics, keyboard and touch equivalents, focus, contrast, and prefers-reduced-motion after adapting the official source.",
    "content_contract": "Replace demo content and imagery with real project content; do not let the effect obscure essential information or controls.",
    "responsive_strategy": "Inspect the official responsive behavior, then reduce density, pointer dependence, and continuous animation on narrow or coarse-pointer devices.",
    "interaction_inputs": "Varies by component; inspect pointer, scroll, drag, keyboard, and ambient inputs on the official source page.",
    "fallback_strategy": "Use the poster or a brand-matched static state when motion, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; cleanup; loading and media fallback",
    "implementation_steps": "open official source; audit dependencies; port into project conventions; brand-adapt; add accessible fallback; test performance",
    "brand_tokens": "Map every exposed color, type, radius, spacing, and motion value to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "official source",
    "source_kind": "external-linked-component",
    "license": "user-confirmed-free-use · official-source-link",
    "licence_class": "linked-source",
    "source": "OriginKit",
    "creator": "OriginKit",
    "source_url": "https://www.originkit.dev/components/word-globe",
    "official_source_url": "https://www.originkit.dev/components/word-globe",
    "preview_video_url": "https://cdn.originkit.dev/components/word-globe-gallery-720.mp4?v=mrz7bztn",
    "preview_poster_url": "https://cdn.originkit.dev/components/word-globe-gallery-poster.jpg?v=mrz7c0r5",
    "preview_accent": "#7C3AED",
    "preview_layout": "full",
    "official_featured": false,
    "official_variants": [
      "framer"
    ],
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "open-official-source",
    "inventory_date": "2026-07-30",
    "phase": "originkit-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#originkit-word-globe",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: OriginKit. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-gradual-blur",
    "name": "Gradual Blur",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Gradual Blur is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; gradual; blur",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/gradual-blur",
    "official_source_url": "https://reactbits.dev/animations/gradual-blur",
    "preview_video_url": "https://reactbits.dev/assets/video/gradualblur.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GradualBlur-TS-TW",
    "registry_url": "https://reactbits.dev/r/GradualBlur-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-gradual-blur",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-blob-cursor",
    "name": "Blob Cursor",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Blob Cursor is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; blob; cursor",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/blob-cursor",
    "official_source_url": "https://reactbits.dev/animations/blob-cursor",
    "preview_video_url": "https://reactbits.dev/assets/video/blobcursor.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/BlobCursor-TS-TW",
    "registry_url": "https://reactbits.dev/r/BlobCursor-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-blob-cursor",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-animated-content",
    "name": "Animated Content",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Animated Content is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; animated; content",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/animated-content",
    "official_source_url": "https://reactbits.dev/animations/animated-content",
    "preview_video_url": "https://reactbits.dev/assets/video/animatedcontent.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/AnimatedContent-TS-TW",
    "registry_url": "https://reactbits.dev/r/AnimatedContent-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-animated-content",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-magnet",
    "name": "Magnet",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Magnet is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; magnet",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/magnet",
    "official_source_url": "https://reactbits.dev/animations/magnet",
    "preview_video_url": "https://reactbits.dev/assets/video/magnet.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Magnet-TS-TW",
    "registry_url": "https://reactbits.dev/r/Magnet-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-magnet",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-fade-content",
    "name": "Fade Content",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Fade Content is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; fade; content",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/fade-content",
    "official_source_url": "https://reactbits.dev/animations/fade-content",
    "preview_video_url": "https://reactbits.dev/assets/video/fadecontent.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/FadeContent-TS-TW",
    "registry_url": "https://reactbits.dev/r/FadeContent-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-fade-content",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-crosshair",
    "name": "Crosshair",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Crosshair is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; crosshair",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/crosshair",
    "official_source_url": "https://reactbits.dev/animations/crosshair",
    "preview_video_url": "https://reactbits.dev/assets/video/crosshair.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Crosshair-TS-TW",
    "registry_url": "https://reactbits.dev/r/Crosshair-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-crosshair",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-shape-blur",
    "name": "Shape Blur",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Shape Blur is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; shape; blur",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/shape-blur",
    "official_source_url": "https://reactbits.dev/animations/shape-blur",
    "preview_video_url": "https://reactbits.dev/assets/video/shapeblur.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ShapeBlur-TS-TW",
    "registry_url": "https://reactbits.dev/r/ShapeBlur-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-shape-blur",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-star-border",
    "name": "Star Border",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Star Border is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; star; border",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/star-border",
    "official_source_url": "https://reactbits.dev/animations/star-border",
    "preview_video_url": "https://reactbits.dev/assets/video/starborder.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/StarBorder-TS-TW",
    "registry_url": "https://reactbits.dev/r/StarBorder-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-star-border",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-noise",
    "name": "Noise",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Noise is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; noise",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/noise",
    "official_source_url": "https://reactbits.dev/animations/noise",
    "preview_video_url": "https://reactbits.dev/assets/video/noise.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Noise-TS-TW",
    "registry_url": "https://reactbits.dev/r/Noise-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-noise",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-magnet-lines",
    "name": "Magnet Lines",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Magnet Lines is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; magnet; lines",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/magnet-lines",
    "official_source_url": "https://reactbits.dev/animations/magnet-lines",
    "preview_video_url": "https://reactbits.dev/assets/video/magnetlines.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/MagnetLines-TS-TW",
    "registry_url": "https://reactbits.dev/r/MagnetLines-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-magnet-lines",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-splash-cursor",
    "name": "Splash Cursor",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Splash Cursor is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; splash; cursor",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/splash-cursor",
    "official_source_url": "https://reactbits.dev/animations/splash-cursor",
    "preview_video_url": "https://reactbits.dev/assets/video/splashcursor.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/SplashCursor-TS-TW",
    "registry_url": "https://reactbits.dev/r/SplashCursor-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-splash-cursor",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-click-spark",
    "name": "Click Spark",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Click Spark is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; click; spark",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/click-spark",
    "official_source_url": "https://reactbits.dev/animations/click-spark",
    "preview_video_url": "https://reactbits.dev/assets/video/clickspark.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ClickSpark-TS-TW",
    "registry_url": "https://reactbits.dev/r/ClickSpark-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-click-spark",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-pixel-transition",
    "name": "Pixel Transition",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Pixel Transition is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; pixel; transition",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/pixel-transition",
    "official_source_url": "https://reactbits.dev/animations/pixel-transition",
    "preview_video_url": "https://reactbits.dev/assets/video/pixeltransition.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/PixelTransition-TS-TW",
    "registry_url": "https://reactbits.dev/r/PixelTransition-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-pixel-transition",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-image-trail",
    "name": "Image Trail",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Image Trail is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; image; trail",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/image-trail",
    "official_source_url": "https://reactbits.dev/animations/image-trail",
    "preview_video_url": "https://reactbits.dev/assets/video/imagetrail.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ImageTrail-TS-TW",
    "registry_url": "https://reactbits.dev/r/ImageTrail-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-image-trail",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-pixel-trail",
    "name": "Pixel Trail",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Pixel Trail is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; pixel; trail",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/pixel-trail",
    "official_source_url": "https://reactbits.dev/animations/pixel-trail",
    "preview_video_url": "https://reactbits.dev/assets/video/pixeltrail.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/PixelTrail-TS-TW",
    "registry_url": "https://reactbits.dev/r/PixelTrail-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-pixel-trail",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-ribbons",
    "name": "Ribbons",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Ribbons is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; ribbons",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/ribbons",
    "official_source_url": "https://reactbits.dev/animations/ribbons",
    "preview_video_url": "https://reactbits.dev/assets/video/ribbons.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Ribbons-TS-TW",
    "registry_url": "https://reactbits.dev/r/Ribbons-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-ribbons",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-meta-balls",
    "name": "Meta Balls",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Meta Balls is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; meta; balls",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/meta-balls",
    "official_source_url": "https://reactbits.dev/animations/meta-balls",
    "preview_video_url": "https://reactbits.dev/assets/video/metaballs.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/MetaBalls-TS-TW",
    "registry_url": "https://reactbits.dev/r/MetaBalls-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-meta-balls",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-metallic-paint",
    "name": "Metallic Paint",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Metallic Paint is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; metallic; paint",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/metallic-paint",
    "official_source_url": "https://reactbits.dev/animations/metallic-paint",
    "preview_video_url": "https://reactbits.dev/assets/video/metallicpaint.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/MetallicPaint-TS-TW",
    "registry_url": "https://reactbits.dev/r/MetallicPaint-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-metallic-paint",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-glare-hover",
    "name": "Glare Hover",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Glare Hover is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; glare; hover",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/glare-hover",
    "official_source_url": "https://reactbits.dev/animations/glare-hover",
    "preview_video_url": "https://reactbits.dev/assets/video/glarehover.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GlareHover-TS-TW",
    "registry_url": "https://reactbits.dev/r/GlareHover-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-glare-hover",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-cubes",
    "name": "Cubes",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Cubes is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; cubes",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/cubes",
    "official_source_url": "https://reactbits.dev/animations/cubes",
    "preview_video_url": "https://reactbits.dev/assets/video/cubes.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Cubes-TS-TW",
    "registry_url": "https://reactbits.dev/r/Cubes-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-cubes",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-target-cursor",
    "name": "Target Cursor",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Target Cursor is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; target; cursor",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/target-cursor",
    "official_source_url": "https://reactbits.dev/animations/target-cursor",
    "preview_video_url": "https://reactbits.dev/assets/video/targetcursor.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/TargetCursor-TS-TW",
    "registry_url": "https://reactbits.dev/r/TargetCursor-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-target-cursor",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-sticker-peel",
    "name": "Sticker Peel",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Sticker Peel is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; sticker; peel",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/sticker-peel",
    "official_source_url": "https://reactbits.dev/animations/sticker-peel",
    "preview_video_url": "https://reactbits.dev/assets/video/stickerpeel.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/StickerPeel-TS-TW",
    "registry_url": "https://reactbits.dev/r/StickerPeel-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-sticker-peel",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-electric-border",
    "name": "Electric Border",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Electric Border is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; electric; border",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/electric-border",
    "official_source_url": "https://reactbits.dev/animations/electric-border",
    "preview_video_url": "https://reactbits.dev/assets/video/electricborder.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ElectricBorder-TS-TW",
    "registry_url": "https://reactbits.dev/r/ElectricBorder-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-electric-border",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-laser-flow",
    "name": "Laser Flow",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Laser Flow is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; laser; flow",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/laser-flow",
    "official_source_url": "https://reactbits.dev/animations/laser-flow",
    "preview_video_url": "https://reactbits.dev/assets/video/laserflow.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LaserFlow-TS-TW",
    "registry_url": "https://reactbits.dev/r/LaserFlow-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-laser-flow",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-ghost-cursor",
    "name": "Ghost Cursor",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Ghost Cursor is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; ghost; cursor",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/ghost-cursor",
    "official_source_url": "https://reactbits.dev/animations/ghost-cursor",
    "preview_video_url": "https://reactbits.dev/assets/video/ghostcursor.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GhostCursor-TS-TW",
    "registry_url": "https://reactbits.dev/r/GhostCursor-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-ghost-cursor",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-antigravity",
    "name": "Antigravity",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Antigravity is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; antigravity",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/antigravity",
    "official_source_url": "https://reactbits.dev/animations/antigravity",
    "preview_video_url": "https://reactbits.dev/assets/video/antigravity.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Antigravity-TS-TW",
    "registry_url": "https://reactbits.dev/r/Antigravity-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-antigravity",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-orbit-images",
    "name": "Orbit Images",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Orbit Images is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; orbit; images",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/orbit-images",
    "official_source_url": "https://reactbits.dev/animations/orbit-images",
    "preview_video_url": "https://reactbits.dev/assets/video/orbitimages.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/OrbitImages-TS-TW",
    "registry_url": "https://reactbits.dev/r/OrbitImages-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-orbit-images",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-magic-rings",
    "name": "Magic Rings",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Magic Rings is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; magic; rings",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/magic-rings",
    "official_source_url": "https://reactbits.dev/animations/magic-rings",
    "preview_video_url": "https://reactbits.dev/assets/video/magicrings.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/MagicRings-TS-TW",
    "registry_url": "https://reactbits.dev/r/MagicRings-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-magic-rings",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-strands",
    "name": "Strands",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Strands is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; strands",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/strands",
    "official_source_url": "https://reactbits.dev/animations/strands",
    "preview_video_url": "https://reactbits.dev/assets/video/strands.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Strands-TS-TW",
    "registry_url": "https://reactbits.dev/r/Strands-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-strands",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-cursor-grid",
    "name": "Cursor Grid",
    "category": "Animation",
    "source_category": "animations",
    "art_direction": "React Bits",
    "summary": "Cursor Grid is a public React Bits animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animation; cursor; grid",
    "best_for": "hero accents; interactive details; expressive transitions; portfolio moments",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/animations/cursor-grid",
    "official_source_url": "https://reactbits.dev/animations/cursor-grid",
    "preview_video_url": null,
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "official-live-demo-link",
    "remote_media": false,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/CursorGrid-TS-TW",
    "registry_url": "https://reactbits.dev/r/CursorGrid-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-cursor-grid",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-split-text",
    "name": "Split Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Split Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; split; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/split-text",
    "official_source_url": "https://reactbits.dev/text-animations/split-text",
    "preview_video_url": "https://reactbits.dev/assets/video/splittext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/SplitText-TS-TW",
    "registry_url": "https://reactbits.dev/r/SplitText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-split-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-blur-text",
    "name": "Blur Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Blur Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; blur; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/blur-text",
    "official_source_url": "https://reactbits.dev/text-animations/blur-text",
    "preview_video_url": "https://reactbits.dev/assets/video/blurtext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/BlurText-TS-TW",
    "registry_url": "https://reactbits.dev/r/BlurText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-blur-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-shiny-text",
    "name": "Shiny Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Shiny Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; shiny; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/shiny-text",
    "official_source_url": "https://reactbits.dev/text-animations/shiny-text",
    "preview_video_url": "https://reactbits.dev/assets/video/shinytext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ShinyText-TS-TW",
    "registry_url": "https://reactbits.dev/r/ShinyText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-shiny-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-gradient-text",
    "name": "Gradient Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Gradient Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; gradient; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/gradient-text",
    "official_source_url": "https://reactbits.dev/text-animations/gradient-text",
    "preview_video_url": "https://reactbits.dev/assets/video/gradienttext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GradientText-TS-TW",
    "registry_url": "https://reactbits.dev/r/GradientText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-gradient-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-count-up",
    "name": "Count Up",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Count Up is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; count; up",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/count-up",
    "official_source_url": "https://reactbits.dev/text-animations/count-up",
    "preview_video_url": "https://reactbits.dev/assets/video/countup.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/CountUp-TS-TW",
    "registry_url": "https://reactbits.dev/r/CountUp-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-count-up",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-decrypted-text",
    "name": "Decrypted Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Decrypted Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; decrypted; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/decrypted-text",
    "official_source_url": "https://reactbits.dev/text-animations/decrypted-text",
    "preview_video_url": "https://reactbits.dev/assets/video/decryptedtext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/DecryptedText-TS-TW",
    "registry_url": "https://reactbits.dev/r/DecryptedText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-decrypted-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-true-focus",
    "name": "True Focus",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "True Focus is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; true; focus",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/true-focus",
    "official_source_url": "https://reactbits.dev/text-animations/true-focus",
    "preview_video_url": "https://reactbits.dev/assets/video/truefocus.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/TrueFocus-TS-TW",
    "registry_url": "https://reactbits.dev/r/TrueFocus-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-true-focus",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-variable-proximity",
    "name": "Variable Proximity",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Variable Proximity is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; variable; proximity",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/variable-proximity",
    "official_source_url": "https://reactbits.dev/text-animations/variable-proximity",
    "preview_video_url": "https://reactbits.dev/assets/video/variableproximity.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/VariableProximity-TS-TW",
    "registry_url": "https://reactbits.dev/r/VariableProximity-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-variable-proximity",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-text-pressure",
    "name": "Text Pressure",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Text Pressure is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; text; pressure",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/text-pressure",
    "official_source_url": "https://reactbits.dev/text-animations/text-pressure",
    "preview_video_url": "https://reactbits.dev/assets/video/textpressure.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/TextPressure-TS-TW",
    "registry_url": "https://reactbits.dev/r/TextPressure-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-text-pressure",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-ascii-text",
    "name": "ASCII Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "ASCII Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; ascii; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/ascii-text",
    "official_source_url": "https://reactbits.dev/text-animations/ascii-text",
    "preview_video_url": "https://reactbits.dev/assets/video/asciitext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ASCIIText-TS-TW",
    "registry_url": "https://reactbits.dev/r/ASCIIText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-ascii-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-falling-text",
    "name": "Falling Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Falling Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; falling; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/falling-text",
    "official_source_url": "https://reactbits.dev/text-animations/falling-text",
    "preview_video_url": "https://reactbits.dev/assets/video/fallingtext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/FallingText-TS-TW",
    "registry_url": "https://reactbits.dev/r/FallingText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-falling-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-rotating-text",
    "name": "Rotating Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Rotating Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; rotating; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/rotating-text",
    "official_source_url": "https://reactbits.dev/text-animations/rotating-text",
    "preview_video_url": "https://reactbits.dev/assets/video/textrotate.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/RotatingText-TS-TW",
    "registry_url": "https://reactbits.dev/r/RotatingText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-rotating-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-circular-text",
    "name": "Circular Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Circular Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; circular; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/circular-text",
    "official_source_url": "https://reactbits.dev/text-animations/circular-text",
    "preview_video_url": "https://reactbits.dev/assets/video/circulartext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/CircularText-TS-TW",
    "registry_url": "https://reactbits.dev/r/CircularText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-circular-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-scroll-velocity",
    "name": "Scroll Velocity",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Scroll Velocity is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; scroll; velocity",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/scroll-velocity",
    "official_source_url": "https://reactbits.dev/text-animations/scroll-velocity",
    "preview_video_url": "https://reactbits.dev/assets/video/scrollvelocity.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ScrollVelocity-TS-TW",
    "registry_url": "https://reactbits.dev/r/ScrollVelocity-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-scroll-velocity",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-scroll-reveal",
    "name": "Scroll Reveal",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Scroll Reveal is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; scroll; reveal",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/scroll-reveal",
    "official_source_url": "https://reactbits.dev/text-animations/scroll-reveal",
    "preview_video_url": "https://reactbits.dev/assets/video/scrollreveal.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ScrollReveal-TS-TW",
    "registry_url": "https://reactbits.dev/r/ScrollReveal-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-scroll-reveal",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-scroll-float",
    "name": "Scroll Float",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Scroll Float is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; scroll; float",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/scroll-float",
    "official_source_url": "https://reactbits.dev/text-animations/scroll-float",
    "preview_video_url": "https://reactbits.dev/assets/video/scrollfloat.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ScrollFloat-TS-TW",
    "registry_url": "https://reactbits.dev/r/ScrollFloat-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-scroll-float",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-glitch-text",
    "name": "Glitch Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Glitch Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; glitch; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/glitch-text",
    "official_source_url": "https://reactbits.dev/text-animations/glitch-text",
    "preview_video_url": "https://reactbits.dev/assets/video/glitchtext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GlitchText-TS-TW",
    "registry_url": "https://reactbits.dev/r/GlitchText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-glitch-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-fuzzy-text",
    "name": "Fuzzy Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Fuzzy Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; fuzzy; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/fuzzy-text",
    "official_source_url": "https://reactbits.dev/text-animations/fuzzy-text",
    "preview_video_url": "https://reactbits.dev/assets/video/fuzzytext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/FuzzyText-TS-TW",
    "registry_url": "https://reactbits.dev/r/FuzzyText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-fuzzy-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-text-cursor",
    "name": "Text Cursor",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Text Cursor is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; text; cursor",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/text-cursor",
    "official_source_url": "https://reactbits.dev/text-animations/text-cursor",
    "preview_video_url": "https://reactbits.dev/assets/video/textcursor.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/TextCursor-TS-TW",
    "registry_url": "https://reactbits.dev/r/TextCursor-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-text-cursor",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-scrambled-text",
    "name": "Scrambled Text",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Scrambled Text is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; scrambled; text",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/scrambled-text",
    "official_source_url": "https://reactbits.dev/text-animations/scrambled-text",
    "preview_video_url": "https://reactbits.dev/assets/video/scrambledtext.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ScrambledText-TS-TW",
    "registry_url": "https://reactbits.dev/r/ScrambledText-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-scrambled-text",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-curved-loop",
    "name": "Curved Loop",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Curved Loop is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; curved; loop",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/curved-loop",
    "official_source_url": "https://reactbits.dev/text-animations/curved-loop",
    "preview_video_url": "https://reactbits.dev/assets/video/curvedloop.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/CurvedLoop-TS-TW",
    "registry_url": "https://reactbits.dev/r/CurvedLoop-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-curved-loop",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-text-type",
    "name": "Text Type",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Text Type is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; text; type",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/text-type",
    "official_source_url": "https://reactbits.dev/text-animations/text-type",
    "preview_video_url": "https://reactbits.dev/assets/video/texttype.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/TextType-TS-TW",
    "registry_url": "https://reactbits.dev/r/TextType-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-text-type",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-logo-loop",
    "name": "Logo Loop",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Logo Loop is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; logo; loop",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/logo-loop",
    "official_source_url": "https://reactbits.dev/text-animations/logo-loop",
    "preview_video_url": "https://reactbits.dev/assets/video/logoloop.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LogoLoop-TS-TW",
    "registry_url": "https://reactbits.dev/r/LogoLoop-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-logo-loop",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-shuffle",
    "name": "Shuffle",
    "category": "Text animation",
    "source_category": "text-animations",
    "art_direction": "React Bits",
    "summary": "Shuffle is a public React Bits text animation with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Text animation; shuffle",
    "best_for": "display headlines; campaign statements; metrics; editorial transitions",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/text-animations/shuffle",
    "official_source_url": "https://reactbits.dev/text-animations/shuffle",
    "preview_video_url": "https://reactbits.dev/assets/video/shuffle.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Shuffle-TS-TW",
    "registry_url": "https://reactbits.dev/r/Shuffle-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-shuffle",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text animations",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-stack",
    "name": "Stack",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Stack is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; stack",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/stack",
    "official_source_url": "https://reactbits.dev/components/stack",
    "preview_video_url": "https://reactbits.dev/assets/video/stack.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Stack-TS-TW",
    "registry_url": "https://reactbits.dev/r/Stack-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-stack",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-dock",
    "name": "Dock",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Dock is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; dock",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/dock",
    "official_source_url": "https://reactbits.dev/components/dock",
    "preview_video_url": "https://reactbits.dev/assets/video/dock.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Dock-TS-TW",
    "registry_url": "https://reactbits.dev/r/Dock-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-dock",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-spotlight-card",
    "name": "Spotlight Card",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Spotlight Card is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; spotlight; card",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/spotlight-card",
    "official_source_url": "https://reactbits.dev/components/spotlight-card",
    "preview_video_url": "https://reactbits.dev/assets/video/spotlightcard.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/SpotlightCard-TS-TW",
    "registry_url": "https://reactbits.dev/r/SpotlightCard-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-spotlight-card",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-border-glow",
    "name": "Border Glow",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Border Glow is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; border; glow",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/border-glow",
    "official_source_url": "https://reactbits.dev/components/border-glow",
    "preview_video_url": "https://reactbits.dev/assets/video/borderglow.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/BorderGlow-TS-TW",
    "registry_url": "https://reactbits.dev/r/BorderGlow-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-border-glow",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-elastic-slider",
    "name": "Elastic Slider",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Elastic Slider is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; elastic; slider",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/elastic-slider",
    "official_source_url": "https://reactbits.dev/components/elastic-slider",
    "preview_video_url": "https://reactbits.dev/assets/video/elasticslider.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ElasticSlider-TS-TW",
    "registry_url": "https://reactbits.dev/r/ElasticSlider-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-elastic-slider",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-decay-card",
    "name": "Decay Card",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Decay Card is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; decay; card",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/decay-card",
    "official_source_url": "https://reactbits.dev/components/decay-card",
    "preview_video_url": "https://reactbits.dev/assets/video/decaycard.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/DecayCard-TS-TW",
    "registry_url": "https://reactbits.dev/r/DecayCard-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-decay-card",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-bounce-cards",
    "name": "Bounce Cards",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Bounce Cards is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; bounce; cards",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/bounce-cards",
    "official_source_url": "https://reactbits.dev/components/bounce-cards",
    "preview_video_url": "https://reactbits.dev/assets/video/bouncecards.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/BounceCards-TS-TW",
    "registry_url": "https://reactbits.dev/r/BounceCards-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-bounce-cards",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-pixel-card",
    "name": "Pixel Card",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Pixel Card is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; pixel; card",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/pixel-card",
    "official_source_url": "https://reactbits.dev/components/pixel-card",
    "preview_video_url": "https://reactbits.dev/assets/video/pixelcard.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/PixelCard-TS-TW",
    "registry_url": "https://reactbits.dev/r/PixelCard-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-pixel-card",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-tilted-card",
    "name": "Tilted Card",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Tilted Card is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; tilted; card",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/tilted-card",
    "official_source_url": "https://reactbits.dev/components/tilted-card",
    "preview_video_url": "https://reactbits.dev/assets/video/tiltedcard.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/TiltedCard-TS-TW",
    "registry_url": "https://reactbits.dev/r/TiltedCard-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-tilted-card",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-infinite-menu",
    "name": "Infinite Menu",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Infinite Menu is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; infinite; menu",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/infinite-menu",
    "official_source_url": "https://reactbits.dev/components/infinite-menu",
    "preview_video_url": "https://reactbits.dev/assets/video/infinitemenu.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/InfiniteMenu-TS-TW",
    "registry_url": "https://reactbits.dev/r/InfiniteMenu-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-infinite-menu",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-flying-posters",
    "name": "Flying Posters",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Flying Posters is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; flying; posters",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/flying-posters",
    "official_source_url": "https://reactbits.dev/components/flying-posters",
    "preview_video_url": "https://reactbits.dev/assets/video/flyingposters.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/FlyingPosters-TS-TW",
    "registry_url": "https://reactbits.dev/r/FlyingPosters-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-flying-posters",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-flowing-menu",
    "name": "Flowing Menu",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Flowing Menu is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; flowing; menu",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/flowing-menu",
    "official_source_url": "https://reactbits.dev/components/flowing-menu",
    "preview_video_url": "https://reactbits.dev/assets/video/flowingmenu.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/FlowingMenu-TS-TW",
    "registry_url": "https://reactbits.dev/r/FlowingMenu-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-flowing-menu",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-circular-gallery",
    "name": "Circular Gallery",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Circular Gallery is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; circular; gallery",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/circular-gallery",
    "official_source_url": "https://reactbits.dev/components/circular-gallery",
    "preview_video_url": "https://reactbits.dev/assets/video/circulargallery.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/CircularGallery-TS-TW",
    "registry_url": "https://reactbits.dev/r/CircularGallery-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-circular-gallery",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-stepper",
    "name": "Stepper",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Stepper is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; stepper",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/stepper",
    "official_source_url": "https://reactbits.dev/components/stepper",
    "preview_video_url": "https://reactbits.dev/assets/video/stepper.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Stepper-TS-TW",
    "registry_url": "https://reactbits.dev/r/Stepper-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-stepper",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-carousel",
    "name": "Carousel",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Carousel is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; carousel",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/carousel",
    "official_source_url": "https://reactbits.dev/components/carousel",
    "preview_video_url": "https://reactbits.dev/assets/video/carousel.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Carousel-TS-TW",
    "registry_url": "https://reactbits.dev/r/Carousel-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-carousel",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-counter",
    "name": "Counter",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Counter is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; counter",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/counter",
    "official_source_url": "https://reactbits.dev/components/counter",
    "preview_video_url": "https://reactbits.dev/assets/video/counter.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Counter-TS-TW",
    "registry_url": "https://reactbits.dev/r/Counter-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-counter",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-lanyard",
    "name": "Lanyard",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Lanyard is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; lanyard",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/lanyard",
    "official_source_url": "https://reactbits.dev/components/lanyard",
    "preview_video_url": "https://reactbits.dev/assets/video/lanyard.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Lanyard-TS-TW",
    "registry_url": "https://reactbits.dev/r/Lanyard-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-lanyard",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-glass-icons",
    "name": "Glass Icons",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Glass Icons is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; glass; icons",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/glass-icons",
    "official_source_url": "https://reactbits.dev/components/glass-icons",
    "preview_video_url": "https://reactbits.dev/assets/video/glassicons.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GlassIcons-TS-TW",
    "registry_url": "https://reactbits.dev/r/GlassIcons-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-glass-icons",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-animated-list",
    "name": "Animated List",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Animated List is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; animated; list",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/animated-list",
    "official_source_url": "https://reactbits.dev/components/animated-list",
    "preview_video_url": "https://reactbits.dev/assets/video/animatedlist.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/AnimatedList-TS-TW",
    "registry_url": "https://reactbits.dev/r/AnimatedList-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-animated-list",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-folder",
    "name": "Folder",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Folder is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; folder",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/folder",
    "official_source_url": "https://reactbits.dev/components/folder",
    "preview_video_url": "https://reactbits.dev/assets/video/folder.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Folder-TS-TW",
    "registry_url": "https://reactbits.dev/r/Folder-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-folder",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-gooey-nav",
    "name": "Gooey Nav",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Gooey Nav is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; gooey; nav",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/gooey-nav",
    "official_source_url": "https://reactbits.dev/components/gooey-nav",
    "preview_video_url": "https://reactbits.dev/assets/video/gooeynav.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GooeyNav-TS-TW",
    "registry_url": "https://reactbits.dev/r/GooeyNav-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-gooey-nav",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-chroma-grid",
    "name": "Chroma Grid",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Chroma Grid is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; chroma; grid",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/chroma-grid",
    "official_source_url": "https://reactbits.dev/components/chroma-grid",
    "preview_video_url": "https://reactbits.dev/assets/video/chromagrid.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ChromaGrid-TS-TW",
    "registry_url": "https://reactbits.dev/r/ChromaGrid-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-chroma-grid",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-profile-card",
    "name": "Profile Card",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Profile Card is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; profile; card",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/profile-card",
    "official_source_url": "https://reactbits.dev/components/profile-card",
    "preview_video_url": "https://reactbits.dev/assets/video/profilecard.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ProfileCard-TS-TW",
    "registry_url": "https://reactbits.dev/r/ProfileCard-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-profile-card",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-card-swap",
    "name": "Card Swap",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Card Swap is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; card; swap",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/card-swap",
    "official_source_url": "https://reactbits.dev/components/card-swap",
    "preview_video_url": "https://reactbits.dev/assets/video/cardswap.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/CardSwap-TS-TW",
    "registry_url": "https://reactbits.dev/r/CardSwap-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-card-swap",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-model-viewer",
    "name": "Model Viewer",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Model Viewer is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; model; viewer",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/model-viewer",
    "official_source_url": "https://reactbits.dev/components/model-viewer",
    "preview_video_url": "https://reactbits.dev/assets/video/modelviewer.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ModelViewer-TS-TW",
    "registry_url": "https://reactbits.dev/r/ModelViewer-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-model-viewer",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-fluid-glass",
    "name": "Fluid Glass",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Fluid Glass is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; fluid; glass",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/fluid-glass",
    "official_source_url": "https://reactbits.dev/components/fluid-glass",
    "preview_video_url": "https://reactbits.dev/assets/video/fluidglass.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/FluidGlass-TS-TW",
    "registry_url": "https://reactbits.dev/r/FluidGlass-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-fluid-glass",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-masonry",
    "name": "Masonry",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Masonry is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; masonry",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/masonry",
    "official_source_url": "https://reactbits.dev/components/masonry",
    "preview_video_url": "https://reactbits.dev/assets/video/masonry.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Masonry-TS-TW",
    "registry_url": "https://reactbits.dev/r/Masonry-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-masonry",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-magic-bento",
    "name": "Magic Bento",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Magic Bento is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; magic; bento",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/magic-bento",
    "official_source_url": "https://reactbits.dev/components/magic-bento",
    "preview_video_url": "https://reactbits.dev/assets/video/magicbento.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/MagicBento-TS-TW",
    "registry_url": "https://reactbits.dev/r/MagicBento-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-magic-bento",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-scroll-stack",
    "name": "Scroll Stack",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Scroll Stack is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; scroll; stack",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/scroll-stack",
    "official_source_url": "https://reactbits.dev/components/scroll-stack",
    "preview_video_url": "https://reactbits.dev/assets/video/scrollstack.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ScrollStack-TS-TW",
    "registry_url": "https://reactbits.dev/r/ScrollStack-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-scroll-stack",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-glass-surface",
    "name": "Glass Surface",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Glass Surface is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; glass; surface",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/glass-surface",
    "official_source_url": "https://reactbits.dev/components/glass-surface",
    "preview_video_url": "https://reactbits.dev/assets/video/glasssurface.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GlassSurface-TS-TW",
    "registry_url": "https://reactbits.dev/r/GlassSurface-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-glass-surface",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-pill-nav",
    "name": "Pill Nav",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Pill Nav is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; pill; nav",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/pill-nav",
    "official_source_url": "https://reactbits.dev/components/pill-nav",
    "preview_video_url": "https://reactbits.dev/assets/video/pillnav.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/PillNav-TS-TW",
    "registry_url": "https://reactbits.dev/r/PillNav-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-pill-nav",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-card-nav",
    "name": "Card Nav",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Card Nav is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; card; nav",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/card-nav",
    "official_source_url": "https://reactbits.dev/components/card-nav",
    "preview_video_url": "https://reactbits.dev/assets/video/cardnav.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/CardNav-TS-TW",
    "registry_url": "https://reactbits.dev/r/CardNav-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-card-nav",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-bubble-menu",
    "name": "Bubble Menu",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Bubble Menu is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; bubble; menu",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/bubble-menu",
    "official_source_url": "https://reactbits.dev/components/bubble-menu",
    "preview_video_url": "https://reactbits.dev/assets/video/bubblemenu.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/BubbleMenu-TS-TW",
    "registry_url": "https://reactbits.dev/r/BubbleMenu-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-bubble-menu",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-dome-gallery",
    "name": "Dome Gallery",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Dome Gallery is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; dome; gallery",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/dome-gallery",
    "official_source_url": "https://reactbits.dev/components/dome-gallery",
    "preview_video_url": "https://reactbits.dev/assets/video/domegallery.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/DomeGallery-TS-TW",
    "registry_url": "https://reactbits.dev/r/DomeGallery-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-dome-gallery",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-staggered-menu",
    "name": "Staggered Menu",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Staggered Menu is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; staggered; menu",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/staggered-menu",
    "official_source_url": "https://reactbits.dev/components/staggered-menu",
    "preview_video_url": "https://reactbits.dev/assets/video/staggeredmenu.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/StaggeredMenu-TS-TW",
    "registry_url": "https://reactbits.dev/r/StaggeredMenu-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-staggered-menu",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-reflective-card",
    "name": "Reflective Card",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Reflective Card is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; reflective; card",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/reflective-card",
    "official_source_url": "https://reactbits.dev/components/reflective-card",
    "preview_video_url": "https://reactbits.dev/assets/video/reflectivecard.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ReflectiveCard-TS-TW",
    "registry_url": "https://reactbits.dev/r/ReflectiveCard-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-reflective-card",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-line-sidebar",
    "name": "Line Sidebar",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Line Sidebar is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; line; sidebar",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/line-sidebar",
    "official_source_url": "https://reactbits.dev/components/line-sidebar",
    "preview_video_url": null,
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "official-live-demo-link",
    "remote_media": false,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LineSidebar-TS-TW",
    "registry_url": "https://reactbits.dev/r/LineSidebar-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-line-sidebar",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-curved-input",
    "name": "Curved Input",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Curved Input is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; curved; input",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/curved-input",
    "official_source_url": "https://reactbits.dev/components/curved-input",
    "preview_video_url": null,
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "official-live-demo-link",
    "remote_media": false,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/CurvedInput-TS-TW",
    "registry_url": "https://reactbits.dev/r/CurvedInput-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-curved-input",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-option-wheel",
    "name": "Option Wheel",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Option Wheel is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; option; wheel",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/option-wheel",
    "official_source_url": "https://reactbits.dev/components/option-wheel",
    "preview_video_url": null,
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "official-live-demo-link",
    "remote_media": false,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/OptionWheel-TS-TW",
    "registry_url": "https://reactbits.dev/r/OptionWheel-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-option-wheel",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-specular-button",
    "name": "Specular Button",
    "category": "Interactive component",
    "source_category": "components",
    "art_direction": "React Bits",
    "summary": "Specular Button is a public React Bits interactive component with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Interactive component; specular; button",
    "best_for": "navigation; galleries; feature sections; calls to action; product storytelling",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "medium",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "supporting",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/components/specular-button",
    "official_source_url": "https://reactbits.dev/components/specular-button",
    "preview_video_url": null,
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "official-live-demo-link",
    "remote_media": false,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/SpecularButton-TS-TW",
    "registry_url": "https://reactbits.dev/r/SpecularButton-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-specular-button",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "components",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "reactbits-silk",
    "name": "Silk",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Silk is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; silk",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/silk",
    "official_source_url": "https://reactbits.dev/backgrounds/silk",
    "preview_video_url": "https://reactbits.dev/assets/video/silk.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Silk-TS-TW",
    "registry_url": "https://reactbits.dev/r/Silk-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-silk",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-aurora",
    "name": "Aurora",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Aurora is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; aurora",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/aurora",
    "official_source_url": "https://reactbits.dev/backgrounds/aurora",
    "preview_video_url": "https://reactbits.dev/assets/video/aurora.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Aurora-TS-TW",
    "registry_url": "https://reactbits.dev/r/Aurora-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-aurora",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-shape-grid",
    "name": "Shape Grid",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Shape Grid is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; shape; grid",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/shape-grid",
    "official_source_url": "https://reactbits.dev/backgrounds/shape-grid",
    "preview_video_url": "https://reactbits.dev/assets/video/squares.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ShapeGrid-TS-TW",
    "registry_url": "https://reactbits.dev/r/ShapeGrid-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-shape-grid",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-hyperspeed",
    "name": "Hyperspeed",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Hyperspeed is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; hyperspeed",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/hyperspeed",
    "official_source_url": "https://reactbits.dev/backgrounds/hyperspeed",
    "preview_video_url": "https://reactbits.dev/assets/video/hyperspeed.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Hyperspeed-TS-TW",
    "registry_url": "https://reactbits.dev/r/Hyperspeed-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-hyperspeed",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-iridescence",
    "name": "Iridescence",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Iridescence is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; iridescence",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/iridescence",
    "official_source_url": "https://reactbits.dev/backgrounds/iridescence",
    "preview_video_url": "https://reactbits.dev/assets/video/iridescence.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Iridescence-TS-TW",
    "registry_url": "https://reactbits.dev/r/Iridescence-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-iridescence",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-grid-motion",
    "name": "Grid Motion",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Grid Motion is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; grid; motion",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/grid-motion",
    "official_source_url": "https://reactbits.dev/backgrounds/grid-motion",
    "preview_video_url": "https://reactbits.dev/assets/video/gridmotion.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GridMotion-TS-TW",
    "registry_url": "https://reactbits.dev/r/GridMotion-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-grid-motion",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-waves",
    "name": "Waves",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Waves is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; waves",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/waves",
    "official_source_url": "https://reactbits.dev/backgrounds/waves",
    "preview_video_url": "https://reactbits.dev/assets/video/waves.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Waves-TS-TW",
    "registry_url": "https://reactbits.dev/r/Waves-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-waves",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-ballpit",
    "name": "Ballpit",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Ballpit is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; ballpit",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/ballpit",
    "official_source_url": "https://reactbits.dev/backgrounds/ballpit",
    "preview_video_url": "https://reactbits.dev/assets/video/ballpit.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Ballpit-TS-TW",
    "registry_url": "https://reactbits.dev/r/Ballpit-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-ballpit",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-letter-glitch",
    "name": "Letter Glitch",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Letter Glitch is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; letter; glitch",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/letter-glitch",
    "official_source_url": "https://reactbits.dev/backgrounds/letter-glitch",
    "preview_video_url": "https://reactbits.dev/assets/video/letterglitch.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LetterGlitch-TS-TW",
    "registry_url": "https://reactbits.dev/r/LetterGlitch-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-letter-glitch",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-grid-distortion",
    "name": "Grid Distortion",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Grid Distortion is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; grid; distortion",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/grid-distortion",
    "official_source_url": "https://reactbits.dev/backgrounds/grid-distortion",
    "preview_video_url": "https://reactbits.dev/assets/video/griddistortion.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GridDistortion-TS-TW",
    "registry_url": "https://reactbits.dev/r/GridDistortion-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-grid-distortion",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-orb",
    "name": "Orb",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Orb is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; orb",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/orb",
    "official_source_url": "https://reactbits.dev/backgrounds/orb",
    "preview_video_url": "https://reactbits.dev/assets/video/orb.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Orb-TS-TW",
    "registry_url": "https://reactbits.dev/r/Orb-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-orb",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-particles",
    "name": "Particles",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Particles is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; particles",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/particles",
    "official_source_url": "https://reactbits.dev/backgrounds/particles",
    "preview_video_url": "https://reactbits.dev/assets/video/particles.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Particles-TS-TW",
    "registry_url": "https://reactbits.dev/r/Particles-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-particles",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-liquid-chrome",
    "name": "Liquid Chrome",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Liquid Chrome is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; liquid; chrome",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/liquid-chrome",
    "official_source_url": "https://reactbits.dev/backgrounds/liquid-chrome",
    "preview_video_url": "https://reactbits.dev/assets/video/liquidchrome.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LiquidChrome-TS-TW",
    "registry_url": "https://reactbits.dev/r/LiquidChrome-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-liquid-chrome",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-balatro",
    "name": "Balatro",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Balatro is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; balatro",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/balatro",
    "official_source_url": "https://reactbits.dev/backgrounds/balatro",
    "preview_video_url": "https://reactbits.dev/assets/video/balatro.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Balatro-TS-TW",
    "registry_url": "https://reactbits.dev/r/Balatro-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-balatro",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-threads",
    "name": "Threads",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Threads is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; threads",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/threads",
    "official_source_url": "https://reactbits.dev/backgrounds/threads",
    "preview_video_url": "https://reactbits.dev/assets/video/threads.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Threads-TS-TW",
    "registry_url": "https://reactbits.dev/r/Threads-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-threads",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-dither",
    "name": "Dither",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Dither is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; dither",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/dither",
    "official_source_url": "https://reactbits.dev/backgrounds/dither",
    "preview_video_url": "https://reactbits.dev/assets/video/dither.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Dither-TS-TW",
    "registry_url": "https://reactbits.dev/r/Dither-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-dither",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-lightning",
    "name": "Lightning",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Lightning is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; lightning",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/lightning",
    "official_source_url": "https://reactbits.dev/backgrounds/lightning",
    "preview_video_url": "https://reactbits.dev/assets/video/lightning.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Lightning-TS-TW",
    "registry_url": "https://reactbits.dev/r/Lightning-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-lightning",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-dot-grid",
    "name": "Dot Grid",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Dot Grid is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; dot; grid",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/dot-grid",
    "official_source_url": "https://reactbits.dev/backgrounds/dot-grid",
    "preview_video_url": "https://reactbits.dev/assets/video/dotgrid.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/DotGrid-TS-TW",
    "registry_url": "https://reactbits.dev/r/DotGrid-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-dot-grid",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-beams",
    "name": "Beams",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Beams is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; beams",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/beams",
    "official_source_url": "https://reactbits.dev/backgrounds/beams",
    "preview_video_url": "https://reactbits.dev/assets/video/beams.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Beams-TS-TW",
    "registry_url": "https://reactbits.dev/r/Beams-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-beams",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-ripple-grid",
    "name": "Ripple Grid",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Ripple Grid is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; ripple; grid",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/ripple-grid",
    "official_source_url": "https://reactbits.dev/backgrounds/ripple-grid",
    "preview_video_url": "https://reactbits.dev/assets/video/ripplegrid.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/RippleGrid-TS-TW",
    "registry_url": "https://reactbits.dev/r/RippleGrid-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-ripple-grid",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-dark-veil",
    "name": "Dark Veil",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Dark Veil is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; dark; veil",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/dark-veil",
    "official_source_url": "https://reactbits.dev/backgrounds/dark-veil",
    "preview_video_url": "https://reactbits.dev/assets/video/darkveil.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/DarkVeil-TS-TW",
    "registry_url": "https://reactbits.dev/r/DarkVeil-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-dark-veil",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-galaxy",
    "name": "Galaxy",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Galaxy is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; galaxy",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/galaxy",
    "official_source_url": "https://reactbits.dev/backgrounds/galaxy",
    "preview_video_url": "https://reactbits.dev/assets/video/galaxy.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Galaxy-TS-TW",
    "registry_url": "https://reactbits.dev/r/Galaxy-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-galaxy",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-light-rays",
    "name": "Light Rays",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Light Rays is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; light; rays",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/light-rays",
    "official_source_url": "https://reactbits.dev/backgrounds/light-rays",
    "preview_video_url": "https://reactbits.dev/assets/video/lightrays.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LightRays-TS-TW",
    "registry_url": "https://reactbits.dev/r/LightRays-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-light-rays",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-faulty-terminal",
    "name": "Faulty Terminal",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Faulty Terminal is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; faulty; terminal",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/faulty-terminal",
    "official_source_url": "https://reactbits.dev/backgrounds/faulty-terminal",
    "preview_video_url": "https://reactbits.dev/assets/video/faultyterminal.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/FaultyTerminal-TS-TW",
    "registry_url": "https://reactbits.dev/r/FaultyTerminal-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-faulty-terminal",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-plasma",
    "name": "Plasma",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Plasma is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; plasma",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/plasma",
    "official_source_url": "https://reactbits.dev/backgrounds/plasma",
    "preview_video_url": "https://reactbits.dev/assets/video/plasma.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Plasma-TS-TW",
    "registry_url": "https://reactbits.dev/r/Plasma-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-plasma",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-plasma-wave",
    "name": "Plasma Wave",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Plasma Wave is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; plasma; wave",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/plasma-wave",
    "official_source_url": "https://reactbits.dev/backgrounds/plasma-wave",
    "preview_video_url": "https://reactbits.dev/assets/video/plasmawave.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/PlasmaWave-TS-TW",
    "registry_url": "https://reactbits.dev/r/PlasmaWave-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-plasma-wave",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-prism",
    "name": "Prism",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Prism is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; prism",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/prism",
    "official_source_url": "https://reactbits.dev/backgrounds/prism",
    "preview_video_url": "https://reactbits.dev/assets/video/prism.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Prism-TS-TW",
    "registry_url": "https://reactbits.dev/r/Prism-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-prism",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-gradient-blinds",
    "name": "Gradient Blinds",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Gradient Blinds is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; gradient; blinds",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/gradient-blinds",
    "official_source_url": "https://reactbits.dev/backgrounds/gradient-blinds",
    "preview_video_url": "https://reactbits.dev/assets/video/gradientblinds.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GradientBlinds-TS-TW",
    "registry_url": "https://reactbits.dev/r/GradientBlinds-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-gradient-blinds",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-grainient",
    "name": "Grainient",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Grainient is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; grainient",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/grainient",
    "official_source_url": "https://reactbits.dev/backgrounds/grainient",
    "preview_video_url": "https://reactbits.dev/assets/video/grainient.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Grainient-TS-TW",
    "registry_url": "https://reactbits.dev/r/Grainient-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-grainient",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-prismatic-burst",
    "name": "Prismatic Burst",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Prismatic Burst is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; prismatic; burst",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/prismatic-burst",
    "official_source_url": "https://reactbits.dev/backgrounds/prismatic-burst",
    "preview_video_url": "https://reactbits.dev/assets/video/prismaticburst.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/PrismaticBurst-TS-TW",
    "registry_url": "https://reactbits.dev/r/PrismaticBurst-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-prismatic-burst",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-pixel-blast",
    "name": "Pixel Blast",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Pixel Blast is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; pixel; blast",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/pixel-blast",
    "official_source_url": "https://reactbits.dev/backgrounds/pixel-blast",
    "preview_video_url": "https://reactbits.dev/assets/video/pixelblast.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/PixelBlast-TS-TW",
    "registry_url": "https://reactbits.dev/r/PixelBlast-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-pixel-blast",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-liquid-ether",
    "name": "Liquid Ether",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Liquid Ether is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; liquid; ether",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/liquid-ether",
    "official_source_url": "https://reactbits.dev/backgrounds/liquid-ether",
    "preview_video_url": "https://reactbits.dev/assets/video/liquidether.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LiquidEther-TS-TW",
    "registry_url": "https://reactbits.dev/r/LiquidEther-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-liquid-ether",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-color-bends",
    "name": "Color Bends",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Color Bends is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; color; bends",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/color-bends",
    "official_source_url": "https://reactbits.dev/backgrounds/color-bends",
    "preview_video_url": "https://reactbits.dev/assets/video/colorbends.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/ColorBends-TS-TW",
    "registry_url": "https://reactbits.dev/r/ColorBends-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-color-bends",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-line-waves",
    "name": "Line Waves",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Line Waves is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; line; waves",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/line-waves",
    "official_source_url": "https://reactbits.dev/backgrounds/line-waves",
    "preview_video_url": "https://reactbits.dev/assets/video/linewaves.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LineWaves-TS-TW",
    "registry_url": "https://reactbits.dev/r/LineWaves-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-line-waves",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-grid-scan",
    "name": "Grid Scan",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Grid Scan is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; grid; scan",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/grid-scan",
    "official_source_url": "https://reactbits.dev/backgrounds/grid-scan",
    "preview_video_url": "https://reactbits.dev/assets/video/gridscan.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/GridScan-TS-TW",
    "registry_url": "https://reactbits.dev/r/GridScan-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-grid-scan",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-floating-lines",
    "name": "Floating Lines",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Floating Lines is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; floating; lines",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/floating-lines",
    "official_source_url": "https://reactbits.dev/backgrounds/floating-lines",
    "preview_video_url": "https://reactbits.dev/assets/video/floatinglines.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/FloatingLines-TS-TW",
    "registry_url": "https://reactbits.dev/r/FloatingLines-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-floating-lines",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-light-pillar",
    "name": "Light Pillar",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Light Pillar is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; light; pillar",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/light-pillar",
    "official_source_url": "https://reactbits.dev/backgrounds/light-pillar",
    "preview_video_url": "https://reactbits.dev/assets/video/lightpillar.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/LightPillar-TS-TW",
    "registry_url": "https://reactbits.dev/r/LightPillar-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-light-pillar",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-pixel-snow",
    "name": "Pixel Snow",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Pixel Snow is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; pixel; snow",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/pixel-snow",
    "official_source_url": "https://reactbits.dev/backgrounds/pixel-snow",
    "preview_video_url": "https://reactbits.dev/assets/video/pixelsnow.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/PixelSnow-TS-TW",
    "registry_url": "https://reactbits.dev/r/PixelSnow-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-pixel-snow",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-radar",
    "name": "Radar",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Radar is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; radar",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/radar",
    "official_source_url": "https://reactbits.dev/backgrounds/radar",
    "preview_video_url": "https://reactbits.dev/assets/video/radar.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Radar-TS-TW",
    "registry_url": "https://reactbits.dev/r/Radar-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-radar",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-soft-aurora",
    "name": "Soft Aurora",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Soft Aurora is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; soft; aurora",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/soft-aurora",
    "official_source_url": "https://reactbits.dev/backgrounds/soft-aurora",
    "preview_video_url": "https://reactbits.dev/assets/video/softaurora.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/SoftAurora-TS-TW",
    "registry_url": "https://reactbits.dev/r/SoftAurora-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-soft-aurora",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-evil-eye",
    "name": "Evil Eye",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Evil Eye is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; evil; eye",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/evil-eye",
    "official_source_url": "https://reactbits.dev/backgrounds/evil-eye",
    "preview_video_url": "https://reactbits.dev/assets/video/evileye.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/EvilEye-TS-TW",
    "registry_url": "https://reactbits.dev/r/EvilEye-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-evil-eye",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-dot-field",
    "name": "Dot Field",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Dot Field is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; dot; field",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/dot-field",
    "official_source_url": "https://reactbits.dev/backgrounds/dot-field",
    "preview_video_url": "https://reactbits.dev/assets/video/dotfield.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/DotField-TS-TW",
    "registry_url": "https://reactbits.dev/r/DotField-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-dot-field",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-side-rays",
    "name": "Side Rays",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Side Rays is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; side; rays",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/side-rays",
    "official_source_url": "https://reactbits.dev/backgrounds/side-rays",
    "preview_video_url": "https://reactbits.dev/assets/video/siderays.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/SideRays-TS-TW",
    "registry_url": "https://reactbits.dev/r/SideRays-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-side-rays",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-lightfall",
    "name": "Lightfall",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Lightfall is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; lightfall",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/lightfall",
    "official_source_url": "https://reactbits.dev/backgrounds/lightfall",
    "preview_video_url": "https://reactbits.dev/assets/video/lightfall.webm",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Lightfall-TS-TW",
    "registry_url": "https://reactbits.dev/r/Lightfall-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-lightfall",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "reactbits-ferrofluid",
    "name": "Ferrofluid",
    "category": "Animated background",
    "source_category": "backgrounds",
    "art_direction": "React Bits",
    "summary": "Ferrofluid is a public React Bits animated background with four official React variants: JavaScript or TypeScript, each with CSS or Tailwind.",
    "technique": "Open the official live demo, choose the TypeScript/JavaScript and CSS/Tailwind variant that matches the project, then install only that registry item and adapt its props.",
    "style_tags": "animated; React; React Bits; Animated background; ferrofluid",
    "best_for": "hero atmosphere; section transitions; immersive launches; branded ambience",
    "dependencies": "Dependencies vary by component; inspect the official page and registry payload before installation.",
    "framework_fit": "React; official JavaScript/TypeScript and CSS/Tailwind variants",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "React · official shadcn-compatible registry",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "React Bits",
    "creator": "David Haz",
    "source_url": "https://reactbits.dev/backgrounds/ferrofluid",
    "official_source_url": "https://reactbits.dev/backgrounds/ferrofluid",
    "preview_video_url": "https://reactbits.dev/assets/video/ferrofluid.mp4",
    "preview_poster_url": null,
    "preview_accent": "#8B5CF6",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @react-bits/Ferrofluid-TS-TW",
    "registry_url": "https://reactbits.dev/r/Ferrofluid-TS-TW.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "b9158acb37e7bdfd6c5bc5894da1826fe1d05a6b",
    "phase": "react-bits-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#reactbits-ferrofluid",
    "official_variants": [
      "JS-CSS",
      "JS-TW",
      "TS-CSS",
      "TS-TW"
    ],
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: React Bits. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "canvasui-asciify",
    "name": "Asciify",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "A soft lens that follows your cursor and redraws the live HTML beneath it as ascii characters.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; asciify",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/asciify",
    "official_source_url": "https://canvasui.dev/docs/components/asciify",
    "preview_video_url": "https://canvasui.dev/assets/videos/asciify.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/asciify-react",
    "registry_url": "https://canvasui.dev/r/asciify-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-asciify",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-bend",
    "name": "Bend",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Folds the top and bottom of your live HTML over straight virtual edges, like scrolling on the face of a cube.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; bend",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/bend",
    "official_source_url": "https://canvasui.dev/docs/components/bend",
    "preview_video_url": "https://canvasui.dev/assets/videos/bend.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/bend-react",
    "registry_url": "https://canvasui.dev/r/bend-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-bend",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-blaze",
    "name": "Blaze",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Fire sparks, smoke, and heat distortion rising over your live HTML.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; blaze",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/blaze",
    "official_source_url": "https://canvasui.dev/docs/components/blaze",
    "preview_video_url": "https://canvasui.dev/assets/videos/blaze.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/blaze-react",
    "registry_url": "https://canvasui.dev/r/blaze-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-blaze",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-bubble",
    "name": "Bubble",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; bubble",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/bubble",
    "official_source_url": "https://canvasui.dev/docs/components/bubble",
    "preview_video_url": "https://canvasui.dev/assets/videos/bubble.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/bubble-react",
    "registry_url": "https://canvasui.dev/r/bubble-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-bubble",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-cloth",
    "name": "Cloth",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Hangs your live HTML on fabric rippling in the wind. Cursor strokes send waves across the cloth.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; cloth",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/cloth",
    "official_source_url": "https://canvasui.dev/docs/components/cloth",
    "preview_video_url": "https://canvasui.dev/assets/videos/cloth.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/cloth-react",
    "registry_url": "https://canvasui.dev/r/cloth-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-cloth",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-clouds",
    "name": "Clouds",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Theme-aware mist that blurs and refracts your live HTML, parted by cursor wind.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; clouds",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/clouds",
    "official_source_url": "https://canvasui.dev/docs/components/clouds",
    "preview_video_url": "https://canvasui.dev/assets/videos/clouds.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/clouds-react",
    "registry_url": "https://canvasui.dev/r/clouds-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-clouds",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-dithered-object",
    "name": "Dithered Object",
    "category": "3D / object effect",
    "source_category": "3d-/-object-effect",
    "art_direction": "Canvas UI",
    "summary": "Any GLB/glTF model, SVG, or image floating in a studio scene, rendered through a 1-bit dither.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; dithered; object",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/dithered-object",
    "official_source_url": "https://canvasui.dev/docs/components/dithered-object",
    "preview_video_url": "https://canvasui.dev/assets/videos/dithered-object.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/dithered-object-react",
    "registry_url": "https://canvasui.dev/r/dithered-object-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-dithered-object",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3d / object effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-droplets",
    "name": "Droplets",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Rain droplets that run down the screen and refract your live HTML.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; droplets",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/droplets",
    "official_source_url": "https://canvasui.dev/docs/components/droplets",
    "preview_video_url": "https://canvasui.dev/assets/videos/droplets.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/droplets-react",
    "registry_url": "https://canvasui.dev/r/droplets-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-droplets",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-frost",
    "name": "Frost",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "A frozen pane of ice over your live HTML that melts under the cursor and refreezes.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; frost",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/frost",
    "official_source_url": "https://canvasui.dev/docs/components/frost",
    "preview_video_url": "https://canvasui.dev/assets/videos/frost.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/frost-react",
    "registry_url": "https://canvasui.dev/r/frost-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-frost",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-glass",
    "name": "Glass",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "A cursor-following glass lens that refracts your live HTML and zooms in on targets like a crystal ball.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; glass",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/glass",
    "official_source_url": "https://canvasui.dev/docs/components/glass",
    "preview_video_url": "https://canvasui.dev/assets/videos/glass.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/glass-react",
    "registry_url": "https://canvasui.dev/r/glass-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-glass",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-glass-object",
    "name": "Glass Object",
    "category": "3D / object effect",
    "source_category": "3d-/-object-effect",
    "art_direction": "Canvas UI",
    "summary": "Turns any 3D model, SVG, or image into floating liquid glass with real refraction, dispersion, and frost.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; glass; object",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/glass-object",
    "official_source_url": "https://canvasui.dev/docs/components/glass-object",
    "preview_video_url": "https://canvasui.dev/assets/videos/glass-object.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/glass-object-react",
    "registry_url": "https://canvasui.dev/r/glass-object-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-glass-object",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3d / object effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-glitch",
    "name": "Glitch",
    "category": "Image / distortion effect",
    "source_category": "image-/-distortion-effect",
    "art_direction": "Canvas UI",
    "summary": "Broadcast glitch bursts that tear your live HTML into shifted slices with RGB splits and corrupted blocks.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; glitch",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/glitch",
    "official_source_url": "https://canvasui.dev/docs/components/glitch",
    "preview_video_url": "https://canvasui.dev/assets/videos/glitch.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/glitch-react",
    "registry_url": "https://canvasui.dev/r/glitch-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-glitch",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image / distortion effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-grid",
    "name": "Grid",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "3D tiles that ripple in staggered waves around the cursor over your live HTML.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; grid",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/grid",
    "official_source_url": "https://canvasui.dev/docs/components/grid",
    "preview_video_url": "https://canvasui.dev/assets/videos/grid.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/grid-react",
    "registry_url": "https://canvasui.dev/r/grid-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-grid",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-hex-float",
    "name": "Hex Float",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Your live HTML on shiny floating hex tiles with perspective tilt and cursor lift.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; hex; float",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/hex-float",
    "official_source_url": "https://canvasui.dev/docs/components/hex-float",
    "preview_video_url": "https://canvasui.dev/assets/videos/hex-float.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/hex-float-react",
    "registry_url": "https://canvasui.dev/r/hex-float-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-hex-float",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-laser",
    "name": "Laser",
    "category": "Scroll effect",
    "source_category": "scroll-effect",
    "art_direction": "Canvas UI",
    "summary": "A laser beam near the bottom of the viewport that reveals your live HTML from behind it on scroll.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; laser",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/laser",
    "official_source_url": "https://canvasui.dev/docs/components/laser",
    "preview_video_url": "https://canvasui.dev/assets/videos/laser.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/laser-react",
    "registry_url": "https://canvasui.dev/r/laser-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-laser",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-liquid",
    "name": "Liquid",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "A pointer-driven WebGL fluid simulation that runs over your live HTML.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; liquid",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/liquid",
    "official_source_url": "https://canvasui.dev/docs/components/liquid",
    "preview_video_url": "https://canvasui.dev/assets/videos/liquid.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/liquid-react",
    "registry_url": "https://canvasui.dev/r/liquid-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-liquid",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-magnify",
    "name": "Magnify",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "A sci-fi scanner lens that magnifies your live HTML inside a HUD reticle, with click ripples that bend the page.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; magnify",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/magnify",
    "official_source_url": "https://canvasui.dev/docs/components/magnify",
    "preview_video_url": "https://canvasui.dev/assets/videos/magnify.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/magnify-react",
    "registry_url": "https://canvasui.dev/r/magnify-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-magnify",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-particle-object",
    "name": "Particle Object",
    "category": "3D / object effect",
    "source_category": "3d-/-object-effect",
    "art_direction": "Canvas UI",
    "summary": "Rebuilds any 3D model, SVG, or image as particles that scatter around the cursor and spring back into shape.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; particle; object",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/particle-object",
    "official_source_url": "https://canvasui.dev/docs/components/particle-object",
    "preview_video_url": "https://canvasui.dev/assets/videos/particle-object.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/particle-object-react",
    "registry_url": "https://canvasui.dev/r/particle-object-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-particle-object",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "3d / object effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-particle-reveal",
    "name": "Particle Reveal",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Renders your live HTML as fine readable particles that merge into the crisp UI around the cursor.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; particle; reveal",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/particle-reveal",
    "official_source_url": "https://canvasui.dev/docs/components/particle-reveal",
    "preview_video_url": "https://canvasui.dev/assets/videos/particle-reveal.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/particle-reveal-react",
    "registry_url": "https://canvasui.dev/r/particle-reveal-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-particle-reveal",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-particle-scroll",
    "name": "Particle Scroll",
    "category": "Scroll effect",
    "source_category": "scroll-effect",
    "art_direction": "Canvas UI",
    "summary": "Dissolves your live HTML below a chosen line into fine sand particles that reassemble on scroll.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; particle; scroll",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/particle-scroll",
    "official_source_url": "https://canvasui.dev/docs/components/particle-scroll",
    "preview_video_url": "https://canvasui.dev/assets/videos/particle-scroll.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/particle-scroll-react",
    "registry_url": "https://canvasui.dev/r/particle-scroll-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-particle-scroll",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-peel",
    "name": "Peel",
    "category": "Scroll effect",
    "source_category": "scroll-effect",
    "art_direction": "Canvas UI",
    "summary": "Peels your live HTML back from a chosen edge on hover, revealing a second layer underneath.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; peel",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/peel",
    "official_source_url": "https://canvasui.dev/docs/components/peel",
    "preview_video_url": "https://canvasui.dev/assets/videos/peel.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/peel-react",
    "registry_url": "https://canvasui.dev/r/peel-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-peel",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "scroll effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-retro-dither",
    "name": "Retro Dither",
    "category": "Image / distortion effect",
    "source_category": "image-/-distortion-effect",
    "art_direction": "Canvas UI",
    "summary": "A retro dither lens that pixelates your live HTML around the cursor.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; retro; dither",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/retro-dither",
    "official_source_url": "https://canvasui.dev/docs/components/retro-dither",
    "preview_video_url": "https://canvasui.dev/assets/videos/retro-dither.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/retro-dither-react",
    "registry_url": "https://canvasui.dev/r/retro-dither-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-retro-dither",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image / distortion effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-ripple",
    "name": "Ripple",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Water ripples that spread from every click and refract your live HTML like a pond surface.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; ripple",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/ripple",
    "official_source_url": "https://canvasui.dev/docs/components/ripple",
    "preview_video_url": "https://canvasui.dev/assets/videos/ripple.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/ripple-react",
    "registry_url": "https://canvasui.dev/r/ripple-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-ripple",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-shatter",
    "name": "Shatter",
    "category": "Interactive canvas effect",
    "source_category": "interactive-canvas-effect",
    "art_direction": "Canvas UI",
    "summary": "Breaks your live HTML into 3D glass shards that lift, float, and refract around the cursor, with perspective and soft shadows.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; shatter",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/shatter",
    "official_source_url": "https://canvasui.dev/docs/components/shatter",
    "preview_video_url": "https://canvasui.dev/assets/videos/shatter.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/shatter-react",
    "registry_url": "https://canvasui.dev/r/shatter-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-shatter",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive canvas effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "canvasui-vhs",
    "name": "VHS",
    "category": "Image / distortion effect",
    "source_category": "image-/-distortion-effect",
    "art_direction": "Canvas UI",
    "summary": "Worn tape playback with wave, head-switching noise, chroma bleed, and grain over your live HTML.",
    "technique": "Open the official live demo, choose one of the six framework variants, install only that registry item, preserve the plain-HTML layer, and tune the GPU effect to the project.",
    "style_tags": "canvas; WebGL; interactive; Canvas UI; vhs",
    "best_for": "immersive heroes; campaign reveals; experimental editorial moments; high-attention product storytelling",
    "dependencies": "Dependencies vary by component and framework; inspect the official page and registry payload before installation.",
    "framework_fit": "React, Solid, Preact, Vue, Svelte, or dependency-free vanilla TypeScript",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core interaction idea, retime it to the brand, pause it offscreen, and remove continuous motion when it no longer supports attention.",
    "performance_cost": "high",
    "accessibility_contract": "Preserve semantic HTML beneath the effect, keyboard and touch parity, visible focus, sufficient contrast, and a meaningful prefers-reduced-motion state.",
    "content_contract": "Replace every demo asset and string with real project content. The visual effect must never obscure essential information or controls.",
    "responsive_strategy": "Reduce effect density, pointer dependence, resolution, and continuous animation on narrow screens and coarse-pointer devices; retain the underlying content.",
    "interaction_inputs": "Inspect the official demo for pointer, scroll, drag, keyboard, and ambient inputs before integration.",
    "fallback_strategy": "Keep an equivalent static or plain-HTML state when motion, canvas, WebGL, pointer precision, or runtime dependencies are unavailable.",
    "test_focus": "official dependency check; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; cleanup; loading; canvas/WebGL fallback",
    "implementation_steps": "open official source; choose the correct framework variant; install only the selected component; audit dependencies; brand-adapt; add fallback; profile and test",
    "brand_tokens": "Map exposed colors, type, radii, spacing, imagery, lighting, and motion values to the project's semantic tokens.",
    "avoid_when": "the effect competes with the page goal, duplicates another signature moment, weakens readability, or cannot provide an accessible fallback",
    "impact": "signature",
    "quality_score": null,
    "novelty_score": null,
    "compatibility": "Modern browsers; experimental html-in-canvas enhances Chrome/Edge while documented WebGL or plain-HTML fallbacks preserve content",
    "source_kind": "external-linked-component",
    "license": "MIT + Commons Clause v1.0",
    "licence_class": "end-project-only-linked-source",
    "usage_rights": "Use and adapt in personal or commercial applications, websites, and products.",
    "resale_restriction": "Do not sell, sublicense, or redistribute the components themselves, alone, bundled, or ported.",
    "source": "Canvas UI",
    "creator": "David Haz",
    "source_url": "https://canvasui.dev/docs/components/vhs",
    "official_source_url": "https://canvasui.dev/docs/components/vhs",
    "preview_video_url": "https://canvasui.dev/assets/videos/vhs.webm",
    "preview_poster_url": null,
    "preview_accent": "#33D6C8",
    "preview_layout": "full",
    "preview_fallback": "remote-video-first-frame",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "install_command": "npx shadcn@latest add @canvas-ui/vhs-react",
    "registry_url": "https://canvasui.dev/r/vhs-react.json",
    "implementation_mode": "install-from-official-registry",
    "official_featured": false,
    "inventory_date": "2026-07-30",
    "source_revision": "6c9cccf12df6eb85689ae74d1759a24d7328f88e",
    "phase": "canvas-ui-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#canvasui-vhs",
    "official_variants": [
      "React",
      "Solid",
      "Preact",
      "Vue",
      "Svelte",
      "vanilla TypeScript"
    ],
    "browser_note": "Some live-HTML canvas effects use an experimental Chrome/Edge capability; use the documented WebGL overlay or plain-HTML fallback everywhere else.",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "image / distortion effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Canvas UI. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-audio-analyser",
    "name": "Audio Analyser",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Combining audio analysis with gltf cell fracture and reflections. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gltf; audio; reflections; cell-fracture",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber; zustand",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/audio-analyser",
    "official_source_url": "https://pmndrs.github.io/examples/demos/audio-analyser",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/audio-analyser",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/audio-analyser/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/dvokj",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/audio-analyser/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/audio-analyser myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "zustand"
    ],
    "declared_assets": [],
    "published_at": "2021-02-01",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-audio-analyser",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-caustics",
    "name": "Caustics",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Caustics is an official pmndrs example curated as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/caustics",
    "official_source_url": "https://pmndrs.github.io/examples/demos/caustics",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/caustics",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/caustics/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/szj6p7",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/caustics/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/caustics myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2023-01-09",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-caustics",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-clouds",
    "name": "Clouds",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Trying out drei's new cloud component. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; clouds",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/clouds",
    "official_source_url": "https://pmndrs.github.io/examples/demos/clouds",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/clouds",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/clouds/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/mbfzf",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/clouds/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/clouds myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2020-11-16",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-clouds",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-flow-shield",
    "name": "Flow Shield",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Interactive force-shield playground with hit reactions, presets, and model import. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; shader; shield; postprocessing",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": "The demo includes a recognizable Droideka-style model. Reuse the shield shader and interaction pattern with a Lumora-approved model.",
    "source": "pmndrs Examples",
    "creator": "Christian Ortiz",
    "authors": [
      "Christian Ortiz"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/flow-shield",
    "official_source_url": "https://pmndrs.github.io/examples/demos/flow-shield",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/flow-shield",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/flow-shield/pmndrs.json",
    "original_source_url": "http://github.com/cortiz2894/flow-shield-effect",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/flow-shield/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/flow-shield myproject",
    "official_featured": true,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2026-03-24",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-flow-shield",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-gpgpu-curl-noise-dof",
    "name": "GPGPU Curl Noise DOF",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Curl noise and depth of field. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gpu; shader; curl; dof",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/gpgpu-curl-noise-dof",
    "official_source_url": "https://pmndrs.github.io/examples/demos/gpgpu-curl-noise-dof",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/gpgpu-curl-noise-dof",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/gpgpu-curl-noise-dof/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/zgsyn",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/gpgpu-curl-noise-dof/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/gpgpu-curl-noise-dof myproject",
    "official_featured": true,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2021-09-05",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-gpgpu-curl-noise-dof",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-grass-shader",
    "name": "Grass Shader",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Grass shader using simplex noise. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; noise; shader; simplex; grass",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/grass-shader",
    "official_source_url": "https://pmndrs.github.io/examples/demos/grass-shader",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/grass-shader",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/grass-shader/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/5xho4",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/grass-shader/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/grass-shader myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2020-06-10",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-grass-shader",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-instanced-particles-effects",
    "name": "Instanced Particles Effects",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Instancing, swirling particles and effects. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; effects; film; water; bloom; particles",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/instanced-particles-effects",
    "official_source_url": "https://pmndrs.github.io/examples/demos/instanced-particles-effects",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/instanced-particles-effects",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/instanced-particles-effects/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/qpfgyp",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/instanced-particles-effects/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/instanced-particles-effects myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2022-12-07",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-instanced-particles-effects",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-shader-fire",
    "name": "Shader Fire",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "A volumetric fire effect. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; fire; volumetric; shader",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/shader-fire",
    "official_source_url": "https://pmndrs.github.io/examples/demos/shader-fire",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/shader-fire",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/shader-fire/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/3878x",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/shader-fire/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/shader-fire myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-05-14",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-shader-fire",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-sparks-and-effects",
    "name": "Sparks And Effects",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Demonstrating fake-particles, mesh-lines and effect composition. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; glow; mesh-line; effects; particles; text-geometry",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/sparks-and-effects",
    "official_source_url": "https://pmndrs.github.io/examples/demos/sparks-and-effects",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/sparks-and-effects",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/sparks-and-effects/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/sbf2i",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/sparks-and-effects/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/sparks-and-effects myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2020-01-10",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-sparks-and-effects",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-spline-glass-shapes",
    "name": "Spline Glass Shapes",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Scene exported with Spline Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; spline",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/spline-glass-shapes",
    "official_source_url": "https://pmndrs.github.io/examples/demos/spline-glass-shapes",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/spline-glass-shapes",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/spline-glass-shapes/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/ju368j",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/spline-glass-shapes/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/spline-glass-shapes myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2023-01-07",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-spline-glass-shapes",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-thunder-clouds",
    "name": "Thunder Clouds",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Trying out drei's new cloud component. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/rapier; maath",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/thunder-clouds",
    "official_source_url": "https://pmndrs.github.io/examples/demos/thunder-clouds",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/thunder-clouds",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/thunder-clouds/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/gwthnh",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/thunder-clouds/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/thunder-clouds myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/rapier",
      "maath"
    ],
    "declared_assets": [],
    "published_at": "2023-09-25",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-thunder-clouds",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-volumetric-light-godray",
    "name": "Volumetric Light God Rays",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Experimenting with volumetric lights. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; postprocessing; godray",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/volumetric-light-godray",
    "official_source_url": "https://pmndrs.github.io/examples/demos/volumetric-light-godray",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/volumetric-light-godray",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/volumetric-light-godray/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/yggpw5",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/volumetric-light-godray/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/volumetric-light-godray myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing"
    ],
    "declared_assets": [],
    "published_at": "2023-06-24",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-volumetric-light-godray",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-volumetric-spotlight",
    "name": "Volumetric Spotlight",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Volumetric soft particle spot lights. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; volumetric; spotlight; soft-particles; spot",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/volumetric-spotlight",
    "official_source_url": "https://pmndrs.github.io/examples/demos/volumetric-spotlight",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/volumetric-spotlight",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/volumetric-spotlight/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/tx1pq",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/volumetric-spotlight/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/volumetric-spotlight myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-05-24",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-volumetric-spotlight",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-water-shader",
    "name": "Water Shader",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Water Shader is an official pmndrs example curated as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; shader; water",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/water-shader",
    "official_source_url": "https://pmndrs.github.io/examples/demos/water-shader",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/water-shader",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/water-shader/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/1b40u",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/water-shader/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/water-shader myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-04-15",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-water-shader",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-zustand-site",
    "name": "Zustand Site",
    "category": "Signature 3D scene",
    "source_category": "signature-3d-scene",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to parallax layers with dept of field and particles. Curated by Lumora as a signature 3d scene pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; parallax; animation; dof; particles",
    "best_for": "immersive heroes; technical launches; experiential campaigns; high-attention section canvases",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing; meshline",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 92,
    "novelty_score": 93,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Gianmarco Simone, Paul Henschel",
    "authors": [
      "Gianmarco Simone",
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/zustand-site",
    "official_source_url": "https://pmndrs.github.io/examples/demos/zustand-site",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/zustand-site",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/zustand-site/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/gpioq",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/zustand-site/thumbnail.webp",
    "preview_accent": "#63D8FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/zustand-site myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing",
      "meshline"
    ],
    "declared_assets": [],
    "published_at": "2021-03-26",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-zustand-site",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "pmndrs-camera-scroll",
    "name": "Camera Scroll",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Tying scroll to a GLTF camera path with snapping points. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; snap; scroll; gtlf; html",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/camera-scroll",
    "official_source_url": "https://pmndrs.github.io/examples/demos/camera-scroll",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/camera-scroll",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/camera-scroll/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/tu24h",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/camera-scroll/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/camera-scroll myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-04-29",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-camera-scroll",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-gltf-animations-tied-to-scroll",
    "name": "GLTF Animations Tied To Scroll",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "This examples shows how to blend GLTF animation keyframes. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/gltf-animations-tied-to-scroll",
    "official_source_url": "https://pmndrs.github.io/examples/demos/gltf-animations-tied-to-scroll",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/gltf-animations-tied-to-scroll",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/gltf-animations-tied-to-scroll/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/hg3ejl",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/gltf-animations-tied-to-scroll/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/gltf-animations-tied-to-scroll myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing"
    ],
    "declared_assets": [],
    "published_at": "2023-05-15",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-gltf-animations-tied-to-scroll",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-horizontal-tiles",
    "name": "Horizontal Tiles",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Horizontal scrollcontrols with expanding tiles. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; expand; scrollcontrols; tiles; horizontal",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber; valtio",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/horizontal-tiles",
    "official_source_url": "https://pmndrs.github.io/examples/demos/horizontal-tiles",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/horizontal-tiles",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/horizontal-tiles/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/l4klb",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/horizontal-tiles/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/horizontal-tiles myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "valtio"
    ],
    "declared_assets": [],
    "published_at": "2021-10-16",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-horizontal-tiles",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-image-gallery",
    "name": "Image Gallery",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Stage a couple of frames with a reflective, blurred out ground. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; image; meshreflectormaterial",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber; maath",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/image-gallery",
    "official_source_url": "https://pmndrs.github.io/examples/demos/image-gallery",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/image-gallery",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/image-gallery/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/lx2h8",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/image-gallery/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/image-gallery myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "maath"
    ],
    "declared_assets": [],
    "published_at": "2022-01-05",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-image-gallery",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-infinite-scroll",
    "name": "Infinite Scroll",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Horizontal scrollcontrols that scroll infinitely. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; horizontal; scrollcontrols; infinite",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/infinite-scroll",
    "official_source_url": "https://pmndrs.github.io/examples/demos/infinite-scroll",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/infinite-scroll",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/infinite-scroll/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/x8gvs",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/infinite-scroll/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/infinite-scroll myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-10-16",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-infinite-scroll",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-landing-page",
    "name": "Landing Page",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Transparent backdrop and model staging Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; contact shadows",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/landing-page",
    "official_source_url": "https://pmndrs.github.io/examples/demos/landing-page",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/landing-page",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/landing-page/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/n60qg",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/landing-page/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/landing-page myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-09-21",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-landing-page",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-mount-transitions",
    "name": "Mount Transitions",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to use react-spring mount/unmount transitions, soft-shadows and AO. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; soft-shadows; animation; ambient-occlusion; transitions",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-spring/three; @react-three/drei; @react-three/fiber; @react-three/postprocessing; zustand",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/mount-transitions",
    "official_source_url": "https://pmndrs.github.io/examples/demos/mount-transitions",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/mount-transitions",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/mount-transitions/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/1sccp",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/mount-transitions/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/mount-transitions myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-spring/three",
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing",
      "zustand"
    ],
    "declared_assets": [],
    "published_at": "2020-09-18",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-mount-transitions",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-router-transitions",
    "name": "Router Transitions",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to implement routes and mount/unmount transition within the canvas using Wouter. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; router; transitions; html",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/router-transitions",
    "official_source_url": "https://pmndrs.github.io/examples/demos/router-transitions",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/router-transitions",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/router-transitions/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/4j2q2",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/router-transitions/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/router-transitions myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing"
    ],
    "declared_assets": [],
    "published_at": "2021-04-19",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-router-transitions",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-scrollcontrols-and-lens-refraction",
    "name": "ScrollControls and Lens Refraction",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Vertical scrollcontrols and minimaps. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber; maath",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/scrollcontrols-and-lens-refraction",
    "official_source_url": "https://pmndrs.github.io/examples/demos/scrollcontrols-and-lens-refraction",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/scrollcontrols-and-lens-refraction",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/scrollcontrols-and-lens-refraction/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/2n98yj",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/scrollcontrols-and-lens-refraction/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/scrollcontrols-and-lens-refraction myproject",
    "official_featured": true,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "maath"
    ],
    "declared_assets": [],
    "published_at": "2023-01-07",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-scrollcontrols-and-lens-refraction",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-scrollcontrols-gltf",
    "name": "ScrollControls GLTF",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Connecting models with useScroll Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gltf; scrollcontrols",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/scrollcontrols-gltf",
    "official_source_url": "https://pmndrs.github.io/examples/demos/scrollcontrols-gltf",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/scrollcontrols-gltf",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/scrollcontrols-gltf/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/4jr4p",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/scrollcontrols-gltf/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/scrollcontrols-gltf myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-10-22",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-scrollcontrols-gltf",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-scrollcontrols-with-minimap",
    "name": "ScrollControls with Minimap",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Vertical scrollcontrols and minimaps. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; vertical; minimap",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/scrollcontrols-with-minimap",
    "official_source_url": "https://pmndrs.github.io/examples/demos/scrollcontrols-with-minimap",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/scrollcontrols-with-minimap",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/scrollcontrols-with-minimap/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/yjhzv",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/scrollcontrols-with-minimap/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/scrollcontrols-with-minimap myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-10-13",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-scrollcontrols-with-minimap",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-tying-canvas-to-scroll-offset",
    "name": "Tying Canvas To Scroll Offset",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "How to tie canvas objects to scrollTop while events keep working. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; scroll; lerp; events; animation; html",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/tying-canvas-to-scroll-offset",
    "official_source_url": "https://pmndrs.github.io/examples/demos/tying-canvas-to-scroll-offset",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/tying-canvas-to-scroll-offset",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/tying-canvas-to-scroll-offset/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/itfgk",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/tying-canvas-to-scroll-offset/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/tying-canvas-to-scroll-offset myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-04-17",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-tying-canvas-to-scroll-offset",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-useintersect-and-scrollcontrols",
    "name": "useIntersect and ScrollControls",
    "category": "3D scroll / narrative section",
    "source_category": "scroll-storytelling",
    "art_direction": "pmndrs Examples",
    "summary": "Combining useIntersect with scrollcontrols. Curated by Lumora as a 3d scroll / narrative section pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; vertical; useintersect; intersection; scrollcontrols",
    "best_for": "award-style landing pages; editorial journeys; portfolio narratives; product storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 91,
    "novelty_score": 90,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/useintersect-and-scrollcontrols",
    "official_source_url": "https://pmndrs.github.io/examples/demos/useintersect-and-scrollcontrols",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/useintersect-and-scrollcontrols",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/useintersect-and-scrollcontrols/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/gsm1y",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/useintersect-and-scrollcontrols/thumbnail.webp",
    "preview_accent": "#C9FF4A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/useintersect-and-scrollcontrols myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-10-18",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-useintersect-and-scrollcontrols",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "scroll storytelling",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-backdrop-and-cables",
    "name": "Backdrop And Cables",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Using a studio backdrop, quadratic bezier line and contact shadows. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; quadraticbezierline; contact-shadows; backdrop",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/backdrop-and-cables",
    "official_source_url": "https://pmndrs.github.io/examples/demos/backdrop-and-cables",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/backdrop-and-cables",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/backdrop-and-cables/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/2ij9u",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/backdrop-and-cables/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/backdrop-and-cables myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-11-28",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-backdrop-and-cables",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-bloom-hdr-workflow-gltf",
    "name": "Bloom HDR Workflow GLTF",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Bloom HDR Workflow GLTF is an official pmndrs example curated as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; bloom; hdr; glow; gltf; selective",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/bloom-hdr-workflow-gltf",
    "official_source_url": "https://pmndrs.github.io/examples/demos/bloom-hdr-workflow-gltf",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/bloom-hdr-workflow-gltf",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/bloom-hdr-workflow-gltf/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/whnhyr",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/bloom-hdr-workflow-gltf/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/bloom-hdr-workflow-gltf myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2022-06-23",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-bloom-hdr-workflow-gltf",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-bouncy-watch",
    "name": "Bouncy Watch",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Custom springy controls using use-gesture and react-spring. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; interaction; custom-controls; animation; tag-heuer; html",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": "The visible watch branding is reference content. Reuse the interaction and spring-control pattern with a client-owned or separately licensed product model.",
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/bouncy-watch",
    "official_source_url": "https://pmndrs.github.io/examples/demos/bouncy-watch",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/bouncy-watch",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/bouncy-watch/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/qyz5r",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/bouncy-watch/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/bouncy-watch myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-11-26",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-bouncy-watch",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-diamond-ring",
    "name": "Diamond Ring",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Diamond Ring is an official pmndrs example curated as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; bloom; refraction; diamond; ring; html",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/diamond-ring",
    "official_source_url": "https://pmndrs.github.io/examples/demos/diamond-ring",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/diamond-ring",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/diamond-ring/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/4gy946",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/diamond-ring/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/diamond-ring myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing"
    ],
    "declared_assets": [],
    "published_at": "2022-09-18",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-diamond-ring",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-faucets-select-highlight",
    "name": "Faucets Select Highlight",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Faucets Select Highlight is an official pmndrs example curated as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; bounds; highlight; selection; metal; reflections",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/faucets-select-highlight",
    "official_source_url": "https://pmndrs.github.io/examples/demos/faucets-select-highlight",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/faucets-select-highlight",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/faucets-select-highlight/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/8flefh",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/faucets-select-highlight/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/faucets-select-highlight myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2022-07-15",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-faucets-select-highlight",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-floating-diamonds",
    "name": "Floating Diamonds",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Mixing refraction shaders and animations. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gltf; refraction",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/floating-diamonds",
    "official_source_url": "https://pmndrs.github.io/examples/demos/floating-diamonds",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/floating-diamonds",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/floating-diamonds/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/prb9t",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/floating-diamonds/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/floating-diamonds myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing"
    ],
    "declared_assets": [],
    "published_at": "2019-10-29",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-floating-diamonds",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-floating-instanced-shoes",
    "name": "Floating Instanced Shoes",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Using drei/instances and events. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; instances",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/floating-instanced-shoes",
    "official_source_url": "https://pmndrs.github.io/examples/demos/floating-instanced-shoes",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/floating-instanced-shoes",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/floating-instanced-shoes/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/h8o2d",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/floating-instanced-shoes/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/floating-instanced-shoes myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2021-09-14",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-floating-instanced-shoes",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-floating-laptop",
    "name": "Floating Laptop",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Animating GLTFs with react-spring. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gltf; animation",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-spring/three; @react-spring/web; @react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/floating-laptop",
    "official_source_url": "https://pmndrs.github.io/examples/demos/floating-laptop",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/floating-laptop",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/floating-laptop/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/q23sw",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/floating-laptop/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/floating-laptop myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-spring/three",
      "@react-spring/web",
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2020-06-05",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-floating-laptop",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-gltfjsx-400kb-drone",
    "name": "GLTFJSX 400KB Drone",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Shows the results of gltfjsx transform compression. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; bloom; compression; drone; gltf",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing; maath",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": "Reuse the GLTF compression and presentation workflow; replace the bundled drone unless its asset rights are independently confirmed.",
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/gltfjsx-400kb-drone",
    "official_source_url": "https://pmndrs.github.io/examples/demos/gltfjsx-400kb-drone",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/gltfjsx-400kb-drone",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/gltfjsx-400kb-drone/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/pbwi6i",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/gltfjsx-400kb-drone/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/gltfjsx-400kb-drone myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing",
      "maath"
    ],
    "declared_assets": [],
    "published_at": "2022-12-29",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-gltfjsx-400kb-drone",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-ground-reflections-and-video-textures",
    "name": "Ground Reflections And Video Textures",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "This example shows drei's new Reflector in combination with video textures. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; reflections",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/ground-reflections-and-video-textures",
    "official_source_url": "https://pmndrs.github.io/examples/demos/ground-reflections-and-video-textures",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/ground-reflections-and-video-textures",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/ground-reflections-and-video-textures/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/bfplr",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/ground-reflections-and-video-textures/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/ground-reflections-and-video-textures myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-01-26",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-ground-reflections-and-video-textures",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-shoe-configurator",
    "name": "Shoe Configurator",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "A super small configurator that shows you how to make GLTF assets dynamic. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; state; gltf; configurator",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber; valtio",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/shoe-configurator",
    "official_source_url": "https://pmndrs.github.io/examples/demos/shoe-configurator",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/shoe-configurator",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/shoe-configurator/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/qxjoj",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/shoe-configurator/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/shoe-configurator myproject",
    "official_featured": true,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "valtio"
    ],
    "declared_assets": [],
    "published_at": "2020-12-11",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-shoe-configurator",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-stage-presets-gltfjsx",
    "name": "Stage Presets GLTFJSX",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "Stage Presets GLTFJSX is an official pmndrs example curated as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gltf; stage; lighting",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/stage-presets-gltfjsx",
    "official_source_url": "https://pmndrs.github.io/examples/demos/stage-presets-gltfjsx",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/stage-presets-gltfjsx",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/stage-presets-gltfjsx/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/if9crg",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/stage-presets-gltfjsx/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/stage-presets-gltfjsx myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2022-12-20",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-stage-presets-gltfjsx",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-t-shirt-configurator",
    "name": "T-Shirt Configurator",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "T-Shirt Configurator is an official pmndrs example curated as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; decals",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber; maath; valtio",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/t-shirt-configurator",
    "official_source_url": "https://pmndrs.github.io/examples/demos/t-shirt-configurator",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/t-shirt-configurator",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/t-shirt-configurator/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/ioxywi",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/t-shirt-configurator/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/t-shirt-configurator myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "maath",
      "valtio"
    ],
    "declared_assets": [],
    "published_at": "2022-08-15",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-t-shirt-configurator",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-transparent-aesop-bottles",
    "name": "Transparent Aesop Bottles",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "PBR transmission and thickness to emulate glas. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; reflections; transmission; glas",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": "The visible Aesop packaging is reference content. Reuse the glass/transmission treatment with client-owned packaging and branding.",
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/transparent-aesop-bottles",
    "official_source_url": "https://pmndrs.github.io/examples/demos/transparent-aesop-bottles",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/transparent-aesop-bottles",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/transparent-aesop-bottles/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/kv7tv",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/transparent-aesop-bottles/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/transparent-aesop-bottles myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-10-08",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-transparent-aesop-bottles",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-viking-ship",
    "name": "Viking Ship",
    "category": "3D product / configurator",
    "source_category": "product-experience",
    "art_direction": "pmndrs Examples",
    "summary": "GLTF workflow with GLTFJSX and camera rotations. Curated by Lumora as a 3d product / configurator pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gltf",
    "best_for": "product heroes; interactive configurators; premium commerce; material selectors; campaign showcases",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 90,
    "novelty_score": 87,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/viking-ship",
    "official_source_url": "https://pmndrs.github.io/examples/demos/viking-ship",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/viking-ship",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/viking-ship/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/0buje",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/viking-ship/thumbnail.webp",
    "preview_accent": "#FF9C6B",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/viking-ship myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2020-05-02",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-viking-ship",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "product experience",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-canvas-text",
    "name": "Canvas Text",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to form self-contained components with their own state and user interaction. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/canvas-text",
    "official_source_url": "https://pmndrs.github.io/examples/demos/canvas-text",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/canvas-text",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/canvas-text/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/p9umgf",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/canvas-text/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/canvas-text myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2022-03-28",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-canvas-text",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-flexbox-yoga-in-webgl",
    "name": "Flexbox Yoga In WebGL",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "This example uses yoga to create flex-box layouts. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; layout; scroll; flexbox; text",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/flex",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/flexbox-yoga-in-webgl",
    "official_source_url": "https://pmndrs.github.io/examples/demos/flexbox-yoga-in-webgl",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/flexbox-yoga-in-webgl",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/flexbox-yoga-in-webgl/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/7psew",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/flexbox-yoga-in-webgl/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/flexbox-yoga-in-webgl myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/flex"
    ],
    "declared_assets": [],
    "published_at": "2020-09-07",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-flexbox-yoga-in-webgl",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-html-annotations",
    "name": "HTML Annotations",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to set up annotations with a distance factor. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; distance; html; annotations",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/html-annotations",
    "official_source_url": "https://pmndrs.github.io/examples/demos/html-annotations",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/html-annotations",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/html-annotations/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/zu2wo",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/html-annotations/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/html-annotations myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2019-11-27",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-html-annotations",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-html-input-fields",
    "name": "HTML Input Fields",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "HTML Input Fields is an official pmndrs example curated as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; text; html; input",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/html-input-fields",
    "official_source_url": "https://pmndrs.github.io/examples/demos/html-input-fields",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/html-input-fields",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/html-input-fields/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/024uom",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/html-input-fields/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/html-input-fields myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2022-12-06",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-html-input-fields",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-html-markers",
    "name": "HTML Markers",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Occluding HTML annotations/markers. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; annotations; html; markers",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/html-markers",
    "official_source_url": "https://pmndrs.github.io/examples/demos/html-markers",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/html-markers",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/html-markers/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/6oei7",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/html-markers/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/html-markers myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-06-23",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-html-markers",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-interactive-spline-scene-live-html",
    "name": "Interactive Spline Scene Live HTML",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Scene exported with Spline Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; spline; stencil; html",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/interactive-spline-scene-live-html",
    "official_source_url": "https://pmndrs.github.io/examples/demos/interactive-spline-scene-live-html",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/interactive-spline-scene-live-html",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/interactive-spline-scene-live-html/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/f79ucc",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/interactive-spline-scene-live-html/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/interactive-spline-scene-live-html myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2022-06-15",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-interactive-spline-scene-live-html",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-mixing-html-and-webgl",
    "name": "Mixing HTML And WebGL",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Adding HTML into the scene. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; html; transforms",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/mixing-html-and-webgl",
    "official_source_url": "https://pmndrs.github.io/examples/demos/mixing-html-and-webgl",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/mixing-html-and-webgl",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/mixing-html-and-webgl/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/7ucso",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/mixing-html-and-webgl/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/mixing-html-and-webgl myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-03-24",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-mixing-html-and-webgl",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-mixing-html-and-webgl-w-occlusion",
    "name": "Mixing HTML and WebGL with Occlusion",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Having HTML and WebGL in the same scene with the addition of occlusion. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; occlusion; html",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/mixing-html-and-webgl-w-occlusion",
    "official_source_url": "https://pmndrs.github.io/examples/demos/mixing-html-and-webgl-w-occlusion",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/mixing-html-and-webgl-w-occlusion",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/mixing-html-and-webgl-w-occlusion/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/9keg6",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/mixing-html-and-webgl-w-occlusion/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/mixing-html-and-webgl-w-occlusion myproject",
    "official_featured": true,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-05-29",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-mixing-html-and-webgl-w-occlusion",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-multiple-views-with-uniform-controls",
    "name": "Multiple Views With Uniform Controls",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to form self-contained components with their own state and user interaction. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber; zustand",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/multiple-views-with-uniform-controls",
    "official_source_url": "https://pmndrs.github.io/examples/demos/multiple-views-with-uniform-controls",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/multiple-views-with-uniform-controls",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/multiple-views-with-uniform-controls/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/r9w2ob",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/multiple-views-with-uniform-controls/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/multiple-views-with-uniform-controls myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "zustand"
    ],
    "declared_assets": [],
    "published_at": "2023-01-19",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-multiple-views-with-uniform-controls",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-pairing-threejs-to-ui",
    "name": "Pairing Three.js To UI",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Pairing Three.js To UI is an official pmndrs example curated as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/pairing-threejs-to-ui",
    "official_source_url": "https://pmndrs.github.io/examples/demos/pairing-threejs-to-ui",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/pairing-threejs-to-ui",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/pairing-threejs-to-ui/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/wlz1o0",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/pairing-threejs-to-ui/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/pairing-threejs-to-ui myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2022-07-04",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-pairing-threejs-to-ui",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-svg-maps-with-html-annotations",
    "name": "SVG Maps With HTML Annotations",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Using SVGLoader, converting each path into cell components with annotations and map controls. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; html; svg",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/svg-maps-with-html-annotations",
    "official_source_url": "https://pmndrs.github.io/examples/demos/svg-maps-with-html-annotations",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/svg-maps-with-html-annotations",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/svg-maps-with-html-annotations/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/mkq8e",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/svg-maps-with-html-annotations/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/svg-maps-with-html-annotations myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2019-09-16",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-svg-maps-with-html-annotations",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-viewcube",
    "name": "View Cube",
    "category": "Mixed DOM / WebGL interface",
    "source_category": "mixed-dom-webgl",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to do heads-up-displays using React.portals. Curated by Lumora as a mixed dom / webgl interface pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; portal; viewcube; hud",
    "best_for": "spatial interfaces; annotated products; immersive editorial layouts; maps; synchronized 2D and 3D UI",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 89,
    "novelty_score": 89,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/viewcube",
    "official_source_url": "https://pmndrs.github.io/examples/demos/viewcube",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/viewcube",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/viewcube/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/py4db",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/viewcube/thumbnail.webp",
    "preview_accent": "#BCA7FF",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/viewcube myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2019-11-05",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-viewcube",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "mixed dom webgl",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-drei-rendertexture",
    "name": "Drei RenderTexture",
    "category": "Portal / spatial transition",
    "source_category": "portal-transition",
    "art_direction": "pmndrs Examples",
    "summary": "Portal a live scene events and all into a texture. Curated by Lumora as a portal / spatial transition pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; portals; rendertexture",
    "best_for": "campaign transitions; scene-to-scene navigation; portfolio reveals; spatial storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 92,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/drei-rendertexture",
    "official_source_url": "https://pmndrs.github.io/examples/demos/drei-rendertexture",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/drei-rendertexture",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/drei-rendertexture/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/0z8i2c",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/drei-rendertexture/thumbnail.webp",
    "preview_accent": "#FF73C5",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/drei-rendertexture myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2022-05-04",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-drei-rendertexture",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "portal transition",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-enter-portals",
    "name": "Enter Portals",
    "category": "Portal / spatial transition",
    "source_category": "portal-transition",
    "art_direction": "pmndrs Examples",
    "summary": "Enter Portals is an official pmndrs example curated as a portal / spatial transition pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "campaign transitions; scene-to-scene navigation; portfolio reveals; spatial storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 92,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/enter-portals",
    "official_source_url": "https://pmndrs.github.io/examples/demos/enter-portals",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/enter-portals",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/enter-portals/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/9m4tpc",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/enter-portals/thumbnail.webp",
    "preview_accent": "#FF73C5",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/enter-portals myproject",
    "official_featured": true,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2023-06-14",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-enter-portals",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "portal transition",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-pass-through-portals",
    "name": "Pass Through Portals",
    "category": "Portal / spatial transition",
    "source_category": "portal-transition",
    "art_direction": "pmndrs Examples",
    "summary": "Pass Through Portals is an official pmndrs example curated as a portal / spatial transition pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; portal",
    "best_for": "campaign transitions; scene-to-scene navigation; portfolio reveals; spatial storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 92,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/pass-through-portals",
    "official_source_url": "https://pmndrs.github.io/examples/demos/pass-through-portals",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/pass-through-portals",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/pass-through-portals/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/qvk72r",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/pass-through-portals/thumbnail.webp",
    "preview_accent": "#FF73C5",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/pass-through-portals myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2023-06-17",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-pass-through-portals",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "portal transition",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-portal-shapes",
    "name": "Portal Shapes",
    "category": "Portal / spatial transition",
    "source_category": "portal-transition",
    "art_direction": "pmndrs Examples",
    "summary": "Portal Shapes is an official pmndrs example curated as a portal / spatial transition pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "campaign transitions; scene-to-scene navigation; portfolio reveals; spatial storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/rapier",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 92,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/portal-shapes",
    "official_source_url": "https://pmndrs.github.io/examples/demos/portal-shapes",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/portal-shapes",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/portal-shapes/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/8j36ok",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/portal-shapes/thumbnail.webp",
    "preview_accent": "#FF73C5",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/portal-shapes myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/rapier"
    ],
    "declared_assets": [],
    "published_at": "2023-01-31",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-portal-shapes",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "portal transition",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-portals",
    "name": "Portals",
    "category": "Portal / spatial transition",
    "source_category": "portal-transition",
    "art_direction": "pmndrs Examples",
    "summary": "Portals is an official pmndrs example curated as a portal / spatial transition pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "campaign transitions; scene-to-scene navigation; portfolio reveals; spatial storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 92,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/portals",
    "official_source_url": "https://pmndrs.github.io/examples/demos/portals",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/portals",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/portals/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/ik11ln",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/portals/thumbnail.webp",
    "preview_accent": "#FF73C5",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/portals myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2023-06-05",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-portals",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "portal transition",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-stencil-mask",
    "name": "Stencil Mask",
    "category": "Portal / spatial transition",
    "source_category": "portal-transition",
    "art_direction": "pmndrs Examples",
    "summary": "Using the stencil mask to cut out areas of the screen. Curated by Lumora as a portal / spatial transition pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; stencil; mask",
    "best_for": "campaign transitions; scene-to-scene navigation; portfolio reveals; spatial storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 92,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/stencil-mask",
    "official_source_url": "https://pmndrs.github.io/examples/demos/stencil-mask",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/stencil-mask",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/stencil-mask/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/z3f2mw",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/stencil-mask/thumbnail.webp",
    "preview_accent": "#FF73C5",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/stencil-mask myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2022-05-11",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-stencil-mask",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "portal transition",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-threejs-journey-portal",
    "name": "Three.js Journey Portal",
    "category": "Portal / spatial transition",
    "source_category": "portal-transition",
    "art_direction": "pmndrs Examples",
    "summary": "The last scene from Bruno Simons Threejs journey in react-three-fiber Curated by Lumora as a portal / spatial transition pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gltf; particles; shaders",
    "best_for": "campaign transitions; scene-to-scene navigation; portfolio reveals; spatial storytelling",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "signature",
    "quality_score": 88,
    "novelty_score": 92,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": "Reuse the portal principles only. Recreate the composition and provide original or separately licensed scene assets.",
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/threejs-journey-portal",
    "official_source_url": "https://pmndrs.github.io/examples/demos/threejs-journey-portal",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/threejs-journey-portal",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/threejs-journey-portal/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/ni6v4",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/threejs-journey-portal/thumbnail.webp",
    "preview_accent": "#FF73C5",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/threejs-journey-portal myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-04-19",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-threejs-journey-portal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "portal transition",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-building-live-envmaps",
    "name": "Building Live Env Maps",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to build declarative environment that are live and animated. Curated by Lumora as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; lightformer",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber; lamina",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/building-live-envmaps",
    "official_source_url": "https://pmndrs.github.io/examples/demos/building-live-envmaps",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/building-live-envmaps",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/building-live-envmaps/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/lwo219",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/building-live-envmaps/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/building-live-envmaps myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "lamina"
    ],
    "declared_assets": [],
    "published_at": "2022-03-05",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-building-live-envmaps",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-color-grading",
    "name": "Color Grading",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Shows how to use LUTPass to grade colors. Curated by Lumora as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; grading",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/color-grading",
    "official_source_url": "https://pmndrs.github.io/examples/demos/color-grading",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/color-grading",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/color-grading/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/wvgxp",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/color-grading/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/color-grading myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2020-11-09",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-color-grading",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-diamond-refraction",
    "name": "Diamond Refraction",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Diamon refraction material Curated by Lumora as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; diamond; refraction; raycast; bvh",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/diamond-refraction",
    "official_source_url": "https://pmndrs.github.io/examples/demos/diamond-refraction",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/diamond-refraction",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/diamond-refraction/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/zqrreo",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/diamond-refraction/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/diamond-refraction myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2022-09-13",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-diamond-refraction",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-environment-blur-and-transitions",
    "name": "Environment Blur And Transitions",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Environment Blur And Transitions is an official pmndrs example curated as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; environment; blur",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/environment-blur-and-transitions",
    "official_source_url": "https://pmndrs.github.io/examples/demos/environment-blur-and-transitions",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/environment-blur-and-transitions",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/environment-blur-and-transitions/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/pj7zjq",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/environment-blur-and-transitions/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/environment-blur-and-transitions myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2022-10-28",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-environment-blur-and-transitions",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-frosted-glass",
    "name": "Frosted Glass",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Shader mip-map blur to mimic frosted glass. Curated by Lumora as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; frosted-glas; shaders",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber; valtio",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/frosted-glass",
    "official_source_url": "https://pmndrs.github.io/examples/demos/frosted-glass",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/frosted-glass",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/frosted-glass/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/imn42",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/frosted-glass/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/frosted-glass myproject",
    "official_featured": true,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "valtio"
    ],
    "declared_assets": [],
    "published_at": "2021-03-22",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-frosted-glass",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-glass-flower",
    "name": "Glass Flower",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Glass Flower is an official pmndrs example curated as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/glass-flower",
    "official_source_url": "https://pmndrs.github.io/examples/demos/glass-flower",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/glass-flower",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/glass-flower/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/dq6wwe",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/glass-flower/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/glass-flower myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing"
    ],
    "declared_assets": [],
    "published_at": "2023-04-13",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-glass-flower",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-inter-epoxy-resin",
    "name": "Inter Epoxy Resin",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Inter Epoxy Resin is an official pmndrs example curated as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; refraction; shaders; glass; epoxy",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/inter-epoxy-resin",
    "official_source_url": "https://pmndrs.github.io/examples/demos/inter-epoxy-resin",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/inter-epoxy-resin",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/inter-epoxy-resin/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/lxvqek",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/inter-epoxy-resin/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/inter-epoxy-resin myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing",
      "leva"
    ],
    "declared_assets": [],
    "published_at": "2022-10-25",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-inter-epoxy-resin",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-iridescent-decals",
    "name": "Iridescent Decals",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Iridescent Decals is an official pmndrs example curated as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; decal",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/iridescent-decals",
    "official_source_url": "https://pmndrs.github.io/examples/demos/iridescent-decals",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/iridescent-decals",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/iridescent-decals/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/qvb1vk",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/iridescent-decals/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/iridescent-decals myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2022-12-30",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-iridescent-decals",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-spotlight-shadows",
    "name": "Spotlight Shadows",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Casting a patterned gobo shadow from a spot light, with a custom shader that repeats the leaf texture and fakes wind. Curated by Lumora as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; spotlight; shadow; gobo; shader; texture",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "Only assets explicitly declared in pmndrs metadata carry their recorded provenance. Independently confirm or replace every other visible demo asset.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Faraz Shaikh",
    "authors": [
      "Faraz Shaikh"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/spotlight-shadows",
    "official_source_url": "https://pmndrs.github.io/examples/demos/spotlight-shadows",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/spotlight-shadows",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/spotlight-shadows/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/yyk6gv",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/spotlight-shadows/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/spotlight-shadows myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [
      {
        "name": "Grassy Cobblestone",
        "files": [
          "src/textures/grassy_cobblestone_diff_2k.jpg",
          "src/textures/grassy_cobblestone_nor_gl_2k.jpg",
          "src/textures/grassy_cobblestone_rough_2k.jpg",
          "src/textures/grassy_cobblestone_ao_2k.jpg"
        ],
        "creator": "Charlotte Baglioni, Dario Barresi",
        "source": "https://polyhaven.com/a/grassy_cobblestone",
        "license": "CC0 1.0",
        "licenseUrl": "https://creativecommons.org/publicdomain/zero/1.0/",
        "modified": true
      }
    ],
    "published_at": null,
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-spotlight-shadows",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-wireframes",
    "name": "Wireframes",
    "category": "3D material / lighting treatment",
    "source_category": "material-lighting",
    "art_direction": "pmndrs Examples",
    "summary": "Shader-based antialiased wireframes via barycentric coordinates, on a skinned glTF model, a primitive and a custom shader material. Curated by Lumora as a 3d material / lighting treatment pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; wireframe; barycentric; shader; gltf; configurator",
    "best_for": "premium product renders; architectural scenes; glass and jewelry; cinematic staging; brand atmosphere",
    "dependencies": "@react-three/drei; @react-three/fiber; leva",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 87,
    "novelty_score": 86,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "Only assets explicitly declared in pmndrs metadata carry their recorded provenance. Independently confirm or replace every other visible demo asset.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Faraz Shaikh",
    "authors": [
      "Faraz Shaikh"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/wireframes",
    "official_source_url": "https://pmndrs.github.io/examples/demos/wireframes",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/wireframes",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/wireframes/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/2572o5",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/wireframes/thumbnail.webp",
    "preview_accent": "#FFD76A",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/wireframes myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "leva"
    ],
    "declared_assets": [
      {
        "name": "Car",
        "files": [
          "src/car.glb"
        ],
        "creator": "cuadot",
        "source": "https://sketchfab.com/3d-models/car-acccd15d4e454399a39dbe40f4f6df71",
        "license": "CC BY 4.0",
        "licenseUrl": "http://creativecommons.org/licenses/by/4.0/",
        "modified": true
      }
    ],
    "published_at": "2023-04-04",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-wireframes",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "material lighting",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-bezier-curves-and-nodes",
    "name": "Bezier Curves And Nodes",
    "category": "Interactive 3D effect",
    "source_category": "interactive-3d-effect",
    "art_direction": "pmndrs Examples",
    "summary": "Creating node diagrams with drei's Line and bezier curves. Curated by Lumora as a interactive 3d effect pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; line2; graph; nodes; bezier",
    "best_for": "interactive diagrams; tactile reveals; cursor moments; celebration states; expressive portfolio details",
    "dependencies": "@react-three/drei; @react-three/fiber; @use-gesture/react",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 88,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/bezier-curves-and-nodes",
    "official_source_url": "https://pmndrs.github.io/examples/demos/bezier-curves-and-nodes",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/bezier-curves-and-nodes",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/bezier-curves-and-nodes/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/3k4g6",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/bezier-curves-and-nodes/thumbnail.webp",
    "preview_accent": "#5EF0C3",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/bezier-curves-and-nodes myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@use-gesture/react"
    ],
    "declared_assets": [],
    "published_at": "2021-02-26",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-bezier-curves-and-nodes",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive 3d effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-cell-fracture",
    "name": "Cell Fracture",
    "category": "Interactive 3D effect",
    "source_category": "interactive-3d-effect",
    "art_direction": "pmndrs Examples",
    "summary": "Exploding GLTFs using Blenders cell-fracture and GLTFJSX. Curated by Lumora as a interactive 3d effect pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; animation; clell-fracture; gltf",
    "best_for": "interactive diagrams; tactile reveals; cursor moments; celebration states; expressive portfolio details",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 88,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/cell-fracture",
    "official_source_url": "https://pmndrs.github.io/examples/demos/cell-fracture",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/cell-fracture",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/cell-fracture/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/3rjsl",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/cell-fracture/thumbnail.webp",
    "preview_accent": "#5EF0C3",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/cell-fracture myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-01-24",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-cell-fracture",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive 3d effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-confetti",
    "name": "Confetti",
    "category": "Interactive 3D effect",
    "source_category": "interactive-3d-effect",
    "art_direction": "pmndrs Examples",
    "summary": "Meshline particles. Curated by Lumora as a interactive 3d effect pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; particles; confetti",
    "best_for": "interactive diagrams; tactile reveals; cursor moments; celebration states; expressive portfolio details",
    "dependencies": "@react-three/fiber; @react-three/postprocessing; leva; maath; meshline",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 88,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/confetti",
    "official_source_url": "https://pmndrs.github.io/examples/demos/confetti",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/confetti",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/confetti/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/vl221",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/confetti/thumbnail.webp",
    "preview_accent": "#5EF0C3",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/confetti myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/fiber",
      "@react-three/postprocessing",
      "leva",
      "maath",
      "meshline"
    ],
    "declared_assets": [],
    "published_at": "2019-10-19",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-confetti",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive 3d effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-lusion-connectors",
    "name": "Lusion Connectors",
    "category": "Interactive 3D effect",
    "source_category": "interactive-3d-effect",
    "art_direction": "pmndrs Examples",
    "summary": "Lusion Connectors is an official pmndrs example curated as a interactive 3d effect pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs",
    "best_for": "interactive diagrams; tactile reveals; cursor moments; celebration states; expressive portfolio details",
    "dependencies": "@react-three/drei; @react-three/fiber; @react-three/postprocessing; @react-three/rapier",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 88,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/lusion-connectors",
    "official_source_url": "https://pmndrs.github.io/examples/demos/lusion-connectors",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/lusion-connectors",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/lusion-connectors/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/xy8c8z",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/lusion-connectors/thumbnail.webp",
    "preview_accent": "#5EF0C3",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/lusion-connectors myproject",
    "official_featured": true,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber",
      "@react-three/postprocessing",
      "@react-three/rapier"
    ],
    "declared_assets": [],
    "published_at": "2023-09-12",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-lusion-connectors",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive 3d effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-raycast-cycling",
    "name": "Raycast Cycling",
    "category": "Interactive 3D effect",
    "source_category": "interactive-3d-effect",
    "art_direction": "pmndrs Examples",
    "summary": "Bringing multiple objects underneath the cursor up front through raycast cycling Curated by Lumora as a interactive 3d effect pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; raycast; cycling",
    "best_for": "interactive diagrams; tactile reveals; cursor moments; celebration states; expressive portfolio details",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 88,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/raycast-cycling",
    "official_source_url": "https://pmndrs.github.io/examples/demos/raycast-cycling",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/raycast-cycling",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/raycast-cycling/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/ls503",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/raycast-cycling/thumbnail.webp",
    "preview_accent": "#5EF0C3",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/raycast-cycling myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-09-22",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-raycast-cycling",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive 3d effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-trails",
    "name": "Trails",
    "category": "Interactive 3D effect",
    "source_category": "interactive-3d-effect",
    "art_direction": "pmndrs Examples",
    "summary": "A cursor chasing the mouse through a cloud of physics-driven logos, leaving a meshline ribbon behind it. Curated by Lumora as a interactive 3d effect pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; trail; meshline; physics; gradient",
    "best_for": "interactive diagrams; tactile reveals; cursor moments; celebration states; expressive portfolio details",
    "dependencies": "@react-three/cannon; @react-three/drei; @react-three/fiber; lamina",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "strong",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "high",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "supporting",
    "quality_score": 86,
    "novelty_score": 88,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Faraz Shaikh",
    "authors": [
      "Faraz Shaikh"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/trails",
    "official_source_url": "https://pmndrs.github.io/examples/demos/trails",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/trails",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/trails/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/pmndrs-vercel-forked-slvex6",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/trails/thumbnail.webp",
    "preview_accent": "#5EF0C3",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/trails myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/cannon",
      "@react-three/drei",
      "@react-three/fiber",
      "lamina"
    ],
    "declared_assets": [],
    "published_at": "2022-03-18",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-trails",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "interactive 3d effect",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-progressive-loading-states-with-suspense",
    "name": "Progressive Loading States With Suspense",
    "category": "R3F media / loading foundation",
    "source_category": "r3f-foundation",
    "art_direction": "pmndrs Examples",
    "summary": "Demonstrates how to load a model progressively with fallbacks via React.Suspense. Curated by Lumora as a r3f media / loading foundation pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; gltf; suspense; loading",
    "best_for": "production-ready 3D delivery; progressive loading; media surfaces; resilient WebGL sections",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "medium",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "subtle",
    "quality_score": 84,
    "novelty_score": 76,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/progressive-loading-states-with-suspense",
    "official_source_url": "https://pmndrs.github.io/examples/demos/progressive-loading-states-with-suspense",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/progressive-loading-states-with-suspense",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/progressive-loading-states-with-suspense/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/7duy8",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/progressive-loading-states-with-suspense/thumbnail.webp",
    "preview_accent": "#8EA4C8",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/progressive-loading-states-with-suspense myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2021-02-08",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-progressive-loading-states-with-suspense",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "r3f foundation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "pmndrs-video-textures",
    "name": "Video Textures",
    "category": "R3F media / loading foundation",
    "source_category": "r3f-foundation",
    "art_direction": "pmndrs Examples",
    "summary": "How to load, apply and play video textures, and how to calculate fullscreen, or \"cover\" aspect ratio. Curated by Lumora as a r3f media / loading foundation pattern for agency projects.",
    "technique": "Open the official live demo and pinned GitHub directory, isolate the useful R3F/WebGL technique, then rebuild it around the project's content, brand tokens, approved assets, and performance budget.",
    "style_tags": "3D; WebGL; React Three Fiber; pmndrs; video; texture; aspect-ratio",
    "best_for": "production-ready 3D delivery; progressive loading; media surfaces; resilient WebGL sections",
    "dependencies": "@react-three/drei; @react-three/fiber",
    "framework_fit": "React 18; React Three Fiber; Drei and related pmndrs libraries where recorded",
    "motion_level": "medium",
    "motion_choreography": "Keep one intentional 3D focal behavior, retime it to the brand, pause rendering offscreen, and avoid combining it with another competing WebGL signature.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep semantic HTML, headings, links, controls, and focus behavior outside the canvas. Provide keyboard/touch alternatives for pointer interactions and a designed static reduced-motion state.",
    "content_contract": "Replace demo copy, models, textures, audio, logos, and imagery with real project content and approved assets. The canvas must not be the only carrier of essential information.",
    "responsive_strategy": "Lazy-load near the viewport, cap device pixel ratio, reduce particles, postprocessing, shadows, and interaction density on mobile, and switch to a composed poster when the scene no longer earns its cost.",
    "interaction_inputs": "Inspect the official example for scroll, pointer, drag, camera, audio, keyboard, and ambient inputs before adaptation.",
    "fallback_strategy": "Render an optimized brand-matched poster or simplified DOM composition before WebGL initializes and whenever reduced motion, low capability, loading failure, or context loss requires it.",
    "test_focus": "source and dependency audit; WebGL loading failure; context cleanup; reduced motion; keyboard and touch parity; narrow viewport; offscreen pause; DPR cap; asset weight",
    "implementation_steps": "open live demo; inspect pinned source; isolate the technique; replace demo assets and content; adapt tokens and controls; add poster fallback; profile; test",
    "brand_tokens": "Map lighting, material color, fog, environment, camera, type, spacing, controls, and motion timing to project semantic tokens.",
    "avoid_when": "the scene competes with conversion or reading, duplicates another signature canvas, has no meaningful static fallback, or cannot meet the project's mobile performance budget",
    "impact": "subtle",
    "quality_score": 84,
    "novelty_score": 76,
    "compatibility": "React · React Three Fiber · Three.js/WebGL",
    "source_kind": "external-linked-component",
    "license": "MIT (example code)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "Use and adapt the example code under MIT while preserving the required copyright and licence notice.",
    "license_notice_required": true,
    "asset_rights_boundary": "The pmndrs metadata declares no reusable assets for this demo. Treat visible models, textures, audio, fonts, logos, and imagery as replaceable reference content.",
    "codex_rights_instruction": "Use or adapt the example code under the recorded MIT licence and preserve its notice. Do not assume the demo's visible models, textures, audio, fonts, logos, or branded objects share that licence; replace them unless the selected asset has its own confirmed record.",
    "brand_or_trademark_note": null,
    "source": "pmndrs Examples",
    "creator": "Paul Henschel",
    "authors": [
      "Paul Henschel"
    ],
    "source_url": "https://pmndrs.github.io/examples/demos/video-textures",
    "official_source_url": "https://pmndrs.github.io/examples/demos/video-textures",
    "official_source_label": "Open live pmndrs example",
    "code_url": "https://github.com/pmndrs/examples/tree/8053d0fb37ae59f06451ceb2749486d268710248/demos/video-textures",
    "metadata_url": "https://raw.githubusercontent.com/pmndrs/examples/8053d0fb37ae59f06451ceb2749486d268710248/demos/video-textures/pmndrs.json",
    "original_source_url": "https://codesandbox.io/s/39hg8",
    "repository_url": "https://github.com/pmndrs/examples",
    "preview_video_url": null,
    "preview_poster_url": "https://pmndrs.github.io/examples/video-textures/thumbnail.webp",
    "preview_accent": "#8EA4C8",
    "preview_layout": "full",
    "preview_fallback": "official-static-thumbnail",
    "remote_media": true,
    "media_mirrored": false,
    "source_code_bundled": false,
    "implementation_mode": "adapt-from-pinned-official-example",
    "install_command": "npx degit pmndrs/examples/demos/video-textures myproject",
    "official_featured": false,
    "official_variants": [
      "React",
      "React Three Fiber",
      "Three.js/WebGL"
    ],
    "libraries": [
      "@react-three/drei",
      "@react-three/fiber"
    ],
    "declared_assets": [],
    "published_at": "2020-08-20",
    "inventory_date": "2026-07-31",
    "source_revision": "8053d0fb37ae59f06451ceb2749486d268710248",
    "phase": "pmndrs-examples-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#pmndrs-video-textures",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "r3f foundation",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: pmndrs Examples. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-fade-motion",
    "name": "Fade motion",
    "category": "WebGL text treatment",
    "source_category": "text-effects",
    "art_direction": "Arlan's Vault",
    "summary": "A word trails into light through a GPU accumulation effect that replaces hundreds of overlapping text draws with one fixed-cost WebGL pass.",
    "technique": "Render a text mask, march backward through its trail in a fragment shader, then layer depth, chromatic dispersion, turbulence, grain, and pointer-responsive bending.",
    "style_tags": "WebGL; GLSL; typography; trail; chromatic; pointer; Arlan's Vault; design engineering",
    "best_for": "campaign headlines; launch heroes; cinematic title cards; premium portfolio transitions",
    "dependencies": "React; WebGL1 / GLSL; inspect the current official code tabs",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "high",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 95,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/fade-motion",
    "official_source_url": "https://www.arlan.me/vault/fade-motion",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/fade-motion",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/fade-motion.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/fade-motion.webp",
    "preview_accent": "#D99658",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-28",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-fade-motion",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text effects",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Fade motion",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-liquid-ui",
    "name": "Liquid UI",
    "category": "Liquid layout / card system",
    "source_category": "interactive-elements",
    "art_direction": "Arlan's Vault",
    "summary": "A small geometry engine joins adjacent cards with reflowing concave corners, ranging from crisp modular joints to soft fused blobs.",
    "technique": "Derive the shared boundary between neighboring cards and redraw the joining path as cards move or the corner-softness value changes.",
    "style_tags": "cards; layout; liquid; geometry; drag; responsive; Arlan's Vault; design engineering",
    "best_for": "modular product stories; connected dashboards; spatial feature groups; playful editorial sections",
    "dependencies": "React / TypeScript; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 94,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/liquid-ui",
    "official_source_url": "https://www.arlan.me/vault/liquid-ui",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/liquid-ui",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/liquid-ui.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/liquid-ui.webp",
    "preview_accent": "#A8B9D4",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-27",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-liquid-ui",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Liquid UI",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-kinetic-typography",
    "name": "Kinetic typography",
    "category": "Kinetic text effect",
    "source_category": "text-effects",
    "art_direction": "Arlan's Vault",
    "summary": "A letter is divided into tiles whose independent wave offsets make the glyph ripple like a flexible surface.",
    "technique": "Cut a display glyph into a grid, preserve the original glyph mask in every tile, and offset the tiles along a spatially phased wave.",
    "style_tags": "typography; tiles; wave; display text; kinetic; Arlan's Vault; design engineering",
    "best_for": "single-letter brand moments; editorial chapter markers; art and culture campaigns; motion studies",
    "dependencies": "React / TypeScript; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 92,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/kinetic-typography",
    "official_source_url": "https://www.arlan.me/vault/kinetic-typography",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/kinetic-typography",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/kinetic-typography.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/kinetic-typography.webp",
    "preview_accent": "#242424",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-25",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-kinetic-typography",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text effects",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Kinetic typography",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-squircle",
    "name": "Apple's corners",
    "category": "Button geometry",
    "source_category": "buttons-controls",
    "art_direction": "Arlan's Vault",
    "summary": "A live button demonstrates continuous squircle corners that ease into straight edges more smoothly than an ordinary CSS border radius.",
    "technique": "Use a superellipse-style corner path or mask for continuous curvature, then keep the semantic button and its focus ring independent of the decorative shape.",
    "style_tags": "squircle; button; superellipse; corners; micro UI; Arlan's Vault; design engineering",
    "best_for": "premium controls; mobile-inspired UI; compact calls to action; polished app chrome",
    "dependencies": "CSS / SVG geometry; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "subtle",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "low",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "subtle",
    "quality_score": 91,
    "novelty_score": 82,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/squircle",
    "official_source_url": "https://www.arlan.me/vault/squircle",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/squircle",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/squircle.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/squircle.webp",
    "preview_accent": "#BABABA",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": false,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-21",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-squircle",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "buttons controls",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Apple's corners",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-ransom-note",
    "name": "Ransom note",
    "category": "Expressive text system",
    "source_category": "text-effects",
    "art_direction": "Arlan's Vault",
    "summary": "Typed text is rebuilt from torn-paper letter variants with controlled random tilt, scale, bounce, and re-rolling.",
    "technique": "Map characters to a small letter-image inventory, seed the variation so layout remains stable, and expose restrained controls for rotation, scale, spacing, and reveal timing.",
    "style_tags": "typography; collage; cutout letters; editorial; randomized; Arlan's Vault; design engineering",
    "best_for": "music and fashion campaigns; editorial headlines; youth culture; intentionally handmade brand moments",
    "dependencies": "React; image assets; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 91,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The letter-image set is part of the official demo surface. Keep its source record with the implementation or replace it with project-owned cutouts for a new art direction.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/ransom-note",
    "official_source_url": "https://www.arlan.me/vault/ransom-note",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/ransom-note",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/ransom-note.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/ransom-note.webp",
    "preview_accent": "#D44B53",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": false,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-16",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-ransom-note",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text effects",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Ransom note",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-chroma-glow",
    "name": "Chromatic glow",
    "category": "Luminous text treatment",
    "source_category": "text-effects",
    "art_direction": "Arlan's Vault",
    "summary": "Layered text blurs create a true bloom while warm and cool copies separate toward the cursor to form a responsive chromatic edge.",
    "technique": "Stack blurred text copies at several radii, add opposing warm and cool offsets, and drive only the small separation vector from pointer position.",
    "style_tags": "typography; glow; chromatic aberration; blur; pointer; Arlan's Vault; design engineering",
    "best_for": "nightlife campaigns; entertainment; creative technology; compact hero accents",
    "dependencies": "CSS filters / React; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 88,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/chroma-glow",
    "official_source_url": "https://www.arlan.me/vault/chroma-glow",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/chroma-glow",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/chroma-glow.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/chroma-glow.webp",
    "preview_accent": "#8C63FF",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-14",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-chroma-glow",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text effects",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Chromatic glow",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-emboss",
    "name": "Realistic emboss",
    "category": "Material text treatment",
    "source_category": "text-effects",
    "art_direction": "Arlan's Vault",
    "summary": "Text or SVG artwork is pressed into a configurable surface using layered light, shadow, depth, and material presets.",
    "technique": "Combine inset highlights, directional shadows, surface color, and a masked text or SVG layer so the mark reads as physically raised or debossed.",
    "style_tags": "emboss; deboss; material; typography; SVG; surface; Arlan's Vault; design engineering",
    "best_for": "luxury packaging; tactile brand marks; editorial title plates; restrained product storytelling",
    "dependencies": "CSS / SVG; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "subtle",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "low",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 89,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/emboss",
    "official_source_url": "https://www.arlan.me/vault/emboss",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/emboss",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/emboss.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/emboss.webp",
    "preview_accent": "#D7C7F7",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-13",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-emboss",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text effects",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Realistic emboss",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-typer",
    "name": "The typer",
    "category": "Headline reveal",
    "source_category": "text-effects",
    "art_direction": "Arlan's Vault",
    "summary": "A wave types through a headline while neighboring characters temporarily merge into solid, highlighted, and outlined pill states before resolving to text.",
    "technique": "Keep the full headline available to assistive technology, animate only an aria-hidden duplicate, and merge adjacent characters that share the same transient state.",
    "style_tags": "typography; reveal; headline; pills; wave; state; Arlan's Vault; design engineering",
    "best_for": "product launches; creative portfolios; section introductions; technical headlines",
    "dependencies": "React / CSS; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "low",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 93,
    "novelty_score": 94,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/typer",
    "official_source_url": "https://www.arlan.me/vault/typer",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/typer",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/typer.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/typer.webp",
    "preview_accent": "#FF7A18",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-07",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-typer",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "text effects",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "The typer",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-color-depth",
    "name": "The art of color depth",
    "category": "Dimensional button system",
    "source_category": "buttons-controls",
    "art_direction": "Arlan's Vault",
    "summary": "Ten button treatments build convincing glass, metal, gloss, and cushion depth from gradients, inset shadows, highlights, and controlled color layering.",
    "technique": "Layer a gradient body, inset bevels, a top-edge reflection, hover light, and restrained exterior shadow while keeping the button's semantic and focus behavior intact.",
    "style_tags": "button; depth; glass; metal; gloss; CSS; Arlan's Vault; design engineering",
    "best_for": "primary calls to action; premium product UI; tactile controls; material-led design systems",
    "dependencies": "CSS; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "subtle",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "low",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "subtle",
    "quality_score": 94,
    "novelty_score": 87,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/color-depth",
    "official_source_url": "https://www.arlan.me/vault/color-depth",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/color-depth",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/color-depth.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/color-depth.webp",
    "preview_accent": "#A948FF",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-07-02",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-color-depth",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "buttons controls",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "The art of color depth",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-ghosty-reveal",
    "name": "Ghosty reveal",
    "category": "Image reveal / gallery",
    "source_category": "image-gallery",
    "art_direction": "Arlan's Vault",
    "summary": "Images bleed into view through a soft cloudy mask instead of a hard clip or ordinary opacity fade.",
    "technique": "Move an oversized feathered CSS mask across each image, varying direction, softness, duration, and easing while preserving the image beneath.",
    "style_tags": "image; gallery; mask; reveal; scroll; soft; Arlan's Vault; design engineering",
    "best_for": "photography stories; editorial galleries; fashion and hospitality; cinematic case studies",
    "dependencies": "CSS masks / React; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "low",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 92,
    "novelty_score": 86,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The demo photographs are selection content, not a default client asset pack. Use project-owned or separately sourced imagery in production.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/ghosty-reveal",
    "official_source_url": "https://www.arlan.me/vault/ghosty-reveal",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/ghosty-reveal",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/ghosty-reveal.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/ghosty-reveal.webp",
    "preview_accent": "#8A93A4",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": false,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-06-29",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-ghosty-reveal",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "image gallery",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Ghosty reveal",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-sandbox",
    "name": "Symbols effect",
    "category": "GPU media background",
    "source_category": "backgrounds",
    "art_direction": "Arlan's Vault",
    "summary": "An image or live video is rebuilt on the GPU from configurable symbols, four luminance bands, and an independent color system.",
    "technique": "Sample media luminance in a fragment shader, quantize it into bands, stamp a chosen glyph atlas per cell, and expose band thresholds and colors as brand controls.",
    "style_tags": "WebGL; GPU; video; image; symbols; ASCII; shader; Arlan's Vault; design engineering",
    "best_for": "experimental heroes; media launches; event identities; technical campaign sections",
    "dependencies": "WebGL / GLSL; React; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "high",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input. Keep all essential hero or section content in a separate semantic foreground layer outside the canvas or visual effect.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls. Reduce canvas resolution, glyph count, blur, or shader work on mobile and provide a quiet area behind foreground text.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "signature",
    "quality_score": 93,
    "novelty_score": 94,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": null,
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/sandbox",
    "official_source_url": "https://www.arlan.me/vault/sandbox",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/sandbox",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/symbols-effect.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/symbols-effect.webp",
    "preview_accent": "#E65850",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-06-28",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-sandbox",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "observed_title": "Symbols effect",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "arlan-vault-dia-gradient",
    "name": "Dia Browser's gradient",
    "category": "Ambient background",
    "source_category": "backgrounds",
    "art_direction": "Arlan's Vault",
    "summary": "A row of blurred SVG color bars rises from the bottom edge into a soft, curved atmospheric glow.",
    "technique": "Paint several vertical bars with one multicolor SVG gradient, vary their heights across a curve, blur the group, and reveal it with a bottom-origin scale transform.",
    "style_tags": "background; SVG; gradient; glow; ambient; entrance; Arlan's Vault; design engineering",
    "best_for": "product heroes; dark interfaces; launch pages; quiet section transitions",
    "dependencies": "SVG / CSS; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input. Keep all essential hero or section content in a separate semantic foreground layer outside the canvas or visual effect.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls. Reduce canvas resolution, glyph count, blur, or shader work on mobile and provide a quiet area behind foreground text.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 90,
    "novelty_score": 84,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": "The page credits Dia Browser as the reference. Reuse the construction technique with an original palette, silhouette, timing, and composition.",
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/dia-gradient",
    "official_source_url": "https://www.arlan.me/vault/dia-gradient",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/dia-gradient",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/dia-gradient.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/dia-gradient.webp",
    "preview_accent": "#B552FF",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": false,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-06-26",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-dia-gradient",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "observed_title": "Dia Browser's gradient",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  },
  {
    "id": "arlan-vault-vector-editor",
    "name": "Figma vector editor",
    "category": "Interactive product interface",
    "source_category": "interactive-elements",
    "art_direction": "Arlan's Vault",
    "summary": "A selection frame and compact SVG path editor provide draggable Bézier handles, dimensions, points, and serialized path output.",
    "technique": "Parse supported SVG path commands into anchors and control handles, render accessible editor controls around the SVG, and serialize changes back to path data.",
    "style_tags": "SVG; Bezier; editor; handles; product UI; drag; Arlan's Vault; design engineering",
    "best_for": "creative tools; interactive product demos; diagram editors; technical portfolio sections",
    "dependencies": "React / TypeScript / SVG; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "medium",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 92,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": "The interaction references Figma's editor language. Adapt the controls and visual system to the client rather than reproducing Figma branding or an exact product composition.",
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/vector-editor",
    "official_source_url": "https://www.arlan.me/vault/vector-editor",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/vector-editor",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/vector-editor.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/vector-editor.webp",
    "preview_accent": "#0D99FF",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": false,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-06-25",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-vector-editor",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "hybrid-section-or-enhancement",
    "enhancement_family": "interactive elements",
    "can_be_structural": true,
    "pairing_guidance": "This can enhance an existing section, define a structural section, or combine with any other catalog records.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Figma vector editor",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-amo",
    "name": "Amo hover button",
    "category": "Video-enhanced button",
    "source_category": "buttons-controls",
    "art_direction": "Arlan's Vault",
    "summary": "A semantic pill button reveals a short transparent or keyed video on hover or tap, with optional reverse playback, magnetism, and a static reduced-motion state.",
    "technique": "Keep the semantic button as the base, layer a tiny forward/reverse video source set over it, align the reverse clip to the current forward time, and disable decorative playback for reduced motion.",
    "style_tags": "button; video; hover; touch; transparent media; magnetic; Arlan's Vault; design engineering",
    "best_for": "playful calls to action; campaign microsites; entertainment; small memorable conversion moments",
    "dependencies": "React; optimized WebM / HEVC or MP4 clips; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "medium",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "supporting",
    "quality_score": 91,
    "novelty_score": 93,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The demo video clips and Amo reference are examples. Generate or supply original client-owned clips and posters before production use.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": "The page credits Amo as the reference. Preserve the interaction principle while replacing the label, clips, palette, sound, and motion character.",
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/amo",
    "official_source_url": "https://www.arlan.me/vault/amo",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/amo",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/amo-hover-button.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/amo-hover-button.webp",
    "preview_accent": "#EEEAE4",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": false,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-06-23",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-amo",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "enhancement",
    "enhancement_family": "buttons controls",
    "can_be_structural": false,
    "pairing_guidance": "This can be used alone, combined with any other records, or repeated wherever Codex chooses.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this record in any quantity.",
    "observed_title": "Amo hover button",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order."
  },
  {
    "id": "arlan-vault-midjourney",
    "name": "Midjourney Medical's ASCII",
    "category": "Canvas typography background",
    "source_category": "backgrounds",
    "art_direction": "Arlan's Vault",
    "summary": "Thousands of cached text glyphs orbit on one canvas, gradually resolve into a wordmark, and receive a restrained CRT post-treatment.",
    "technique": "Cache glyph renders, reuse them across a polar particle field, modulate angular velocity by radius, morph selected glyphs toward a target word, and finish with subtle scanline, vignette, curve, and color-split passes.",
    "style_tags": "canvas; ASCII; typography; particles; CRT; wordmark; Arlan's Vault; design engineering",
    "best_for": "technology heroes; AI and data storytelling; editorial mastheads; cinematic launch sections",
    "dependencies": "Canvas 2D; React; inspect the current official implementation",
    "framework_fit": "Official examples are published as copyable web/React implementations; port the isolated technique to the target project's framework and conventions.",
    "motion_level": "strong",
    "motion_choreography": "Preserve the core behavior, then retime its entrance, response, and rest state to the brand. Stop decorative motion once attention has landed and pause continuous work offscreen.",
    "performance_cost": "high",
    "accessibility_contract": "Keep the real text, image, link, button, or control as semantic HTML. Treat duplicated visual layers and canvases as decorative, preserve visible focus and keyboard order, and provide touch behavior for hover or pointer input. Keep all essential hero or section content in a separate semantic foreground layer outside the canvas or visual effect.",
    "content_contract": "Replace demo copy, logos, imagery, and media with real project content. Do not use the experiment as a substitute for information hierarchy or product behavior.",
    "responsive_strategy": "Retune scale, density, crop, and pointer dependence for narrow screens. Keep the underlying content usable on coarse pointers and avoid clipping display text or controls. Reduce canvas resolution, glyph count, blur, or shader work on mobile and provide a quiet area behind foreground text.",
    "interaction_inputs": "Inspect the official page for pointer, hover, drag, scroll, touch, keyboard, ambient, and editable inputs before adapting the selected experiment.",
    "fallback_strategy": "Show a composed static state when reduced motion is requested, the enhancement is offscreen, initialization fails, or the device cannot sustain the effect.",
    "test_focus": "official source review; semantic content; keyboard; touch/coarse pointer; reduced motion; narrow viewport; offscreen pause; cleanup; loading and fallback state",
    "implementation_steps": "open the official detail page; inspect its live demo and code tabs; isolate the technique; replace demo content and assets; map brand tokens; add accessible and reduced-motion fallbacks; profile and test",
    "brand_tokens": "Map type, surface, color, blur, depth, scale, geometry, timing, media, and interaction strength to the project's semantic tokens.",
    "avoid_when": "the treatment competes with conversion or reading, repeats another enhancement, relies on hover for essential meaning, or cannot meet the page's motion and performance budget",
    "impact": "signature",
    "quality_score": 94,
    "novelty_score": 95,
    "compatibility": "Modern browsers; official web/React implementation",
    "source_kind": "external-linked-component",
    "license": "MIT (official Vault page)",
    "licence_class": "bundle-ok-code-linked-assets",
    "usage_rights": "The official Vault collection and each published detail page state ‘MIT → free to copy’. Adapt the selected implementation while retaining creator, source, and licence provenance.",
    "license_notice_required": true,
    "license_url": "https://opensource.org/licenses/MIT",
    "asset_rights_boundary": "The page marks its published experiment MIT/free to copy. Replace recognizable third-party brand material, upstream reference compositions, and any client-specific media with approved project assets.",
    "codex_rights_instruction": "Use the implementation under the MIT statement on the official Vault page and keep its creator/source record. Treat credited brands, upstream references, photographs, generated clips, fonts, and other demo media as a separate asset boundary and replace them when adapting the technique.",
    "brand_or_trademark_note": "The demo reconstructs Midjourney Medical's branded composition. Use the canvas and glyph-morph technique with original project copy, palette, layout, and identity assets.",
    "source": "Arlan's Vault",
    "creator": "Arlan Marat",
    "source_url": "https://www.arlan.me/vault/midjourney",
    "official_source_url": "https://www.arlan.me/vault/midjourney",
    "official_source_label": "Open live Vault experiment and code",
    "code_url": "https://www.arlan.me/vault/midjourney",
    "repository_url": null,
    "preview_video_url": null,
    "preview_poster_url": "assets/component-previews/arlan-vault/midjourney-ascii.webp",
    "public_preview_poster_url": "https://lumoraofficial.de/mcp/assets/component-previews/arlan-vault/midjourney-ascii.webp",
    "preview_accent": "#C0A354",
    "preview_layout": "full",
    "preview_fallback": "local-live-card-capture",
    "preview_capture_source_url": "https://www.arlan.me/vault",
    "preview_capture_date": "2026-07-31",
    "preview_rights": "Selection screenshot captured from the official Vault card on a collection explicitly marked MIT/free to copy; do not ship it as production website media.",
    "remote_media": false,
    "media_mirrored": true,
    "source_code_bundled": false,
    "implementation_mode": "copy-selected-code-from-official-page",
    "install_command": null,
    "registry_url": null,
    "official_featured": true,
    "official_variants": [
      "Live web demo",
      "Copyable code",
      "Copy prompt"
    ],
    "published_at": "2026-06-19",
    "inventory_date": "2026-07-31",
    "source_revision": "c7a232158298d12540600c3af3a7bcef072f3aaeec9ff1fcd990a6a05fb81b29",
    "phase": "arlan-vault-linked-2026-07",
    "public_record_url": "https://lumoraofficial.de/mcp/components.json#arlan-vault-midjourney",
    "selection_pass": "enhancement",
    "selection_pass_label": "Effects / motion",
    "component_role": "section-canvas",
    "enhancement_family": "background / section canvas",
    "can_be_structural": false,
    "pairing_guidance": "This can act as a section-scale visual canvas behind semantic content and can be combined or repeated with any other catalog records.",
    "codex_selection_instruction": "Available source: Arlan's Vault. Codex has complete freedom to use, combine, adapt, repeat, or replace this section-capable visual in any quantity.",
    "observed_title": "Midjourney Medical's ASCII",
    "selection_freedom": "UNRESTRICTED: Codex alone decides how many records to use, how to combine them, where to place them, and whether to repeat them. Lumora defines no minimum, maximum, default count, stacking rule, preferred starting point, source quota, or selection order.",
    "section_canvas": true,
    "requires_structural_pairing": true,
    "text_overlay_capability": "supported-with-contrast-audit",
    "foreground_content_guidance": "Use this as the visual canvas behind a semantic hero or full-width section. Add real heading, body, CTA, and navigation content in a separate foreground layer; this background does not replace the content structure.",
    "overlay_readability_guidance": "Test text contrast against the brightest and busiest animation frames. Add a brand-matched scrim, gradient, quiet zone, blur, or solid content panel when needed, and provide a static prefers-reduced-motion fallback."
  }
]