Liveline

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

• Chandan Perla
• Pournami Pottekat

related reading

• Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
• LLM Visualizationbbycroft.net
• UI Skills for Design Engineers | UI Skillsui-skills.com
• Anime.js | JavaScript Animation Engineanimejs.com
• Introductionevilcharts.com
• justinzwu.comjustinzwu.com
• Amelia Wattenbergerwattenberger.com
• Tailwind CSS Colors - All colors + Custom color generatoruicolors.app
• Open Dashboard - Pankaj Tanwarpankajtanwar.in
• performative-ui | AI-native React Componentsvorpus.github.io
• Emil Kowalski on X: "Some of my favorite UI libraries: NumberFlow for animating numbers. input-otp for one-time passwords. Liveline for real-time charts. Leva for customizable GUIs. cmdk for command menus. Virtuoso for virtualization. dnd kx.com
• Preceden Timeline Maker: Create a Timeline in Minutespreceden.com