LanderKitv1

Accuracy Gauge Card

Decorative arc / gauge graphic with tick marks. Restyle via --lk-* CSS variables.

PLATE 08kpicardstats:scorefeature:accuracysection:trustbento:kpi
Gauge graphic Decorative gauge graphic. Illustrative shape only; any implied data is fictional.

Install

npx shadcn@latest add https://visual-blocks.akiho.dev/r/kpi-gauge-score.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="Gauge graphic — decorative" class="lk-block" data-lk="kpi-gauge-score" data-lk-contract="1">
  <title>Gauge graphic</title>
  <desc>Decorative gauge graphic. Illustrative shape only; any implied data is fictional.</desc>
  <style>
    /* lk-contract v1 — synced from blocks/_contract/header.css */
    [data-lk="kpi-gauge-score"] {
      --_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-gauge-score"] text,
    [data-lk="kpi-gauge-score"] tspan { fill: var(--_i); }


    /* Layer 3: block-specific — every selector MUST start with [data-lk="kpi-gauge-score"] */
    [data-lk="kpi-gauge-score"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
    [data-lk="kpi-gauge-score"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
    [data-lk="kpi-gauge-score"] .lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linecap: round; }
    [data-lk="kpi-gauge-score"] .arc  { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linecap: round; }
    [data-lk="kpi-gauge-score"] .halo { fill: var(--_faint); }
    [data-lk="kpi-gauge-score"] .dot  { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }

    /* Hover motion (opt-out): 2 stages — (1) the progress arc (lift understroke +
       accent trace) draws together along the arc via stroke-dasharray, pathLength=1
       keeping both paths in lockstep; (2) once the trace arrives, the end-of-arc dot
       pops. Track arc and ticks stay put throughout. Off for reduced-motion visitors;
       set the motion token to 0 to force off. */
    [data-lk="kpi-gauge-score"] .end { transform-box: fill-box; }
    @media (prefers-reduced-motion: no-preference) {
      [data-lk="kpi-gauge-score"]:hover .sweep { animation: lk-kpi-gauge-score-draw calc(var(--lk-motion, 1) * .6s) cubic-bezier(.22,.61,.36,1) both; }
      [data-lk="kpi-gauge-score"]:hover .end   { animation: lk-kpi-gauge-score-pop calc(var(--lk-motion, 1) * .4s) ease-out both; animation-delay: calc(var(--lk-motion, 1) * .6s); }
    }
    @keyframes lk-kpi-gauge-score-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
    @keyframes lk-kpi-gauge-score-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
  </style>
  <rect class="card" x=".5" y=".5" width="359" height="259" rx="12" fill="#0E141B" stroke="#1A2128"/>

  <!-- reseau crosses in the card's dead corners, on the grid token (silenced when lk-grid is transparent) -->
  <path class="grid" d="M13 16h6M16 13v6M341 16h6M344 13v6M13 244h6M16 241v6M341 244h6M344 241v6" fill="none" stroke="#1C262C" stroke-width="1"/>

  <!-- gauge track: 220-degree arc on the grid token (silenced when lk-grid is transparent) -->
  <path class="grid" d="M57.8 224.5A130 130 0 1 1 302.2 224.5" fill="none" stroke="#1C262C" stroke-width="1"/>

  <!-- calibration ticks ringing the track, on the grid token -->
  <path class="grid" d="M55.4 225.4L50.7 227.1M49.4 203L44.5 203.9M47.4 180L42.4 180M49.4 157L44.5 156.1M55.4 134.6L50.7 132.9M65.2 113.7L60.8 111.2M78.4 94.8L74.6 91.6M94.8 78.4L91.6 74.6M113.7 65.2L111.2 60.8M134.6 55.4L132.9 50.7M157 49.4L156.1 44.5M180 47.4L180 42.4M203 49.4L203.9 44.5M225.4 55.4L227.1 50.7M246.3 65.2L248.8 60.8M265.2 78.4L268.4 74.6M281.6 94.8L285.4 91.6M294.8 113.7L299.2 111.2M304.6 134.6L309.3 132.9M310.6 157L315.5 156.1M312.6 180L317.6 180M310.6 203L315.5 203.9M304.6 225.4L309.3 227.1" fill="none" stroke="#1C262C" stroke-width="1"/>

  <!-- progress arc: luminance-lift understroke, then the accent trace with a round cap; pathLength=1 lets both draw in lockstep on hover -->
  <path class="lift sweep" pathLength="1" d="M57.8 224.5A130 130 0 0 1 289.3 109.6" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25" stroke-linecap="round"/>
  <path class="arc sweep" pathLength="1" d="M57.8 224.5A130 130 0 0 1 289.3 109.6" fill="none" stroke="#4BE0C3" stroke-width="1.5" stroke-linecap="round"/>

  <!-- progress marker: punched calibration dot under a faint halo -->
  <g class="end">
    <circle class="halo" cx="289.3" cy="109.6" r="5" fill="#4BE0C31F"/>
    <circle class="dot" cx="289.3" cy="109.6" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
  </g>
</svg>