Motion

Catalogue

Every motion piece in the system, live. Each is a port of the React Bits effect the dashboard or the website uses, running on the one GSAP clock and respecting reduced motion.

SplitTextText

Pieces of a line rise in from behind a clip.

Used in: Dashboard greeting

import SplitText from '$ds/motion/SplitText.svelte' Options and rules →

How the business is breathing

BlurTextText

Words come out of a blur and settle on a spring.

Used in: Vitals title, website headings

import BlurText from '$ds/motion/BlurText.svelte' Options and rules →
Explore capabilities →
ShinyTextText

A band of light sweeps across quiet text.

Used in: Overview “Explore” link

import ShinyText from '$ds/motion/ShinyText.svelte' Options and rules →
Built to last
GradientTextText

Colours slide through the letters.

Used in: Website headline

import GradientText from '$ds/motion/GradientText.svelte' Options and rules →
For your finances
RotatingTextText

One word swaps for the next, letter by letter.

Used in: Website product line

import RotatingText from '$ds/motion/RotatingText.svelte' Options and rules →
€0
countUpText

Figures count to their value, and between values.

Used in: Every money figure

import { countUp } from '$ds/motion/count.js' Options and rules →
QuotesJobsCrewsInvoices
revealScroll

Content slides and fades in once, on arrival.

Used in: Website bento, lists

import { reveal } from '$ds/motion/effects.js' Options and rules →
MagnetHover

A call to action leans toward the pointer.

Used in: Overview actions, website buttons

import Magnet from '$ds/motion/Magnet.svelte' Options and rules →
Move the pointer over me
spotlightHover

A soft light follows the pointer across a card.

Used in: KPI, project and client cards

import { spotlight } from '$ds/motion/effects.js' · <Card spotlight> Options and rules →
clickSparkHover

Short lines burst from a click.

Used in: The whole dashboard

import { clickSpark } from '$ds/motion/effects.js' Options and rules →