Effect shortcodes

These shortcodes add movement: things that fade in as the page scrolls, text that types itself, numbers that count up, sparkles, light beams, and full-page celebrations for the seasons. Each one has its own section below, with an example to copy and every attribute it takes.

Three things are true of all of them:

• In the editor the Effects button in the toolbar, beside Insert, has a form and a live preview for each. Right-click in the text for Add effect… and Celebrations…, or on an effect tag to change it.
• Reduced motion is respected. A visitor whose device asks for less movement sees the content still.
• Many can be added to another tag instead of wrapped around it - see "Adding an effect to a card, hero, banner, column or button" at the end.

reveal - appear on scroll

What is inside appears with an animation when it scrolls into view.

[reveal animation="slide-up" duration="600"]
## Our story
It started in a shed.
[/reveal]

Attribute	What it does
animation	fade, slide-up, slide-down, zoom or flip
duration	How long it takes, in milliseconds
delay	A wait before it starts, in milliseconds
threshold	How much has to be in view before it starts, 0 to 1
once	false plays it every time it comes into view, not just the first

Without animation, duration or threshold, the site's own settings under Effects are used (a 600 millisecond fade unless you have changed them).

To bring the columns of a row in one after another, use [row reveal] - see Layout shortcodes.

breathe - gentle, continuous movement

What is inside gently grows and shrinks, continuously.

[breathe amplitude="6" duration="3000"]
[button href="/offer" variant="primary"]See the offer[/button]
[/breathe]

Attribute	What it does
amplitude	How far it moves, in pixels (default 6)
duration	The length of one breath, in milliseconds (default 3000)

pulse - a repeating beat

A repeating beat - stronger than breathe.

[pulse scale="1.05" duration="2000"]
[badge variant="danger"]Live[/badge]
[/pulse]

Attribute	What it does
scale	How large it grows on each beat (default 1.05, which is 5% larger)
duration	The length of one beat, in milliseconds (default 2000)

shake - a single shake

What is inside shakes once.

[shake intensity="5" direction="horizontal"]
Last few tickets!
[/shake]

Attribute	What it does
intensity	How far it moves, in pixels (default 5)
duration	How long it lasts, in milliseconds (default 500)
direction	horizontal (default) or vertical

animate - simple animations

Plays one of a set of simple animations on what is inside.

[animate type="fade-in-up" duration="slow"]
Welcome.
[/animate]

Attribute	What it does
type	Which animation. Required: fade-in, fade-in-up, fade-in-down, fade-in-left, fade-in-right, slide-in-up, slide-in-down, zoom-in, zoom-out, bounce, pulse, shake, spin or flip
duration	fast, normal (default), slow or slower
delay	A wait before it starts: 100, 200, 300, 500 or 1000 milliseconds
repeat	once (default) or infinite

scribe - text that types itself

Text that types itself, like a typewriter. It can also type, pause, delete and type something else, in a loop.

The simple form types what is between the tags:

[scribe speed="50"]
Build smoother experiences, one letter at a time.
[/scribe]

The script form plays a sequence of steps:

[scribe loop="true" loop-delay="2000"]
[render]We build things that matter.[/render]
[wait]1200[/wait]
[redraw]We design for humans.[/redraw]
[/scribe]

Attribute	What it does
mode	What is typed at a time: typewriter (a letter, the default), word or sentence
effect	How each piece arrives: none (default), fade, bounce or glow
speed	Milliseconds per piece typed (default 50). 0 shows the text at once
delete-speed	Milliseconds per piece deleted (default 30)
cursor	false hides the cursor
cursor-type	caret (default), block or underline
cursor-char	Your own cursor character
cursor-blink	false stops the cursor blinking
loop	true repeats for ever; a number repeats that many times
loop-delay	The wait between repeats, in milliseconds (default 1000)
pause-on-hover	true pauses while the pointer is over the text
auto-start	false waits for the visitor to press Play
controls	true shows Play, Pause and Replay buttons
respect-motion-preference	false types even for visitors who ask for reduced motion. Otherwise they see the text without typing
font, size, weight, colour, italic, align, line-height, spacing	The lettering of the typed text

The steps of a script:

Step	What it does
[render]…[/render]	Types the text. Takes its own effect
[wait]1200[/wait]	Pauses for that many milliseconds
[undo all="true" /]	Deletes everything typed so far. [undo count="3" /] deletes the last three pieces
[redraw]…[/redraw]	Deletes everything, then types the new text

