Der ganze Katalog — 76 Live-Demos

Wo es gut wirkt: Hero-Überschriften, Kampagnen-Claims.

Wo es gut wirkt: Markengeschichte, Produktionserzählung, Fallstudien.

Wo es gut wirkt: Betonung von Technologie und Innovation, Abschnittsüberschriften.

Wo es gut wirkt: Manifesttexte, Wertversprechen.

Probieren Sie es mit Scrollen — die Schichten fließen unterschiedlich schnell. Wo: Serien- und Kollektionsüberschriften.

Fahren Sie darüber — es wird schneller. Wo: Ankündigungsbänder, Kampagnen.

Live erzeugtes Korn lässt flache Farben aussehen, als kämen sie aus der Druckerei. Wo: Premium- und Retro-Marken.

Wozu es dient: DEKORATIVE Daten, die eine Seite wie ein lebendiges Gerät oder ein Labor wirken lassen. Mammut hat das mit GPS und Puls eines Bergsteigers gemacht — der Leser fühlte sich am Berg. Wir machen es mit der Kesseltemperatur: der Besucher fühlt sich in der Werkstatt. Ein Teil der Zahlen ist echt (die Uhr, Ihr Scrollen, Ihr Zeiger), ein Teil ist Atmosphäre. Wo: Seiten rund um Produktion oder Labor.

Wo: Statistikblöcke, "wir in Zahlen".

Fahren Sie darüber — die Buchstaben schlagen einzeln Purzelbäume. Wo: Menüs, wichtige Links.

Fahren Sie darüber. Wo: Produkt- und Kollektionsraster — das sollte der Standard jedes Shops sein.

Scrollen — die Zeilen fließen in entgegengesetzte Richtungen und neigen sich mit der Scrollgeschwindigkeit. Wo: Abschnittstrenner, Manifeste.

Wo: 404-Seiten, Kinder- und Hobbymarken, "Spielplatz"-Abschnitte.

Greifen und ziehen. Wo: Moodboard- und Farbkartenspielflächen, Launch-Seiten.

Wo: Abschnittsauftakte, Momente emotionaler Betonung.

Dieselbe Animation, zwei Rhythmen. Der gestufte fühlt sich "handgezeichnet" an — das war das Geheimnis der Site des Jahres 2021.

Wo: Momente des Farb- oder Serienwechsels, Themenübergänge.

Präsentiert technische Inhalte mit der Eleganz einer Barkarte. Wo: Produktinhalte und Ausstattungsdetails.

Ein Formular auszufüllen ist keine Pflichtübung mehr, sondern ein Satz. Wo: Kontakt- und Bewerbungsseiten.

Fahren Sie darüber — es wird schneller. Wo: Ecken-Badges, "Gütesiegel"-Flächen.

Wo: Premium- und immersive Erlebnisse. Sparsam eingesetzt macht es eine Website "anfassbar".

Ein 3D-Modell, unendlich viele Farben. Denken Sie daran, was das in einem Katalog mit 234 Farben bedeutet. Wo: Produkt-Heroes.

Die Schrift wird als Textur auf der Grafikkarte verbogen. Wo: Manifest-Abschnitte, Marken-Claims.

Berühren sich die Tropfen, verschmelzen sie wie echte Flüssigkeit — alles nur Mathematik. Wo: Premium-Auftakte im Stil von FarbeLab.

Scrollen = Filmstreifen. Die Szene klebt am Bildschirm, und die Kamera fährt weiter, während Sie vorankommen. Wo: Erzählungen einer Markenreise.

Eine unsichtbare Windkarte zieht die Teilchen mit; ihre Spuren werden zu Farbe. Wo: lebendige Hintergründe, 404-Seiten.

Eine Glaskugel mit farbigen Tropfen darin, die Licht wirklich bricht. Wo: Premium-Produktpräsentationen (FarbeLab).

Ein 3D-Organismus, dessen Oberfläche ständig wogt und der bei Berührung die Form ändert. Wo: das zentrale Objekt eines Heros, ein Maskottchen.

Eine echte Stoffsimulation mit 442 Punkten: Schwerkraft, Wind und Berührung. Wo: Etiketten- und Fahnenszenen, Launches.

Zwei Bilder fließen über eine Rauschkarte ineinander. Wo: Galerie-Hovers, Kollektionsübergänge.

Keine Nachahmung, sondern Physik: die Fluidgleichungen werden in jedem Bild gelöst (Diffusion, Druck, Wirbel). Wo: Hero-Auftakte — das ist unsere Signatur.

Die Position der Teilchen wird in einer Textur gespeichert und auf der Grafikkarte aktualisiert. In E23 waren es 9.000 — hier sind es 262.144.

