fibo

Pronounced FEE-boh

A library of parts for experimental projects and special components that anyone can use.

ComponentsFigmaGitHub
  • shadcn/ui
  • Base UI
  • React
  • Tailwind CSS
  • Storybook

The story

Where he comes from

fibo is short for Fibonacci, the Italian mathematician. In 1202 he wrote a book called Liber Abaci, and tucked inside it is a puzzle about rabbits.

The puzzle has four rules:

  1. Start with one pair of baby rabbits.
  2. A pair takes a month to grow up.
  3. From the month after that, it has one new baby pair every month.
  4. Nobody ever dies. (It's a math puzzle, not a farm.)

How many pairs are there after a year? Below, each row is a month and each rabbit is a pair: small for babies, big once grown. Watch the first eight months play out.

An animation of Fibonacci's rabbit puzzle, one row per month. Over eight months the pairs go 1, 1, 2, 3, 5, 8, 13, 21.

Why it adds up

Look at any month and the count is the two months before it, added together. That's no coincidence. Everyone from last month is still here, because nobody dies. And every pair that was around two months ago is grown up by now, so each of them just had a new pair. This month is last month plus the month before: 1, 1, 2, 3, 5, 8, 13, 21, and on forever.

Now divide each number by the one before it. 2 ÷ 1 is 2. 3 ÷ 2 is 1.5. 5 ÷ 3 is 1.667. 8 ÷ 5 is 1.6. It wobbles above and below, closer every month, toward 1.618: the golden ratio, φ. The rabbits never land on it exactly. They just keep getting closer.

So a rabbit started it all, and a rabbit got the job of mascot. He's very aware of his family history. Click him too many times and he'll warn you there'll be eight of him by next month.

Organic and mechanical

The golden ratio comes from nature. It's nature's own algorithm, and I'm using it to build something mechanical. While making fibo I found an accidental contrast at the center of the project: organic and mechanical, two opposites in one place.

That's why the rabbit is pixel art. He's an animal, a part of nature, rebuilt out of pixels.

A soft photograph of a white rabbit's eye in a small window, with a dithered pixel rabbit building out around it.
The rabbit, rebuilt in pixels around a photograph of one.
A photograph of bees on a sunflower's seed head in a small window, with a dithered pixel sunflower building out around it.
A sunflower, whose seeds spiral in Fibonacci numbers, dissolving into dither.

Where to find him

  • In the hero above, fibo builds himself up pixel by pixel, idles and hops, and watches your pointer. Poke him and he flinches. Click too fast and he hides behind his ears.
  • The hero is a golden rectangle, cut on 0.618.
  • fibo never draws a spiral. Spirals only appear where nature made them, in photographs.