Briefing.
Wir reden. Du erzählst vom Projekt, wir hören zu — und stellen die unbequemen Fragen gleich am Anfang.
§ VI · Design-Lab
Bewegung ist
Bewegung ist
Information.
Diese Seite ist unser Ausstellungsraum — und dein Warenkorb:
Fünfundzwanzig Exponate zeigen, was im Browser heute möglich ist, von
dezentem Editorial-Motion bis zu richtig crazy Sachen mit WebGL,
Physik-Simulationen, Geräte-Sensoren und einem versteckten Terminal. Alles läuft in purem CSS und Vanilla-JavaScript, ohne
Frameworks, ohne Tracker, mit lokal gehosteten Assets — und
respektvoll gegenüber
prefers-reduced-motion. Was dir gefällt, kann auf
deiner Website landen: Klick einfach auf »Das will ich«
beim jeweiligen Exponat.
Exhibit 01
Magnetic Type.
Fraunces ist ein Variable Font — Schriftgewicht, Weichheit
und Verspieltheit (wght, SOFT,
WONK) sind keine festen Schnitte, sondern Achsen.
Fahre mit der Maus über das Wort: Jedes Zeichen reagiert
einzeln auf den Cursor-Abstand.
Handwerk.
Maus bewegen — die Schrift atmet
Exhibit 02
Tiefe ohne Glassmorphismus.
3D-Tilt per requestAnimationFrame und
transform-style: preserve-3d — mit Lichtschein,
der dem Cursor folgt. Die harte Schatten-Kante bleibt:
Editorial-Stil, nur eben in drei Dimensionen.
Zero-Knowledge
Heritavo.
Event-Management
EventConnector.
Browser-LLM-Safety
Redactly.
Exhibit 03
Text, der sich decodiert.
Der Scramble-Effekt ist ein Klassiker der Motion-Szene: Zeichen rotieren zufällig und rasten von links nach rechts ein. Ohne Klick rotiert die Headline selbst weiter.
Das will ich →Wir bauen Software.
Exhibit 04
Scroll-Physik.
Das Laufband hat eine Grundgeschwindigkeit — und beschleunigt, wenn du scrollst. Die Trägheit ist eine einfache physikalische Interpolation pro Frame. Scrolle kräftig und schau zu.
Das will ich →
BewegungistInformation
TempofolgtScroll
PhysikstattKeyframes
BewegungistInformation
TempofolgtScroll
PhysikstattKeyframes
Aktuelle Geschwindigkeit: 1.00×
Exhibit 05
Magnetische Knöpfe.
Elemente, die dem Cursor entgegenkommen, fühlen sich greifbar an. Die Ziehstärke ist absichtlich subtil — 35 % der Distanz, mit geglätteter Rückfederung.
Das will ich →
Exhibit 06
Tinte als Hover-Zustand.
Statt Farbwechsel: Die Zeile füllt sich mit Tinte. Eine
::before-Fläche, die per scaleX
aufzieht — GPU-freundlich, keine Layout-Reflows.
Exhibit 07
Ebenen mit Tiefgang.
Drei Bilder, drei Geschwindigkeiten: Die Galerie bewegt sich
versetzt zum Scroll — ein klassischer Parallax, aber per
requestAnimationFrame weich interpoliert statt
ruckelig ans Scroll-Event gehängt. Die Bilder sind lokal
gehostet (Unsplash-Lizenz), es geht kein Request nach draussen.
Exhibit 08
Runterscrollen, seitwärts fahren.
Die Sektion klebt am Viewport (position: sticky),
während vertikales Scrollen eine horizontale Fahrt durch die
Bildstrecke steuert. Der Trick der Awards-Seiten — komplett
ohne Library.
Exhibit 09
Der Vorhang geht auf.
Beim Reinscrollen fährt eine Tinten-Fläche über jedes Bild weg und gibt es frei — das Bild zoomt dabei leicht aus. Gestaffelt wirkt das wie ein Dia-Vortrag.
Das will ich →
Exhibit 10
Das Karussell im Raum.
Ein echter 3D-Ring per transform-style: preserve-3d:
dreht sich von allein, lässt sich aber auch mit der Maus
greifen und drehen — mit physikalischer Nachrotation
beim Loslassen. Für Galerien, Referenzen, Produkt-Shows.
Ziehen zum Drehen · dreht sich sonst selbst
Exhibit 11
Bilder folgen dem Cursor.
Für den Awwwards-Moment: Jede Mausbewegung hinterlässt eine Spur aus Mini-Bildern, die aufpoppen und zerfließen. Puristisch umgesetzt — Objekt-Pool, Distance-Threshold, kein DOM-Müll.
Das will ich →Bewege die Maus hier durch →
Exhibit 12
Schrift, gefüllt mit Foto.
background-clip: text macht die Headline
durchsichtig — dahinter schiebt sich langsam ein Foto durch
die Buchstaben. Ein Statement-Hero in einer Zeile CSS.
Heimat
am See.
am See.
Exhibit 13
Erst Pixel, dann Bild.
Canvas-Magie: Das Bild existiert als grobes Pixel-Raster — bei Hover schärft es sich frame für frame auf. Retro, mysteriös, perfekt für Teaser („erst andeuten, dann zeigen").
Das will ich →Fahre über das Bild
Exhibit 14
Der sich stapelnde Prozess.
Karten, die sich beim Scrollen übereinanderlegen wie ein
Aktenstapel — pure position: sticky-Magie ohne
eine Zeile JavaScript. Ideal für Prozesse, Leistungen,
Preisstaffeln.
Konzept.
Struktur, Tonalität, Motion-System. Du siehst früh, wie es sich anfühlt — nicht erst, wenn alles fertig ist.
Umsetzung.
Vanilla-Code, lokal gehostete Assets, keine Tracker. Gemessen an echten Geräten, nicht an Lab-Werten.
Launch.
Go-live mit Backup-Strategie und Monitoring. Und danach sind wir weiter erreichbar — versprochen.
Exhibit 15
Scrollen als Playhead.
Dieser Film läuft nur, wenn du scrollst — vorwärts und rückwärts, direkt an die Scrollposition gekoppelt. Das Video ist mit dicht gesetzten Keyframes kodiert, damit das Scrubbing butterweich bleibt. Perfekt für Produktteaser, Drohnenflüge, Making-ofs.
Das will ich →Scroll mich ↓
00:00 / 00:24
0 %
Clip: »Timelapse of Clouds over Bellevue Canyon« · CC0 · Wikimedia Commons · lokal gehostet, dichte Keyframes
Exhibit 16
Der dunkle Video-Hero.
Fullscreen-Kino als Einstieg: Video unter Abdunklung, riesige Headline mit Akzent-Zeile, Badge-Pille, USP-Leiste unten — die komplette „Awwwards-Handwerksseite“-Anmutung, komplett ohne Framework.
Das will ich →
Video-Hero · 100vh-fähig · ohne Framework
Räume, die man nicht betritt, sondern spürt.
Zum Beispiel: Website statt Broschüre — Atmosphäre ab dem ersten Frame.
- Lokal gehostet
- Mute · Loop · Playsinline
- Pausiert ausserhalb des Viewports
Clip: »Timelapse of Clouds over Bellevue Canyon« · CC0 · Wikimedia Commons · anderes Zeitfenster als Exhibit 15
Exhibit 17
Video im Text.
Schrift als Fenster: Der Clip bewegt sich nur innerhalb der
Buchstaben. Kein SVG, kein Canvas, keine Library — ein einziger
mix-blend-mode: weisse Schrift auf schwarzer Folie
multipliziert sich mit dem Video darunter.
Clip: »Ink drops in water« · CC BY-SA 4.0 · Wikimedia Commons · lokal gehostet
Exhibit 18
Flüssige Tinte.
Eine echte Strömungssimulation im Browser: Der dunkle Untergrund ist lebendige Flüssigkeit (Navier-Stokes, gelöst in einem eigens geschriebenen WebGL-Shader — keine Library). Fahre mit der Maus durch die Tinte oder rühre mit dem Finger. Die Farbe zerfliesst von selbst weiter.
Das will ich →
Maus oder Finger durch die Tinte ziehen
WebGL Fluid-Simulation · selbst implementiert · pausiert ausserhalb des Viewports · Fallback: statischer Verlauf
Exhibit 19
Schrift aus Staub.
Diese Headline existiert gar nicht als Text — sie besteht aus tausenden Partikeln, die sich ihre Buchstaben-Positionen merken. Streifst du mit dem Cursor durch, stieben sie auseinander — und finden per Federkraft immer wieder zurück.
Das will ich →Zerstörbar.
Exhibit 20
Greifen. Werfen. Stapeln.
Die Badges unten gehorchen einem kleinen, selbst gebauten Physik-Solver: Schwerkraft, Wandstösse, Kollisionen untereinander. Schnapp dir eines und wirf es — der Schwung aus deiner Handbewegung zählt.
Das will ich →
schnell
ehrlich
CH-gehostet
ohne Tracker
barrierearm
Vanilla-JS
handgemacht
lokal
messbar
persönlich
direkt
verspielt
Badges greifen & werfen
Exhibit 21
Das versteckte Terminal.
Das beste Feature sieht man nicht: Diese Seite hat eine echte
Konsole eingebaut. Drück ~ oder `
(Gravis) — oder tippe auf den ~-Knopf unten
rechts. Dann hilft help weiter. Easter Eggs machen
aus einer Website einen Ort, den man erkundet.
Easter Egg · funktioniert auf dieser ganzen Seite · Esc schliesst
Exhibit 22
Die Seite spürt dich.
Dein Handy weiss, wie du es hältst: Per
deviceorientation verschieben sich die Ebenen dieser
Szene, wenn du das Gerät neigst — Tiefenwirkung ohne Brille.
Auf dem Desktop übernimmt die Maus. Auf iOS fragt der Browser
einmalig nach Erlaubnis — mehr passiert nicht.
Gerät neigen — am Desktop: Maus bewegen
Exhibit 23
Die Seite hört zu.
Opt-in, versprochen: Erst wenn du das Mikrofon freigibst, lauscht diese Kugel der Umgebungslautstärke — sprich, klatsch, summ. Nichts wird aufgenommen, gespeichert oder gesendet — die Analyse läuft komplett in deinem Browser (Web Audio API).
Das will ich →Klicken, dann ruhig laut sein.
Exhibit 24
Der Sequenzer.
Acht Schritte, fünf Töne, eine Pentatonik — es ist unmöglich, sich zu vergreifen. Tippe Zellen an und aus, drück Play: Ein echter Step-Sequenzer, synthetisiert live per Web Audio API. Kein Sample, keine Datei, nur Mathematik.
Das will ich →
108 BPM · Pentatonik C
Zellen tippen · Play drücken · Groove finden
Exhibit 25
Der Cheat-Code.
1986 hat Konami einen Code in seine Spiele gebaut, den bis heute jeder Nerd auswendig kann. Er funktioniert auch hier — irgendwo auf dieser Seite. Was dann passiert? Die Seite geht kurz kaputt. Und repariert sich selbst. Versprochen.
Das will ich →
↑↑
↓↓
←→
←→
BA
Desktop: Tastatur · Mobile: die Tasten oben der Reihe nach antippen · wirkt auf der ganzen Seite
Gefällt dir, was du siehst? All das lässt sich auch in dein Projekt einbauen — von der dezenten Reveal-Animation bis zum kompletten Motion-System. Schreib uns.