Domma Effects

Reveal

Triggers a scroll-activated entrance animation when the element enters the viewport. Great for headers, cards, and feature sections.

[reveal animation="fade" duration="600" delay="0" threshold="0.1" once="true"]
## Your heading or content

Markdown **works** inside.
[/reveal]

Attribute	Default	Description
animation	fade	fade, slide-up, slide-down, zoom, flip
duration	600	Animation duration in milliseconds
delay	0	Delay before animation starts (ms)
threshold	0.1	Fraction visible before triggering (0–1)
once	true	Only animate once (true/false)

Tip: Use delay to stagger multiple reveal blocks for a cascade effect, or use [row reveal] below for automatic staggering.

Row Reveal

Add reveal to a [row] shortcode to automatically animate child columns into view one by one as the row scrolls into the viewport. No need to wrap each column in a separate [reveal] block.

[row gap="4" reveal reveal-mode="stagger" reveal-animation="slide-up"]
[col]First to appear[/col]
[col]Second to appear[/col]
[col]Third to appear[/col]
[/row]

Attribute	Default	Description
reveal	—	Flag — enables scroll-triggered reveal on child columns
reveal-animation	slide-up	slide-up, slide-down, slide-left, slide-right, fade, zoom, flip
reveal-mode	stagger	stagger (overlapping) or sequence (one after another)
reveal-duration	400	Animation duration in milliseconds
reveal-stagger	60	Delay between each child column (ms)
reveal-delay	0	Initial delay before first animation (ms)
reveal-direction	ltr	ltr (left to right) or rtl (right to left)

Fade with right-to-left direction

[row gap="3" reveal reveal-animation="fade" reveal-direction="rtl"]
[col]Appears third[/col]
[col]Appears second[/col]
[col]Appears first[/col]
[/row]

Zoom with initial delay

[row gap="4" reveal reveal-animation="zoom" reveal-delay="200" reveal-stagger="100"]
[col]Zooms in after 200ms[/col]
[col]Zooms in after 300ms[/col]
[/row]

Breathe

Continuous gentle scaling — makes elements feel alive. Ideal for hero images or call-to-action buttons.

[breathe amplitude="8" duration="3000"]
Content that breathes.
[/breathe]

Pulse

A repeating scale pulse — stronger than breathe, good for alerts or badges.

[pulse scale="1.05" duration="1000"]
Pulsing content.
[/pulse]

Shake

One-shot horizontal or vertical shake. Use for error states or attention-grabbing elements.

[shake intensity="5" duration="500" direction="horizontal"]
This will shake.
[/shake]

CSS Animate

Applies Domma CSS animation utility classes — no JavaScript required.

[animate type="fade-in-up" duration="normal" delay="200" repeat="once"]
Content here.
[/animate]

Attribute	Values
type	fade-in, fade-out, fade-in-up, fade-in-down, fade-in-left, fade-in-right, slide-in-up, slide-in-down, slide-in-left, slide-in-right, zoom-in, zoom-out, bounce, pulse, shake, spin, rotate-in, flip
duration	fast, normal, slow, slower
delay	100, 200, 300, 500, 1000
repeat	once, infinite, repeat-2, repeat-3

Typewriter (Scribe)

Types text character by character. Supports a simple one-shot mode or a full action script for sequenced multi-step animations.

Simple mode

[scribe speed="50" cursor="true" loop="false"]
Your text appears letter by letter.
[/scribe]

Script mode — action shortcodes

[scribe loop="true" loop-delay="2000"]
[render effect="fade"]Hello, world![/render]
[wait]1500[/wait]
[undo /]
[render]Something else entirely.[/render]
[/scribe]

When any [render], [wait], or [undo] shortcode is present inside the body, script mode activates automatically.

Action	Syntax	Description
[render]	[render effect="fade"]Text[/render]	Type the text. Optional effect: fade, slide (for appearance)
[wait]	[wait]1500[/wait]	Pause for N milliseconds (number) or a CSS duration string (e.g. 2s)
[undo]	[undo /] or [undo count="3" /] or [undo all="true" /]	Delete the last render action, N renders, or all renders

Attribute	Default	Description
speed	50	Typing speed (ms per character)
delete-speed	30	Deletion speed (ms per character)
cursor	true	Show blinking cursor (true/false)
cursor-char	|	Character to use as cursor
cursor-type	—	Cursor style (block, underline, beam)
loop	false	Repeat script continuously (true/false)
loop-delay	1000	Pause before repeating (ms)
pause-on-hover	false	Pause animation while hovered (true/false)

Scramble

Reveals text through a character-scramble animation. Great for tech/data aesthetics.

[scramble speed="50" loop="false"]
Scrambled reveal text.
[/scramble]

Counter

Animates a number from from to to. Use in stat sections. This shortcode is self-closing.

[counter to="100" from="0" prefix="$" suffix="+" duration="2000" /]

Attribute	Default	Description
to	0	Target number
from	0	Starting number
duration	2000	Animation duration (ms)
prefix	—	Text before the number (e.g. $)
suffix	—	Text after the number (e.g. +)
decimals	0	Decimal places to display
separator	—	Thousands separator (e.g. ,)

Tip: Counters work great in a grid — place 3–4 counter spans in a [grid cols="4"] for a stats section.

Ripple

Click-triggered ripple effect on the element. Good for interactive content blocks.

