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.
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/posternpx shadcn add @01orbital/posteryarn shadcn add @01orbital/posterbunx --bun shadcn add @01orbital/posterPart 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/poster/poster.tsx, as source you own and edit.
The example also uses section. Install it too:
pnpm dlx shadcn add @01orbital/sectionnpx shadcn add @01orbital/sectionyarn shadcn add @01orbital/sectionbunx --bun shadcn add @01orbital/sectionimport type { ComponentProps } from "react"
import { cn } from "cn"
import {
Section,
SectionContent,
} from "@/components/editorial/section"
import {
Poster,
PosterDescription,
PosterFootnote,
PosterLabel,
PosterTitle,
} from "@/components/poster/poster"
const COPY = {
label: "01orbital.",
title: "The economics of delivering on a system",
body: "Cost savings and coherence with the kit",
footnote: "A study of fifty launches, 2026",
} as const
// report-download-01's orbit diagram, copied here; any graphic can sit in this slot.
function OrbitMark({ className, ...props }: ComponentProps<"span">) {
return (
<span
aria-hidden="true"
className={cn(
"flex items-center gap-2 text-current before:size-8 before:rounded-full before:border before:border-current/80 after:size-12 after:rounded-full after:border after:border-current/80",
className
)}
{...props}
>
<span className="w-10 border-t border-dashed border-current/80" />
</span>
)
}
export default function PosterDemo() {
return (
<Section>
<SectionContent className="items-center">
<Poster className="dark rotate-3 text-shadow-legible">
<img
src="https://01orbital.dev/art/kit/layered-currents-415686.png"
alt=""
loading="lazy"
/>
<PosterLabel>{COPY.label}</PosterLabel>
<PosterTitle>{COPY.title}</PosterTitle>
<PosterDescription>{COPY.body}</PosterDescription>
<OrbitMark className="mt-8" />
<PosterFootnote>{COPY.footnote}</PosterFootnote>
</Poster>
</SectionContent>
</Section>
)
}Poster is built from 5 parts. In the example they nest like this:
Poster
├─ PosterLabel
├─ PosterTitle
├─ PosterDescription
└─ PosterFootnotePoster: A small printed card with art filling it and copy on top, like a poster. Put an img directly inside to cover the card behind the text, then PosterLabel, PosterTitle, PosterDescription and PosterFootnote.PosterLabel: A small line in the display font above the title, such as a series name.PosterTitle: The card's title, in larger type. It renders a p; pass render={<h3 />} when the title heads a section.PosterDescription: A short paragraph under the title.PosterFootnote: A small uppercase line in the mono font at the end of the card, such as a credit or date. Give it mt-auto to pin it to the bottom of a card with a set height.A small printed card with art filling it and copy on top, like a poster. Put an img directly inside to cover the card behind the text, then PosterLabel, PosterTitle, PosterDescription and PosterFootnote.
It is 16rem wide and takes its height from the copy. To pin the footnote to the bottom, give the card a height and the footnote mt-auto. Match the text to your art: add the dark class for light text over dark art, and a text shadow where it needs one.
It accepts the HTML attributes of the element it renders.
A small line in the display font above the title, such as a series name.
It accepts the HTML attributes of the element it renders.
The card's title, in larger type. It renders a p; pass render={<h3 />} when the title heads a section.
It accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
A short paragraph under the title.
It accepts the HTML attributes of the element it renders.
A small uppercase line in the mono font at the end of the card, such as a credit or date. Give it mt-auto to pin it to the bottom of a card with a set height.
It accepts the HTML attributes of the element it renders.
npm: @base-ui/react, cn. The CLI installs them for you.
Registry pieces it installs with it:
font-geist-monofont-hanken-groteskNeon Sign
Neon tube lettering with glow, four sizes, an intensity dimmer and opt-in flicker for the whole sign or single letters, plus burnt-out letters. Flicker is capped for flash safety and stops under reduced motion.
Thermal Atoms
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.