🌤 Wetter Berlin
Live--°C
API: Open-Meteo · Kein API-Key nötig
Interaktives Labor
UX & Feature
Showcase
Elf interaktive Module — Speiserechner, QR-Code, Live-Daten, Karte, Theme-Wechsler, 360°-Ansicht, Animationen, FPS-Monitor, Performance, Cursor-Effekte und Tierlist.
🧮
Speiserechner
Stelle deine Bestellung interaktiv zusammen — mit Echtzeit-Kalkulation, Kalorienübersicht, Favoriten, PDF-Export und QR-Code zum Teilen.
📱
QR-Code für Reservierungen
Generiere einen QR-Code für die Reservierungsseite — perfekt zum Ausdrucken, Teilen oder Einbinden in Marketingmaterialien.
220 px
Schnellauswahl:
Klicke auf „QR generieren"
📡
Live-Daten Abfrage
Echtzeit-Daten direkt aus öffentlichen APIs — kein API-Schlüssel nötig. Aktuelles Wetter in Berlin und live Wechselkurse, automatisch alle 60 Sekunden aktualisiert.
💱 Wechselkurse
LiveBasis1 EUR
API: Frankfurter.app · Kein API-Key nötig
Noch nicht geladen
⚠️ Abfrage fehlgeschlagen — bitte Internetverbindung prüfen.
🗺️
Interaktive Karte
Standort von Ember & Smoke auf einer interaktiven Karte — mit Wegbeschreibung, Layer-Wechsel und Vollbild-Funktion. Powered by Leaflet.js+ OpenStreetMap (kein API-Key erforderlich).
Karte wird geladen …
Ember & SmokeKastanienallee 82, 10435 BerlinMo–So: 17:00 – 23:00 Uhr
🎨
Theme-Wechsler
Wähle eines von vier Designs — das Theme wird sofort auf die gesamte Seite angewendet und im Browser gespeichert.
BG
Brand
Accent
Aa Bb Cc — The quick brown fox
Aktuell: Ember — Theme wird in localStorage gespeichert.
360°
3D-Ansicht
Ziehe das Gericht zum Drehen. Mausrad oder Pinch zum Zoomen. Automatische Rotation ein- und ausschaltbar.
← Ziehen zum Drehen →
🎬
Animations-Showcase
Starte die Sequenz und erlebe gestaffelte Einblendungen, hochzählende Zahlen, einen selbst zeichnenden SVG-Pfad und einen Partikel-Burst.
🍽️Gerichte0
⭐Bewertung0
👥Gästestimmen0
🏆Jahre0
Signatur-Animation
⚡
FPS- & Rendering-Monitor
Echtzeit-Anzeige von FPS, Frame-Time und DOM-Statistiken. Aktiviere den Monitor und beobachte dein Gerät bei der Arbeit.
--
FPS aktuell
bereit
--Ø FPS
--Frame-Zeit (ms)
--DOM-Elemente
--Min FPS
60300
🚀
Performance Showcase
Interaktive Demos moderner Web-Performance-Techniken. Klicke auf eine Technik und erlebe den Unterschied direkt.
Skeleton-Screens verhindern Layout-Shifts und wirken subjektiv schneller als leere Bereiche oder Spinner.
Dry-aged Entrecôte
240 g, 28 Tage gereift
€ 48
Steinbeißer vom Grill
Auf Fenchelpüree mit Safranöl
€ 44Bilder laden erst wenn sie in den Sichtbereich scrollen. Spart bis zu 80% des initialen Daten-Transfers.
⏳ Noch nicht geladen
⏳ Noch nicht geladen
⏳ Noch nicht geladen
Scrolle in den Bereich oder klicke "Alle laden"
Debounce verzögert Ausführung bis zum letzten Aufruf. Throttle begrenzt die Aufruf-Frequenz. Tippe und beobachte den Unterschied.
0Roh-Events
0Debounced (300ms)
0Throttled (100ms)
GPU-beschleunigte Animationen nutzen transform und opacity statt top/left/width — kein Layout-Reflow, 60 FPS.
❌ Ohne GPU
Element
Nutzt margin-left → Layout-Reflow jedes Frame
✅ Mit GPU
Element
Nutzt transform: translateX() → Composite-Only
Der IntersectionObserver registriert Sichtbarkeit ohne teures Scroll-Polling. Scrolle durch die Liste und beobachte die Aktivierung.
Element 1außerhalb
Element 2außerhalb
Element 3außerhalb
Element 4außerhalb
Element 5außerhalb
Element 6außerhalb
0 / 6 sichtbar
🖱️
Cursor Playground
Konfiguriere deinen Cursor und erlebe die Effekte live in der Demo-Zone. Effekte wirken nur innerhalb des markierten Bereichs.
Effekte
Demo-Zone
Bewege die Maus hierher
🏆
Interaktive Tierlist
Bewerte alle 14 Gerichte der Speisekarte per Drag & Drop. Deine Einordnung wird automatisch gespeichert.
S
A
B
C
D
Gerichte (ziehe in eine Kategorie)
🥒Geeiste Gurkensuppe€12
🐟Geräucherter Heilbutt€18
🌹Rote-Bete-Carpaccio€14
🧀Gratinierter Ziegenkäse€16
🦪Nordische Austern€22
🥩Dry-aged Entrecôte€48
🍖Karamellisierter Schweinebauch€38
🐡Steinbeißer vom Grill€44
🌿Wildkräuter-Risotto€34
🍗Geschmorte Lammkeule€42
🍫Rote-Bete-Schokoladen-Fondant€14
🍦Sauerteigbrot-Eis€12
🧀Nordischer Käseteller€18
🔥Crème brûlée€13