Motion

How a site behaves when somebody arrives, scrolls, and points at things. The same page can feel stately, warm or urgent depending on almost nothing else, so it is worth choosing deliberately rather than inheriting.

One section swallowing the next

A soft shape swells as you scroll until it has taken the whole screen, carrying the next section's colour in with it. Replaces the hard line between two sections with something that reads as one surface.

Scroll on

The season turns

The same shape, rising from a corner

Identical to the one above except for where it starts. Growing up out of a bottom corner feels like something arriving; growing from the middle feels like something opening.

Applications open

Twelve fellowships

Three shapes running together

Several soft shapes arriving one after another and merging into one field. The most liquid of the set, and the most expensive — three is the sensible ceiling.

Three weeks

Everything at once

A colour rising like water

The next colour climbs the page behind a slow-moving waterline. Quieter than the shapes above and much better under long text, because nothing ever crosses the words.

Between chapters

The night concerts

Arriving in columns

The next colour comes down as a row of columns, one after another. Hard-edged where the others are soft — it suits a programme or a schedule, because the columns echo a grid the page already has.

The full programme

Nine concerts

Movement you can add anywhere

Small, composable behaviours — how a section arrives, what a heading does to catch the eye, how something answers a tap. Most sites use two or three of these and leave the rest.

On a light page

How a page arrives

Headline rise

The opening line lifts into place as the page loads.

Nineteen summers of chamber music

Reveal on scroll

Sections fade up as you reach them, so the page unfolds.

Auditions open 1 September

Soft focus

Text settles out of a blur. Quiet and unhurried.

Settling into focus

Letters draw in

Wide-set type closes to its final spacing.

Letterforms close in

Curtain

Opens from the centre outward, like a stage.

A season announcement.

Wipe

Sweeps in from one edge.

A programme note.

Hinge

Tips down from the top, like a card being placed.

An artist biography.

Emphasis

Shimmer

A highlight travels through the words. Good for a deadline.

Applications close soon

Two-tone type

The headline shifts colour across its length.

A season of early music

Glowing frame

Light travels around the border. Draws the eye to one card.

Season tickets on sale now.

Underline on hover

A line draws itself under a link.

Read the programme notes

Typewriter

Words appear as if typed. Best used once, sparingly.

Auditions now open…

Glitch

A brief digital fracture. Bold — suits contemporary programming.

Transmission

Atmosphere

Layered backdrop

Slow drifting colour, film grain and a soft vignette behind your hero image.

Chamber Music Festival

Scrolling names

A continuous band of artists, works or sponsors.

BrahmsLigetiCaroline ShawJosquinBrahmsLigetiCaroline ShawJosquin

Ambient movement

Barely-there motion that keeps a page feeling alive.

FloatBreathePulseDrift

Response to touch

Lift

Cards rise toward you when pointed at.

Sheen

A soft gloss crosses the surface.

Tilt

A slight three-dimensional turn.

Spotlight

A downlight warms the card.

Press

Buttons give slightly under a click.

Attention ring

A pulse that draws the eye to one action.

While you wait

Loading placeholders

Content outlines shimmer while a page fetches.

Working indicator

Three dots for a short wait.

On a dark page