// Interactive Motion — Showcase 03

BEWEGUNG IST INFORMATION.

Wir bauen Interfaces, die atmen. Jede Interaktion
erzählt eine Geschichte — in 60 FPS.
garçon studios · Zürich · v2.0

SCROLL TO EXPLORE
02 / DATA VISUALIZATION

DATEN
IN MOTION

Scroll-getriggerte Infografiken bauen sich
in deinem Blickfeld auf. Keine Bibliotheken —
nur native Browser-Power mit IntersectionObserver
und CSS-Transitions auf transform + opacity.

0%
Lighthouse Performance
0fps
Konstante Framerate
0kb
JS Bundle · Zero-Dep
// PERFORMANCE_INDEX over time
Q1 Q2 Q3 Q4 Q5 Q6 NOW
92%
ACCESSIBILITY
87%
BEST PRACTICES
99%
SEO SCORE
03 / INTERACTIVE PROCESS

HOVER THE
MACHINE.

01 BRIEF 02 DESIGN 03 BUILD 04 TEST 05 LAUNCH
—
Hover a node to explore the process
Jede Phase unseres Workflows ist präzise optimiert. Klicke auf einen Schritt, um Details zu sehen.
04 / LIVE CONTROL

DIE ENGINE
LIVE.

Steuere das Rendering direkt. Die Schieberegler
manipulieren CSS-Variablen und Canvas-Parameter
in Echtzeit — keine Neuberechnungen, keine Reflows.
Nur transform und requestAnimationFrame.

// SYSTEM_CONTROLS — LIVE
FREQUENZ 2.0
AMPLITUDE 0.50
DICHTE 3
GESCHWINDIGKEIT 1.0x
MODE: WAVE
FPS: 60
FRAME: 000000