Rounded glass tile that frames a single icon, using the kit's glaze surface and glass-edge utilities with scene foreground ink. Sized for a 36px icon and meant for dark art surfaces.
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/glass-iconnpx shadcn add @01orbital/glass-iconyarn shadcn add @01orbital/glass-iconbunx --bun shadcn add @01orbital/glass-iconPart 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/graphics/glass-icon.tsx, as source you own and edit.
The example also imports @phosphor-icons/react from npm, which the install does not add:
pnpm add @phosphor-icons/reactnpm install @phosphor-icons/reactyarn add @phosphor-icons/reactbun add @phosphor-icons/reactimport { MoonStarsIcon, PlanetIcon } from "@phosphor-icons/react/dist/ssr"
import { GlassIcon } from "@/components/graphics/glass-icon"
const ICONS = [
{ name: "Planet", Icon: PlanetIcon },
{ name: "Moon", Icon: MoonStarsIcon },
]
export default function GlassIconDemo() {
return (
<ul className="flex gap-8">
{ICONS.map(({ name, Icon }) => (
<li key={name}>
<GlassIcon>
<Icon weight="fill" aria-hidden="true" />
</GlassIcon>
</li>
))}
</ul>
)
}It accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Contour Field
Client canvas field painted by the celestograph plate engine, blurred and traced with white contour lines from its own luminance. Seeded from a string, four palettes; fills a positioned parent and repaints on resize.
Growth Curve
Decorative chart where an orb climbs an accelerating curve drawn in currentColor, leaving a bright trail over a faint remainder. A CSS-only loop with adjustable duration; reduced motion shows it finished.