LanderKitv1

Brand Visibility Leaderboard

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

PLATE 02radarcardsocial-proof:rankingfeature:brand-monitoringsection:comparisonstats:leaderboard
Ranked bars graphic Decorative ranked-bar graphic. Illustrative shape only; any implied data is fictional.

Install

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


    /* Layer 3: block-specific — every selector MUST start with [data-lk="sov-leaderboard"] */
    [data-lk="sov-leaderboard"] .card  { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
    [data-lk="sov-leaderboard"] .grid  { fill: none; stroke: var(--_g); stroke-width: 1; }
    [data-lk="sov-leaderboard"] .track { fill: var(--_g); rx: calc(var(--_radius) * .25); }
    [data-lk="sov-leaderboard"] .tick  { fill: var(--_accent); }
    [data-lk="sov-leaderboard"] .lift  { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .25); }
    [data-lk="sov-leaderboard"] .bar1  { fill: var(--_accent); rx: calc(var(--_radius) * .25); }
    [data-lk="sov-leaderboard"] .bar2  { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .25); }
    [data-lk="sov-leaderboard"] .bar3  { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .25); }
    [data-lk="sov-leaderboard"] .bar4  { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .25); }
    [data-lk="sov-leaderboard"] .bar5  { fill: color-mix(in oklab, var(--_accent) 26%, transparent); rx: calc(var(--_radius) * .25); }
    [data-lk="sov-leaderboard"] .halo  { fill: var(--_faint); }
    [data-lk="sov-leaderboard"] .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, row5 last); (2) once all bars have grown, the
       leader's tip dot + halo fade in and pop. Off for reduced-motion visitors; set
       the motion token to 0 to force off. */
    [data-lk="sov-leaderboard"] .grow { transform-box: fill-box; transform-origin: left; }
    [data-lk="sov-leaderboard"] .tip  { transform-box: fill-box; }
    @media (prefers-reduced-motion: no-preference) {
      [data-lk="sov-leaderboard"]:hover .grow { animation: lk-sov-leaderboard-grow calc(var(--lk-motion, 1) * .5s) cubic-bezier(.22,.61,.36,1) both; }
      [data-lk="sov-leaderboard"]:hover .row2 { animation-delay: calc(var(--lk-motion, 1) * .05s); }
      [data-lk="sov-leaderboard"]:hover .row3 { animation-delay: calc(var(--lk-motion, 1) * .1s); }
      [data-lk="sov-leaderboard"]:hover .row4 { animation-delay: calc(var(--lk-motion, 1) * .15s); }
      [data-lk="sov-leaderboard"]:hover .row5 { animation-delay: calc(var(--lk-motion, 1) * .2s); }
      [data-lk="sov-leaderboard"]:hover .tip  { animation: lk-sov-leaderboard-pop calc(var(--lk-motion, 1) * .4s) ease-out both; animation-delay: calc(var(--lk-motion, 1) * .7s); }
    }
    @keyframes lk-sov-leaderboard-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes lk-sov-leaderboard-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="479" height="339" rx="12" fill="#0E141B" stroke="#1A2128"/>

  <!-- réseau crosses: card corner dead zones, on the grid token (silenced when lk-grid is transparent) -->
  <path class="grid" d="M448 22h6M451 19v6" fill="none" stroke="#1C262C" stroke-width="1"/>
  <path class="grid" d="M20 314h6M23 311v6" fill="none" stroke="#1C262C" stroke-width="1"/>

  <!-- leader left-edge tick, flush on the card edge -->
  <rect class="tick" x=".5" y="74" width="3" height="16" fill="#4BE0C3"/>

  <!-- row 1 (leader): full-accent bar + luminance-lift bloom (grown together) + punched tip dot -->
  <rect class="track" x="24" y="78" width="432" height="8" rx="3" fill="#1C262C"/>
  <g class="grow row1">
    <rect class="lift" x="23" y="77" width="371" height="10" rx="3" fill="#2E8274" opacity=".25"/>
    <rect class="bar1" x="24" y="78" width="369" height="8" rx="3" fill="#4BE0C3"/>
  </g>
  <g class="tip">
    <circle class="halo" cx="393" cy="82" r="6" fill="#4BE0C31F"/>
    <circle class="dot" cx="393" cy="82" r="2.6" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
  </g>

  <!-- rows 2–5: stepped-opacity bars, decreasing length -->
  <rect class="track" x="24" y="128" width="432" height="8" rx="3" fill="#1C262C"/>
  <rect class="bar2 grow row2" x="24" y="128" width="298" height="8" rx="3" fill="#4BE0C3C8"/>

  <rect class="track" x="24" y="178" width="432" height="8" rx="3" fill="#1C262C"/>
  <rect class="bar3 grow row3" x="24" y="178" width="204" height="8" rx="3" fill="#4BE0C394"/>

  <rect class="track" x="24" y="228" width="432" height="8" rx="3" fill="#1C262C"/>
  <rect class="bar4 grow row4" x="24" y="228" width="116" height="8" rx="3" fill="#4BE0C366"/>

  <rect class="track" x="24" y="278" width="432" height="8" rx="3" fill="#1C262C"/>
  <rect class="bar5 grow row5" x="24" y="278" width="65" height="8" rx="3" fill="#4BE0C342"/>
</svg>