Phyllotaxis

$ pnpm dlx shadcn@latest add @remocn/phyllotaxis

Usage

Phyllotaxis places seeds the way a sunflower head does: seed i sits at i × 137.508°, the golden angle, at a radius proportional to √i. The seeds pop in from the center outward, each with a small overshoot, and the outer ones are drawn a little larger.

When the head is grown, every arm-th seed turns accent and swells slightly, and a faint accent line connects them. With a Fibonacci number these seeds line up into one spiral arm. Then a soft pulse travels outward along the arm again and again, swelling each seed as it passes. The whole head turns slowly the entire time.

import { Phyllotaxis } from "@/components/remocn/phyllotaxis";
 
export const Growth = () => <Phyllotaxis />;

The component fills its parent and paints its own background. The head is centered and its outer edge sits at 44% of the short side, so it keeps its framing at any aspect ratio. Everything comes from the Remotion frame, so renders are deterministic.

Timing

At 30 fps, speed={1} and the defaults:

The square-root schedule moves the reveal front outward at a steady radial speed, so the dense center does not flash in at once. The build is complete at growFrames + 14 frames, 74 at the defaults; after that the pulse repeats every pulseFrames frames for as long as the Sequence runs. The docs preview shows two pulses, 165 frames. Divide by speed for faster playback; rotation is in degrees per second and scales with speed as well.

The pulse cycle is seamless on its own. With the default rotation the head keeps turning, so the idle never repeats exactly; set rotation={0} for a loop of pulseFrames frames after frame 70.

Variations

arm picks which seeds form the accent spiral. Fibonacci numbers (8, 13, 21, 34, 55) give a clean spiral arm; other values give curved spokes or scattered dots. Lower count and raise size for a bold, graphic head with few seeds.

<Phyllotaxis
  count={180}
  size={1.4}
  arm={13}
  rotation={-6}
  background="#f6f1e7"
  color="#3d2c1e"
  accent="#e09f3e"
/>