diff --git a/website/src/routes/liveline.tsx b/website/src/routes/liveline.tsx index 579bf88..5f00790 100644 --- a/website/src/routes/liveline.tsx +++ b/website/src/routes/liveline.tsx @@ -287,6 +287,39 @@ function Divider() { ); } +function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) { + return ( + <> + + {title} + {children} + + ); +} + +function List({ children }: { children: React.ReactNode }) { + return ( + + ); +} + +function Li({ children }: { children: React.ReactNode }) { + return
  • {children}
    • ; +} + function CodeBlock({ children, lang = "jsx" }: { children: string; lang?: string }) { const codeRef = useRef(null); const lines = children.split("\n"); @@ -618,10 +651,7 @@ export default function LivelinePage() { Everything else is opt-in. - - - {/* Getting started */} - Getting started +
    npm install liveline @@ -662,10 +692,9 @@ function Chart({ data, value }) { Resting heart rate. Custom formatter, exaggerated Y-axis. - +
    - {/* Momentum */} - Momentum +
    The momentum prop adds directional arrows @@ -682,10 +711,9 @@ function Chart({ data, value }) { Arrows fade out fully before the new direction fades in. - +
    - {/* Value overlay */} - Value overlay +
    showValue renders the current value as a @@ -698,10 +726,9 @@ function Chart({ data, value }) { 60fps value overlay with momentum colouring. - +
    - {/* Time windows */} - Time windows +
    Pass a windows array to render time horizon @@ -728,10 +755,9 @@ function Chart({ data, value }) { CPU usage with occasional spikes. Rounded time windows. - +
    - {/* Reference line */} - Reference line +
    referenceLine draws a horizontal line at a @@ -745,10 +771,9 @@ function Chart({ data, value }) { $67,500?" - +
    - {/* Orderbook */} - Orderbook +
    Pass an orderbook prop with{" "} @@ -771,10 +796,9 @@ function Chart({ data, value }) { the price line. - +
    - {/* Theming */} - Theming +
    Pass any CSS colour string to color and @@ -786,52 +810,39 @@ function Chart({ data, value }) { Dark theme. Same component, different colour. - +
    - {/* More features */} - More features +
    Everything is off by default or has sensible defaults. A few more things you can turn on: -
      -
    • + +
    • exaggerate tightens the Y-axis range so small movements fill the full chart height. Useful for values that move in tiny increments, like the heart rate demo above. -
      • -
    • +
      • +
    • scrub shows a crosshair with time and value tooltips on hover. On by default. -
      • -
    • +
      • +
    • degen enables burst particles and chart shake on momentum swings. For when subtlety is not the goal. -
      • -
    • +
      • +
    • badgeVariant="minimal" renders a quieter white pill instead of the accent-colored default. Or{" "} {"badge={false}"} to remove it entirely. -
      • -
    + + - +
    - {/* How it works */} - How it works +
    One {""}, one{" "} @@ -844,10 +855,9 @@ function Chart({ data, value }) { of parts updating independently. - +
    - {/* Props */} - Props +
    - +
    - {/* Stress testing */} - Stress testing +
    A chart that only looks good on calm data isn't much use. These @@ -958,10 +967,9 @@ function Chart({ data, value }) { - +
    - {/* Just a line */} - Just a line +
    Liveline can do a lot. Momentum arrows, particles, orderbooks, @@ -971,18 +979,17 @@ function Chart({ data, value }) { - +
    - {/* Acknowledgements */} - - Acknowledgements - +
    Built with React and HTML Canvas. Inspired by TradingView, Robinhood, and Polymarket chart aesthetics. The interpolation approach is borrowed from game development — lerp everything, snap nothing. + +