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.
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-rimnpx shadcn add @01orbital/fish-orb-rimyarn shadcn add @01orbital/fish-orb-rimbunx --bun shadcn add @01orbital/fish-orb-rimPart 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-rim.tsx, as source you own and edit.
import { FishOrbRim } from "@/components/motion/fish-orb-rim"
export default function FishOrbRimDemo() {
return (
<div className="grid text-foreground">
<FishOrbRim 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 Orb Bowl
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.
Fish School
A transparent layer of a seeded, depth-layered fish school with rising bubbles, in light or dark inks. Swims across the viewport, its own box, or orbit loops; still under reduced motion.