Our website playground: a live demo of what Astro can do

Clients often ask what is possible on a modern website. Instead of describing it, we built a page where you can try it yourself: the playground.

The control panel

On a computer, the panel stays beside you as you scroll. It changes:

• the palette, five colour schemes taken from paintings,
• light or dark mode,
• the corners: round, soft or sharp,
• the speed of every animation, from a quarter to double,
• the feel of the motion: smooth, bouncy or snappy,
• the headings, between our usual typeface and handwriting,
• a cursor spotlight that darkens the page around your pointer,
• interface sounds, made in the browser with no audio files.

Palette, mode, corners and sound apply to the whole website and are remembered. The rest are just for playing.

Twelve buttons

The same action can feel very different depending on its button. The playground shows twelve: a plain primary and outline, a ghost that only appears on hover, a glowing one, one with a beam of light, a push button that sinks like a real key, an arrow that slides, a magnetic button that leans towards your cursor, a ripple that spreads from your click, a send button that shows loading and then success, a rotating gradient border, and a button that copies the current accent colour.

Twelve animations

Next comes a wall of motion: a staggered reveal, a typewriter, counting numbers, a line that draws itself, morphing colour blobs, a watercolour wash that reveals a painting, a picture that tilts in 3D with a glare, a painting in layers that follows the mouse, shimmering text, an endless marquee, loaders and orbiting light.

Every one of them is built with care for speed. They only move and fade things, which the graphics chip can do alone, they pause when they leave the screen, and they switch off for anyone who has asked their device to reduce motion.

The pieces clients ask for most

• a before and after slider for photos, which also works with the arrow keys,
• an FAQ where one answer opens at a time,
• a form that checks the email address as you type, with a character counter,
• notifications that confirm an action and then step aside,
• a gallery with a lightbox built on the browser’s own dialog, so the Esc key and keyboard focus work without extra code.

Measured live

At the bottom, the page measures itself in your browser: how long it took to be ready, how much JavaScript and data it loaded, and how many elements it holds. These are real numbers from your visit, not marketing figures.

Why Astro

Astro builds every page to plain HTML before anyone visits. Scripts are added only where something is interactive, such as this panel, so the rest of the site ships almost none. That is how a page full of effects can still be fast on a phone. Read more on why we build with Astro, then open the playground or play a game.