Big Number Score Card
Decorative full-bleed sparkline card graphic. Restyle via --lk-* CSS variables.
Install
npx shadcn@latest add https://visual-blocks.akiho.dev/r/kpi-big-number.jsonnpx skills add akifo/landerkitBlocks 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 240" role="img" aria-label="Sparkline graphic — decorative" class="lk-block" data-lk="kpi-big-number" data-lk-contract="1">
<title>Sparkline graphic</title>
<desc>Decorative sparkline graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="kpi-big-number"] {
--_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-big-number"] text,
[data-lk="kpi-big-number"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="kpi-big-number"] */
[data-lk="kpi-big-number"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="kpi-big-number"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="kpi-big-number"] .gdot { fill: var(--_g); }
[data-lk="kpi-big-number"] .lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="kpi-big-number"] .spark { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="kpi-big-number"] .sparkfill { fill: var(--_faint); stroke: none; }
[data-lk="kpi-big-number"] .halo { fill: var(--_faint); }
[data-lk="kpi-big-number"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
/* Hover motion (opt-out): 2 stages — (1) the line + area reveal together left→right
via one shared clip (linked, so the fill never outruns the trace); (2) the end
dot pops once the reveal reaches it. Off for reduced-motion visitors; set the
motion token to 0 to force off. */
[data-lk="kpi-big-number"] .end { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="kpi-big-number"]:hover .reveal { animation: lk-kpi-big-number-reveal calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="kpi-big-number"]:hover .end { animation: lk-kpi-big-number-pop calc(var(--lk-motion, 1) * .4s) ease-out calc(var(--lk-motion, 1) * .55s) both; }
}
@keyframes lk-kpi-big-number-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lk-kpi-big-number-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="239" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- réseau cross: sole marker in the empty upper-left dead zone, on the grid token (silenced when lk-grid is transparent) -->
<path class="grid" d="M44 40h6M47 37v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<!-- baseline grid dots: one beneath each sparkline sample, floor row on the grid token (silenced when lk-grid is transparent) -->
<circle class="gdot" cx="20" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="44.6" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="69.2" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="93.8" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="118.5" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="143.1" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="167.7" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="192.3" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="216.9" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="241.5" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="266.2" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="290.8" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="315.4" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="340" cy="214" r="1" fill="#1C262C"/>
<!-- full-bleed sparkline: faint flat underfill to the first-sample floor, luminance-lift understroke, 1.5px accent trace, punched terminal dot -->
<g class="reveal">
<polygon class="sparkfill" points="20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32 340,206" fill="#4BE0C31F"/>
<polyline class="lift" points="20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
<polyline class="spark" points="20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
<g class="end">
<circle class="halo" cx="340" cy="32" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="340" cy="32" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
</g>
</svg>
/* GENERATED FROM blocks/ (catalog.json + *.svg + _contract/) — DO NOT EDIT. Run `pnpm generate`. */
import type { HTMLAttributes } from 'react';
const svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 360 240\" role=\"img\" aria-label=\"Sparkline graphic — decorative\" class=\"lk-block\" data-lk=\"kpi-big-number\" data-lk-contract=\"1\">\n <title>Sparkline graphic</title>\n <desc>Decorative sparkline graphic. Illustrative shape only; any implied data is fictional.</desc>\n <style>\n /* lk-contract v1 — synced from blocks/_contract/header.css */\n [data-lk=\"kpi-big-number\"] {\n --_accent: var(--lk-accent, #4BE0C3);\n --_bg: var(--lk-bg, #0A0F14);\n --_radius: var(--lk-radius, 12px);\n --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);\n --_i2: color-mix(in oklab, var(--_i) 62%, transparent);\n --_i3: color-mix(in oklab, var(--_i) 42%, transparent);\n --_hair: color-mix(in oklab, var(--_i) 8%, transparent);\n --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));\n --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));\n --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);\n --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);\n --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));\n color: var(--_accent);\n font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);\n }\n /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */\n [data-lk=\"kpi-big-number\"] text,\n [data-lk=\"kpi-big-number\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"kpi-big-number\"] */\n [data-lk=\"kpi-big-number\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"kpi-big-number\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"kpi-big-number\"] .gdot { fill: var(--_g); }\n [data-lk=\"kpi-big-number\"] .lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"kpi-big-number\"] .spark { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"kpi-big-number\"] .sparkfill { fill: var(--_faint); stroke: none; }\n [data-lk=\"kpi-big-number\"] .halo { fill: var(--_faint); }\n [data-lk=\"kpi-big-number\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n\n /* Hover motion (opt-out): 2 stages — (1) the line + area reveal together left→right\n via one shared clip (linked, so the fill never outruns the trace); (2) the end\n dot pops once the reveal reaches it. Off for reduced-motion visitors; set the\n motion token to 0 to force off. */\n [data-lk=\"kpi-big-number\"] .end { transform-box: fill-box; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"kpi-big-number\"]:hover .reveal { animation: lk-kpi-big-number-reveal calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"kpi-big-number\"]:hover .end { animation: lk-kpi-big-number-pop calc(var(--lk-motion, 1) * .4s) ease-out calc(var(--lk-motion, 1) * .55s) both; }\n }\n @keyframes lk-kpi-big-number-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }\n @keyframes lk-kpi-big-number-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"359\" height=\"239\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- réseau cross: sole marker in the empty upper-left dead zone, on the grid token (silenced when lk-grid is transparent) -->\n <path class=\"grid\" d=\"M44 40h6M47 37v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n\n <!-- baseline grid dots: one beneath each sparkline sample, floor row on the grid token (silenced when lk-grid is transparent) -->\n <circle class=\"gdot\" cx=\"20\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"44.6\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"69.2\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"93.8\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"118.5\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"143.1\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"167.7\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"192.3\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"216.9\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"241.5\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"266.2\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"290.8\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"315.4\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"340\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n\n <!-- full-bleed sparkline: faint flat underfill to the first-sample floor, luminance-lift understroke, 1.5px accent trace, punched terminal dot -->\n <g class=\"reveal\">\n <polygon class=\"sparkfill\" points=\"20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32 340,206\" fill=\"#4BE0C31F\"/>\n <polyline class=\"lift\" points=\"20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32\" fill=\"none\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\"/>\n <polyline class=\"spark\" points=\"20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <g class=\"end\">\n <circle class=\"halo\" cx=\"340\" cy=\"32\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"340\" cy=\"32\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n </g>\n</svg>\n";
export function BigNumberScoreCard(props: HTMLAttributes<HTMLDivElement>) {
return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
}
export default BigNumberScoreCard;
<!-- GENERATED FROM blocks/ (catalog.json + *.svg + _contract/) — DO NOT EDIT. Run `pnpm generate`. -->
<template>
<div v-html="svg" />
</template>
<script setup lang="ts">
const svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 360 240\" role=\"img\" aria-label=\"Sparkline graphic — decorative\" class=\"lk-block\" data-lk=\"kpi-big-number\" data-lk-contract=\"1\">\n <title>Sparkline graphic</title>\n <desc>Decorative sparkline graphic. Illustrative shape only; any implied data is fictional.</desc>\n <style>\n /* lk-contract v1 — synced from blocks/_contract/header.css */\n [data-lk=\"kpi-big-number\"] {\n --_accent: var(--lk-accent, #4BE0C3);\n --_bg: var(--lk-bg, #0A0F14);\n --_radius: var(--lk-radius, 12px);\n --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);\n --_i2: color-mix(in oklab, var(--_i) 62%, transparent);\n --_i3: color-mix(in oklab, var(--_i) 42%, transparent);\n --_hair: color-mix(in oklab, var(--_i) 8%, transparent);\n --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));\n --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));\n --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);\n --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);\n --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));\n color: var(--_accent);\n font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);\n }\n /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */\n [data-lk=\"kpi-big-number\"] text,\n [data-lk=\"kpi-big-number\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"kpi-big-number\"] */\n [data-lk=\"kpi-big-number\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"kpi-big-number\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"kpi-big-number\"] .gdot { fill: var(--_g); }\n [data-lk=\"kpi-big-number\"] .lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"kpi-big-number\"] .spark { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"kpi-big-number\"] .sparkfill { fill: var(--_faint); stroke: none; }\n [data-lk=\"kpi-big-number\"] .halo { fill: var(--_faint); }\n [data-lk=\"kpi-big-number\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n\n /* Hover motion (opt-out): 2 stages — (1) the line + area reveal together left→right\n via one shared clip (linked, so the fill never outruns the trace); (2) the end\n dot pops once the reveal reaches it. Off for reduced-motion visitors; set the\n motion token to 0 to force off. */\n [data-lk=\"kpi-big-number\"] .end { transform-box: fill-box; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"kpi-big-number\"]:hover .reveal { animation: lk-kpi-big-number-reveal calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"kpi-big-number\"]:hover .end { animation: lk-kpi-big-number-pop calc(var(--lk-motion, 1) * .4s) ease-out calc(var(--lk-motion, 1) * .55s) both; }\n }\n @keyframes lk-kpi-big-number-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }\n @keyframes lk-kpi-big-number-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"359\" height=\"239\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- réseau cross: sole marker in the empty upper-left dead zone, on the grid token (silenced when lk-grid is transparent) -->\n <path class=\"grid\" d=\"M44 40h6M47 37v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n\n <!-- baseline grid dots: one beneath each sparkline sample, floor row on the grid token (silenced when lk-grid is transparent) -->\n <circle class=\"gdot\" cx=\"20\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"44.6\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"69.2\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"93.8\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"118.5\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"143.1\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"167.7\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"192.3\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"216.9\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"241.5\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"266.2\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"290.8\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"315.4\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n <circle class=\"gdot\" cx=\"340\" cy=\"214\" r=\"1\" fill=\"#1C262C\"/>\n\n <!-- full-bleed sparkline: faint flat underfill to the first-sample floor, luminance-lift understroke, 1.5px accent trace, punched terminal dot -->\n <g class=\"reveal\">\n <polygon class=\"sparkfill\" points=\"20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32 340,206\" fill=\"#4BE0C31F\"/>\n <polyline class=\"lift\" points=\"20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32\" fill=\"none\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\"/>\n <polyline class=\"spark\" points=\"20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <g class=\"end\">\n <circle class=\"halo\" cx=\"340\" cy=\"32\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"340\" cy=\"32\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n </g>\n</svg>\n";
</script>
<div style="--lk-accent: #4BE0C3; --lk-bg: #0A0F14;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 240" role="img" aria-label="Sparkline graphic — decorative" class="lk-block" data-lk="kpi-big-number" data-lk-contract="1">
<title>Sparkline graphic</title>
<desc>Decorative sparkline graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="kpi-big-number"] {
--_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-big-number"] text,
[data-lk="kpi-big-number"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="kpi-big-number"] */
[data-lk="kpi-big-number"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="kpi-big-number"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="kpi-big-number"] .gdot { fill: var(--_g); }
[data-lk="kpi-big-number"] .lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="kpi-big-number"] .spark { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="kpi-big-number"] .sparkfill { fill: var(--_faint); stroke: none; }
[data-lk="kpi-big-number"] .halo { fill: var(--_faint); }
[data-lk="kpi-big-number"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
/* Hover motion (opt-out): 2 stages — (1) the line + area reveal together left→right
via one shared clip (linked, so the fill never outruns the trace); (2) the end
dot pops once the reveal reaches it. Off for reduced-motion visitors; set the
motion token to 0 to force off. */
[data-lk="kpi-big-number"] .end { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="kpi-big-number"]:hover .reveal { animation: lk-kpi-big-number-reveal calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="kpi-big-number"]:hover .end { animation: lk-kpi-big-number-pop calc(var(--lk-motion, 1) * .4s) ease-out calc(var(--lk-motion, 1) * .55s) both; }
}
@keyframes lk-kpi-big-number-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lk-kpi-big-number-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="239" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- réseau cross: sole marker in the empty upper-left dead zone, on the grid token (silenced when lk-grid is transparent) -->
<path class="grid" d="M44 40h6M47 37v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<!-- baseline grid dots: one beneath each sparkline sample, floor row on the grid token (silenced when lk-grid is transparent) -->
<circle class="gdot" cx="20" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="44.6" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="69.2" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="93.8" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="118.5" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="143.1" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="167.7" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="192.3" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="216.9" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="241.5" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="266.2" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="290.8" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="315.4" cy="214" r="1" fill="#1C262C"/>
<circle class="gdot" cx="340" cy="214" r="1" fill="#1C262C"/>
<!-- full-bleed sparkline: faint flat underfill to the first-sample floor, luminance-lift understroke, 1.5px accent trace, punched terminal dot -->
<g class="reveal">
<polygon class="sparkfill" points="20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32 340,206" fill="#4BE0C31F"/>
<polyline class="lift" points="20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
<polyline class="spark" points="20,206 44.6,186 69.2,192.7 93.8,158.9 118.5,139 143.1,145.6 167.7,119 192.3,125.7 216.9,99 241.5,85.7 266.2,92.4 290.8,65.3 315.4,52 340,32" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
<g class="end">
<circle class="halo" cx="340" cy="32" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="340" cy="32" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
</g>
</svg>
</div>