In a script, only the steps count; words written between them are ignored. Insert > Scribe builds a script on a timeline.

scramble - text out of random characters

Text that appears through a flurry of random characters, settling into the real words.

[scramble speed="50"]Access granted[/scramble]
[scramble loop loop-delay="3000"]Now hiring[/scramble]

Attribute	What it does
speed	Milliseconds per character (default 50)
loop	Switch: play again and again. Without it, the text scrambles once
loop-delay	With loop: how long the words stay still between plays, in milliseconds (default 2000)

counter - a number that counts up

A number that counts up (or down) to its target.

[counter to="1250" suffix="+" separator="," /]
[counter from="0" to="99.9" decimals="1" suffix="%" duration="3000" /]

Attribute	What it does
to	The number to reach
from	The number to start from (default 0)
duration	How long the count takes, in milliseconds (default 2000)
prefix, suffix	Words or symbols before and after the number, such as £ or %
decimals	How many decimal places
separator	The thousands separator, such as ,

ripple - a ripple on click

A ripple spreads from wherever the visitor clicks inside it.

[ripple colour="#7c6af7"]
[card title="Click me"]A ripple follows your click.[/card]
[/ripple]

Attribute	What it does
colour	The ripple's colour (default: a soft white)
duration	How long it lasts, in milliseconds (default 600)
opacity	How strong the ripple starts, from 0 (invisible) to 1 (solid, the default). Use it with a solid colour: colour="#7c6af7" opacity="0.3"

twinkle - sparkles

Sparkling particles over what is inside.

[twinkle count="80" shape="star" colour="#ffffff"]
[card title="Winter sale" variant="dark"]
Everything reduced until Sunday.
[/card]
[/twinkle]

Attribute	What it does
count	How many particles (default 100)
shape	star (default), circle or square
colour	Their colour
min-size, max-size	Their smallest and largest size, in pixels (default 1 and 3)

ambient - a moving background

A slowly moving background behind what is inside.

[ambient type="aurora" speed="slow"]
## A calm heading
[/ambient]

Attribute	What it does
type	Which background. Required: float-blobs, float-orbs, float-particles, rotate-glow, rotate-dual, rotate-spotlight, wave, ripple or aurora
speed	slow, normal (default) or fast
intensity	subtle (default) or intense

ticker-tape - falling paper strips

Coloured paper strips fall from the top, sway and fade. Self-closing, it covers the whole page; as a pair, it stays inside what it wraps.

[ticker-tape palette="festive" /]

[ticker-tape palette="gold" burst="true"]
## We won!
[/ticker-tape]

Attribute	What it does
palette	theme (default), rainbow, gold, silver, festive, pastel or mono
density	How much falls (default 50)
speed	A multiplier: 2 is twice as fast
sway	How far the strips drift sideways, in pixels (default 60)
burst	true throws one burst instead of falling continuously
burst-count	How many strips in a burst (default 150)

butterflies - butterflies

Butterflies wander up the page, wings flapping. Self-closing, they cover the whole page; as a pair, they stay inside what it wraps.

[butterflies palette="meadow" /]

Attribute	What it does
palette	meadow (default), theme, rainbow, pastel, festive, gold, silver, mono, sunset, ocean, forest, bridal or firefly
density	How many (default 18)
speed	A multiplier for how fast they fly
wander	How erratically they steer
rise-speed	How strongly they drift upward
flap-speed	How fast the wings beat
min-size, max-size	Smallest and largest wingspan, in pixels (default 14 and 26)
two-tone	false gives single-colour wings
burst	true releases one group instead of a steady flow
burst-count	How many in a burst (default 40)

strobe - sweeping light beams

Beams of light sweep across the page - a club, a concert, a searchlight. Self-closing, it covers the whole page; as a pair, it stays inside what it wraps.

[strobe preset="searchlight" /]
[strobe preset="club" flicker="false" duration="10000" /]

Attribute	What it does
preset	club (default), concert, police, searchlight, scanner or mood. The other attributes adjust it
motion	sweep (back and forth, the default) or rotate (a full circle)
speed	A multiplier
sweep-arc	How wide the beams swing, in degrees (default 100)
beam-width	How wide each beam is, in degrees (default 16)
intensity	Brightness, 0 to 1 (default 0.7)
flicker	false keeps the beams steady
hz	Flashes per second when flickering (default 10)
colours	Your own colours, as comma-separated hex values
duration	Stop after this many milliseconds. Without it, it runs until the visitor leaves

