Alle Bereiche

Bereich 02 · 10 Arbeitsproben

Neue Seitenkonzepte

Kacheln statt Seitenlauf, ein Raum statt Menü, Stimme statt Formular, das Handy als Fernbedienung. Ideen für Seiten, die man nicht vergisst.

57

Handy als Controller

QR-Code scannen, dann steuert das Handy per Neigen und Touch die 3D-Szene auf dem Desktop. Supabase Realtime Broadcast, Gyroskop, Latenz-Anzeige. Zwei Geräte, eine Szene.

RealtimeGyroskopQR-Pairing
58

KI im Browser

Handgesten per Webcam steuern die Seite: Zeigen, Greifen, Wischen. MediaPipe läuft lokal im Browser, kein Bild verlässt das Gerät. Datenschutz als Feature.

MediaPipeHand-TrackingOn-Device
59

Null JavaScript

Scroll-Story mit 0 KB JavaScript: Scroll-getriebene Animationen, View Transitions, Anchor Positioning, Popover, Container Queries. Die Plattform kann das selbst.

0 KB JSCSS Scroll-TimelinePopover
60

Bento, das aufklappt

Komplette Firmenseite als Vollbild-Kachelraster ohne Scrollen. Jede Kachel ist ein Mini-Programm und klappt an Ort und Stelle auf: Öffnungszeiten, Preisrechner, Bewertungen, Kontakt, Galerie.

Kein ScrollLayout-AnimationMini-Apps
61

Der Raum

Eine gezeichnete Werkstatt füllt den Bildschirm. Jedes Objekt ist eine Sektion: Monitor, Ordner, Telefon, Kalender, Transporter. Klick, die Kamera fährt ran, der Inhalt erscheint im Objekt. Kein Menü.

SVG-SzeneKamera-ZoomTageszeit
62

Die Leinwand

Das ganze Portfolio auf einer einzigen Fläche wie ein Stadtplan. Klick fliegt die Kamera hin, Minimap, Brotkrumen, jede Position hat eine teilbare URL. Lebenslauf als Landkarte.

Zoomable CanvasMinimapDeep-Links
63

Skizze wird Angebot

Grundriss mit dem Finger zeichnen, Wände wachsen live als 3D-Modell hoch, Türen und Fenster setzen, Boden und Wandfarbe wählen. Daneben entsteht das Angebot mit Flächen, Mengen und Preisrahmen.

Canvas → 3DGeometrieLive-Angebot
64

Gemeinsam beraten

Ein Link, zwei Bildschirme, eine Seite: Berater und Kunde sehen die Cursor des anderen, jeder Klick im Konfigurator landet live beim Gegenüber. Marker, Kurzchat, Handzeichen. Co-Browsing ohne SaaS.

RealtimeCo-BrowsingPresence
65

Hände voll, gebucht

Die Seite hört zu und spricht zurück: Termin, Anfrage, Preisrechner und Navigation per Stimme. Web Speech API im Browser, deutscher Datums-Parser lokal, Felder rasten live ein. Barrierefreiheit zum Anfassen.

Web SpeechIntent-ParserBarrierefrei
66

Hero-Werkstatt

Siebzehn Einstiege im direkten Vergleich, nach Aufwand gruppiert und jeder echt scrollbar. Von Vorhang und Ebenen bis zur Bildstrecke am Scrollrad, einem eigenen WebGL-Shader, Schrift aus abgetasteten Partikeln und einem Anflug auf den Drachenfels aus offenen Geodaten. Unter jeder Bühne steht, wofür sie taugt und wo sie an ihre Grenze kommt.

Scroll-MechanikCanvas & WebGLAuswahl-Werkzeug

Nächster Bereich

Web-Apps

Vollwertige Anwendungen im Browser