WEB BUILDER / MOTION

Motion as proof, not decoration.

The motion primitives the kit ships are opt-in, CSS-first where possible, and all respect prefers-reduced-motion. Scroll the page to see each variant trigger; reduce motion at the OS level to see them disable.

Activate this capability Back to templates

COMPONENT · ANIMATE ON SCROLL — 7 VARIANTS

Reveal on viewport entry.

Each card below uses a different variant. A shared IntersectionObserver toggles is-visible; CSS does the animation. Triggers once by default; replay on re-entry available via once: false.

fade

Opacity 0 → 1.

fade-up

Slide up 24px + fade.

fade-down

Slide down 24px + fade.

slide-left

Translate from −32px + fade.

slide-right

Translate from +32px + fade.

scale

Scale 0.94 → 1 + fade.

blur-in

Blur 8px → 0 + fade.

COMPONENT · GRADIENT BLOB

Ambient gradient layer behind any section.

1-3 large blurred colour blobs that drift slowly. Sits behind any container with position: relative; overflow: hidden. Brand-token aware (defaults to brand-primary + brand-accent + brand-secondary). The background of this section is rendered by 3 blobs.

UTILITY · HOVER EFFECTS

5 hover utility classes — opt-in, brand-token aware.

Apply by adding the class. All honour prefers-reduced-motion. Hover or focus any card below.

.hover-lift

translateY(-4px) + shadow on hover.

.hover-glow

Accent outline + glow on hover.

.hover-scale

scale(1.03) on hover.

.hover-tilt

3D rotateX/Y perspective.

.hover-shine

Diagonal shimmer sweep (uses ::before).

Hero motion variants — already shown on heroes page.

Three Hero motion options are demonstrated on the heroes page: ken-burns, parallax (CSS scroll-driven), and gradient-overlay. Opt in via the motion prop on Hero variant="cinematic".

See hero motion variants →

Five other showcase surfaces.

← Back to templates · Heroes · Proof blocks · Marketing · Article UX