Playground

Go on,
play with our website.

This page is a live demo of what we build. Change the colours, the corners and the motion, try the buttons, then try the interactive pieces. Everything here is plain Astro, HTML and CSS, with small scripts only where you interact.

01

Buttons

Twelve styles, all following the palette and corner settings. Hover, click, and try them with the keyboard too.

The everyday call to action

Second choice, same weight

Quiet until you hover

Soft light in the accent colour

A beam of light sweeps across

Presses down like a real key

The arrow slides on hover

Leans towards your cursor

Paint spreads from your click

Loading, then success

A rotating border of light

Copies the current hex code

An underline drawn on hover Tag Outline tag
02

Motion and light

Every effect runs on the graphics card (transform, opacity and masks only), pauses when off screen and switches off for visitors who ask for reduced motion.

Staggered reveal
Typewriter
0Lighthouse 0s to load
Counting numbers
Line drawing
Morphing paint blobs
Watercolour wash reveal
3D tilt with glare (hover)
Painting in layers (move the mouse)
Light moves.
Shimmering text
Websites · SEO · Content · Photography · AI ·
Endless marquee
Loaders
Orbiting light
03

Interactive pieces

The small things that make a site feel finished. All of them work with a keyboard and a screen reader, and none needs a library.

A footbridge over a mossy gorge, colour-graded Flat Graded
Before and after slider. Drag, or use the arrow keys.

Questions, answered

What is this block?

An FAQ that keeps one answer open at a time. It is plain HTML, so it works even before any script loads.

Can I change the colours later?

Yes. Like this page, the colours are a few settings, so a new palette is a small job, not a redesign.

Will it work on phones?

Every page is designed for small screens first, then scaled up.

Live form checks

A demo only: nothing is sent anywhere.

Notifications

Short messages that confirm an action and then step aside.

Gallery with a lightbox

Looking for games?

Small browser games that keep visitors on your site have their own page now.

Play on the games page →
04

Under the hood

Measured in your browser on this page, just now. Not marketing numbers.

-page ready (ms)
-JavaScript transferred (KB)
-everything loaded so far (KB)
-HTML elements on the page

HTML first

Astro builds every page to plain HTML ahead of time. Nothing renders in the visitor's browser, so pages show up at once and search engines read everything.

Scripts only where needed

The panel and the interactive pieces bring their own small scripts. The rest of the site ships almost none, which is why it stays fast on a phone.

Themes in CSS

Palettes, dark mode and corners are a handful of CSS variables. Switching costs nothing and your choice is applied before the first paint, so it never flashes.

Want a site like this? → Why we build with Astro