Animationen

Interaktive Referenz aller Animations-Klassen, Effekte und Micro-Interactions

Wow-Effekte

Konfetti, Counter, Gradient …

Animations-Klassen

animate-*, page-*, nprogress-*

Effekt-Klassen

glass, skeleton, hover-lift …

Stagger-Stufen

50ms – 600ms Delay

🎉 Konfetti-Effekt

60 CSS-Partikel in 8 Markenfarben, gerendert via createPortal auf document.body (z-index: 99999). Feuert bei erfolgreicher Modal-Aktion.

Klick den Button — die Partikel explodieren über die gesamte Seite!

Verwendung

const confetti = useConfetti()

<button onClick={confetti.fire}>Feuern</button>
<ConfettiEffect
  active={confetti.active}
  onComplete={confetti.handleComplete}
/>

#00ACAF

#3B82F6

#22C55E

#F59E0B

#EF4444

#A855F7

#FFD700

#FF69B4

🔢 Animierte Zahlen-Counter

useCountUp Hook in StatsCard — parsed deutsches Zahlenformat (€1.234.567, 3,2 %), animiert mit easeOutCubic über 1,2s. Nur beim Loading→Data-Übergang aktiv.

€2.847.500

Umsatz

+12,4 % ggü. Vormonat

1.234

Aufträge

+24 diese Woche

94,7 %

Auslastung

Stabil

3,2 Tage

Ø Lieferzeit

-0,4 ggü. Vormonat

Wie es funktioniert

1. Parsing

Erkennt Prefix (€), Zahl (1.234,56), Suffix (%, Tage) und Dezimalstellen

2. Animation

requestAnimationFrame + easeOutCubic (1 - (1-t)³) über 1.200ms

3. Trigger

Nur wenn vorheriger Wert nicht numerisch war (z.B. '…' → '€2.847')

⌨️ Typewriter-Animation

useTypewriter Hook mit State-Machine: Tippen → Pause → Löschen → Nächster Text. Konfigurierbares Tempo, blinkender Cursor via CSS.

Dashboard-Begrüßung (55ms / 30ms / 3s Pause)

Schnelleres Tempo (40ms / 25ms / 2s Pause)

TypewriterText

<TypewriterText
  texts={['Text 1', 'Text 2']}
  typeSpeed={55}
  deleteSpeed={30}
  pauseTime={3000}
/>

.typewriter-cursor

Blinkender Cursor via CSS @keyframes typewriter-blink (0.8s steps(2)). Farbe: var(--color-primary).

🏔️ Parallax-Scrolling

Performanter Scroll-Handler mit passive Listener + requestAnimationFrame + direkter DOM-Manipulation. Verschiedene Geschwindigkeiten erzeugen Tiefeneffekt.

Scrolle die Seite, um den Parallax-Effekt auf diesen Karten zu sehen ↕

0.05

Langsam

Subtile Bewegung für Hintergrundelemente

0.10

Mittel

Standardgeschwindigkeit für Content

0.15 ↓

Schnell (down)

Gegenrichtung für Kontrast-Tiefe

ParallaxSection

<ParallaxSection speed={0.1} direction="up">
  {children}
</ParallaxSection>

Props: speed (0–1, Standard 0.1), direction ('up' | 'down'). GPU-beschleunigt via will-change: transform.

✨ Morphende Icons bei Hover

CSS .icon-morph Klasse mit cubic-bezier(0.34, 1.56, 0.64, 1) Bounce-Effekt. Scale 1.2 + Rotate 8° auf Hover, Scale 0.95 + Rotate -4° beim Klick.

Bewege die Maus über die Karten, um den Morph-Effekt zu sehen 👆

Neuer Auftrag

Kunde anlegen

Rechnung erstellen

Bericht erstellen

.icon-morph

.icon-morph {
  transition: transform 0.35s
    cubic-bezier(0.34, 1.56, 0.64, 1);
}
.group:hover .icon-morph {
  transform: scale(1.2) rotate(8deg);
}

Voraussetzung

Das Elternelement braucht die Tailwind-Klasse group, damit der .group:hover .icon-morph Selektor greift.

Active-State: scale(0.95) rotate(-4deg) für taktiles Feedback beim Klick.

👁️ Scroll-Reveal

IntersectionObserver-basierte Einblendung beim Scrollen. 4 Richtungen, konfigurierbare Delay/Duration/Distance. GPU-Compositing via translate3d.

Scrolle nach unten — die Boxen blenden sich ein. Scrolle zurück — sie verschwinden wieder (once=false für diese Demo).

direction="up"

Standard — von unten nach oben einblenden. Delay: 0ms, Distance: 32px.

direction="down" delay=100

Von oben nach unten einblenden. Mit 100ms Verzögerung.

direction="left" delay=200

Von rechts nach links einblenden. Ideal für Sidebar-Elemente.

direction="right" delay=300

Von links nach rechts einblenden. Mit 300ms Verzögerung.

ScrollReveal

