Build

Motion

Calm movement that supports the content. Every motion part renders in its final state first, moves only transform and opacity and rests with reduced motion.

On this page

Three rules#

Every motion part of the kit keeps the same three rules. You can rely on them, also when you combine parts.

Final state first. The server renders the finished state, nothing stays hidden without JavaScript.
Calm on request. With reduced motion everything stays in that final state.
No shifting. Only transform, opacity and filter move, the layout never jumps.

Reveal#

Reveal shows its content once it scrolls into view. Other attributes such as id or aria-* pass through to the element.

import { Reveal } from '@/components/ui/reveal';

<Reveal effect="rise">
  <h2>What we do</h2>
</Reveal>
<Reveal effect="fade" delay={120}>
  <p>Tax advice for founders and family businesses.</p>
</Reveal>

Prop	Type	Default	What it does
effect	'rise' \| 'fade' \| 'scale' \| 'blur'	'rise'	How the content appears.
delay	number	0	Wait in milliseconds once it is in view.
as	'div' \| 'li' \| 'span'	'div'	The element it renders.

aiw add @ai-website/reveal

Stagger, Parallax and Magnetic#

Stagger brings children in one after another, Parallax moves content slower than the page, Magnetic pulls a button a few pixels toward the mouse. Magnetic is meant for the one main action of a section.

import { Magnetic, Parallax, Stagger } from '@/components/ui/motion';

<Stagger as="ul" step={70}>
  <li>Planning</li>
  <li>Build</li>
  <li>Handover</li>
</Stagger>

<Parallax speed={48}>
  <img src="/team.avif" alt="The team in the studio" />
</Parallax>

<Magnetic strength={6}>
  <Button href="/contact">Book a call</Button>
</Magnetic>

For effects of your own, useScrollProgress writes the progress of an element through the viewport as the CSS variable --kit-progress, from 0 to 1, without a React render per frame.

import { useScrollProgress } from '@/components/ui/motion';

const ref = useScrollProgress<HTMLDivElement>();
<div ref={ref} style={{ opacity: 'var(--kit-progress)' }}>…</div>

aiw add @ai-website/motion

Text effects#

Headlines and numbers have components of their own, among them WordReveal, BlurIn and LetterStagger under Text effects and NumberTicker and RotatingWords under Text accents, all with previews.

WordReveal, variant heroView in Components

import { WordReveal } from '@/components/ui/word-reveal';

<WordReveal as="h1" text="Websites that sell" highlight="sell" />

Motion in CSS#

Without React, helper classes from kit.css do it. kit-rise lets an element rise on load, --kit-delay staggers several.

<h1 class="kit-rise">…</h1>
<p class="kit-rise" style="--kit-delay: 120ms">…</p>

Reduced motion#

Anyone who set reduced motion in their system sees every part of the kit in its final state right away. For your own code there is prefersReducedMotion() and the Tailwind variant motion-reduce:.

import { prefersReducedMotion } from '@/lib/kit';

if (!prefersReducedMotion()) startTour();

// In classes
<div className="transition-transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0" />

The scroll preset#

For scroll scenes and smooth scrolling, the scroll preset brings GSAP and Lenis wired together, plus src/scripts/motion.ts and src/components/SmoothScroll.astro. aiw new installs it from the start.

aiw add scroll

Import GSAP and its plugins only from src/scripts/motion.ts, and place <SmoothScroll /> once in the base layout. After DOM changes, ScrollTrigger.refresh() measures again.