Take care with flicker. Flashing faster than about 3 times a second can trigger seizures in people with photosensitive epilepsy. On a public page, switch flicker off or set hz to 3 or less.

firework and fireworks - fireworks

[firework] is a single firework. [fireworks] is a display: wrap it around several.

[firework type="burst" colour="rainbow" size="lg" /]

[fireworks]
[firework type="burst" colour="primary" /]
[firework type="sparkle" colour="warning" /]
[firework type="trail" colour="danger" /]
[/fireworks]

Attribute	What it does
type	burst (default), sparkle or trail
colour	rainbow (default), primary, info, success, warning or danger
size	sm, md (default) or lg
continuous	Switch: keeps it going
hover	Switch: plays only while the pointer is over it

[fireworks] takes no attributes.

celebrate - a full-page celebration

A full-page celebration drawn over the page: falling snow, confetti, fireworks, characters walking across. The page underneath stays clickable.

[celebrate theme="auto" /]
[celebrate theme="new-year" intensity="medium" firework="off" /]
[celebrate message="Best wishes for {year}!" sparkler-year="2027" /]
[celebrate character="snowman" size="large" /]

Attribute	What it does
theme	Which celebration (the names are in the next section), or auto to show whichever is in season today
intensity	light, medium (default) or heavy
falling-only	true keeps only what falls (snow, confetti, leaves) and hides the decorations and greeting
message	Your own greeting, written in the sky by a sparkler. Up to 120 characters; {year} writes the year
sparkler-style	The lettering: stroke (default) or cursive
sparkler-colour	gold (default) or silver
sparkler-greeting	best-wishes writes "Best wishes for" and the year in place of the seasonal greeting
sparkler-year	The year to write (default: this year)
sparkler-message	off hides the greeting
character	Shows one character where the tag is written, at any time of year, in place of the full celebration
size	The character's height: small, medium (default), large, xlarge, or a number of pixels
animate	false shows the character standing still
facing	right (default) or left

The characters: elf, peeing-elf, thieving-elf, mooning-elf, leprechaun, mooning-leprechaun, bagpiper, knight, dragon, welsh-dragon, cupid, robin, snowman.

Each celebration also has switches for its own decorations, listed in the next section: firework="off" on New Year, bunny="off" on Easter, and so on.

With theme="auto", each celebration runs on its own dates:

Celebration	Shown automatically
Christmas	1 to 30 December
New Year	31 December to 2 January
Chinese New Year	Seven days from Chinese New Year's Day
Valentine's Day	9 to 14 February
St David's Day	24 February to 1 March
St Patrick's Day	12 to 17 March
Easter	The Tuesday before Easter to Easter Monday
St George's Day	18 to 23 April
Halloween	26 to 31 October
Guy Fawkes Night	1 to 5 November
St Andrew's Day	25 to 30 November
Summer Garden	June to August
Autumn	September to November
Winter	December to February

A specific day wins over a season. Naming a theme shows it at any time of year.

The named celebrations

Every celebration has a tag of its own, which is shorter to write than [celebrate theme="…" /] and does the same thing. All the [celebrate] attributes work on them.

[christmas /]
[christmas snow-only="true" /]
[new-year sparkler-style="cursive" sparkler-colour="silver" /]
[easter intensity="light" bunny="off" /]
[birthday message="Happy Birthday, Sarah!" /]
[make-it-rain intensity="heavy" duration="8000" /]

