A Canvas 2D stacked ridgeline plot in the spirit of a pulsar chart: dozens of lines lifted by slow noise gathered in a central band, each filled to hide the ridges behind it, rising from flat on mount. Nearby lines lift under the cursor. Ink and paper colors, line count, ridge height, band width, speed, line weight and the cursor peak are all props. Pauses offscreen and holds a still plot for reduced motion.
The import and the props worth knowing about, in one place.
import { Ridgelines } from "@/components/beste/component/ridgelines";
// A square cover panel
<Ridgelines className="aspect-square rounded-sm" />
<Ridgelines
className="min-h-[32rem]"
inkColor="var(--foreground)" // any CSS color, tokens included
paperColor="var(--background)"
lines={40} // 12 to 96
amplitude={0.7} // taller ridges
spread={0.3} // a narrower central band
weight={0.2} // finer lines
riseIn={false} // skip the rise on mount
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
inkColor | string | — | Color of the lines. Any CSS color, tokens included. |
paperColor | string | — | Color behind the lines, also used to hide the ridges further back. |
lines | number | — | Number of stacked ridgelines, 12 to 96. |
amplitude | number | — | Height of the ridges, 0 to 1. |
spread | number | — | Width of the central band where the ridges rise, 0 (narrow) to 1 (wide). |
speed | number | — | How fast the noise travels through the ridges, 1 is the default pace. |
weight | number | — | Line weight, 0 (hairline) to 1 (heavy). |
riseIn | boolean | — | Ridges rise from flat lines on mount. |
interactive | boolean | — | Nearby lines lift under the cursor. |
peak | number | — | How high the cursor lifts the lines, 0 to 1. |
paused | boolean | — | Freeze the plot on its current frame. |
className | string | — | |
children | ReactNode | — |