An SVG light curve in currentColor with a dot riding its dip, driven by the same clock as Planet Transit Scene. Render both from one parent so the dip matches the crossing.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/transit-light-curvenpx shadcn add @01orbital/transit-light-curveyarn shadcn add @01orbital/transit-light-curvebunx --bun shadcn add @01orbital/transit-light-curvePart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/graphics/transit-light-curve.tsx, as source you own and edit.
import { TransitLightCurve } from "@/components/graphics/transit-light-curve"
export default function TransitLightCurveDemo() {
return (
<div className="h-48 w-full max-w-2xl">
<TransitLightCurve />
</div>
)
}It accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
planet-transit-sceneSparkline
Compact SVG line chart from an array of numbers, with a currentColor stroke and fading area fill. Missing values break the line, one point draws a dot, and an aria-label exposes it as an image.
Compare
Every Loader component side by side: whether it follows the theme or stays dark, how many parts and custom props it has, and whether it is free. Open one for its preview, API and install.