Movement, where it earns its place.

Every effect on this page is a shortcode you type into a page - no scripts, no add-ons, no designer on call. Scroll down slowly: things arrive as you reach them. Each one shows the line that made it.

Start scrolling The page editor

Kind to everyoneVisitors whose device asks for reduced motion get the content without the movement. It is one switch in System > Effects.

1 - Scroll reveals

Cards that arrive one after another.

A row of columns with a staggered reveal: each slides up 150 milliseconds after the one before.

Forged in Sheffield

Every ACME chisel starts as a bar of steel on Neepsend Lane. (Demo copy.)

Checked by hand

Planes are checked flat to five hundredths of a millimetre before they leave.

Sent next day

Order by 3pm and it leaves the same day, in plastic-free packing.

[row reveal reveal-mode="stagger" reveal-animation="slide-up" reveal-stagger="150"]
[col][card layout="icon-top" icon="tool" title="Forged in Sheffield"]...[/card][/col]
[col]...[/col]
[col]...[/col]
[/row]

2 - Text

Headlines that write themselves.

Typewriter, scripted

[scribe loop="true" loop-delay="2000"]
[render]Tools that last a lifetime.[/render]
[wait]1400[/wait]
[redraw]Tools that last two.[/redraw]
[/scribe]

Scramble

Precision, by hand.

[scramble speed="40"]Precision, by hand.[/scramble]

3 - Numbers

Counters that count up as they come into view.

1962founded

110staff by 2027

6000catalogues posted

99.4%dispatched on time

[counter to="6000" duration="2200" separator="," /]
[counter to="99.4" decimals="1" suffix="%" /]

ACME's figures are as made up as ACME.

4 - Countdown

Counting down to something.

A live countdown to a date - here, the (imaginary) opening of ACME's Attercliffe workshop on 1 June 2027. Also handy for sales, launches and event deadlines. This one is a component that ships with every site.

[component name="countdown-timer" target="2027-06-01T09:00:00" /]

5 - Particles

Stars, sparks and butterflies, kept to their box.

Wrap anything and the effect stays inside it. Leave the closing tag off and it covers the whole page instead - use sparingly.

Night shift at the forge

Spring catalogue out now

[twinkle count="60" shape="star" colour="#f5d9a8"]Night shift at the forge[/twinkle]
[butterflies palette="meadow" density="low"]Spring catalogue out now[/butterflies]

6 - Fireworks and celebrations

Hover for a firework.

A CSS firework that bursts when you point at it. For the big occasions,

plays whichever seasonal celebration is due - Christmas, Halloween, Bonfire Night, St George's Day and more - and nothing when none is.

[firework type="burst" colour="primary" size="lg" hover /]
[celebrate theme="auto" /]

All of them, catalogued

Every effect has a page in the admin.

System > Effects lists them by kind - entrance, animation, text, visual, celebrations - with a live example and the settings for each. Effects can also be added straight onto a card, hero, banner, column or button as a flag: [button pulse].

The page editor Card designs More examples