Motion
ZVV-Animation-Patterns in 4 Segmenten. Verkehr-thematisch, premium, performant. Framer Motion + SVG + Canvas2D + offizielle ZVV-Lotties. Alle respektieren prefers-reduced-motion.
→ Projekt-Heroes ansehen
5 bespoke animierte Hero-Header (Cockpit · Mailer · FZDB · Tama · Entdeckungsreise)
Atmosphäre
Background-Animationen für Hero-Sections & Login-Backdrops
Verkehrsnetz
11
AUZELG
2'4
TIEFENBRUNNE
4'14
SEEBACH
5'7
STETTBACH
7'Departure-Board
Tram-Lights
Aurora-Mesh
Glassmorphic-Orbs
Interaktion
Cursor- & Hover-Effekte — bewege die Maus über jede Karte
Magnetic-Pull
Maus nähern
Spotlight-Follow
Maus bewegen
3D-Tilt
Maus bewegen
Border-Trace
Hover
Liquid-Squish
Klicken
Bewegung
Loop-Animationen — kontinuierlich laufend, ZVV-Verkehr-thematisch
Z
Ü
R
I
C
H
H
B
Flip-Board
Pulse-Rings
→ Nächster Halt: Bellevue→ Linie 11 +3 Min→ Störung Linie 4 behoben→ Zürich HB Gleis 12→ Nächster Halt: Bellevue→ Linie 11 +3 Min→ Störung Linie 4 behoben→ Zürich HB Gleis 12
→ Zürich HB Gleis 12→ Störung Linie 4 behoben→ Linie 11 +3 Min→ Nächster Halt: Bellevue→ Zürich HB Gleis 12→ Störung Linie 4 behoben→ Linie 11 +3 Min→ Nächster Halt: Bellevue
Marquee-Ticker
Connecting-Lines
Shimmer-Sweep
→ ZVV Lotties & Composer
34 offizielle ZVV-Animationen + Drag-&-Drop-Composer (eigener Bereich)
Verwendung
Alle Komponenten liegen unter components/motion/. Import & drop-in:
import { AuroraMesh } from '@/components/motion/atmosphere'
import { MagneticPull } from '@/components/motion/interaction'
import { CockpitHero } from '@/components/motion/heroes'
import { ZvvLottie } from '@/components/motion/zvv-lottie' // offizielle ZVV-LottiesPerformance: transform/opacity-only (GPU) + Canvas2D mit rAF-Pause bei !inView. A11y: alle respektieren prefers-reduced-motion (statischer Endframe, kein Loop) via useMotionSafe().