buttons five ways

A small button set shown five ways, in a 12-second motion piece that plays once. A dot grid fades in, dots fly into the outlines of five buttons (Get started, Book a demo, a heart icon button, a Monthly | Yearly switch and Learn more) and the camera pushes in as the buttons appear. A scripted cursor clicks through them, and each click hard-switches the whole set and the page behind it to the next style with a quick flash: Rim, dark pills with a violet light-leak ring and glow; Jelly, warm white and glossy orange candy; Tonal, cobalt buttons on a cobalt page; Ember, near-black with borders and pools of molten orange; and Liquid glass, frosted translucent pills over four coloured orbs. Then the camera pulls back and the buttons dissolve into the grid. Each style is one self-contained CSS file, ready to lift into your own app. Geist, a 1080 × 1080 stage that scales to fit any window, the page colour and dots running to the window's edges.