Für jedes Pixel wird ein Lichtstrahl verfolgt: Reflexion, Brechung, weicher Schatten. Wo: Premium-Produktszenen.

Bloom, Farbversatz der Linse, Vignette, Filmkorn. Diese Schicht hebt jede Szene im Katalog eine Stufe höher.

Zwei getrennte 3D-Szenen, eine in der anderen. E27 war eine Nachahmung davon; dies ist das Echte (Stencil Buffer).

Ein Foto + eine Tiefenkarte = die Illusion von 3D. Wo: Werkstattfotos, Produktaufnahmen.

72 Bilder werden vorbereitet und ans Scrollen gebunden — wie ein Video, aber die Kontrolle liegt ganz bei Ihnen.

Fragt nach der Mikrofonerlaubnis, es wird nichts aufgezeichnet. Wo: Messestand-Bildschirme, Eventwände.

Die Schrift wird zu Tausenden von Würfeln und von der Physik durcheinandergewirbelt, dann setzt sie sich wieder zusammen. Wo: Launch-Momente, 404.

Zehntausend Kopien desselben Objekts werden in einem Zug gezeichnet. Wo: Erzählungen über Kapazität und Größe, das Gefühl einer riesigen Fabrik.

Keine Fläche, sondern ein Volumen: der Strahl sammelt Licht Schritt für Schritt, während er durch die Wolke zieht. Die teuerste, kinematischste Technik.

Echte Ebru-Mathematik: jeder Tropfen schiebt das gesamte Muster darunter in Ringen nach außen; der Kamm streicht mit einer Sinuswelle hindurch. Das hat sonst niemand auf der Welt — ein Signatureffekt aus unserer eigenen Kultur.

Die Physik der Farben in einer Seifenblase (Dünnschichtinterferenz). Das digitale Gegenstück zur Perlmuttfarbe von Metakrlyic.

Zeitungs- und Siebdrucktextur. Wo: Marken mit Retro-Druckgefühl, Posterseiten.

Eine mit Voronoi-Zellen erzeugte Textur aus trockener Farbe und Alterung. Wo: Vintage-Serien, Restaurierungsgeschichten.

Ein weicher, kontrastarmer Fluss. Wo: Abschnitte mit langem Text, Kontaktseiten, unter dem Hero.

Zwei Chemikalien breiten sich aus und reagieren (Gray-Scott). Zebrastreifen, Koralle, ein Farbfleck — alles aus derselben Gleichung.

Am Bildschirm Blau + Gelb = Grau. Auf der Palette Blau + Gelb = grün. Der Unterschied entsteht dadurch, dass Licht im Pigmentkorn absorbiert und gestreut wird; die Lackindustrie rechnet das seit 1931 mit der Kubelka-Munk-Gleichung. In der rechten Hälfte läuft genau diese Gleichung. Für eine Farbenmarke gibt es keinen richtigeren Signatureffekt als diesen.

Das Markenzeichen des Aquarells, der dunkler Randring wird hier nicht gezeichnet — er entsteht von selbst, weil das Wasser verdunstet und das Pigment an den Rand gezogen wird und dort haften bleibt. Auch die Struktur des Papiers wird berücksichtigt: Pigment sammelt sich in den Vertiefungen (Granulation).

Von jedem Pixel wird ein Strahl in die Szene geschossen, und die Strahlen versuchen, über Oberflächen bis zum Licht zu springen. Die weiße Kugel neben der roten Wand wird von selbst rötlich — das wurde nicht gemalt, das entstand, weil das Licht dort wirklich abgeprallt ist. Die Browserfassung der Methode aus den Filmeffekten.

Ein Pinselstrich ist kein "Stempel". Jede der 420 Borsten verhält sich wie eine eigene Feder: drückt man, spreizt sie sich, dreht man, bleibt sie zurück, hebt man ab, richtet sie sich auf. Die Spur entsteht dort, wo die Borsten das Papier berühren — deshalb gleicht kein Strich dem anderen.

Jenes zitternde helle Netz, das ein Wasserglas auf den Boden wirft. Licht bricht sich an der Flüssigkeitsoberfläche und sammelt sich an bestimmten Punkten; aus dieser Konzentration entsteht die Helligkeit. Für jedes Bild wird die Neigung der Oberfläche berechnet.

zur Fluidsimulation Hindernis definiert: die Buchstaben. Die Farbe prallt auf sie, umfließt ihre Kanten und lässt hinter ihnen Wirbel zurück. Ihr Markenname ist nicht die Kulisse der Szene, sondern Teil der Physik.