<ScrollReveal
  direction="up"   // 'up' | 'down' | 'left' | 'right'
  delay={0}        // ms Verzögerung
  duration={600}   // ms Animationsdauer
  distance={32}    // px Verschiebung
  threshold={0.15} // IntersectionObserver threshold
  once={true}      // Nur einmal animieren?
>
  {children}
</ScrollReveal>

Above-the-fold Elemente werden sofort sichtbar (getBoundingClientRect-Check bei Mount). Respektiert prefers-reduced-motion.

🌈 Animierte Gradient-Borders

Rotierende conic-gradient Umrandung via @property --gradient-angle + CSS animation. Drei Varianten: Standard, Glow (äußerer Blur-Schatten) und Subtle (nur bei Hover sichtbar).

Standard

2px Border, 3s Rotation

Perfekt für Feature-Cards und hervorgehobene Bereiche

+ Glow

Äußerer Blur-Schatten

Für Premium-CTAs und besondere Highlights

Subtle

Nur bei Hover sichtbar 👆

Dezent — border erscheint erst bei Maus-Hover

Schnellere Rotation (2s)

width=3, speed=2 — dickerer Border, schnellere Drehung

Langsam + Glow (6s)

width=1, speed=6, glow — elegante, ruhige Variante

GradientBorder

<GradientBorder
  glow      // Äußerer Blur-Glow
  subtle    // Nur auf Hover
  width={2} // Border-Dicke (px)
  speed={3} // Rotationsdauer (s)
  radius="var(--radius-xl)"
>
  {children}
</GradientBorder>

Technik

conic-gradient mit @property --gradient-angle für animierbaren Winkel.

mask-composite: exclude maskiert den Innenbereich — nur der Border bleibt sichtbar.

Farben: Primary → Info → Purple

Übersicht aller Wow-Effekte

Alle 7 interaktiven Effekte auf einen Blick — implementiert als wiederverwendbare React-Komponenten + Hooks.

🎉

Konfetti

DateiConfetti.tsx

HookuseConfetti()

WoNeuAuftragModal, NeuKontaktModal

🔢

Zahlen-Counter

DateiStatsCard.tsx

HookuseCountUp()

WoAlle StatsCards (50+ Seiten)

⌨️

Typewriter

DateiTypewriter.tsx

HookuseTypewriter()

WoDashboard Begrüßungstext

🏔️

Parallax

DateiParallaxSection.tsx

Hook—

WoDashboard (4 Zonen)

✨

Icon-Morph

Dateiglobals.css

Hook—

WoDashboard Quick Actions

👁️

Scroll-Reveal

DateiScrollReveal.tsx

Hook—

WoDashboard (7 Sektionen)

🌈

Gradient Border

DateiGradientBorder.tsx

Hook—

WoFeature-Cards, CTAs, Highlights

Alle 7 Effekte respektieren prefers-reduced-motion: reduce — Animationen werden automatisch deaktiviert.

Keyframes-Referenz

Alle 16 @keyframes aus globals.css — sortiert nach Verwendungshäufigkeit.

fade-up

Fade + Slide von unten nach oben

500ms·cubic-bezier(0.22,1,0.36,1)

scale-in

Scale von 0.95 → 1 mit Fade

400ms·cubic-bezier(0.22,1,0.36,1)

slide-in-right

Slide von rechts mit Fade

450ms·cubic-bezier(0.22,1,0.36,1)

number-in

Zahlen-Einblendung für Stats

600ms·cubic-bezier(0.22,1,0.36,1)

backdrop-fade-in

Backdrop Overlay ein

200ms·ease-out

backdrop-fade-out

Backdrop Overlay aus

150ms·ease-in

dialog-scale-in

Dialog-Modal einblenden

200ms·cubic-bezier(0.22,1,0.36,1)

dialog-scale-out

Dialog-Modal ausblenden

150ms·cubic-bezier(0.55,0.06,0.68,0.19)

dropdown-scale-in

Dropdown-Menü einblenden

150ms·cubic-bezier(0.22,1,0.36,1)

dropdown-scale-out

Dropdown-Menü ausblenden

100ms·ease-in

glow-pulse-colored

Drop-Shadow-Pulse (infinite)

3s·ease-in-out

shimmer

Horizontaler Gradient-Sweep

1.8s·ease-in-out

page-enter

Seitenwechsel Einblendung

250ms·cubic-bezier(0.25,0.46,0.45,0.94)

page-exit

Seitenwechsel Ausblendung

150ms·cubic-bezier(0.55,0.06,0.68,0.19)

nprogress-grow

Ladebalken wachsend

300ms·cubic-bezier(0.4,0,0.2,1)

nprogress-complete

Ladebalken abschließend

200ms·ease-out

Technische Referenz

Alle Animationen sind in src/app/globals.css unter @layer utilities definiert.

Reduced Motion

Bei prefers-reduced-motion: reduce werden alle Animationen deaktiviert — animation: none; opacity: 1; transform: none;

Print Styles

Im Druckmodus werden alle Animationen und Transitions mit animation: none !important deaktiviert.

Performance

Alle Animationen nutzen transform und opacity — GPU-beschleunigte Properties ohne Layout-Reflows.