We replaced a flat toggle with a 3D globe — here's why it took three tries

The billing toggle on the pricing page worked fine before we touched it. Two buttons — Monthly, Annual — with a pill that slid between them. Clean. Standard. Completely forgettable.

We changed it anyway.

Why

Ominvo is built for small businesses anywhere — restaurants in Houston, salons in Phoenix, auto shops in Detroit. The whole pitch is: you run your location, we handle the review layer. A pill toggle doesn't communicate anything about that. A globe does. It's a small signal, but signals compound. Over a hundred tiny decisions, a product either feels like it was made for the world or like it was made for someone's portfolio.

We had the globe idea from the start. We just kept pushing it. The changelog is full of things that looked like they could wait — and most of them paid off faster when we stopped waiting.

The spec

Small globe. Smaller than the label text. Sits in the gap between "Monthly" and "Annual" at rest. When you click, it rolls — 540 degrees of CSS rotation — with gold dust particles scattering outward. It nudges slightly left when monthly is active, slightly right when annual is active, so it always points toward the live selection. A "Save 20%" badge fades up beneath the row when you pick annual.

Simple idea. Three tries to get right.

The three iterations

First build. Globe was absolutely positioned inside a zero-width anchor div sitting between the two labels. The plan was to slide it left or right with translateX(±58px) to land it over whichever label was active. It worked — except "over whichever label" turned out to mean on top of the text, not beside it. The globe was literally covering "Annual" when annual was selected. Not the look.

Second fix. Kept the zero-width anchor, adjusted the translation math. Same visual result, different cause. The anchor had no width, so the flexbox gap collapsed it, and the globe had no stable center to translate from. We were fighting the layout model instead of working with it.

Third fix. Removed the anchor entirely. Made the globe a plain 20×20px flex child sitting directly in the row — Monthly [globe] Annual — with gap: 24px on each side for breathing room. Translation dropped to ±10px: just enough of a nudge to signal direction, not enough to go anywhere. It stayed in the gap. It never touched a label. Done.

The rotation, the particles, the badge — none of that changed between iteration one and three. Only the layout model changed.

What it tells us about building UI

Small details are worth getting right even when they're not on the critical path. The globe isn't a feature. Nobody is going to sign up for Ominvo because the toggle is a globe instead of a pill. But the people who notice it — and some people will notice it — will get a slightly clearer picture of what kind of product this is. A product that cares about the small things is probably also a product that cares about the important things.

That's the bet, anyway.

What else shipped today

Full end-to-end test of the lifetime deal flow completed in production. Stripe $79 checkout → webhook → tier flip to lifetime → Settings plan card showing the lifetime state → upgrade-to-Chad modal from Settings. All clean. The machinery has been ready for a while. The July 23 launch date is now just waiting on July 23.

If you're on the waitlist: nothing left to fix on the backend. The plumbing works.