Zwei Farben im Tageslicht genau gleich (ΔE = 0,0). Unter der Glühlampe trennen sie sich, unter Leuchtstofflicht wird der Unterschied ΔE = 19— also offensichtlich. Die Branche hat einen Namen dafür: metamerer Fehler — der Grund für die Klage "im Laden hat es gepasst, zu Hause nicht". Hier werden echte CIE-Farbabgleichfunktionen und echte Lichtquellenspektren verwendet; die Reflexionskurven zweier Pigmente werden so so gelöst, dass erzeugt werden.

Farbe ist hier nicht Farbe, sondern Volumen. Jeder Strich hinterlässt eine Höhe; das Licht bricht sich nach der Neigung dieser Oberfläche, und am Rand des Spachtels bildet sich ein Grat. Das Relief eines Ölbildes, das man von der Seite sieht.

Nicht auf einem Raster, sondern 780 einzelne Teilchen gelöste Flüssigkeit. Jedes Teilchen misst die Dichte seiner Nachbarn und stößt ab oder zieht an; daraus entsteht die Oberflächenspannung. Die Tropfen verschmelzen und reißen wirklich — sie werden nicht gezeichnet.

Die gemeinsame Mathematik von Eisblumen am Glas, einem Kupferkristall und einem Blitz. Zufällig wandernde Teilchen erstarren an der ersten Stelle, an der sie den Haufen berühren — deshalb wachsen die Spitzen und das Innere bleibt hungrig. Niemand zeichnet das Muster, es entsteht von selbst.

Der Strahl tritt ins Glas ein und an der Rückfläche wieder aus — und jede Farbe wird in einem anderen Winkel gebrochen. Daher der Regenbogensaum an den Rändern; dasselbe Phänomen wie beim Prisma, das Licht zerlegt. Auch die Form der Flasche ist als eine einzige mathematische Fläche definiert, ganz ohne Modelldatei.

Geben Sie eine Farbe vor, und aus welchen Pigmenten in welchem Verhältnis gemischt werden soll. Was Sie auf dem Bildschirm sehen, ist genau die Arbeit des Farbmessgeräts im Lacklabor: Kubelka-Munk berechnet die Farbe der Mischung, und die Anteile werden Schritt für Schritt korrigiert, bis ΔE kleiner wird. Die Zahlen laufen live — die Lösung wird gerade gefunden, nicht aus einer fertigen Tabelle abgelesen.

Die Methode der Lackindustrie zur Messung der Deckkraft: ein immer dicker werdender Film wird über eine Schwarz-Weiß-Karte gezogen, und man betrachtet das Verhältnis der Messwerte über schwarzem und weißem Grund. Die Dicke, bei der das Kontrastverhältnis 98 % übersteigt ist der Punkt der "vollen Deckung". Hier wird diese Gleichung (Kubelka-Munk über Grund) Pixel für Pixel gelöst.

Alle Farben, die das menschliche Auge sehen kann, liegen in dieser hufeisenförmigen Fläche. Das Dreieck ist der Teil, den Ihr Bildschirm zeigen kann. Jede Farbe außerhalb des Dreiecks lügt auf Ihrem Bildschirm — einige echte Pigmente liegen genau dort. Der ehrlichste Weg, einem Kunden zu sagen: "die Farbe, die Sie am Bildschirm sehen, ist nicht die Sache selbst".

"Beim Trocknen ist die Farbe heller geworden" ist die häufigste Beschwerde und kein Fehler der Farbe: solange sie nass ist, füllen Wasser und Medium den Raum zwischen den Pigmentkörnern, das Licht streut weniger, und die Farbe dunkel und gesättigt erscheint. Geht das Wasser, tritt Luft an seine Stelle, die Streuung steigt, und die Farbe hellt auf und wird matt. Hier steigt der Streukoeffizient mit der Zeit, den Rest erledigt die Gleichung.

Ein Gewebe ist kein Muster, sondern eine eine Anweisung: welcher Kettfaden über welchen Schuss läuft. Hier laufen echte Bindungsrapporte — Leinwand, Köper, Satin, Fischgrat. Ändert sich der Rapport, ändert sich der Stoff; ändern sich die Garnfarben, ändert sich das Muster. Genau das ist der Kern jeder Textil-CAD-Software.

Die Schatten wurden nicht gesetzt, "damit es hübsch aussieht": für den gewählten Breite, Tag und Stunde werden Höhen- und Azimutwinkel der Sonne berechnet und das Licht dorthin gesetzt. Dieselbe Rechnung, die Architekturbüros für Verschattungs- und Besonnungsstudien am Nachbargrundstück anstellen.

