Bauen

Motion

Ruhige Bewegung, die den Inhalt trägt. Jeder Motion-Baustein rendert zuerst im Endzustand, bewegt nur transform und opacity und ruht bei reduzierter Bewegung.

Auf dieser Seite

Drei Regeln#

Jeder Motion-Baustein im Kit hält sich an dieselben drei Regeln. Darauf kannst du dich verlassen, auch wenn du Bausteine kombinierst.

Endzustand zuerst. Der Server rendert den fertigen Zustand, ohne JavaScript ist nichts versteckt.
Ruhe auf Wunsch. Bei reduzierter Bewegung bleibt alles in diesem Endzustand.
Kein Verschieben. Bewegt werden nur transform, opacity und filter, das Layout springt nie.

Reveal#

Reveal blendet seinen Inhalt ein, sobald er ins Bild scrollt. Andere Attribute wie id oder aria-* reicht er an das Element weiter.

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

<Reveal effect="rise">
  <h2>Unsere Leistungen</h2>
</Reveal>
<Reveal effect="fade" delay={120}>
  <p>Steuerberatung für Gründer und Familienbetriebe.</p>
</Reveal>

Prop	Typ	Standard	Wofür
effect	'rise' \| 'fade' \| 'scale' \| 'blur'	'rise'	Wie der Inhalt erscheint.
delay	number	0	Wartezeit in Millisekunden, sobald er im Bild ist.
as	'div' \| 'li' \| 'span'	'div'	Das Element, das gerendert wird.

aiw add @ai-website/reveal

Stagger, Parallax und Magnetic#

Stagger lässt Kinder nacheinander erscheinen, Parallax verschiebt einen Inhalt langsamer als die Seite, Magnetic zieht einen Knopf ein paar Pixel zur Maus. Magnetic ist für die eine Hauptaktion eines Abschnitts gedacht.

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

<Stagger as="ul" step={70}>
  <li>Planung</li>
  <li>Umsetzung</li>
  <li>Übergabe</li>
</Stagger>

<Parallax speed={48}>
  <img src="/team.avif" alt="Das Team im Studio" />
</Parallax>

<Magnetic strength={6}>
  <Button href="/contact">Termin buchen</Button>
</Magnetic>

Für eigene Effekte schreibt useScrollProgress den Fortschritt eines Elements durch das Fenster als CSS-Variable --kit-progress, von 0 bis 1, ohne React bei jedem Bild neu zu rendern.

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

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

aiw add @ai-website/motion

Texteffekte#

Für Überschriften und Zahlen gibt es eigene Components, darunter WordReveal, BlurIn und LetterStagger unter Texteffekte sowie NumberTicker und RotatingWords unter Textakzente, alle mit Vorschau.

WordReveal, Variante heroIn Components ansehen

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

<WordReveal as="h1" text="Websites, die verkaufen" highlight="verkaufen" />

Bewegung in CSS#

Ohne React geht es mit Hilfsklassen aus kit.css. kit-rise lässt ein Element beim Laden aufsteigen, --kit-delay staffelt mehrere.

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

Reduzierte Bewegung#

Wer im System reduzierte Bewegung eingestellt hat, sieht jeden Baustein des Kits sofort im Endzustand. Für deinen eigenen Code gibt es prefersReducedMotion() und die Tailwind-Variante motion-reduce:.

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

if (!prefersReducedMotion()) startTour();

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

Das Scroll-Preset#

Für Scroll-Szenen und weiches Scrollen bringt das Preset scroll GSAP und Lenis fertig verdrahtet mit, dazu src/scripts/motion.ts und src/components/SmoothScroll.astro. aiw new installiert es von Anfang an.

aiw add scroll

GSAP und seine Plugins importierst du nur aus src/scripts/motion.ts, <SmoothScroll /> steht einmal im Basis-Layout. Nach Änderungen am DOM misst ScrollTrigger.refresh() neu.