Shipping the butterfly

We built a butterfly - and ended up writing about everything except the wings.

A mark with intent

Most logos sit still. The Monarch mark doesn’t, because the studio doesn’t either. The wings flap, the thorax glows, the trace lines pulse. None of it is a gimmick: each behavior is a reflection of mode.

In business mode, the butterfly is monotone - a clean ink stroke. The trace lines collapse to neutral, the halo fades, the wings hold steady. This is the version a CTO sees when she’s evaluating us for a backend rebuild. The vibe is calm.

Flip to creative mode and the same SVG becomes saturated. Orange traces light up the wings, the thorax halo breathes, the wings start their slow flap. Same path data, completely different read.

One SVG, two faces

The trick is that everything is CSS. The path geometry is fixed; only the strokes, fills, and animations change based on [data-mode] on the root element. No conditional rendering, no JavaScript per frame, no two-asset shuffle.

[data-mode="creative"] .bf .bf-trace {
  stroke: var(--orange) !important;
  opacity: 1;
}
[data-mode="creative"] .bf .bf-wing-r {
  animation: flapR 3s ease-in-out infinite;
}

That [data-mode] attribute is set server-side from a cookie now. Which means the butterfly is correct on first paint - no flash from business to creative when the user reloads in their preferred mode.

What we’d change

Honestly? Less. The temptation when porting from a self-contained HTML demo is to “improve” everything. Most of the time, the original author had reasons. We kept the wing flap timing exactly as designed because faster looks frantic and slower looks dead. The 3-second loop is the right answer.

The only real swap was the mode transition itself - sweep bars for business, particle explosion for creative. That part was begging to be ported faithfully, and we did.