[ripple colour="#7c6af7" duration="600" opacity="0.3"]
Click this area for a ripple.
[/ripple]

Twinkle

Generates animated particle effects inside the element. Use for hero sections or decorative areas.

[twinkle count="80" shape="star" colour="#fff" min-size="2" max-size="6"]
Content beneath the particles.
[/twinkle]

Ambient Background

Applies animated CSS background classes — no JavaScript needed.

[ambient type="float-blobs" speed="slow" intensity="subtle"]
Content on animated background.
[/ambient]

Attribute	Values
type	rotate-glow, rotate-dual, rotate-spotlight, float-blobs, float-orbs, float-particles, wave, ripple, aurora
speed	slow, normal, fast
intensity	subtle, intense

Hero section with typewriter

[reveal animation="fade"]
# Welcome to our site

[scribe speed="40" cursor="true"]
We build things that matter.
[/scribe]
[/reveal]

Stats row with counters

[reveal animation="slide-up"]
[grid cols="3" gap="4"]
[col]
## [counter to="500" suffix="+" /]
Happy clients
[/col]
[col]
## [counter to="12" suffix=" years" /]
In business
[/col]
[col]
## [counter to="98" suffix="%" /]
Satisfaction
[/col]
[/grid]
[/reveal]

Staggered card reveal

[row gap="4" reveal reveal-animation="slide-up" reveal-stagger="100"]
[col]
[card title="Feature One"]First card content.[/card]
[/col]
[col]
[card title="Feature Two"]Second card content.[/card]
[/col]
[col]
[card title="Feature Three"]Third card content.[/card]
[/col]
[/row]

Hero with ambient background

[ambient type="aurora" speed="slow" intensity="subtle"]
[reveal animation="zoom"]
# Your headline here

A compelling subheading that draws users in.
[/reveal]
[/ambient]

Christmas page with fireworks

[celebrate theme="christmas" intensity="medium" /]

[fireworks]
[firework type="burst" colour="rainbow" /]
[firework type="sparkle" colour="primary" /]
[/fireworks]

[reveal animation="fade"]
# Merry Christmas!
[/reveal]

Firework CSS only

Pure CSS particle effect — no JavaScript required. Works even without the plugin enabled. Use self-closing for standalone particles, or wrapping to apply the firework classes to content.

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

[firework type="sparkle" colour="primary"]
Click me for a burst!
[/firework]

Attribute	Values	Description
type	burst, sparkle, trail	Firework particle shape
colour	rainbow, primary, info, success, warning, danger	Particle colour theme
size	sm, md, lg	Particle size (default: md)
continuous	true / false	Loop the animation continuously
hover	true / false	Only animate on mouse hover

Fireworks Container CSS only

Groups multiple firework elements into a positioned overlay container.

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

Celebrate JS canvas

Canvas-based seasonal particle system. Auto-detects the active celebration based on today's date, or specify a theme manually. Skipped automatically when prefers-reduced-motion is active.

[celebrate theme="auto" intensity="medium" /]

[celebrate theme="christmas" intensity="heavy" /]

Theme	Active dates
auto	Detects automatically from the table below
christmas	1 Dec – 1 Jan (snowflakes)
halloween	26 Oct – 31 Oct (bats & pumpkins)
valentines	9 Feb – 14 Feb (hearts)
guy-fawkes	1 Nov – 5 Nov (fireworks)
st-patricks	12 Mar – 17 Mar (shamrocks)
st-davids	24 Feb – 1 Mar (daffodils)
st-georges	18 Apr – 23 Apr (roses)
st-andrews	25 Nov – 30 Nov (thistles)

Attribute	Values	Description
theme	auto, christmas, halloween, valentines, guy-fawkes, st-patricks, st-davids, st-georges, st-andrews	Theme to use (default: auto)
intensity	light, medium, heavy	Particle density (default: medium)

Tip: CSS fireworks ([firework]) render instantly with no JS. Canvas celebrations ([celebrate]) load the JS module on demand and degrade silently if unavailable.

Ticker Tape JS canvas

A canvas-based ticker-tape parade. Coloured rectangular strips fall from the top, sway, rotate, and fade. Self-closing form gives a full-page overlay; wrapping form scopes the parade inside a container. Skipped automatically when prefers-reduced-motion is active.

Full-page overlay

[ticker-tape palette="festive" /]

Container-scoped

[ticker-tape palette="gold" density="40"]
## Celebration content
The strips rain down inside this block only.
[/ticker-tape]

One-shot burst

[ticker-tape palette="rainbow" burst="true" burst-count="200" /]

Attribute	Default	Description
palette	theme	theme, rainbow, gold, silver, festive, pastel, mono, sunset
density	50	Average strips on screen at any moment (continuous mode)
speed	1	Fall speed multiplier (1 = default)
sway	60	Horizontal sway amplitude in pixels
rotation-speed	6	Maximum rotation degrees per frame
min-width / max-width	5 / 9	Strip width range in pixels
min-height / max-height	12 / 22	Strip height range in pixels
fade-start	0.55	Fraction of fall (0–1) before strips begin to fade
burst	false	Drop a single batch and stop respawning
burst-count	150	Strips emitted in burst mode
z-index	1	Canvas z-index

Tip: Self-closing [ticker-tape /] creates a fixed full-page overlay (position:fixed); the wrapping form attaches the canvas to the wrapping div so the parade is constrained to that block.