Built on WIX Headless

Licht wird gesetzt · 0 %

03 · Motion Lab

Jeder Effekt, offen gelegt.

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 …

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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 Seite

    Wechsle ü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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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 Seite

    Schatten

    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
  21. 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 Seite

    Streiflicht 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