LanderKitv1

Citations Comparison Lines

Decorative two-line comparison chart graphic. Restyle via --lk-* CSS variables.

PLATE 05trendcardfeature:competitive-analysisstats:comparisonsection:why-ussocial-proof:metrics
Line chart graphic Decorative line chart graphic. Illustrative shape only; any implied data is fictional.

Install

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


    /* Layer 3: block-specific — every selector MUST start with [data-lk="trend-compare-lines"] */
    [data-lk="trend-compare-lines"] .card  { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
    [data-lk="trend-compare-lines"] .grid  { fill: none; stroke: var(--_g); stroke-width: 1; stroke-dasharray: 1 3; }
    [data-lk="trend-compare-lines"] .cross { stroke: var(--_g); stroke-width: 1; }
    [data-lk="trend-compare-lines"] .cmp   { fill: none; stroke: var(--_i3); stroke-width: 1; stroke-dasharray: 4 3; stroke-linejoin: round; }
    [data-lk="trend-compare-lines"] .lift  { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; }
    [data-lk="trend-compare-lines"] .you   { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; }
    [data-lk="trend-compare-lines"] .halo  { fill: var(--_faint); }
    [data-lk="trend-compare-lines"] .dot   { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
    [data-lk="trend-compare-lines"] .cdot  { fill: var(--_surf); stroke: var(--_i3); stroke-width: 1; }

    /* Hover motion (opt-out): 2 stages — (1) comparison + primary traces reveal together
       left→right via one shared clip-path so the two series stay in sync; (2) the terminal
       dots pop in sequence, accent first, then comparison. Off for reduced-motion visitors;
       set the motion token to 0 to force off. */
    [data-lk="trend-compare-lines"] .term { transform-box: fill-box; }
    @media (prefers-reduced-motion: no-preference) {
      [data-lk="trend-compare-lines"]:hover .lines { animation: lk-trend-compare-lines-reveal calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
      [data-lk="trend-compare-lines"]:hover .term  { animation: lk-trend-compare-lines-pop calc(var(--lk-motion, 1) * .4s) ease-out both; }
      [data-lk="trend-compare-lines"]:hover .t1 { animation-delay: calc(var(--lk-motion, 1) * .55s); }
      [data-lk="trend-compare-lines"]:hover .t2 { animation-delay: calc(var(--lk-motion, 1) * .7s); }
    }
    @keyframes lk-trend-compare-lines-reveal { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }
    @keyframes lk-trend-compare-lines-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
  </style>
  <rect class="card" x=".5" y=".5" width="519" height="299" rx="12" fill="#0E141B" stroke="#1A2128"/>

  <!-- graticule bed: dotted horizontal gridlines spanning the full chart width, plus réseau crosses in the lower-right dead zone, all on the grid token (silenced when lk-grid is transparent) -->
  <line class="grid" x1="20" y1="90" x2="500" y2="90" stroke="#1C262C" stroke-width="1" stroke-dasharray="1 3"/>
  <line class="grid" x1="20" y1="150" x2="500" y2="150" stroke="#1C262C" stroke-width="1" stroke-dasharray="1 3"/>
  <line class="grid" x1="20" y1="210" x2="500" y2="210" stroke="#1C262C" stroke-width="1" stroke-dasharray="1 3"/>
  <path class="cross" d="M320 205h6M323 202v6M440 222h6M443 219v6" fill="none" stroke="#1C262C" stroke-width="1"/>

  <!-- series traces: comparison (dashed) + primary (lift + trace), spanning the full chart width, revealed together via one shared clip-path so the two series stay in sync -->
  <g class="lines">
    <polyline class="cmp" points="20,81.7 100,67.5 180,88.1 260,75.5 340,99.3 420,102.3 500,110.3" fill="none" stroke="#E6EDEE6B" stroke-width="1" stroke-dasharray="4 3"/>
    <polyline class="lift" points="20,250 100,221.3 180,232.5 260,178.6 340,135.7 420,86.5 500,50" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
    <polyline class="you" points="20,250 100,221.3 180,232.5 260,178.6 340,135.7 420,86.5 500,50" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
  </g>

  <!-- terminal markers: accent halo + punched dot closing the primary series (pops first), plain punched dot closing the comparison series (pops second) -->
  <g class="term t1">
    <circle class="halo" cx="500" cy="50" r="5" fill="#4BE0C31F"/>
    <circle class="dot" cx="500" cy="50" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
  </g>
  <circle class="cdot term t2" cx="500" cy="110.3" r="2.4" fill="#0E141B" stroke="#E6EDEE6B" stroke-width="1"/>
</svg>