LanderKitv1

Citations by Engine Card

Decorative horizontal-bar chart graphic. Restyle via --lk-* CSS variables.

PLATE 10kpicardstats:breakdownfeature:engine-coveragesection:integrationsbento:kpi
Bar chart graphic Decorative bar-chart graphic. Illustrative shape only; any implied data is fictional.

Install

npx shadcn@latest add https://visual-blocks.akiho.dev/r/kpi-citation-bars.json
npx skills add akifo/landerkit

Blocks work with zero setup thanks to baked defaults. Set --lk-accent(and optionally --lk-bg / --lk-radius /--lk-font / --lk-grid) on :rootor any wrapper to restyle.

Source

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 260" role="img" aria-label="Bar chart graphic — decorative" class="lk-block" data-lk="kpi-citation-bars" data-lk-contract="1">
  <title>Bar chart graphic</title>
  <desc>Decorative bar-chart graphic. Illustrative shape only; any implied data is fictional.</desc>
  <style>
    /* lk-contract v1 — synced from blocks/_contract/header.css */
    [data-lk="kpi-citation-bars"] {
      --_accent: var(--lk-accent, #4BE0C3);
      --_bg: var(--lk-bg, #0A0F14);
      --_radius: var(--lk-radius, 12px);
      --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);
      --_i2: color-mix(in oklab, var(--_i) 62%, transparent);
      --_i3: color-mix(in oklab, var(--_i) 42%, transparent);
      --_hair: color-mix(in oklab, var(--_i) 8%, transparent);
      --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));
      --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));
      --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);
      --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);
      --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));
      color: var(--_accent);
      font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);
    }
    /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */
    [data-lk="kpi-citation-bars"] text,
    [data-lk="kpi-citation-bars"] tspan { fill: var(--_i); }


    /* Layer 3: block-specific — every selector MUST start with [data-lk="kpi-citation-bars"] */
    [data-lk="kpi-citation-bars"] .card  { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
    [data-lk="kpi-citation-bars"] .grid  { fill: none; stroke: var(--_g); stroke-width: 1; }
    [data-lk="kpi-citation-bars"] .track { fill: var(--_g); rx: calc(var(--_radius) * .25); }
    [data-lk="kpi-citation-bars"] .lift  { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .25); }
    [data-lk="kpi-citation-bars"] .bar1  { fill: var(--_accent); rx: calc(var(--_radius) * .25); }
    [data-lk="kpi-citation-bars"] .bar2  { fill: color-mix(in oklab, var(--_accent) 75%, transparent); rx: calc(var(--_radius) * .25); }
    [data-lk="kpi-citation-bars"] .bar3  { fill: color-mix(in oklab, var(--_accent) 55%, transparent); rx: calc(var(--_radius) * .25); }
    [data-lk="kpi-citation-bars"] .bar4  { fill: color-mix(in oklab, var(--_accent) 35%, transparent); rx: calc(var(--_radius) * .25); }
    [data-lk="kpi-citation-bars"] .halo  { fill: var(--_faint); }
    [data-lk="kpi-citation-bars"] .dot   { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }

    /* Hover motion (opt-out): 2 stages — (1) each bar grows scaleX(0)->1 from the
       left, top→down stagger (row1 first, row4 last); (2) once all bars have
       grown, the top bar's tip dot + halo fade in and pop. Off for
       reduced-motion visitors; set the motion token to 0 to force off. */
    [data-lk="kpi-citation-bars"] .grow { transform-box: fill-box; transform-origin: left; }
    [data-lk="kpi-citation-bars"] .tip  { transform-box: fill-box; }
    @media (prefers-reduced-motion: no-preference) {
      [data-lk="kpi-citation-bars"]:hover .grow { animation: lk-kpi-citation-bars-grow calc(var(--lk-motion, 1) * .5s) cubic-bezier(.22,.61,.36,1) both; }
      [data-lk="kpi-citation-bars"]:hover .row2 { animation-delay: calc(var(--lk-motion, 1) * .05s); }
      [data-lk="kpi-citation-bars"]:hover .row3 { animation-delay: calc(var(--lk-motion, 1) * .1s); }
      [data-lk="kpi-citation-bars"]:hover .row4 { animation-delay: calc(var(--lk-motion, 1) * .15s); }
      [data-lk="kpi-citation-bars"]:hover .tip  { animation: lk-kpi-citation-bars-pop calc(var(--lk-motion, 1) * .4s) ease-out both; animation-delay: calc(var(--lk-motion, 1) * .65s); }
    }
    @keyframes lk-kpi-citation-bars-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes lk-kpi-citation-bars-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
  </style>
  <rect class="card" x=".5" y=".5" width="359" height="259" rx="12" fill="#0E141B" stroke="#1A2128"/>

  <!-- réseau crosses: sparse calibration marks in dead zones, on the grid token (silenced when lk-grid is transparent) -->
  <path class="grid" d="M329 12h6M332 9v6" fill="none" stroke="#1C262C" stroke-width="1"/>
  <path class="grid" d="M23 245h6M26 242v6" fill="none" stroke="#1C262C" stroke-width="1"/>

  <!-- row 1 (leader): full-width track + luminance-lift bloom (grown together) + punched tip dot -->
  <rect class="track" x="20" y="40" width="320" height="9" rx="3" fill="#1C262C"/>
  <g class="grow row1">
    <rect class="lift" x="19" y="39" width="290" height="11" rx="3" fill="#2E8274" opacity=".25"/>
    <rect class="bar1" x="20" y="40" width="288" height="9" rx="3" fill="#4BE0C3"/>
  </g>
  <g class="tip">
    <circle class="halo" cx="308" cy="44.5" r="6" fill="#4BE0C31F"/>
    <circle class="dot" cx="308" cy="44.5" r="2.6" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
  </g>

  <!-- rows 2–4: stepped-opacity bars, decreasing length -->
  <rect class="track" x="20" y="97" width="320" height="9" rx="3" fill="#1C262C"/>
  <rect class="bar2 grow row2" x="20" y="97" width="190.9" height="9" rx="3" fill="#4BE0C3BF"/>

  <rect class="track" x="20" y="154" width="320" height="9" rx="3" fill="#1C262C"/>
  <rect class="bar3 grow row3" x="20" y="154" width="146.1" height="9" rx="3" fill="#4BE0C38C"/>

  <rect class="track" x="20" y="211" width="320" height="9" rx="3" fill="#1C262C"/>
  <rect class="bar4 grow row4" x="20" y="211" width="92.3" height="9" rx="3" fill="#4BE0C359"/>
</svg>