LanderKitv1

Sparkline Metrics Strip

Decorative three-tile sparkline strip graphic (light background). Restyle via --lk-* CSS variables.

PLATE 06trendpanelstats:kpi-stripsection:metrics-barlight-mode:firstsocial-proof:metrics
Sparkline strip graphic Decorative sparkline strip graphic. Illustrative shape only; any implied data is fictional.

Install

npx shadcn@latest add https://visual-blocks.akiho.dev/r/trend-sparkrow-strip.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 720 168" role="img" aria-label="Sparkline strip graphic — decorative" class="lk-block" data-lk="trend-sparkrow-strip" data-lk-contract="1">
  <title>Sparkline strip graphic</title>
  <desc>Decorative sparkline strip graphic. Illustrative shape only; any implied data is fictional.</desc>
  <style>
    /* lk-contract v1 — synced from blocks/_contract/header.css */
    [data-lk="trend-sparkrow-strip"] {
      --_accent: var(--lk-accent, #4BE0C3);
      --_bg: var(--lk-bg, #FFFFFF);
      --_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="trend-sparkrow-strip"] text,
    [data-lk="trend-sparkrow-strip"] tspan { fill: var(--_i); }


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

    /* Hover motion (opt-out): 2 stages — (1) each tile's trace (glow + line, linked so
       they never desync) reveals left→right, staggered tile 1→2→3; (2) each tile's end
       dot (halo + dot, linked) pops right as its own trace finishes. Off for
       reduced-motion visitors; set the motion token to 0 to force off. */
    [data-lk="trend-sparkrow-strip"] .end { transform-box: fill-box; }
    @media (prefers-reduced-motion: no-preference) {
      [data-lk="trend-sparkrow-strip"]:hover .trace { animation: lk-trend-sparkrow-strip-reveal calc(var(--lk-motion, 1) * .5s) cubic-bezier(.22,.61,.36,1) both; }
      [data-lk="trend-sparkrow-strip"]:hover .end   { animation: lk-trend-sparkrow-strip-pop calc(var(--lk-motion, 1) * .4s) ease-out both; }
      [data-lk="trend-sparkrow-strip"]:hover .t1 { animation-delay: calc(var(--lk-motion, 1) * .12s); }
      [data-lk="trend-sparkrow-strip"]:hover .t2 { animation-delay: calc(var(--lk-motion, 1) * .24s); }
      [data-lk="trend-sparkrow-strip"]:hover .t3 { animation-delay: calc(var(--lk-motion, 1) * .36s); }
      [data-lk="trend-sparkrow-strip"]:hover .e1 { animation-delay: calc(var(--lk-motion, 1) * .62s); }
      [data-lk="trend-sparkrow-strip"]:hover .e2 { animation-delay: calc(var(--lk-motion, 1) * .74s); }
      [data-lk="trend-sparkrow-strip"]:hover .e3 { animation-delay: calc(var(--lk-motion, 1) * .86s); }
    }
    @keyframes lk-trend-sparkrow-strip-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes lk-trend-sparkrow-strip-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
  </style>
  <rect class="card" x=".5" y=".5" width="719" height="167" rx="12" fill="#FBFEFD" stroke="#E4E7E6"/>

  <!-- graticule bed: réseau crosses in dead corners + column dividers + per-tile sparkline floors, all on the grid token (silenced when lk-grid is transparent) -->
  <path class="grid" d="M11 14h6M14 11v6M703 14h6M706 11v6M11 154h6M14 151v6M703 154h6M706 151v6" fill="none" stroke="#E1E4E4" stroke-width="1"/>
  <path class="grid" d="M24 128H216M264 128H456M504 128H696" fill="none" stroke="#E1E4E4" stroke-width="1"/>
  <line class="hair" x1="240" y1="20" x2="240" y2="148" stroke="#E4E7E6" stroke-width="1"/>
  <line class="hair" x1="480" y1="20" x2="480" y2="148" stroke="#E4E7E6" stroke-width="1"/>

  <!-- tile 1: rising trace, one visible dip, enlarged to fill the tile -->
  <g class="trace t1">
    <polyline class="lift" points="24,112 51.4,98 78.9,103 106.3,84.5 133.7,70.5 161.1,75 188.6,56.5 216,38" fill="none" stroke="#AAEFDE" stroke-width="3.5" opacity=".25"/>
    <polyline class="spark" points="24,112 51.4,98 78.9,103 106.3,84.5 133.7,70.5 161.1,75 188.6,56.5 216,38" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
    <g class="end e1">
      <circle class="halo" cx="216" cy="38" r="5" fill="#4BE0C31F"/>
      <circle class="dot" cx="216" cy="38" r="2.2" fill="#FBFEFD" stroke="#4BE0C3" stroke-width="1.5"/>
    </g>
  </g>

  <!-- tile 2: choppy mid-series trace, enlarged to fill the tile -->
  <g class="trace t2">
    <polyline class="lift" points="264,82.4 291.4,97.2 318.9,67.6 346.3,112 373.7,82.4 401.1,52.8 428.6,67.6 456,38" fill="none" stroke="#AAEFDE" stroke-width="3.5" opacity=".25"/>
    <polyline class="spark" points="264,82.4 291.4,97.2 318.9,67.6 346.3,112 373.7,82.4 401.1,52.8 428.6,67.6 456,38" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
    <g class="end e2">
      <circle class="halo" cx="456" cy="38" r="5" fill="#4BE0C31F"/>
      <circle class="dot" cx="456" cy="38" r="2.2" fill="#FBFEFD" stroke="#4BE0C3" stroke-width="1.5"/>
    </g>
  </g>

  <!-- tile 3: falling trace, enlarged to fill the tile -->
  <g class="trace t3">
    <polyline class="lift" points="504,38 531.4,54 558.9,48.7 586.3,75 613.7,85.7 641.1,101.3 668.6,106.7 696,112" fill="none" stroke="#AAEFDE" stroke-width="3.5" opacity=".25"/>
    <polyline class="spark" points="504,38 531.4,54 558.9,48.7 586.3,75 613.7,85.7 641.1,101.3 668.6,106.7 696,112" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
    <g class="end e3">
      <circle class="halo" cx="696" cy="112" r="5" fill="#4BE0C31F"/>
      <circle class="dot" cx="696" cy="112" r="2.2" fill="#FBFEFD" stroke="#4BE0C3" stroke-width="1.5"/>
    </g>
  </g>
</svg>