Living data
components.
Ring gauges, VU meters, heartbeat monitors, spectrum analyzers, radar sweeps, thermometers, compass dials. One canvas per component, 60fps interpolation, two props.
132
Modes
60
FPS
25
Categories
2
Props
0
Deps
Two props. That's it.
import { Pulse } from 'usepulsekit' <Pulse value={cpu} mode="ring" /> // value + mode. done.
Feed it data however you like. WebSocket, polling, random walk. PulseKit lerps between updates so even infrequent data looks smooth.
132 modes, all alive.
Every canvas below runs live with simulated data. Nothing is static. Scroll to explore all 25 categories.
Core 30
Ring
Gauge
Bar
Spark
Ticker
Delta
Dot
Wave
Heat
Meter
Needle
Heartbeat
Spectrum
Bubble
Radar
Signal
Battery
Equalizer
Pendulum
Ripple
Orbit
Flame
Tide
Compass
Thermometer
Clock
Progress
Arc
Segments
Binary
Shape 6
Donut
Pie
Dial
Knob
Slider
Step
Pattern 4
Spiral
Helix
Dna
Spring
Waveform 6
Oscilloscope
Seismograph
Ecg
Pulse Wave
Sawtooth
Square Wave
Audio 4
Volume
Loudness
Decibel
Waveform
Instrument 4
Speedometer
Tachometer
Altimeter
Pressure
Time 4
Hourglass
Stopwatch
Countdown
Timer
System 6
Cpu
Memory
Disk
Network
Uptime
Latency
Health 4
Heart
Lungs
Oxygen
Temperature
Weather 4
Wind
Humidity
Uv
Rain Gauge
Financial 4
Stock
Crypto
Percentage
Currency
Rating 4
Stars
Rating
Score
Rank
Loading 4
Loading
Spinner
Dots Loading
Pulse Loading
Status 4
Badge
Chip
Tag
Indicator
Spatial 4
Minimap
Horizon
Level
Gyroscope
Digital 4
Pixel
Led
Matrix
Seven Seg
Chart 4
Bar Stack
Bar Group
Histogram
Waterfall
Radial 4
Radial Bar
Sunburst
Polar
Rose Chart
Gauge Variants 4
Gauge Mini
Gauge Flat
Gauge Digital
Gauge Neon
Ring Variants 4
Ring Thick
Ring Thin
Ring Dashed
Ring Gradient
Wave Variants 4
Wave Square
Wave Triangle
Wave Noise
Wave Pulse
Meter Variants 4
Meter Horizontal
Meter Arc
Meter Digital
Meter Segment
Spark Variants 4
Spark Bar
Spark Area
Spark Dot
Spark Step
Alert 4
Status
Health
Alert
Warning
Fill 4
Fill Circle
Fill Square
Fill Diamond
Fill Hex
Vanilla JS too.
import { PulseEngine } from 'usepulsekit' const engine = new PulseEngine({ value: 50, mode: 'gauge' }) engine.mount(document.querySelector('canvas')) engine.start() setInterval(() => engine.setValue(Math.random() * 100), 1000)
How it works.
One canvas, one requestAnimationFrame loop. When a new value arrives, nothing jumps. The display lerps toward the target at 8% per frame. History, momentum, and color all follow the same interpolation. That's why every mode feels like one thing breathing rather than parts updating independently.
Experimental software. DYOR. Built by 0xDragoon.