How PHYLLO was made

The concept

Halden Botanic is a fictional field studio that publishes one natural rule per note. Note No. 12 is the golden angle. The page has one job: let you hold the divergence angle of a sunflower in your hand and feel how fragile its order is. At 137.50776° the head packs into the familiar 34/55 spirals; move it a fifth of a degree and the whole arrangement breaks into radial spokes, then snaps back when you let go.

Palette

Type

Techniques

The head is a single canvas 2D scene. It is a real, in-order run of Vogel's model: floret n is placed at angle n × θ and radius c × √n, coloured by its distance from centre along a seedhead-to-petal ramp, and sized to swell slightly toward the rim. The 1,400 seeds are sown one at a time on load — the growth you watch is the model filling, not a canned animation.

The signature is that θ is live. A range input, six presets, and a drag on the head itself all write straight into the divergence angle, and one re-render re-packs every seed from scratch. Because the golden angle is the most irrational turn, the even packing survives only in a hair-thin band around 137.50776° — shift by ~0.2° and florets collapse onto their neighbours, opening the radial spokes you see. The Snap back button and presets tween θ with a power3.inOut ease so you watch the order dissolve and re-form.

The second read is honest maths. The two spiral counts in the readout are not hardcoded: parastichyPair() takes the continued-fraction expansion of θ/360 and returns the two convergent denominators that bracket √N — which are exactly the numbers of visible parastichies. At golden that pair is 34 / 55; detune it and the counts jump to whatever fractions the new angle best approximates. Illuminating the spirals simply joins every F-th floret for those two F, tracing the families the eye already found. GSAP supplies only the entrance timeline and the snap tween; there is no WebGL and no image on the page. If the canvas context fails, the stage keeps a static radial-gradient fallback.

Iteration log

• Pass 1 · Craft

  Set a deliberate type scale and reserved floret-gold for marks only — body copy runs on paper #EDE4CE at 11:1, never on gold, per the collection's contrast lesson. Tuned the colour ramp so the centre reads as dark unopened florets and the rim as petal. Rewrote the readout so Δ-from-golden shows all five decimals and the panel labels align to a single mono baseline. Added a no-JS guard so revealed copy is never left invisible.

• Pass 2 · Depth

  Made the parastichy counts a real continued-fraction computation rather than a caption, so the census tells the truth as you detune — the second-read payoff. Added drag-to-detune on the head itself (≈0.01°/px) with an ew-resize cursor and a hint that fades on first touch. The locked · golden flag and a soft glow now confirm when you have found the exact detent, and presets tween rather than jump so the shatter is legible.

• Pass 3 · Hardening

  At 375px the instrument stacks to one column and the head caps at 520px; nav and wordmark stay inside the box. Reduced motion sows all 1,400 seeds instantly, skips the growth and snap tweens, and reveals all copy. Capped DPR at 2, debounced resize, re-render on tab-return, and set touch-action:pan-y so the page still scrolls on mobile while horizontal drags detune. Re-verified: zero console errors, non-zero canvas, no horizontal overflow.

Colophon

Designed and built in one sitting by Sapience Analytics — concept, copy, phyllotaxis and parastichy maths. Part of the Generative Assets collection.