3D und Bewegung

Die Reihenfolge

Von oben nach unten, so wie die Sections auf der fertigen Seite stehen.

1. Schritt 1 / 8 · 3D-Hintergründe

   Shader-Verlauf

   Fließendes Licht hinter der Überschrift gibt dem ersten Screen Tiefe, mit einem Scrim, der den Text lesbar hält.

   Fließendes Licht in der Akzentfarbe und ihren Nachbarn, live mit WebGL gezeichnet. Faltet sich wie Seide, folgt Zeiger und Scrollen, mit Standbild als Rückfall.

   $ aiw add @ai-website/shader-gradient4 Variants · Shader-Verlauf
   Preview lädt

2. Schritt 2 / 8 · 3D-Flächen

   Gerät in 3D

   Das Produkt im gedrehten Gerät zeigt den echten Screen und lädt zum zweiten Blick ein.

   Ein Telefon, Tablet, Laptop oder Browserfenster in echter CSS-Perspektive, mit Kante und Rückseite. Es ruht in einem Kamerawinkel, neigt sich zum Zeiger und schwebt sanft, solange es zu sehen ist, dein Inhalt bleibt darin bedienbar.

   $ aiw add @ai-website/device-3d5 Variants · Gerät in 3D
   Preview lädt

3. Schritt 3 / 8 · 3D-Szenen

   Tiefenschrift

   Eine Aussage in Schrift mit Tiefe markiert den Wechsel vom Versprechen zum Beleg.

   Schrift in 3D-Ebenen, die sich mit dem Scroll dreht, aufrichtet und auseinandergeht. Die Wörter bleiben eine echte Überschrift, die Tiefe kommt aus Kopien, die Screenreader nicht sehen. Ohne JavaScript steht das fertige Bild.

   $ aiw add @ai-website/depth-text5 Variants · Tiefenschrift
   Preview lädt

4. Schritt 4 / 8 · 3D-Flächen

   Neigekarten

   Feature-Karten, die sich zum Zeiger neigen, machen jede Fähigkeit greifbar.

   Karten, die sich wie Glas zum Zeiger neigen, mit einem Licht, das folgt, und Inhalten in eigener Tiefe. Auch der Fokus hebt sie an, auf Touchscreens und bei reduzierter Bewegung liegen sie ruhig und flach.

   $ aiw add @ai-website/tilt-card5 Variants · Neigekarten
   Preview lädt

5. Schritt 5 / 8 · 3D-Szenen

   Kameraflug

   Ein Kameraflug durch Ebenen erzählt die Arbeitsweise in Kapiteln, während die Seite scrollt.

   Eine Kamera, die beim Scrollen durch Ebenen voller Inhalt nach vorn fliegt. Jede Ebene kommt aus dem Dunst, wird vor dir scharf und zieht vorbei. Ohne JavaScript stehen die Ebenen als ruhige Liste da.

   $ aiw add @ai-website/camera-flight4 Variants · Kameraflug
   Preview lädt

6. Schritt 6 / 8 · 3D-Szenen

   Dreh-Showcase

   Ein Gerät, das sich beim Scrollen dreht, zeigt mehrere Screens des Produkts an einem Ort.

   Ein Objekt, das sich mit dem Scroll dreht und bei jeder Drehung eine neue Seite zeigt, mit dem passenden Kapitel daneben. Die Bildschirme wechseln, während die Rückseite zu sehen ist, den Wechsel selbst sieht man nie.

   $ aiw add @ai-website/rotate-showcase4 Variants · Dreh-Showcase
   Preview lädt

7. Schritt 7 / 8 · 3D-Flächen

   Kartenstapel in 3D

   Kundenstimmen als Stapel in die Tiefe, eine Karte nach der anderen und alle im Blick.

   Karten in echter Tiefe, ein Fächer in der Hand, ein Stapel zum Austeilen, eine Kaskade aus Fenstern, ein drehender Ring und eine Trommel zum Durchblättern. Echtes HTML auf jeder Karte, Pfeiltasten überall, der Ring hält bei Hover und Fokus an.

   $ aiw add @ai-website/card-stack-3d5 Variants · Kartenstapel in 3D
   Preview lädt

8. Schritt 8 / 8 · 3D-Hintergründe

   Lichtkugel

   Ein atmendes Licht hinter der letzten Einladung lenkt den Blick auf den letzten Knopf.

   Eine weiche, atmende Lichtkugel, wie eine Kugel schattiert, mit Wirbel im Inneren und weitem Schein, mit WebGL gezeichnet. Neigt sich zum Zeiger.

   $ aiw add @ai-website/glow-orb4 Variants · Lichtkugel
   Preview lädt