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.
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-schoolnpx shadcn add @01orbital/fish-schoolyarn shadcn add @01orbital/fish-schoolbunx --bun shadcn add @01orbital/fish-schoolPart 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-school.tsx, as source you own and edit.
The example also uses pool-scene. Install it too:
pnpm dlx shadcn add @01orbital/pool-scenenpx shadcn add @01orbital/pool-sceneyarn shadcn add @01orbital/pool-scenebunx --bun shadcn add @01orbital/pool-sceneimport { FishSchool } from "@/components/motion/fish-school"
import { PoolScene } from "@/components/scene/pool-scene"
export default function FishSchoolDemo() {
return (
<div className="relative min-h-full w-full flex-1 overflow-hidden rounded-xl text-foreground">
<PoolScene
colors={{
crest: { l: 0.9, c: 0.05, h: 200 },
descent: { l: 0.62, c: 0.09, h: 222 },
}}
middle="caustic"
causticOpacity={0.5}
/>
<FishSchool seed={404} tone="light" path="container" />
</div>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
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.
Orbit Items
A circular stage that carries any items around evenly spaced spokes while counter-rotating them to stay upright. Set size, seconds per turn and direction; stops under reduced motion.