Thermal parts driven by ThermalProvider status: EmberLayer, rising sparks that brighten toward combustion, and ThermalText, a word that warms and glows. Uses motion; embers hold still 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-atomsnpx shadcn add @01orbital/thermal-atomsyarn shadcn add @01orbital/thermal-atomsbunx --bun shadcn add @01orbital/thermal-atomsPart 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-atoms.tsx, as source you own and edit.
import {
EmberLayer,
ThermalText,
} from "@/components/thermal/thermal-atoms"
// Every word on the page. Change copy here, not in the markup.
const COPY = {
word: "Ignite",
} as const
// The two atoms, bare: the embers and the word that heats and cools.
export default function ThermalAtomsDemo() {
return (
<div className="dark relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground">
<EmberLayer particleCount={18} />
<ThermalText className="relative">{COPY.word}</ThermalText>
</div>
)
}Thermal Atoms is built from 2 parts. In the example they nest like this:
EmberLayer
ThermalTextEmberLayer: Small glowing embers that rise from the bottom of their positioned parent to the top, for a fire-lit background. The layer brightens and fades with the status of the surrounding ThermalProvider, brightest at "COMBUSTION".ThermalText: A bold word or short phrase whose color follows the status of the surrounding ThermalProvider: depletedColor while "DEPLETED", activeColor otherwise, with a glow at "COMBUSTION". Each change fades over two seconds.Small glowing embers that rise from the bottom of their positioned parent to the top, for a fire-lit background. The layer brightens and fades with the status of the surrounding ThermalProvider, brightest at "COMBUSTION".
It fills its parent, ignores the pointer and is hidden from assistive tech. Reduced motion holds each ember still at its own height. Outside a provider it stays at the "WARMING" level.
Prop
Type
It also accepts Motion's animation props.
A bold word or short phrase whose color follows the status of the surrounding ThermalProvider: depletedColor while "DEPLETED", activeColor otherwise, with a glow at "COMBUSTION". Each change fades over two seconds.
Outside a provider it shows activeColor with no glow.
Prop
Type
It also accepts Motion's animation props.
npm: class-variance-authority, cn, motion. The CLI installs them for you.
Registry pieces it installs with it:
Poster
Printed card on a stage: a child image fills it behind a label, title, description and mono footnote. Hanken Grotesk sets the label, Geist Mono the footnote; add dark and any text shadow yourself.
Thermal 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.