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.
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-skeletonnpx shadcn add @01orbital/rothko-skeletonyarn shadcn add @01orbital/rothko-skeletonbunx --bun shadcn add @01orbital/rothko-skeletonPart 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-skeleton.tsx, as source you own and edit.
"use client"
import { useEffect, useState } from "react"
import { RothkoSkeleton } from "@/components/loader/rothko-skeleton"
const PALETTES = {
poppy: {
ground: "oklch(0.436 0.110 259.5)",
upper:
"radial-gradient(ellipse 130% 100% at 50% 35%, oklch(0.627 0.214 26.0) 0%, oklch(0.627 0.214 26.0 / 0.7) 52%, transparent 100%)",
lower:
"radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.477 0.080 189.0) 0%, oklch(0.452 0.075 207.5 / 0.75) 56%, transparent 100%)",
glow: "oklch(0.668 0.220 29.3)",
form: "strong",
},
} as const
export default function RothkoSkeletonDemo() {
const [colored, setColored] = useState(false)
useEffect(() => {
const tick = setInterval(() => setColored((c) => !c), 2800)
return () => clearInterval(tick)
}, [])
return (
<div className="w-72">
<RothkoSkeleton palette={PALETTES["poppy"]} lines={4} colored={colored} />
</div>
)
}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 Progress
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.
Void Orbit Loader
Dark void sphere at the centre with two paper-lit orbs circling it on counter-rotating orbits. Sized in pixels; reduced motion turns the orbits into alternating fades.