Tag	What it shows	Its own switches (="off" hides one)
[christmas /]	Snow, trees, wreaths, snowmen, Santa's sleigh, a "Merry Christmas" sparkler	trees, wreaths, northstars, snowmen, sleigh, elf, train, firework, robin. snow-only="true" leaves just the snow
[new-year /]	Confetti, streamers, fireworks, balloons, a midnight clock, a "Happy New Year" sparkler	confetti, streamer, firework, balloon, midnight-clock
[chinese-new-year /]	A dragon, red lanterns, red and gold confetti, fireworks, a greeting in Chinese	confetti, dragon, lantern, firework
[valentines /]	Hearts, rose petals, kisses, garlands, envelopes, a cupid, a neon sign	heart, rose-petal, sparkle, lips, heart-garland, butterfly, envelope, heart-moon, cupid, love-letter, neon-sign
[st-patricks /]	Shamrocks, gold coins, a pot of gold, a rainbow, a leprechaun	clover-petal, shamrock, gold-coin, sparkle, pot-of-gold, twinkling-star, leprechaun, rainbow, banshee, moon
[st-davids /]	Daffodils, leeks, a harp, a flag, the Welsh dragon	daffodil-petal, daffodil, spring-sparkle, leek, daffodil-field, twinkling-star, welsh-dragon, flag, harp, leek-bundle
[st-georges /]	Roses, oak leaves, a knight, a dragon, a castle	rose-petal, tudor-rose, oak-leaf, sparkle, english-rose, twinkling-star, knight, dragon, castle, shield, st-georges-cross
[st-andrews /]	Heather, thistles, a bagpiper, the saltire	heather-petal, heather, saltire-sparkle, thistle, thistle-plant, twinkling-star, bagpiper, saltire-flag, tartan-pattern, highland-scene
[easter /]	Blossom, flowers, butterflies, eggs and a hopping bunny	blossom, flower, butterfly, easter-egg, bunny
[summer-garden /]	Blossom, flowers, butterflies, bees and ladybirds	blossom, flower, butterfly, bee, ladybird
[halloween /]	Pumpkins, bats, ghosts, spiders, gravestones, a witch, a haunted house	pumpkin, bat, ghost, spider, gravestone, jack-o-lantern, scarecrow, twinkling-star, haunted-house, moon, witch, cauldron, floating-pumpkin, lightning
[guy-fawkes /]	Bonfires, a guy, Catherine wheels, rockets and fireworks	ember, spark, bonfire, guy-effigy, catherine-wheel, roman-candle, sparkler-bundle, firework, rocket, burst, moon, lightning
[autumn /]	Falling leaves, autumn trees, acorns and mushrooms	maple-leaf, oak-leaf, tree, acorn, mushroom
[winter /]	Snowflakes, frosted pines, snowdrifts, icicles and stars	snowflake, pine, snowdrift, icicle, star
[graduation /]	Confetti, tossed caps and diplomas	confetti, mortarboard, diploma
[birthday /]	Cake, balloons and confetti	confetti, balloon, cake
[anniversary /]	Rings, hearts and ribbon bows	heart, rings, ribbon
[greeting /]	Only a sparkler greeting: give it a message
[make-it-rain /]	Rain, with splashes on the ground. Takes duration in milliseconds (default 8000; 0 keeps raining)	raindrop, splash
[money-rain /]	Falling banknotes. Takes duration

Good to know:

• A message can be given on Christmas, New Year, Chinese New Year, Graduation, Birthday and Anniversary, as well as on [celebrate] and [greeting].
• Christmas and St Patrick's Day have a few cheeky characters that are off unless you ask for them: peeing-elf="true", thieving-elf="true" and mooning-elf="true" on Christmas, mooning-leprechaun="true" on St Patrick's Day.
• Graduation, Birthday, Anniversary, Greeting, Make it rain and Money rain never start by themselves on a date.
• To write a quotation mark or a square bracket in a hand-written message, use ", [ and ]. The editor's form does this for you.

Adding an effect to a card, hero, banner, column or button

Instead of wrapping a tag in an effect, write the effect's name on the tag as a switch. Its settings take the effect's name in front: reveal-animation="zoom" sets the reveal's animation.

[card title="Why us" reveal reveal-animation="zoom" reveal-duration="600"]
Fast, file-based and friendly.
[/card]

[button href="/contact" pulse]Get in touch[/button]

[card title="New" animate animate-type="zoom-in" ambient ambient-type="aurora"]
A card that zooms in, on a moving background.
[/card]

On this tag	These effects can be added
[card], [box]	reveal, breathe, pulse, shake, twinkle, ripple, animate, ambient
[hero]	reveal, breathe, pulse, twinkle, ticker-tape, butterflies, strobe, animate, ambient
[banner]	reveal, pulse, shake, animate, ambient
[col]	reveal, breathe, ripple, animate
[button]	breathe, pulse, shake, ripple, animate

animate and ambient take the same settings as their tags: animate-type, animate-duration, animate-delay, animate-repeat, and ambient-type, ambient-speed, ambient-intensity. Written with no type, animate fades the tag in and ambient gives it the aurora background.