Progress bar drawn as a Rothko canvas whose lower field rises with the value while its color develops from grey to full chroma. Exposes progressbar semantics with a 0 to 100 value.
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/rothko-progressnpx shadcn add @01orbital/rothko-progressyarn shadcn add @01orbital/rothko-progressbunx --bun shadcn add @01orbital/rothko-progressPart 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/loader/rothko-progress.tsx, as source you own and edit.
"use client"
import { useEffect, useState } from "react"
import { RothkoProgress } from "@/components/loader/rothko-progress"
const PALETTES = {
vesper: {
ground: "oklch(0.28 0.06 300)",
upper:
"radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.90 0.04 55) 0%, oklch(0.90 0.04 55 / 0.7) 53%, transparent 100%)",
lower:
"radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.42 0.13 305) 0%, oklch(0.42 0.13 305 / 0.85) 56%, transparent 100%)",
glow: "oklch(0.82 0.07 50)",
form: "strong",
},
} as const
export default function RothkoProgressDemo() {
const [value, setValue] = useState(8)
useEffect(() => {
const tick = setInterval(() => {
setValue((v) => (v >= 100 ? 8 : v + 4))
}, 400)
return () => clearInterval(tick)
}, [])
return <RothkoProgress value={value} palette={PALETTES["vesper"]} />
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Rothko Loader
Small Rothko-style canvas of two color fields on a ground, breathing under grain and crossfading through any palettes you pass. Three sizes and a grisaille option; client component, reduced motion keeps only the fade.
Rothko Skeleton
Loading placeholder of pulsing bars on a Rothko ground that waits in grisaille and glazes the palette color in when switched to colored. Line count is adjustable; the pulse is opacity only.