LanderKitv1

Visibility Trend Area Card

Decorative area / trend-line chart graphic. Restyle via --lk-* CSS variables.

PLATE 04trendcardfeature:trendhero:ai-analyticsstats:growthsection:how-it-works
Trend area graphic Decorative trend/area graphic. Illustrative shape only; any implied data is fictional.

Install

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


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

    /* Hover motion (opt-out): 2 stages. (1) the area and line reveal together left to right
       via a shared clip-path sweep on their group (fill stays locked under the line). (2) the
       end-point dot pops once the sweep arrives. Off for reduced-motion visitors; set the
       motion token to 0 to force off. */
    [data-lk="trend-area-card"] .end { transform-box: fill-box; }
    @media (prefers-reduced-motion: no-preference) {
      [data-lk="trend-area-card"]:hover .series { animation: lk-trend-area-card-sweep calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
      [data-lk="trend-area-card"]:hover .end    { animation: lk-trend-area-card-pop calc(var(--lk-motion, 1) * .4s) ease-out both; animation-delay: calc(var(--lk-motion, 1) * .55s); }
    }
    @keyframes lk-trend-area-card-sweep { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }
    @keyframes lk-trend-area-card-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
  </style>
  <rect class="card" x=".5" y=".5" width="479" height="299" rx="12" fill="#0E141B" stroke="#1A2128"/>

  <!-- graticule bed: dotted gridlines, solid baseline, réseau crosses — all on the grid token -->
  <line class="grid" x1="20" y1="90" x2="460" y2="90" stroke="#1C262C" stroke-width="1" stroke-dasharray="1.5 3"/>
  <line class="grid" x1="20" y1="140" x2="460" y2="140" stroke="#1C262C" stroke-width="1" stroke-dasharray="1.5 3"/>
  <line class="grid" x1="20" y1="190" x2="460" y2="190" stroke="#1C262C" stroke-width="1" stroke-dasharray="1.5 3"/>
  <line class="hair" x1="20" y1="240" x2="460" y2="240" stroke="#1A2128" stroke-width="1"/>
  <path class="grid" d="M410 110h6M413 107v6M410 210h6M413 207v6" fill="none" stroke="#1C262C" stroke-width="1"/>

  <!-- series layer: area fill + lift understroke + line trace, revealed together left to right -->
  <g class="series">
    <!-- series area fill: single flat band down to the baseline (no gradients) -->
    <path class="area" d="M20 173.8 C26.7 172.9 57 167.7 70.4 167.1 C83.8 166.6 107.4 171.2 120.8 169.8 C134.2 168.4 157.8 159.5 171.2 156.6 C184.6 153.6 208.2 148.8 221.6 147.9 C235 147 258.6 151.3 272 149.8 C285.4 148.4 315.7 138.6 322.4 136.9 C346 131 372 124 400 119 C420 115.5 440 112 460 109 L460 240 L20 240 Z" fill="#4BE0C33D"/>

    <!-- primary series: luminance-lift understroke, then the smooth 1.5px accent trace -->
    <path class="lift" d="M20 173.8 C26.7 172.9 57 167.7 70.4 167.1 C83.8 166.6 107.4 171.2 120.8 169.8 C134.2 168.4 157.8 159.5 171.2 156.6 C184.6 153.6 208.2 148.8 221.6 147.9 C235 147 258.6 151.3 272 149.8 C285.4 148.4 315.7 138.6 322.4 136.9 C346 131 372 124 400 119 C420 115.5 440 112 460 109" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
    <path class="line" d="M20 173.8 C26.7 172.9 57 167.7 70.4 167.1 C83.8 166.6 107.4 171.2 120.8 169.8 C134.2 168.4 157.8 159.5 171.2 156.6 C184.6 153.6 208.2 148.8 221.6 147.9 C235 147 258.6 151.3 272 149.8 C285.4 148.4 315.7 138.6 322.4 136.9 C346 131 372 124 400 119 C420 115.5 440 112 460 109" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
  </g>

  <!-- latest-point marker: halo + punched dot -->
  <g class="end">
    <circle class="halo" cx="460" cy="109" r="5" fill="#4BE0C31F"/>
    <circle class="dot" cx="460" cy="109" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
  </g>
</svg>