Interactions and Motion That Respect Users

Interactions should add presence, not noise. In Bricks, prefer CSS transforms and opacity first, then layer Bricks interactions only when CSS cannot express the trigger. Motion that clarifies hierarchy feels premium. Motion that animates everything equally feels like a template demo.

This guide covers a safe animation palette, when to use Bricks interactions, and how to respect prefers-reduced-motion without making the reduced experience feel broken. It also covers blog-template restraint, because editorial pages often inherit marketing-page motion they never asked for.

A safe animation palette

Stick to transform and opacity. Avoid animating width, height, top, or left. Avoid transition-all — it makes accidental property changes expensive and unpredictable.

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

Stagger children slightly if the group reads as a list. Keep offsets small — 8 to 16 pixels — so the effect feels like arrival, not a slide show. Longer distances read as playful marketing, which may be wrong for documentation-style posts.

When to use Bricks interactions

Use builder interactions for click toggles, scroll-linked class adds, and hover swaps that change content state. Do not use them for continuous decorative motion that CSS keyframes already handle. Every interaction is another place to forget the reduced-motion path.

• FAQ accordion open/close
• Mobile nav toggle
• Scroll reveal class hooks
• Tabs and simple content swaps
• Conditional visibility tied to a real user action

If an effect can be expressed as a CSS :hover or :focus-visible state, prefer that. Native CSS is easier to reason about in code review and usually cheaper at runtime.

Reduced motion is not optional

Always provide a path that removes or minimizes motion. That can mean a CSS media query that short-circuits transitions, plus a JavaScript guard that skips observers and parallax.

const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (!mq.matches) {
  // attach scroll reveal observers
  document.querySelectorAll('.reveal').forEach((el) => {
    // IntersectionObserver setup
  });
} else {
  document.querySelectorAll('.reveal').forEach((el) => {
    el.classList.add('is-in');
  });
}

The reduced-motion experience should still show content immediately and keep essential UI state changes (open/closed menus) without large travel distances. Hiding content behind motion is an accessibility failure, not a flourish.

Hero and signature motion

Signature effects — cursor trails, mortar-joint glows, animated SVG icons — are brand assets when gated to fine pointers and non-reduced-motion contexts. They should never block content readability. If the hero text is competing with a particle system, the particle system loses.

Test signature motion on mid-tier laptops, not only on the machine that designed them. A 45fps glow feels worse than no glow. Also test with the OS reduced-motion setting enabled before launch, not after a client email.

Performance notes

Prefer compositor-friendly properties. Limit the number of simultaneously animating elements. Pause offscreen animations when practical. Beware of scroll handlers that read layout every frame; use IntersectionObserver instead of scroll-event style recalculation.

If the animation does not clarify hierarchy, delete it.

Will-change is not a free performance pass. Apply it sparingly and remove it when the animation ends, or you can increase memory pressure on long pages.

Editorial motion on blog templates

Blog archives and singles usually need less motion than marketing pages. A light reveal on cards is enough. Avoid autoplaying carousels of related posts that fight reading. Code blocks should remain static and selectable — never animate monospace text into place.

Comments and forms should not inherit playful motion. People writing a comment need stable layout and clear focus, not a bouncing submit button.

QA checklist for interactions

• Keyboard users can reach and operate every toggle
• Focus styles remain visible during and after animation
• Reduced-motion setting yields immediate content
• No layout shift when web fonts swap mid-animation
• Touch devices do not rely on hover-only reveals for critical content
• Screen reader announcements still make sense when accordions open

Motion is part of the design system. Treat it with the same restraint you apply to color: primary accents are rare on purpose. When interactions respect users, Bricks sites feel considered instead of busy.

Document motion decisions

Keep a short motion notes section in your design system: which pages get signature effects, which templates stay quiet, and which interactions are considered essential. Without that list, every new landing page reinvents the same hover experiments.

Ship fewer, better interactions

A useful launch constraint: allow at most three intentional motion patterns per marketing template, and one quiet pattern on editorial templates. If a fourth effect appears during review, something else has to go. Scarcity keeps motion meaningful and keeps performance budgets intact.