Liveline
benji.org · 1,223 words · saved by 2 readers
Real-time animated line chart for React.
Liveline is a real-time animated line chart component for React. One <canvas> , no dependencies beyond React 18, smooth interpolation at 60fps. Degen mode (chart shake and particles) with momentum arrows. I built this because every charting library I tried was either too heavy for a simple live feed, or too rigid to feel alive. Liveline does one thing: draw a line that moves smoothly as new data arrives. Everything else is opt-in. Getting started npm install liveline The component fills its parent container. Set a height on the wrapper. import { Liveline } from 'liveline' function Chart ({ dat
saved by
related reading
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- How's Linear so fast? A technical breakdownperformance.dev
- Anime.js | JavaScript Animation Engineanimejs.com
- Poline — Esoteric Color Palette Generation Librarymeodai.github.io
- Rive — the interactive experience enginerive.app
- Grainradgrainrad.com
- Bireactive Programmingorionreed.github.io
- srclsacred.computer
- glimm — shader-driven page transitionsglimm.dev
- Canvas UI: Creative Canvas, WebGL and WebGPU Component Librarycanvasui.dev
- srclsacred.computer
- Pretext - Text measurement that never touches the DOM.pretextjs.dev