Design guide · site 16 of 25

How COMB was built

The concept

COMB is a fictional urban beekeeping collective running forty-one hives on twelve city rooftops. The audience is city-dwellers who might adopt a hive, book a course, or lease their roof to bees. The page has one job: make rooftop beekeeping feel like civic infrastructure you could join tomorrow — and prove it with honey.

Palette

Every colour is argued for by the subject: wax, honey at two depths, and hive-darkness. No colour appears that a hive couldn't produce.

Type

Fraunces carries the personality: a soft, high-contrast serif with a slight wonk that reads as warm and hand-tended, not heritage-stuffy. It takes the hero at 6vw+, the manifesto at weight 380, and italic honey moments ("the bees found it first"). Nunito Sans does the working text — rounded enough to sit comfortably beside honeycomb geometry, set at 17px/1.65 with tracked-caps eyebrows at 11.5px.

Techniques

No raster images anywhere. The comb lattice is an SVG <pattern> reduced to five line segments per tile so no edge is ever drawn twice. Hive sites are CSS clip-path hexagons in interlocking flex rows that collapse to elongated comb-cell lozenges under 660px. Honey jars are inline SVG with three gradient fills — the year's draw, palest to near-black. Section seams are honey-drip dividers: a 96-point path whose profile is a sum of Gaussian bumps, each drip's length oscillating on its own slow sine, so the honey visibly sags and swells. GSAP + ScrollTrigger choreograph one page-load sequence and the scroll reveals.

The signature — commuting bees. Six SVG bees (ellipse bodies, clipped stripes, CSS-fluttered wings) live on a full-page SVG layer. Each bee flies cubic Bézier routes between "stops" — the hex cells, the honey jars, the hero stats — with control points offset perpendicular to the route, a sinusoidal wobble, and heading taken from the curve's analytic tangent (with a hysteresis flip so a leftbound bee isn't upside-down). On arrival it orbits the cell in a squashed ellipse, the cell warms with a slow radial glow, then it picks a new roof. Pointing at any cell summons the nearest bee.

Iteration log

• Pass 1 — Craft
  • Rebuilt the comb background pattern: the first tile had stray segments and double-drawn verticals that rendered as uneven line weights. Reduced to a minimal 5-segment tile with zero duplicated edges.
  • Fixed hex-row interlock: overlap was pegged to width (−24.5%) instead of true height (−28.87% + 9px seam), so vertical seams didn't match the horizontal 10px gaps.
  • Bees spawned with no transform and flashed at the page origin for a frame — now positioned at their stop on creation.
  • Moved inline h2 sizes into a class, matched ghost/solid button box heights with a shared 1.5px border, added the light comb lattice behind dark sections so the amber-glass jar cards actually have something to blur, and gave jars a drop shadow.
• Pass 2 — Depth
  • Summon micro-interaction: hovering any cell calls the nearest bee over (3.5s cooldown per cell so it stays a delight, not a swarm).
  • Cells now warm with a radial honey glow while a bee is dwelling on them — switched from a gradient swap (gradients don't transition) to an opacity-faded overlay.
  • Second-read detail: after the "bees at midsummer" counter lands on 2,400,000 it keeps ticking up by one or two every few seconds. Hover the number: "Give or take."
• Pass 3 — Hardening
  • Verified 375px: no horizontal scroll, the seven-cell comb collapses to lozenges, the 2,400,000 stat fits its cell with tabular numerals.
  • Found GSAP's completed .from() reveals left inline transforms that silently killed every CSS hover lift — fixed with clearProps.
  • Reduced motion: media query kills wing-flutter and transitions; JS skips all timelines, draws the drip dividers once as static pours, and perches three still bees on the comb instead of flying any.
  • Chanel rule: removed the hero's radial glow blob — the comb lattice was already doing the work. Bees skip DOM writes while off-screen; the loop stops entirely when the tab hides.

Libraries

GSAP 3.12.5 + ScrollTrigger (cdnjs) for the load sequence, reveals and counters. Fonts from Google Fonts. The bees, drips and pattern are hand-written vanilla JS and SVG — no three.js, no physics engine; a bee weighs less than a millilitre of honey and deserves a renderer to match.

Designed & built by Sapience Analytics — one of 25 sites · COMB · Collection index