Built to Delight

Interface components I’ve seen, liked, and rebuilt. By @mirayavandiepen

Notification badge

The count slides up into the corner as it pops open, and blurs out on the way back. Press the bell, then press it again.

  • react
  • tailwind
  • css

Gooey menu

A plus that splits into three buttons and pours back into itself. Press it, then press it again.

  • react
  • css
  • svg filters

Spring drag

Exact while held. On release the nearest slot takes it, or it springs back. Throw the chip at a slot, then let go over open floor.

  • react
  • tailwind
  • motion

Like button

The heart charges under the finger, fills on the release and throws a handful of smaller hearts as it goes. Press it, and press it again for a different spray.

  • react
  • tailwind
  • css

Turning deck

Each card turns away as the next comes round. A long pull and a quick flick both move it one. Drag it sideways, then flick it.

  • react
  • tailwind
  • motion
Build Your Base

Get your business basics set up and running smoothly from day one.

Make a Plan

Map out your next steps for growth with clear, simple goals in mind.

Use Resources

Make the most of what you have to grow your business step by step.

Get Better

Find smarter ways to work and make your business run efficiently.

Grow Bigger

Take your business to new places and reach more customers daily.

Sliding tabs

One pill moves between the labels, changing width to fit whichever it lands on. Press another label.

  • react
  • tailwind
  • motion

Card stack

Closed at rest. The pile fans apart when you reach for it and springs back together when you leave. Rest the cursor on the pile and move along it, or tap it on a phone.

  • react
  • tailwind
  • css

Dynamic island

A black pill that changes shape around what it is carrying. Opening and closing spring differently, and the bell shakes itself silent while it is open. Press ring, then watch the bell before pressing idle.

  • react
  • tailwind
  • motion

Elastic slider

The track stretches and thins when the pointer runs past either end, and pulls the icon on that side along with it. Drag past the end of the track, then let go.

  • react
  • tailwind
  • motion

Number pop-in

Each digit rises 8px out of a blur, and the decimal point and the tenth follow a beat behind the whole. Press the number to play it again.

  • react
  • tailwind
  • css

10 Components