Dark Thermal container painting a void-to-ember radial ground, a status-driven ember glow with heat haze at combustion, and SoftGrain. Uses motion; haze is skipped under reduced motion.
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/thermal-shellnpx shadcn add @01orbital/thermal-shellyarn shadcn add @01orbital/thermal-shellbunx --bun shadcn add @01orbital/thermal-shellPart 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/thermal/thermal-shell.tsx, as source you own and edit.
The example also uses thermal-atoms. Install it too:
pnpm dlx shadcn add @01orbital/thermal-atomsnpx shadcn add @01orbital/thermal-atomsyarn shadcn add @01orbital/thermal-atomsbunx --bun shadcn add @01orbital/thermal-atomsimport { ThermalText } from "@/components/thermal/thermal-atoms"
import { ThermalShell } from "@/components/thermal/thermal-shell"
// Every word on the page. Change copy here, not in the markup.
const COPY = {
word: "Combustion",
} as const
// The shell at full heat: the haze touches the glow, the word stays crisp.
export default function ThermalShellDemo() {
return (
<ThermalShell
status="COMBUSTION"
className="grid min-h-full w-full flex-1 place-items-center"
>
<ThermalText>{COPY.word}</ThermalText>
</ThermalShell>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn, motion. The CLI installs them for you.
Registry pieces it installs with it:
soft-grainThermal Provider
Context provider for the Thermal family: tracks heat and an idle, warming, combustion, cooling or depleted status from window activity, with a timed cool-down. Parts fall back to a warm resting state without it.
Compare
Every UI Elements 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.