Circular frame with one short highlight running around its rim, built on the Arc traveling look, with children centred inside. Size, stroke, color or hue and arc length are adjustable; motion is opt-in.
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/traveling-arcnpx shadcn add @01orbital/traveling-arcyarn shadcn add @01orbital/traveling-arcbunx --bun shadcn add @01orbital/traveling-arcPart 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/glow/traveling-arc.tsx, as source you own and edit.
import { TravelingArc } from "@/components/glow/traveling-arc"
export default function TravelingArcDemo({
animated = false,
}: {
animated?: boolean
}) {
return <TravelingArc size={280} animated={animated} />
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
Stars
Seeded canvas starfield that fills a positioned parent with a mix of sharp and soft stars. Optional twinkle and fade-in respect reduced motion, and a circular cutout can hide stars behind an orb.
Vignette
Full-bleed radial darkening layer that shades the corners of a scene, in soft, medium or strong. Focuses the centre and helps text sit on art inside a positioned parent.