03 · Motion Lab
Jeder Effekt, offen gelegt.
Variable Font (Fraunces) · Pointer Events
Im Motion Lab ansehen
21 Effekte, jeder mit ID, Technik, Lizenz und Rückfallebene. Leichte Effekte laufen direkt hier; die großen Szenen öffnest du an ihrem Platz im Showroom.
Dein Gerät: wird ermittelt …
- FX-001Advanced
Cinematic Camera Journey
Eine fotorealistische Kamerafahrt durch den Wohnraum. Das KI-Video wird in Einzelbilder zerlegt und vom Scroll gesteuert – der Besucher führt die Kamera.
- Kategorie
- Scroll / Video / Image Transitions
- Technik
- Seedance 2.5 (Magnific) · Canvas-Bildsequenz, progressives Laden · Lenis
- Auslösung
- Scroll
- Mobile
- identisch, kleinere Frames (960 px)
- Reduced Motion
- vier Kapitelbilder, kein Scrubbing
- Lizenz
- eigener Code · Video: siehe ASSETS.md
- Modul
src/effects/fx-001-camera-journey/- Doku
docs/effects/FX-001.md- Ort
- Experience · Kapitel 01–04
- FX-002Advanced
Product Transformation
Selin entsteht beim Scrollen: erst Konstruktionslinien, dann ein Tonmodell, das von unten wächst, zuletzt legt ein Streiflicht das Studiofoto deckungsgleich über das Modell – der Endzustand ist fotografisch.
- Kategorie
- Scroll / 3D / WebGPU
- Technik
- Three.js WebGPURenderer · TSL-Material (Ton → Textur) · EdgesGeometry · GLB aus Magnific · Studiofoto aus der Endperspektive (Ideogram 4.5 Precise Edit)
- Auslösung
- Scroll
- Mobile
- Bühne oben, Text unten
- Reduced Motion
- Stufen springen ohne Übergang
- Lizenz
- Three.js MIT · HDRI CC0 · Modell: siehe ASSETS.md
- Modul
src/effects/fx-002-product-transform/- Doku
docs/effects/FX-002.md- Ort
- Experience · Selin
- FX-003Basic
Sticky Narrative Split
Links bleibt die Bildbühne stehen, rechts scrollen die Kapitel. Jedes Kapitel schiebt sein Bild mit einer aufsteigenden Kante über das vorige.
- Kategorie
- Scroll / Layout / Image Transitions
- Technik
- position: sticky · IntersectionObserver · clip-path
- Auslösung
- Scroll
- Mobile
- Bild über Text, gestapelt
- Reduced Motion
- Bildwechsel ohne Übergang
- Lizenz
- eigener Code
- Modul
src/effects/fx-003-sticky-split/- Doku
docs/effects/FX-003.md- Ort
- Experience · Materialien
- FX-004Advanced
Image Sequence Story
Ein Produktfilm als Bildsequenz: Die Kamera umkreist Fanal, auf halber Strecke schaltet sich die Leuchte ein.
- Kategorie
- Scroll / Video
- Technik
- Seedance 2.5 (Magnific) · Canvas-Bildsequenz
- Auslösung
- Scroll
- Mobile
- Bild oben, Text unten
- Reduced Motion
- zwei Zustände: aus / an
- Lizenz
- eigener Code · Video: siehe ASSETS.md
- Modul
src/effects/fx-004-image-sequence/- Doku
docs/effects/FX-004.md- Ort
- Experience · Fanal
- FX-005Advanced
Shadow Dissolve
Zwei Raumbilder gehen entlang wandernder Lamellenschatten ineinander über – vom Abend in den Morgen.
- Kategorie
- Image Transitions / WebGL / WebGPU
- Technik
- TSL-Fullscreen-Shader · MaterialX-Rauschen · Sticky-Bühne
- Auslösung
- Scroll
- Mobile
- identisch
- Reduced Motion
- CSS-Überblendung
- Lizenz
- Three.js MIT
- Modul
src/effects/fx-005-shadow-dissolve/- Doku
docs/effects/FX-005.md- Ort
- Experience · Abend → Morgen
- FX-006Advanced
FLIP Layout Morph
Ein Produkt wächst aus der Fläche nahtlos in seine Detailansicht – und kehrt beim Schließen an seinen Platz zurück.
- Kategorie
- Layout / Image Transitions
- Technik
- View Transitions API (gleiches Dokument) · FLIP mit Web Animations API als Fallback
- Auslösung
- Click
- Mobile
- identisch, Detail als Vollbild
- Reduced Motion
- direkter Wechsel
- Lizenz
- eigener Code
- Modul
src/effects/fx-006-flip-detail/- Doku
docs/effects/FX-006.md- Ort
- Collection · Detail
- FX-007Basic
Spatial Page Transition
Beim Seitenwechsel geht das Licht aus: die alte Seite sinkt dunkel in die Tiefe, die neue taucht aus dem Schwarz auf.
Live auf dieser SeiteWechsle über das Menü die Seite.
- Kategorie
- Navigation / Layout
- Technik
- Astro ClientRouter · View Transitions API · CSS 3D-Transforms
- Auslösung
- Navigation
- Mobile
- identisch
- Reduced Motion
- harter Schnitt
- Lizenz
- Astro MIT · Webstandard
- Modul
src/layouts/Layout.astro- Doku
docs/effects/FX-007.md- Ort
- global
- FX-008Basic
Silhouette Masks
Bilder öffnen sich in der Form eines Leuchtenschirms – eine Kuppel wächst von unten zum vollen Bild.
- Kategorie
- Scroll / Image Transitions
- Technik
- CSS Scroll-Driven Animations (view()) · clip-path · JS-Fallback für Firefox
- Auslösung
- Scroll
- Mobile
- identisch
- Reduced Motion
- Bild sofort vollständig
- Lizenz
- eigener Code
- Modul
src/effects/fx-008-silhouette-mask/- Doku
docs/effects/FX-008.md- Ort
- Experience · Bildstrecke
- FX-009Advanced
Photographic 360° Viewer
Jedes Möbel als fotografischer Drehteller: 60 Einzelbilder aus einem KI-Video, dessen Start- und Endbild das Produktfoto ist – der Kreis schließt sich nahtlos. Ziehen dreht mit Trägheit.
- Kategorie
- Video / Hover / Experimental
- Technik
- Canvas 2D · Pointer Events · progressives Laden (grobes Raster zuerst) · Seedance 2.5 (Start = Endbild)
- Auslösung
- Drag, Touch, Tastatur
- Mobile
- Touch-Drehen, 540-px-Bilder
- Reduced Motion
- kein Anlaufen, keine Trägheit
- Lizenz
- eigener Code · Videos: Magnific/Seedance, siehe ASSETS.md
- Modul
src/effects/fx-009-product-viewer/- Doku
docs/effects/FX-009.md- Ort
- Collection · Detail
- FX-010Advanced
Light Studio
Fotografisches Relighting: Zwei deckungsgleiche Aufnahmen (Leuchte aus/an) werden im linearen Farbraum addiert. Dimmer und Farbtemperatur 2200–4000 K bleiben dadurch fotorealistisch; Dimmen wird wärmer wie bei einer Glühlampe.
- Kategorie
- WebGL / WebGPU / Experimental
- Technik
- Three.js WebGPURenderer / WebGL2 · TSL-Shader (lineare Lichtaddition) · Fotos: Magnific Seedream 5 Pro + Ideogram 4.5 Precise Edit
- Auslösung
- Pointer-Drag, Touch, Tastatur, Regler
- Mobile
- Touch-Drag, 1280er-Aufnahmen auf Tier B
- Reduced Motion
- Wertewechsel ohne Überblendung
- Lizenz
- Three.js MIT · Lenis MIT · eigener Code · Modellrechte: siehe Asset-Register
- Modul
src/effects/fx-010-light-studio/- Doku
docs/effects/FX-010.md- Ort
- Collection · Lichtstudio
- FX-011Advanced
Material Shift
Der Bezug wechselt nicht schlagartig: Eine leuchtende Naht wandert von unten nach oben über das Foto und hinterlässt das neue Material – fotografische Varianten in identischer Perspektive.
- Kategorie
- Image Transitions / Experimental
- Technik
- CSS mask-image · requestAnimationFrame · Ideogram 4.5 Precise Edit (Varianten)
- Auslösung
- Click
- Mobile
- identisch
- Reduced Motion
- sofortiger Wechsel
- Lizenz
- eigener Code · Varianten: Magnific
- Modul
src/effects/fx-006-flip-detail/- Doku
docs/effects/FX-011.md- Ort
- Collection · Aurel, Brann
- FX-012Advanced
Infinite Spatial Canvas
Die Kollektion als endlose Fläche: ziehen, schleudern, die Fläche kippt in Zugrichtung, Objekte nahe der Mitte rücken nach vorn.
- Kategorie
- Navigation / Layout / Experimental
- Technik
- Pointer Events mit Trägheit · Modulo-Wrap · CSS 3D-Transforms
- Auslösung
- Drag, Tastatur, Fokus
- Mobile
- Touch-Ziehen (horizontal), Seite scrollt vertikal weiter
- Reduced Motion
- keine Trägheit, keine Kippung
- Lizenz
- eigener Code
- Modul
src/effects/fx-012-spatial-canvas/- Doku
docs/effects/FX-012.md- Ort
- Collection · Fläche
- FX-013Advanced
Kinetic Editorial Type
Monumentale Zeilen gleiten gegenläufig. Das Scroll-Tempo verbiegt die Schrift: Gewicht, optische Größe und Weichheit der Fraunces ändern sich live.
Im Showroom ausprobieren → Live auf dieser Seite- Kategorie
- Typography / Scroll
- Technik
- Variable Font (Fraunces: opsz, SOFT, WONK, wght) · Lenis-Geschwindigkeit · CSS-Variablen
- Auslösung
- Scroll, Scroll-Tempo
- Mobile
- identisch
- Reduced Motion
- statische Zeilen
- Lizenz
- eigener Code · Fraunces OFL-1.1
- Modul
src/effects/fx-013-kinetic-type/- Doku
docs/effects/FX-013.md- Ort
- Experience · Zwischenspiel
- FX-014Advanced
Typographic Mask Reveal
Die Wortmarke ist ein Fenster in einen Raum. Beim Scrollen fliegt der Blick durch das „O“, bis der Raum den Bildschirm füllt.
- Kategorie
- Typography / Scroll / Image Transitions
- Technik
- SVG-Maske · getExtentOfChar · Sticky-Bühne
- Auslösung
- Scroll
- Mobile
- identisch, kleinere Schrift
- Reduced Motion
- Wortmarke, dann Bild
- Lizenz
- eigener Code
- Modul
src/effects/fx-014-type-mask/- Doku
docs/effects/FX-014.md- Ort
- Experience · Galerie
- FX-015Basic
Variable Type Field
Jeder Buchstabe reagiert auf die Nähe des Zeigers mit Gewicht, optischer Größe und Weichheit. Ohne Zeiger läuft eine langsame Welle durch das Wort.
Live auf dieser Seite- Kategorie
- Typography / Hover
- Technik
- Variable Font (Fraunces) · Pointer Events
- Auslösung
- Pointer
- Mobile
- automatische Welle
- Reduced Motion
- statisch
- Lizenz
- eigener Code · Fraunces OFL-1.1
- Modul
src/effects/fx-015-variable-field/- Doku
docs/effects/FX-015.md- Ort
- Motion Lab · Kopf
- FX-016Advanced
Shadow Navigation
Der Menü-Button ist ein Lichtschalter. Ein Lichtkegel fällt auf die drei Seitennamen und folgt Maus und Tastaturfokus.
Live auf dieser SeiteÖffne das Menü oben rechts.
- Kategorie
- Navigation / Experimental
- Technik
- HTML dialog-Muster · CSS clip-path / Gradients · Pointer Events
- Auslösung
- Click, Pointer, Fokus
- Mobile
- Vollbildmenü, Kegel folgt Touch
- Reduced Motion
- Menü ohne Kegelbewegung
- Lizenz
- eigener Code
- Modul
src/effects/fx-016-light-nav/- Doku
docs/effects/FX-016.md- Ort
- global
- FX-017Basic
Magnetic Field
Wichtige Buttons ziehen den Zeiger in ihrem Umfeld sanft an; der Text darin folgt etwas stärker.
Live auf dieser Seite- Kategorie
- Hover / Navigation
- Technik
- Pointer Events · Feder-Interpolation · transform
- Auslösung
- Pointer
- Mobile
- aus (kein Hover auf Touch)
- Reduced Motion
- aus
- Lizenz
- eigener Code
- Modul
src/effects/fx-017-magnetic/- Doku
docs/effects/FX-017.md- Ort
- global · Menü-Button, Kollektion-Link, 3D-Button
- FX-019Experimental
Particle Reconstruction
Penna zerfällt in bis zu 90.000 Lichtpunkte, die exakt auf der Oberfläche des 3D-Modells liegen, und setzt sich wieder zusammen – zur fotografischen Aufnahme der leuchtenden Leuchte.
- Kategorie
- 3D / WebGPU / Experimental
- Technik
- MeshSurfaceSampler · TSL-Vertex-Shader · Additive Blending · deckungsgleiches Nachtfoto (Ideogram 4.5 Precise Edit)
- Auslösung
- Scroll
- Mobile
- 30.000 Punkte (Tier B)
- Reduced Motion
- Standbild
- Lizenz
- Three.js MIT · Modell: siehe ASSETS.md
- Modul
src/effects/fx-019-particles/- Doku
docs/effects/FX-019.md- Ort
- Collection · Penna
- FX-020Experimental
Gobo Headline
Beim Scrollen wird Ocula hochgedimmt. Aus den echten Löchern ihres Schirms treten Lichtstrahlen aus, fliegen an die Wand und setzen dort Punkt für Punkt „Vom Licht geformt.“ in ein strenges Punktraster.
- Kategorie
- Typography / Scroll / Experimental
- Technik
- Canvas 2D (additive Strahlen und Punkte) · Lochpositionen automatisch aus dem Foto ermittelt · Fotos an/aus: Seedream 5 Pro + Ideogram 4.5 Precise Edit
- Auslösung
- Scroll
- Mobile
- feineres Raster, Lichtkegel mittig
- Reduced Motion
- Leuchte an, Schrift steht, keine Strahlen
- Lizenz
- eigener Code · Foto: siehe ASSETS.md
- Modul
src/effects/fx-020-gobo-headline/- Doku
docs/effects/FX-020.md- Ort
- Experience · Finale
- FX-021Advanced
Shadow Type
Eine Lichtquelle folgt dem Zeiger und wirft aus jedem Buchstaben einen eigenen, langen Schatten – Richtung und Länge physikalisch je Zeichen berechnet.
Im Showroom ausprobieren → Live auf dieser SeiteSchatten
- Kategorie
- Typography / Hover / Experimental
- Technik
- text-shadow-Staffelung · CSS-Variablen · Pointer Events
- Auslösung
- Pointer, Touch
- Mobile
- Licht folgt dem Finger, sonst langsamer Orbit
- Reduced Motion
- feste Lichtposition
- Lizenz
- eigener Code
- Modul
src/effects/fx-021-shadow-type/- Doku
docs/effects/FX-021.md- Ort
- Experience · Prolog
- FX-022Basic
Light Sweep
Text liegt wie eingeprägt im Halbdunkel. Ein Streiflicht wandert beim Scrollen darüber und lässt ihn beleuchtet zurück.
Im Showroom ausprobieren → Live auf dieser SeiteStreiflicht macht sichtbar, was im Dunkeln liegt.
- Kategorie
- Typography / Scroll
- Technik
- background-clip: text · Verlauf über CSS-Variable
- Auslösung
- Scroll
- Mobile
- identisch
- Reduced Motion
- sofort beleuchtet
- Lizenz
- eigener Code
- Modul
src/effects/fx-022-light-sweep/- Doku
docs/effects/FX-022.md- Ort
- Experience · Ocula-Handwerk