Wo die Last auch angreift, die Kraft in jedem Stab sofort gelöst: Rot ist Zug, Blau ist Druck, die Dicke die Größe der Kraft. Dahinter wird eine echte Steifigkeitsmatrix aufgestellt und das Gleichungssystem gelöst — direkte Anwendung aus der Statik. Die transparente Linie zeigt die übertrieben dargestellte Verformung.

Das ist keine Animation: ein kleines künstliches neuronales Netz wird gerade in Ihrem Browser trainiert. Der farbige Bereich ist die Entscheidung des Modells; in jedem Bild läuft die Rückpropagierung, der Fehler sinkt, und die Grenze krümmt sich, bis sie lernt, die beiden Punktwolken zu trennen. Der kürzeste Weg für eine Software- oder Technologiemarke zu sagen: "wir machen das wirklich".

Hunderte im leeren Raum verstreute Körper nur aus einem einzigen Blickpunkt richten sich aus und bilden die Schrift. Die in der Renaissance entdeckte Anamorphose; jeder Körper wurde entlang des Strahls durch diese eine Kamera in eine andere Tiefe gesetzt. Wie gemacht für Kunst, Galerie und Erlebnisräume.

60 Stationen, ein Fahrzeug, die kürzeste Tour. Es gibt viel zu viele Möglichkeiten, als dass ein Computer sie mit roher Gewalt durchprobieren könnte (bei 60 Stationen mehr als Atome im Universum), deshalb wird verbessert: zwei sich kreuzende Schenkel werden gesucht und umgedreht, und die Tour wird immer kürzer. In dieser Rechnung steckt die Spritrechnung jedes Betriebs, der ausliefert.

Das Rad des Jahres: das Erntefenster jedes Produkts, außen die echte Taglängenkurve mit dazu. Die Taglänge wird aus der Breite berechnet — keine dekorative Welle, sondern der Kalender der Landwirtschaft selbst. Beantwortet die Frage "was ist gerade frisch?" auf einen Blick.

In der Lebensmittelwissenschaft Die Q10-Regel: 10 °C mehr vervielfachen die Verderbgeschwindigkeit. Diese Gleichung läuft hier — ändern Sie die Temperatur und sehen Sie, wie die Haltbarkeit dahinschmilzt. Darunter steht die Rechnung "was geht verloren, wenn die Kühlkette einen Tag lang bricht". Der überzeugendste Weg, einem Kunden die Lagerbedingungen zu erklären.

Olivenöl, Honig, Traubensirup — jedes fließt anders, und der Kunde will das im Video sehen. Wann der Tropfen abreißt, nach dem Gesetz von Tate berechnet: der Tropfen reißt in dem Moment ab, in dem sein Gewicht die Oberflächenspannung überwindet. Eine zähe Flüssigkeit hinterlässt einen Faden, eine wässrige nicht.

Verwendet bei Olivenöl, Kaffee, Honig und Wein Sensorikpanel dargestellt. Wenn sich die Profile zweier Produkte überlagern, sieht man, wo sie gleich sind und wo sie auseinandergehen. Zeigen statt "unseres ist fruchtiger" zu sagen — nur das erklärt den Preisunterschied.

Die Maserung ist keine Texturdatei, die Geometrie des Stamms. Hier werden die Jahresringe dreidimensional definiert und mit der Ebene geschnitten, in der das Brett gesägt wurde: entlang des Kerns geschnitten ergeben sich gerade Linien, tangential geschnitten Kathedralbögen — der echte Unterschied, den jeder Schreiner kennt. Ändert sich die Holzart, ändern sich auch Ringabstand, Farbe und Porenstruktur.

Dasselbe Holz, drei verschiedene Lacke. Der Unterschied liegt nicht in der Farbe in der Verteilung der Spiegelung: eine matte Fläche streut Licht breit, eine glänzende sammelt es eng und scharf. Die Frage "matt oder glänzend" kann der Kunde erst beantworten, wenn er beides nebeneinander sieht.

Der häufigste Satz im Möbel-E-Commerce: "ich konnte mir die Größe nicht vorstellen". Das Produkt In derselben Szene wie ein Mensch von 1,75 m und in der richtigen Perspektive zu zeigen beendet dieses Problem. Es wird kleiner, je weiter es entfernt ist, und die Maße werden live geschrieben.

Bei Möbeln im Karton kommt der größte Teil der Retouren- und Supportlast vom Aufbau. Zu zeigen, wie die Teile zusammengehören, dreidimensional und Schritt für Schritt zu zeigen, wirkt sich direkt auf das Vertrauen vor dem Kauf und auf den Support danach aus. In der Maschinen- und Ersatzteilbranche wird genau dasselbe eingesetzt.