Designing with motion that sells

Motion is the fastest way to make a website feel premium — and the fastest way to make it feel cheap. The difference is intention.

Here’s how VoidCraft thinks about animation.

Motion should mean something

Every animation in the theme answers a question:

• Reveal-on-scroll says “this is new, look here.”
• The hover lift on cards says “this is interactive, click me.”
• The counting stats say “these numbers are real, watch them add up.”

When motion maps to meaning, it guides the eye instead of fighting it.

Respect the viewer

Not everyone wants movement. VoidCraft honours the prefers-reduced-motion setting at the CSS level:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

The scroll gallery even falls back to a simple swipeable row. Accessibility and delight aren’t a trade-off.

Performance is part of the design

All animations run on the compositor-friendly properties — transform and opacity — so they stay buttery at 60fps. Scroll handlers are throttled with requestAnimationFrame, and nothing animates that isn’t on screen.

A janky animation is worse than no animation. Smoothness is the luxury.

Easing is everything

The whole theme leans on one expressive curve:

--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

It starts fast and settles gently — the motion equivalent of a confident, unhurried gesture. Swap it in global.css and the entire site changes character.

Less, but better

You’ll notice VoidCraft never animates everything at once. Sections breathe. Reveals are staggered by 60–100ms. The restraint is the point: it’s what separates premium from busy.

Motion, used well, doesn’t just decorate a site — it earns trust and moves people to act.