A circular window onto the sunlit Fish School scene, where each fish orbits on its own CSS motion path among rising bubbles. Seed, fish count and bubble count vary the school; requires fish-school-light-scene.
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/fish-orb-bowlnpx shadcn add @01orbital/fish-orb-bowlyarn shadcn add @01orbital/fish-orb-bowlbunx --bun shadcn add @01orbital/fish-orb-bowlPart 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/motion/fish-orb-bowl.tsx, as source you own and edit.
import { FishOrbBowl } from "@/components/motion/fish-orb-bowl"
export default function FishOrbBowlDemo() {
return (
<div className="grid text-foreground">
<FishOrbBowl size={320} />
</div>
)
}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:
fish-school-light-sceneEmber Orbit
A transparent warm arc that fades along a thin circular track, with a blurred bloom behind it. Rotation is opt-in and pauses under reduced motion; the backdrop and grain are left to the consumer.
Fish Orb Rim
A school of fish orbiting inside a Painted Orb Rim sphere over deep water, each on its own CSS motion path. The palette reskins the rim light and bubbles are off by default. Builds on Fish School.