Single paper-lit sphere with a crescent tint that slowly swells and settles on a three-second loop. Sized in pixels; reduced motion replaces the scale change with an opacity fade.
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/breathe-loadernpx shadcn add @01orbital/breathe-loaderyarn shadcn add @01orbital/breathe-loaderbunx --bun shadcn add @01orbital/breathe-loaderPart 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/breathe-loader.tsx, as source you own and edit.
import { BreatheLoader } from "@/components/loader/breathe-loader"
export default function BreatheLoaderDemo() {
return (
<>
<BreatheLoader size={48} />
</>
)
}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.
Bar Wave Loader
Row of five paper-lit pill bars that rise and fall in a staggered wave, each tinted by its own palette. A status element labelled Loading; reduced motion swaps the wave for a slow fade.
Cloud Stack Loader
Vertical column of three paper circles that take their color in turn from top to bottom while the others rest in grey. Height sets the size; reduced motion fades instead of scaling.