175 Webtechniken 2026 – jede mit Live-Vorschau

Geprüfter Katalog aus unserer Deep Research: von Pflicht-Standards über „super modern“ bis Award-Niveau. Jede Karte zeigt eine echte Mini-Demo (kein Screenshot), Browser-Support, Aufwand der Umsetzung und Laufzeitkosten. Techniken, die dein Browser nicht kann, bleiben sichtbar und werden ehrlich markiert.

55 Standard
93 Premium
27 Award
144 Live-Demos ohne Bibliothek
6 laden eine Bibliothek nach Klick
25 Konzept-Karten
132 📱 bestens für Handy

1. Design, Layout, Typografie (19)
2. Scroll-Effekte und Animationen (16)
3. Interaktion, Maus, Touch (16)
4. Bilder, Video, Storytelling (14)
5. 3D, WebGL, Immersion (11)
6. Navigation und Seitenübergänge (13)
7. Premium-Oberflächen und Effekte (14)
8. Conversion und Benutzerführung (12)
9. Qualität, Performance, Barrierefreiheit (17)
10. Web-Apps und Experimente (15)
11. Weitere Techniken (12)
12. Native Web-Plattform 2026 (16)

Aufwand ●○ = Code-Umfang der Demo (1 wenige Zeilen CSS … 5 Bibliothek + Assets)Laufzeit ●○ = Bundle, CPU/GPU, Akku, Core-Web-Vitals-Risiko

1 Design, Layout, Typografie 19 Techniken

1.1 Responsive Design / Mobile First

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Layout ab dem kleinsten Viewport, Erweiterung per Media- und Container-Queries.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

1.2 CSS Grid

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Zweidimensionales Layout mit grid-template-areas, auto-fit und minmax().

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

1.3 Flexbox

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Eindimensionale Verteilung und Ausrichtung mit gap, grow und wrap.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

1.4 Fluid Typography mit clamp()

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Schriftgröße skaliert stufenlos zwischen Minimum und Maximum, ohne Breakpoints.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

1.5 Variable Fonts

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Eine Schriftdatei, stufenlose Achsen (wght, wdth, opsz). Demo nutzt die variable Systemschrift, wo vorhanden.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: CSS + WOFF2
Handy: 📱 Bestens für Handy
Touch: Slider
Reduced Motion: Achsen-Animation aus
Eignung: Portfolio, SaaS, Shop, Kunst

1.6 Editorial Typography

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Magazin-Satz: Initialen, Spalten, Ligaturen, hanging-punctuation.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: Portfolio, Restaurant, Kunst

1.7 Kinetic Typography

Award-LevelChrome + SafariLive-Demo📱 Bestens für Handy

Schrift als Bewegungsträger – sechs Beispiele im Wechsel: Welle, Dehnen, Walze (laufen von selbst) sowie Kippen, Farbe, Breite (reagieren auf Maus/Finger in der Nähe jedes Buchstabens). Tap springt weiter.

Aufwand: ●●●○○
Laufzeit: ●●○○○
Technik: CSS Keyframes + Pointer-Nähe (GSAP optional)
Handy: 📱 Bestens für Handy
Touch: Finger über die Buchstaben = Hover
Reduced Motion: stat
Eignung: Portfolio, Kunst

1.8 Split-Text Reveal

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Zeichen oder Wörter gestaffelt einblenden; aria-label am Elternelement hält den Text lesbar.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: Vanilla / GSAP SplitText
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: Text sofort sichtbar
Eignung: Portfolio, SaaS, Kunst

1.9 Text Scramble / Decode

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Zufallszeichen „entschlüsseln“ sich Buchstabe für Buchstabe. Vier Beispiele im Wechsel: Terminal-Decode, Wort-Wechsel im Hero (Webdesign → Web-Apps → Spiele), Binär-Reveal und ein Link, der beim Hover kurz verwürfelt.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: Vanilla ~40 Zeilen
Handy: 📱 Bestens für Handy
Touch: Tap = neu starten · Finger über Link = Hover
Reduced Motion: Endtext sofort
Eignung: Portfolio, Kunst, SaaS

1.10 Gradient Text Animation

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Animierter Farbverlauf in der Schrift selbst.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS background-clip:text
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: Portfolio, SaaS, Kunst

1.11 Masked Text Reveal

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Zeilen gleiten aus einer Maske (overflow: hidden) nach oben ins Bild.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: Portfolio, Kunst

1.12 Text entlang SVG-Pfad

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Text folgt einer Kurve; startOffset lässt ihn den Pfad entlangwandern.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: SVG textPath
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: Portfolio, Restaurant, Kunst

1.13 Bento Grid

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Kachel-Raster mit unterschiedlich großen Zellen, wie ein japanisches Bento.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS Grid
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: SaaS, Portfolio, Shop

1.14 Asymmetrisch / Broken Grid

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Bewusster Rasterbruch: Das Foto läuft über den Rand, die Überschrift greift ins Bild, Text und Nummer sitzen versetzt – alles in einem Grid, die Zellen überlappen nur. Der Schalter zeigt dieselben Inhalte brav (Vorher) und gebrochen (Nachher).

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS Grid (überlappende Zellen, Anschnitt)
Handy: 📱 Bestens für Handy
Touch: Tap = Vorher/Nachher
Reduced Motion: –
Eignung: Portfolio, Kunst

1.15 Full-Bleed Sections

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Sektionen laufen randlos, der Inhalt bleibt in der Lesebreite (Grid mit benannten Spalten).

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS Grid
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

1.16 Dark/Light Mode + light-dark()

StandardBaseline newlyLive-Demo📱 Bestens für Handy

color-scheme und light-dark() liefern beide Themes aus einer Regel; Nutzerwahl wird gespeichert.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS + 5 Z. JS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: Übergang aus
Eignung: alle

1.17 Container Queries (+ Style Queries)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Komponenten reagieren auf ihren Container statt auf den Viewport. Ziehe den Griff.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

1.18 CSS Subgrid

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Kinder erben das Raster des Elterns, dadurch fluchten Titel, Text und Preis über alle Karten.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

1.19 text-wrap: balance / pretty

StandardBaseline newlyLive-Demo📱 Bestens für Handy

Ausgeglichene Headline-Zeilen, keine Schusterjungen im Fließtext.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

2 Scroll-Effekte und Animationen 16 Techniken

2.1 Smooth Scrolling

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Weiches Scrollen für Anker per CSS; Lenis glättet zusätzlich das Mausrad.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS; Lenis nur für Award-Feeling (≈3,6 KB)
Handy: 📱 Bestens für Handy
Touch: nativ
Reduced Motion: auto
Eignung: alle

2.2 Scroll Reveal (inkl. Stagger)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Elemente erscheinen beim Eintritt in den sichtbaren Bereich; ohne JS sind sie immer sichtbar.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: IntersectionObserver / CSS view()
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: kein Offset/Fade
Eignung: alle

2.3 Scroll-Driven Animations

Premium / modernChrome + SafariLive-Demo📱 Bestens für Handy

Animation an die Scroll-Position gekoppelt, läuft ohne JS auf dem Compositor.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS animation-timeline
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: animation: none
Eignung: Portfolio, SaaS, Shop, Kunst

2.4 Parallax (+ Multi-Layer)

Premium / modernBaseline widelyLive-DemoHandy: mit Einschränkung

Eine Mondlandschaft in drei Ebenen: beim Scrollen sinkt der Mond hinter die Bergkette, die Berge heben sich leicht, der Vordergrund mit Bäumen am stärksten – so entsteht Tiefe. Regler für Stärke und Tempo, „Flach“ zeigt zum Vergleich das unbewegte Bild, „Nochmal“ startet die Fahrt.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: 3 Bild-Ebenen (WebP mit Alpha) + transform
Handy: Handy: mit Einschränkung
Touch: Wischen = Scrollen, Regler
Reduced Motion: Ebenen stehen, normales Scrollen
Eignung: Portfolio, Restaurant, Kunst

2.5 Sticky Sections

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Abschnitte haften oben, während der Inhalt darunter weiterläuft.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS position: sticky
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

2.6 Pinned Scroll Sections

Premium / modernChrome + SafariLive-DemoHandy: mit Einschränkung

Die Sektion bleibt beim Scrollen stehen („gepinnt“), während sich darin eine Geschichte abspielt – wie bei Apple: ein Handy in der Mitte wechselt seine Bildschirme (Speisekarte → Reservierung → Bestätigung), links und rechts erscheinen die passenden Vorteile, Hintergrundfarbe und Fortschritt laufen mit. Beim Start scrollt die Demo einmal selbst.

Aufwand: ●●●○○
Laufzeit: ●●○○○
Technik: CSS sticky + SDA (JS-Fallback)
Handy: Handy: mit Einschränkung
Touch: Scrollen
Reduced Motion: normales Scrollen
Eignung: Portfolio, SaaS, Kunst

2.7 Horizontal Scrolling

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Horizontale Strecke innerhalb einer vertikalen Seite; hier nativ per Snap und Wischen.

Aufwand: ●●●○○
Laufzeit: ●●○○○
Technik: CSS scroll-snap / GSAP
Handy: 📱 Bestens für Handy
Touch: Swipe nativ
Reduced Motion: ohne Mapping
Eignung: Portfolio, Kunst, Shop

2.8 Scroll Snap

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Einrasten auf Abschnitte oder Slides, rein deklarativ.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: nativ
Reduced Motion: smooth aus
Eignung: alle

2.9 Scrollytelling

Award-LevelBaseline widelyLive-Demo📱 Bestens für Handy

Erzählung in Schritten: Text scrollt, die Grafik links bleibt stehen und wechselt den Zustand.

Aufwand: ●●●●○
Laufzeit: ●●○○○
Technik: Vanilla IO / GSAP ScrollTrigger
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: Schritte statisch
Eignung: Kunst, Portfolio, SaaS

2.10 Image Sequence on Scroll

Award-LevelBaseline widelyLive-DemoEher Desktop

Bildfolge wird per Scroll „abgespielt“ (Apple-Stil): hier eine Explosionszeichnung eines Geräts in 36 Frames, die die Demo selbst rendert statt Fotos zu laden.

Aufwand: ●●●●○
Laufzeit: ●●●●○
Technik: Vanilla Canvas
Handy: Eher Desktop
Touch: –
Reduced Motion: Einzelbild
Eignung: Shop, Kunst

2.11 Video Scrubbing

Award-LevelBaseline widelyLive-DemoEher Desktop

currentTime des Videos folgt der Scroll-Position: Scrollen spult den Drohnenflug vor und zurück, Zeitleiste und Timecode laufen mit. Beim Start spult die Demo einmal von selbst. Wichtig: Video mit dichten Keyframes kodieren (hier alle 8 Bilder), sonst ruckelt das Spulen.

Aufwand: ●●●○○
Laufzeit: ●●●●○
Technik: Vanilla
Handy: Eher Desktop
Touch: –
Reduced Motion: Poster
Eignung: Shop, Kunst

2.12 Scroll Progress Indicator

StandardChrome + SafariLive-Demo📱 Bestens für Handy

Lesefortschrittsbalken ohne JavaScript.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS scroll()
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

2.13 Scroll-Based Color Changes

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Hintergrund oder Theme wechselt je nach sichtbarer Sektion.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: IO + Custom Properties
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: harte Wechsel
Eignung: Portfolio, Restaurant, Kunst

2.14 Zoom-on-Scroll

Premium / modernChrome + SafariLive-Demo📱 Bestens für Handy

Das Bild zoomt mit dem Scroll-Fortschritt – hier fährt man beim Scrollen tief in die Gasse hinein, Text blendet aus und am Ende ein. Reines CSS (scroll-timeline); beim Start scrollt die Demo einmal von selbst.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS SDA
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: aus
Eignung: Portfolio, Shop, Kunst

2.15 Infinite Marquee

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Endloses Laufband aus einer duplizierten Spur, pausierbar.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS keyframes
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stoppen + Pause-Button (WCAG 2.2.2)
Eignung: alle

2.16 Scroll Velocity Effects

Award-LevelBaseline widelyLive-DemoHandy: mit Einschränkung

Skew oder Blur proportional zur Scroll-Geschwindigkeit.

Aufwand: ●●●○○
Laufzeit: ●●●○○
Technik: Vanilla rAF / Lenis velocity
Handy: Handy: mit Einschränkung
Touch: Touch-Scroll ok
Reduced Motion: aus
Eignung: Kunst, Portfolio

3 Interaktion, Maus, Touch 16 Techniken

3.1 Hover Transitions & Microinteractions (+ Hover-to-Fill)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Kleine Rückmeldungen, die eine Seite lebendig machen: Füllung, die mit der Maus mitläuft, Unterstrich, der wächst, Herz mit Partikel-Explosion, Schalter mit Federung, Download-Knopf mit Fortschritt und Haken. Alles auch per Tastatur und Tippen; beim Start führen sich die Elemente einmal selbst vor.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: :active / :focus-visible
Reduced Motion: kurz/aus
Eignung: alle

3.2 Magnetic Buttons

Premium / modernBaseline widelyLive-DemoEher Desktop

Der Button zieht sich sanft zur Zeigerposition.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: Vanilla pointermove
Handy: Eher Desktop
Touch: nein, nur bei (hover: hover)
Reduced Motion: aus
Eignung: Portfolio, Kunst, SaaS

3.3 Custom Cursor (+ Follower)

Premium / modernBaseline widelyLive-DemoEher Desktop

Eigener Cursor mit träge nachlaufendem Ring; auf Touch-Geräten deaktiviert.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: Vanilla rAF
Handy: Eher Desktop
Touch: nein, bei pointer: coarse aus
Reduced Motion: aus
Eignung: Portfolio, Kunst

3.4 Spotlight-Effekte (Cursor, Cards, Background)

Premium / modernBaseline widelyLive-DemoHandy: mit Einschränkung

Ein Lichtkegel folgt dem Zeiger und legt den dunklen Weinkeller frei – darunter dasselbe Foto abgedunkelt, darüber hell mit runder Maske (mask-image + CSS-Variablen). Ohne Maus wandert das Licht von selbst; am Handy folgt es dem Finger.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS radial-gradient + 10 Z. JS
Handy: Handy: mit Einschränkung
Touch: Tap-Position / statisch
Reduced Motion: stat
Eignung: SaaS, Portfolio, Kunst

3.5 Hover Image Reveal

Premium / modernBaseline widelyLive-DemoHandy: mit Einschränkung

Beim Überfahren der Einträge schwebt das passende Bild am Zeiger mit, leicht gedreht. Am Handy zeigt Tippen das Bild. Ohne Maus läuft die Liste beim Start einmal von selbst durch.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: Vanilla
Handy: Handy: mit Einschränkung
Touch: Tap zeigt Bild
Reduced Motion: ohne Folgen
Eignung: Portfolio, Restaurant, Kunst

3.6 3D Tilt Cards

Premium / modernBaseline widelyLive-DemoHandy: mit Einschränkung

Karte neigt sich zum Zeiger: Foto, Schrift und Preisschild liegen in verschiedenen Tiefen (translateZ), ein Lichtreflex und der Schatten wandern mit. Ohne Maus bewegt sich die Karte sanft von selbst; am Handy folgt sie dem Finger.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: Vanilla
Handy: Handy: mit Einschränkung
Touch: statisch oder Gyro
Reduced Motion: aus
Eignung: Portfolio, Shop, SaaS

3.7 Ripple Effects

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Tippen lässt Wellen wie von einem Wassertropfen durchs Foto laufen – das Bild bricht sich in den Ringen (WebGL-Shader, bis zu 8 Wellen gleichzeitig). Ziehen hinterlässt eine Spur. Ohne Maus fallen die Tropfen von selbst.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: WebGL-Shader, Vanilla JS
Handy: 📱 Bestens für Handy
Touch: pointerdown
Reduced Motion: aus
Eignung: SaaS, Shop

3.8 Liquid / Distortion Hover

Award-LevelBaseline widelyLive-DemoHandy: mit Einschränkung

Bild oder Text verflüssigt sich unter dem Zeiger wie unter Wasser (hier per SVG-Filter, ohne WebGL). Ruhig: leichtes Wabern, Zeiger drüber oder Tippen: stark.

Aufwand: ●●●○○
Laufzeit: ●●●○○
Technik: SVG feDisplacementMap; WebGL-Variante mit OGL
Handy: Handy: mit Einschränkung
Touch: Tap/auto
Reduced Motion: aus
Eignung: Kunst, Portfolio

3.9 Spring / Elastic Motion

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Feder statt starrer Animation: Die Karte hängt wie an einem Gummiband – wegziehen, loslassen, sie schwingt über das Ziel hinaus und pendelt sich ein, dabei kippt sie leicht mit. So fühlen sich Apps „echt“ an. Beim Start zieht die Demo einmal selbst.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS linear() / WAAPI
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: ohne Overshoot
Eignung: SaaS, Portfolio, Shop

3.10 Morphing Buttons

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Der Button wird zum Lade-Indikator und dann zum Häkchen.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: ohne Animation
Eignung: SaaS, Shop

3.11 Drag-to-Explore

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Eine große Inhaltsfläche lässt sich frei ziehen.

Aufwand: ●●●○○
Laufzeit: ●●○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: nativ (touch-action)
Reduced Motion: ohne Trägheit
Eignung: Kunst, Portfolio, Shop

3.12 Drag-and-Drop

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Sortieren per Ziehen: Zeile anfassen, halten, verschieben, loslassen – die Zeile folgt dem Finger, die anderen machen Platz. Tastatur-Alternative: Pfeiltasten.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Vanilla Pointer Events
Handy: 📱 Bestens für Handy
Touch: ja + Tastatur (WCAG 2.5.7)
Reduced Motion: –
Eignung: SaaS, Shop

3.13 Touch Carousel & Swipe

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Wischbare Slides ohne JavaScript-Bibliothek, mit Pfeil-Buttons als Ergänzung.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS scroll-snap
Handy: 📱 Bestens für Handy
Touch: nativ
Reduced Motion: kein Autoplay
Eignung: alle

3.14 Tooltips & Hover Previews

StandardBaseline newlyLive-DemoHandy: mit Einschränkung

Kontextinfos ohne Floating-UI-Bibliothek: Popover am Anker positioniert.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: Popover + Anchor Positioning
Handy: Handy: mit Einschränkung
Touch: Tap via popovertarget
Reduced Motion: Fade aus
Eignung: alle

3.15 Physics & Inertia

Award-LevelBaseline widelyLive-DemoHandy: mit Einschränkung

Bälle fallen, prallen ab, stoßen sich gegenseitig und rollen aus. Tippen wirft einen neuen Ball, langes Drücken schubst alle an. Ohne Eingabe kommt die Szene zur Ruhe.

Aufwand: ●●●●○
Laufzeit: ●●●○○
Technik: Vanilla ~120 Z. / Matter.js lazy
Handy: Handy: mit Einschränkung
Touch: nativ
Reduced Motion: ohne Physik
Eignung: Kunst, Portfolio

3.16 Cursor Trail / Paint Trail

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Leuchtende Farbspur hinter Zeiger oder Finger, die weich verblasst und nach oben treibt. Farbe wandert mit der Zeit, Strichbreite folgt der Geschwindigkeit. Tap setzt einen Klecks.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: Vanilla Canvas 2D
Handy: 📱 Bestens für Handy
Touch: Finger malt, Tap = Klecks
Reduced Motion: aus
Eignung: Kunst, Portfolio, Handwerk

4 Bilder, Video, Storytelling 14 Techniken

4.1 Responsive Images (srcset/sizes)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Der Browser wählt aus mehreren Bildgrößen die passende; nur die wird geladen. Demo: Slider ändert die Darstellungsbreite, das Bild zeigt selbst, welche Datei der Browser gewählt hat (currentSrc).

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML
Handy: 📱 Bestens für Handy
Touch: Slider
Reduced Motion: –
Eignung: alle

4.2 Lazy Loading

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Bilder und iframes laden erst nahe am Viewport. Nie das LCP-Bild lazy laden. Demo: 8 Bilder, Zähler zeigt, wie viele wirklich geladen sind – erst beim Scrollen.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: loading="lazy"
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

4.3 AVIF / WebP (+ JPEG-XL-Stand)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Dasselbe Foto in drei Formaten, gleich gute Qualität: JPEG 65 KB, WebP 42 KB, AVIF 32 KB. Ein <picture>-Element bietet alle an, der Browser nimmt das beste, das er kann – die Karte zeigt, welches dein Browser gewählt hat, und ob er JPEG XL könnte.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: <picture> mit Format-Fallback
Handy: 📱 Bestens für Handy
Touch: Tap auf eine Kachel = groß
Reduced Motion: –
Eignung: alle

4.4 Art Direction mit <picture>

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Je nach Viewport ein anderer Bildausschnitt (Hochformat auf dem Handy, Panorama am Desktop).

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

4.5 Hero mit Bild/Video (Cinematic)

Premium / modernBaseline widelyLive-DemoHandy: mit Einschränkung

Vollflächiger Hero mit echtem Video: stumm, Autoplay, playsinline, Poster bis es geladen ist, Kinobalken, Titel und Knopf blenden ein; am Ende weich abgeblendet und neu gestartet. Pause-Knopf gehört dazu (Barrierefreiheit). Video lädt erst, wenn die Demo sichtbar wird.

Aufwand: ●●○○○
Laufzeit: ●●●●○
Technik: <video muted playsinline poster>
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: Poster + Pause
Eignung: Restaurant, Handwerk, Portfolio, Shop

4.6 Cinemagraphs

Premium / modernBaseline widelyLive-DemoHandy: mit Einschränkung

Ein Foto, in dem sich genau eine Sache bewegt: Das Café steht still, nur aus der Kaffeetasse steigt Dampf auf. Demo: Canvas zeichnet den Dampf aus weichen, aufsteigenden Schwaden über das Standbild; echte Version oft als <video loop> oder animiertes AVIF.

Aufwand: ●○○○○
Laufzeit: ●●●○○
Technik: <video loop> / animiertes AVIF
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: Standbild
Eignung: Restaurant, Portfolio, Kunst

4.7 Before/After Slider

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Vorher/Nachher-Vergleich, ideal für Handwerk und Renovierung – hier dieselbe Küche vor und nach der Renovierung. Regler ziehen oder tippen, auch per Tastatur. Beim Start fährt der Regler einmal hin und her.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: <input type=range> + clip-path
Handy: 📱 Bestens für Handy
Touch: ja nativ
Reduced Motion: –
Eignung: Handwerk, Portfolio, Shop

4.8 Clip-Path & Masking (+ Reveal on Scroll)

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Formmasken per clip-path: Die Maske folgt Maus oder Finger wie ein Fenster ins Foto; Tippen verwandelt sie weich vom Kreis zur Raute, aufs ganze Foto und in Schrift (background-clip:text). Hinter der Maske liegt das Foto unscharf und dunkel – so wirkt die Form wie ausgeschnitten.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: Portfolio, Kunst, Shop

4.9 WebGL Image Transitions

Award-LevelBaseline widelyLive-DemoEher Desktop

Zwei Fotos – die Moselschleife am Morgen und bei Nacht – gehen per Shader ineinander über: eine Noise-Karte verzerrt beide gegenläufig, dazu Farbkanten (RGB-Split). Finger/Maus steuert den Übergang, sonst läuft er von allein.

Aufwand: ●●●●○
Laufzeit: ●●●●○
Technik: Vanilla WebGL (GLSL Displacement)
Handy: Eher Desktop
Touch: Wischen = Übergang steuern
Reduced Motion: Crossfade
Eignung: Kunst, Portfolio, Shop

4.10 Galerie & Lightbox

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Bild antippen: Großansicht im nativen Dialog mit Fokusfalle, Esc, Backdrop, Pfeiltasten und Wischen zum nächsten Bild.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: <dialog>, optional View Transition
Handy: 📱 Bestens für Handy
Touch: Swipe via scroll-snap
Reduced Motion: ohne Zoom
Eignung: alle

4.11 Masonry Gallery

Premium / modernexperimentellLive-Demo📱 Bestens für Handy

Mauerwerk-Raster: Kacheln mit unterschiedlicher Höhe rücken lückenlos zusammen. Der Schalter zeigt den Unterschied zum normalen Raster, „+“ fügt eine Kachel an.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS columns
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: –
Eignung: Portfolio, Restaurant, Kunst

4.12 Ken Burns Effect

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Langsames Zoomen und Schwenken über Standbilder, weich überblendet – mit Fortschrittsbalken und Untertitel wie in einer Story. Nur CSS-Keyframes, keine Bibliothek.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS keyframes
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: Restaurant, Portfolio

4.13 Duotone

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Zweifarbiges Markenbild per Graustufen und Blend-Mode.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS mix-blend-mode / SVG
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: Portfolio, Kunst

4.14 Progressive Image Loading (LQIP)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Winzige unscharfe Vorschau, dann das scharfe Bild – ohne Layoutsprung.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS + onload
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: ohne Fade
Eignung: alle

5 3D, WebGL, Immersion 11 Techniken

5.1 CSS 3D Transforms (+ Card Flip)

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Perspektive und Wendekarte mit backface-visibility.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: Tap toggelt
Reduced Motion: Fade statt Rotation
Eignung: Portfolio, Shop, Restaurant

5.2 Three.js-Szenen

Award-LevelBaseline widelyBibliothek lädt nach KlickHandy: mit Einschränkung

Echtzeit-3D-Szene im Browser. Die Bibliothek lädt erst nach Klick.

Aufwand: ●●●●○
Laufzeit: ●●●●●
Technik: Three.js via jsDelivr (≈150 KB gz), lazy
Handy: Handy: mit Einschränkung
Touch: OrbitControls touch
Reduced Motion: Poster
Eignung: Kunst, Portfolio, Shop

5.3 WebGL Shader Effects

Award-LevelBaseline widelyLive-DemoHandy: mit Einschränkung

Fragment-Shader auf einem Foto: Regentropfen fallen auf die Mosel, jede Welle verzerrt das Bild im Ring und spaltet die Farben leicht auf (bis zu 8 Wellen gleichzeitig, alles auf der Grafikkarte). Ohne Maus regnet es von selbst; Maus bewegen oder tippen macht neue Wellen.

Aufwand: ●●●●○
Laufzeit: ●●●●○
Technik: Vanilla WebGL ~60 Z.
Handy: Handy: mit Einschränkung
Touch: Pointer optional
Reduced Motion: 1 Standbild
Eignung: Kunst, Portfolio

5.4 WebGPU Rendering

Award-LevelexperimentellLive-DemoEher Desktop

Next-Gen-GPU-API: 50 000 Partikel werden pro Frame in einem Compute-Shader bewegt und direkt gezeichnet – ohne dass die CPU einen Punkt anfasst. Ohne WebGPU zeigt die Karte einen Canvas-2D-Ersatz.

Aufwand: ●●●●○
Laufzeit: ●●●●○
Technik: Vanilla WebGPU (Compute + Render)
Handy: Eher Desktop
Touch: Finger zieht die Partikel
Reduced Motion: Standbild
Eignung: Kunst

5.5 3D Product Viewer (+ Configurator)

Award-LevelBaseline widelyBibliothek lädt nach KlickHandy: mit Einschränkung

GLB-Modell drehen, Animation abspielen, Varianten wählen. Lädt model-viewer und eine eigene 3D-Figur (20 MB) erst nach Klick.

Aufwand: ●●●○○
Laufzeit: ●●●●●
Technik: Google <model-viewer> (lazy)
Handy: Handy: mit Einschränkung
Touch: Drehen nativ
Reduced Motion: auto-rotate aus
Eignung: Shop, Handwerk

5.6 3D Rotation on Scroll

Award-LevelChrome + SafariLive-Demo📱 Bestens für Handy

Ein Würfel rotiert mit dem Scroll-Fortschritt, rein in CSS.

Aufwand: ●●●○○
Laufzeit: ●●○○○
Technik: CSS SDA
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: Portfolio, Shop, Kunst

5.7 3D Particles & Morphing

Award-LevelBaseline widelyBibliothek lädt nach KlickEher Desktop

Partikelwolken, die zwischen Formen morphen. Lädt Three.js erst nach Klick.

Aufwand: ●●●●●
Laufzeit: ●●●●●
Technik: Three.js Points + Shader (lazy)
Handy: Eher Desktop
Touch: Drag
Reduced Motion: Stillstand
Eignung: Kunst

5.8 Interactive Particle Background

Premium / modernBaseline widelyLive-DemoHandy: mit Einschränkung

Ein lebendiges Netz aus rund 170 farbigen Punkten: nahe Punkte verbinden sich mit Linien im Farbverlauf, der Zeiger zieht die Punkte an und verbindet sich mit ihnen, Tippen stößt sie weg. Ohne Maus wandert ein unsichtbarer Zeiger von selbst. Canvas 2D, scharf auf jedem Bildschirm.

Aufwand: ●●●○○
Laufzeit: ●●●○○
Technik: Vanilla Canvas 2D
Handy: Handy: mit Einschränkung
Touch: Tap-Impulse
Reduced Motion: aus
Eignung: SaaS, Portfolio, Kunst

5.9 Fluid Simulation

Award-LevelBaseline widelyLive-DemoEher Desktop

Echte Navier-Stokes-Strömung: Geschwindigkeits- und Farbfeld werden jeden Frame advektiert, Druck wird gelöst, Wirbel bleiben erhalten. Finger/Maus rührt Farbe hinein; ohne Berührung gibt die Karte selbst Impulse.

Aufwand: ●●●●●
Laufzeit: ●●●●●
Technik: Stable Fluids (Navier-Stokes) – hier Vanilla Canvas 2D, Vollversion WebGL
Handy: Eher Desktop
Touch: Finger rührt
Reduced Motion: nur Farbe, kein Strömen
Eignung: Kunst

5.10 Glass Refraction / Liquid Glass

Award-LevelBaseline widelyLive-DemoHandy: mit Einschränkung

Ein Glaskörper über einem echten Foto (Herbstwald von oben) bricht das Bild wie eine Linse: am Rand stark verzerrt und in Regenbogen-Kanten aufgespalten, in der Mitte vergrößert, dazu Glanzkante und Lichtreflex (Apple-„Liquid Glass“-Stil). Ohne Maus gleitet das Glas von selbst; ziehen verschiebt es.

Aufwand: ●●●○○
Laufzeit: ●●●○○
Technik: WebGL-Shader (Brechung, Dispersion, Glanz)
Handy: Handy: mit Einschränkung
Touch: Glas verschieben
Reduced Motion: Hintergrund steht
Eignung: Kunst, Portfolio, SaaS

5.11 Depth-Based Parallax

Award-LevelBaseline widelyLive-DemoHandy: mit Einschränkung

Ein flaches Foto wird mit einer Tiefenkarte (hell = nah, dunkel = fern) räumlich: die Trauben vorne bewegen sich gegen das Moseltal dahinter – wie die 3D-Fotos bei Facebook/Apple. Ohne Maus schwenkt das Bild von selbst; der Schalter zeigt die Tiefenkarte.

Aufwand: ●●●●○
Laufzeit: ●●●○○
Technik: WebGL + Tiefenkarte (Displacement)
Handy: Handy: mit Einschränkung
Touch: Finger neigt das Bild
Reduced Motion: stat
Eignung: Kunst, Portfolio

6 Navigation und Seitenübergänge 13 Techniken

6.1 Sticky Navigation

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Die Navigation bleibt beim Scrollen oben sichtbar.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

6.2 Mobile Menu (+ animierter Hamburger)

StandardBaseline newlyLive-Demo📱 Bestens für Handy

Menü ohne JavaScript: Popover mit Esc, Light-Dismiss und morphendem Icon.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: <button popovertarget> + CSS
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: Icon-Morph aus
Eignung: alle

6.3 Mega Menu

Premium / modernBaseline newlyLive-DemoHandy: mit Einschränkung

Mehrspaltiges Untermenü, tastaturbedienbar, ohne Hover-Falle.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: <details> + CSS
Handy: Handy: mit Einschränkung
Touch: Tap statt Hover
Reduced Motion: –
Eignung: Shop, SaaS

6.4 Fullscreen Overlay Menu

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Vollflächiges Menü: Tipp auf ☰, das Menü blendet über die ganze Fläche ein, die Einträge staffeln sich. Ein-/Ausblenden rein per CSS (@starting-style, transition-behavior).

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: nur Fade
Eignung: Portfolio, Restaurant, Kunst

6.5 Hide/Reveal on Scroll

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Der Header verschwindet beim Runterscrollen und kommt beim Hochscrollen sofort zurück. Spart Platz auf dem Handy, Navigation bleibt erreichbar.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: Vanilla (Scrollrichtung)
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: ohne Slide
Eignung: alle

6.6 Active Section Highlighting

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Der aktuell sichtbare Abschnitt wird in der Navigation markiert.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: IntersectionObserver
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

6.7 Anchor Navigation

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Sprungmarken, deren Ziel nicht unter dem Sticky-Header verschwindet (scroll-margin-top). Demo: Links tippen; Schalter zeigt den Fehler ohne scroll-margin.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML + scroll-margin-top
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: kein smooth
Eignung: alle

6.8 Breadcrumb

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Pfadanzeige als geordnete Liste, maschinenlesbar per strukturierten Daten.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: <nav><ol> + JSON-LD BreadcrumbList
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: Shop, SaaS, Handwerk

6.9 View Transitions same-document (+ Shared Element)

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Animierte DOM-Zustandswechsel: Die Kacheln rotieren alle 3 Sekunden (oder per Knopf) und gleiten dabei an ihren neuen Platz statt zu springen – die blaue Hero-Kachel „morpht“ per view-transition-name.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: document.startViewTransition
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: ::view-transition-* animation:none
Eignung: alle

6.10 Cross-document View Transitions (+ Page Transitions)

Premium / modernChrome + SafariLive-Demo📱 Bestens für Handy

MPA-Seitenübergänge ohne JavaScript. Diese Bibliothek hat @view-transition { navigation: auto } gesetzt – ein Reload der Seite über den Link zeigt den Fade.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS @view-transition
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: in RM-Query kapseln
Eignung: alle

6.11 Navigation API (+ SPA-Navigation)

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Moderner Router-Unterbau: Links werden abgefangen, nur der Inhalt wird getauscht, die Adresse ändert sich trotzdem. Demo simuliert das mit einer Mini-Adressleiste; Code zeigt die echte Navigation API.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: navigation.addEventListener('navigate')
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: ohne VT
Eignung: SaaS

6.12 Speculation Rules (+ Prefetch on Hover)

Premium / modernnur ChromiumKonzeptHandy: mit Einschränkung

Prefetch oder Prerender der wahrscheinlich nächsten Seite. In einer Ein-Datei-Bibliothek nicht vorführbar, daher nur der Code.

Aufwand: ●○○○○
Laufzeit: ●●○○○
Technik: <script type="speculationrules">
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: –
Eignung: alle

6.13 Command Palette

Premium / modernBaseline widelyLive-DemoEher Desktop

Suchbares Befehlsmenü wie in Editoren (⌘K / Strg+K). Schließen: Esc, ✕, Klick daneben oder Befehl wählen.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Vanilla
Handy: Eher Desktop
Touch: Button statt nur ⌘K
Reduced Motion: –
Eignung: SaaS

7 Premium-Oberflächen und Effekte 14 Techniken

7.1 Glassmorphism

Premium / modernBaseline newlyLive-DemoHandy: mit Einschränkung

Milchglas-Karte über der Mosel bei Nacht, das Foto wandert langsam: backdrop-filter verwischt, was dahinter liegt; feiner Verlaufsrand und Lichtkante machen das Glas plastisch. Kontrast prüfen; große Flächen kosten mobil GPU.

Aufwand: ●○○○○
Laufzeit: ●●○○○
Technik: CSS (backdrop-filter, Verlaufsrand, Grain)
Handy: Handy: mit Einschränkung
Touch: Karte neigt sich
Reduced Motion: Blobs stehen
Eignung: SaaS, Portfolio

7.2 Neumorphism

Premium / modernBaseline widelyLive-Demo⚠ Kontrast prüfen📱 Bestens für Handy

Weiche Reliefs aus zwei Schatten. Lehrbeispiel: Kontraste reichen oft nicht für WCAG 1.4.11.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: Kunst

7.3 Mesh / Aurora Gradients

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Fließende Farbe als lebender Hintergrund: Polarlicht-Vorhänge in Grün, Türkis und Violett wogen über einem Sternenhimmel, darunter leuchtende Mesh-Wolken. Canvas zeichnet jeden Vorhang aus feinen, additiv gemischten Lichtstreifen; Maus oder Finger lenkt das Licht.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: CSS (Blend-Modes, Blur, Grain)
Handy: 📱 Bestens für Handy
Touch: Finger zieht ein Licht
Reduced Motion: stat
Eignung: SaaS, Portfolio, Kunst

7.4 Animated Gradient Borders

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Verlaufsrahmen, der sich dreht oder als Lauflicht um die Karte rast. Hier dreht sich eine große Verlaufsfläche hinter einer Maske (läuft überall); elegantere Variante: Winkel per @property animieren.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: conic-gradient + rotierende Ebene (oder @property)
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: SaaS, Portfolio

7.5 Glow / Neon

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Leuchtkanten und Neonschrift aus mehreren Schatten.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: box-/text-shadow
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: kein Flackern (WCAG 2.3.1)
Eignung: Kunst, Restaurant

7.6 Grain & Noise

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Filmkorn macht aus einem glatten Digitalfoto einen Kino-Look: rechts liegt über demselben Foto ein flimmerndes Korn (SVG feTurbulence als data-URI, keine Bilddatei), dazu Vignette, warme Farbgebung und leichtes Lichtflackern. Regler ziehen oder tippen verschiebt die Grenze; das Schild der größeren Seite leuchtet. Beim Start fährt er einmal von selbst.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: SVG feTurbulence als data-URI
Handy: 📱 Bestens für Handy
Touch: Regler ziehen
Reduced Motion: stat
Eignung: Portfolio, Kunst, Restaurant

7.7 SVG Morphing

Award-LevelBaseline widelyLive-Demo📱 Bestens für Handy

Ein Pfad verwandelt sich in einen anderen: Glühbirne → Tasse → Haus → Herz. Jede Form wird in 160 Punkte zerlegt (getPointAtLength bzw. berechnet), die Punkte werden so gedreht, dass sie am kürzesten Weg wandern, dann gleiten sie mit Überschwingen und einem kurzen Wabern in die neue Form. Tippen = nächste Form.

Aufwand: ●●●○○
Laufzeit: ●●○○○
Technik: Vanilla JS (getPointAtLength) / GSAP MorphSVG
Handy: 📱 Bestens für Handy
Touch: Tippen = nächste Form
Reduced Motion: Endform
Eignung: Portfolio, Kunst

7.8 SVG Line Drawing

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Scroll-gesteuertes Line Drawing: beim Scrollen zeichnet sich Strich für Strich ein Haus – Fundament, Wände, Dach, Fenster, Baum –, am Ende füllt es sich mit Farbe und das Licht geht an. Technik: pathLength=1 + stroke-dashoffset, gekoppelt an den Scroll-Fortschritt. Beim Start scrollt die Demo einmal selbst; ein Hinweis „Scrollen“ bleibt, bis man selbst scrollt.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: stroke-dashoffset + pathLength
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: fertig gezeichnet
Eignung: alle

7.9 Animated SVG Icons

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Icons mit Zustandsanimation (hier: Glocke läutet bei Hover/Fokus).

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS/SMIL
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: alle

7.10 Lottie

Premium / modernBaseline widelyBibliothek lädt nach KlickHandy: mit Einschränkung

After-Effects-Animation als JSON, abgespielt vom lottie-web-Player. Lädt Player und eine eigene Beispiel-Animation (4 KB JSON, selbst gehostet) erst nach Klick; Tippen pausiert.

Aufwand: ●●○○○
Laufzeit: ●●●●○
Technik: lottie-web (≈60–75 KB gz), lazy
Handy: Handy: mit Einschränkung
Touch: Tap
Reduced Motion: goToAndStop
Eignung: SaaS, Shop

7.11 Rive Interactive Animations

Award-LevelBaseline widelyBibliothek lädt nach KlickHandy: mit Einschränkung

Vektor-Animationen mit Zustandsmaschinen, die auf Eingaben reagieren. Lädt Runtime und eine eigene .riv-Datei (0,9 KB, selbst gehostet) erst nach Klick: Ruheanimation läuft, Tippen löst „jump“ aus.

Aufwand: ●●●○○
Laufzeit: ●●●●○
Technik: @rive-app/canvas (≈ 200 KB), lazy
Handy: Handy: mit Einschränkung
Touch: Tap
Reduced Motion: Ruhezustand
Eignung: SaaS, Kunst

7.12 CSS Shape Morphing (shape())

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Formen fließen ineinander, rein in CSS: clip-path interpoliert zwischen Polygonen mit gleicher Punktzahl (hier 24 Punkte) – Kreis → Stern → Blüte → Blob → Quadrat. Keine SVG-Datei, kein JS. Mit shape() geht dasselbe auch mit Kurven.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS clip-path (polygon mit gleicher Punktzahl)
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: Portfolio, Kunst

7.13 Animated Background Grids

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Ein Gitter wird zur Landschaft: Wireframe-Berge aus Linien rollen auf dich zu, die Sonne mit Streifen versinkt dahinter, Sterne funkeln, die Straße in der Mitte bleibt frei. Maus oder Finger lenkt den Flug nach links und rechts. Canvas 2D, Perspektive selbst gerechnet.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS-Gradients + mask + perspective
Handy: 📱 Bestens für Handy
Touch: Finger neigt
Reduced Motion: stat
Eignung: SaaS, Portfolio

7.14 Generative Background Art

Award-LevelBaseline widelyLive-DemoHandy: mit Einschränkung

Zwei generative Stile: „Fäden“ – 900 Partikel folgen einem Rauschfeld wie eine Langzeitbelichtung; „Kreise“ – farbige Kreise wachsen, bis sie sich berühren (Circle Packing). Der Knopf wechselt den Stil, jeder Tap würfelt Seed und Palette neu – kein Bild gleicht dem anderen.

Aufwand: ●●●○○
Laufzeit: ●●●○○
Technik: Vanilla Canvas (Flow Field, Noise)
Handy: Handy: mit Einschränkung
Touch: Tap = neues Bild
Reduced Motion: Bild fertig, ohne Aufbau
Eignung: Kunst, Portfolio

8 Conversion und Benutzerführung 12 Techniken

8.1 Conversion-Grundlagen (Hierarchie, Above-the-Fold, CTA)

StandardKonzeptKonzept📱 Bestens für Handy

Prinzipien statt Technik: eine klare Botschaft, ein primärer Handlungsaufruf, das Wichtigste ohne Scrollen.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: –
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

8.2 Sticky CTA

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Der Anruf-/Termin-Button bleibt auf dem Handy immer erreichbar.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS sticky + IO
Handy: 📱 Bestens für Handy
Touch: in Daumenzone
Reduced Motion: –
Eignung: Handwerk, Restaurant, Shop

8.3 Progressive Disclosure (<details name>)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Akkordeon ohne JavaScript; gleicher name = nur eins offen.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: ohne Höhen-Animation
Eignung: alle

8.4 Interactive Product Demos

Premium / modernKonzeptKonzept📱 Bestens für Handy

Konzept: das Produkt selbst als klickbare Vorschau einbetten statt Screenshots.

Aufwand: ●●●●○
Laufzeit: ●●○○○
Technik: produktabhängig
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: SaaS

8.5 Interactive Calculators

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Kosten- oder Bedarfsrechner, der sofort rechnet (hier: Preis pro m²).

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Vanilla + <output>
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: Handwerk, SaaS, Shop

8.6 Multi-Step Forms

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Formular in Schritten mit Fortschrittsanzeige; jeder Schritt ein fieldset.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Vanilla + fieldset
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: ohne Slide
Eignung: Handwerk, SaaS

8.7 Live-Validierung (+ Inline Feedback)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Fehler erst nach der Eingabe anzeigen, verständlich formuliert, ohne JavaScript.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: Constraint Validation + CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

8.8 Trust & Social Proof

StandardKonzeptKonzept📱 Bestens für Handy

Siegel, echte Bewertungen, Referenzen, Zahlen. Nur Belegbares zeigen; Bewertungs-Markup nach Google-Richtlinien.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML + JSON-LD
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

8.9 Interactive Testimonials

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Kundenstimmen als wischbare Karten ohne JavaScript.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: scroll-snap
Handy: 📱 Bestens für Handy
Touch: Swipe
Reduced Motion: kein Autoplay
Eignung: alle

8.10 Personalisierung & Empfehlungen

Premium / modernKonzeptKonzept📱 Bestens für Handy

Konzept: Inhalte an Kontext anpassen (Rückkehrer, Herkunft, Interesse), ohne Tracking-Drittanbieter.

Aufwand: ●●●●○
Laufzeit: ●●○○○
Technik: serverseitig / localStorage
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: Shop, SaaS

8.11 A/B Testing & Funnel Analytics

Premium / modernKonzeptKonzept📱 Bestens für Handy

Konzept: Varianten messen statt raten; Trichter von Besuch bis Anfrage auswerten.

Aufwand: ●●●●○
Laufzeit: ●●○○○
Technik: serverseitig (Cloudflare Worker)
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: Shop, SaaS

8.12 Exit-Intent

Premium / modernBaseline widelyKonzept⚠ Nicht empfohlenEher Desktop

Nicht empfohlen: auf Touch nicht vorhanden, unterbricht und wirkt wie ein Dark Pattern. Nur zur Kenntnis.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: –
Handy: Eher Desktop
Touch: nein
Reduced Motion: –
Eignung: Shop

9 Qualität, Performance, Barrierefreiheit 17 Techniken

9.1 Semantic HTML5 (+ <search>)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Richtige Elemente statt div-Suppe; hier als Landmark-Visualisierung.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.2 WCAG 2.2 AA & Screenreader

StandardKonzeptKonzept📱 Bestens für Handy

Rahmenwerk, das jede Karte dieser Bibliothek einhalten soll.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: HTML, ARIA sparsam
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.3 Keyboard & Focus (:focus-visible)

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Sichtbarer Fokusring nur bei Tastaturbedienung; Tab-Reihenfolge folgt dem DOM.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.4 Reduced Motion Support

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Bewegung reduzieren, nicht Inhalte entfernen. Die Karte zeigt deine aktuelle Systemeinstellung.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: @media (prefers-reduced-motion)
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: ist das Thema
Eignung: alle

9.5 Progressive Enhancement & Feature Detection

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Die Basis funktioniert immer, Extras nur bei Support. Live-Matrix für deinen Browser:

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.6 Core Web Vitals (Live-Messung)

StandardBaseline newlyLive-Demo📱 Bestens für Handy

LCP, INP-Vorstufe und CLS dieser Seite live in deinem Browser.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: PerformanceObserver
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.7 Critical CSS

Premium / modernKonzeptKonzept📱 Bestens für Handy

Das für den ersten Screen nötige CSS inline, der Rest später. Eine Ein-Datei-Seite erfüllt das per Definition.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: inline <style>
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.8 Bundle-Hygiene (Code Splitting, Tree Shaking)

Premium / modernKonzeptKonzept📱 Bestens für Handy

Nur laden, was gebraucht wird. In dieser Bibliothek durch dynamische import()-Aufrufe ersetzt.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: Build-Tools
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: SaaS

9.9 Resource Hints & fetchpriority

StandardBaseline newlyKonzept📱 Bestens für Handy

LCP-Bild priorisieren, CDN vorverbinden, Schrift vorladen.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.10 Webfont-Optimierung

StandardBaseline widelyKonzept📱 Bestens für Handy

Kleine Subsets, kein unsichtbarer Text (FOIT), kein Layoutsprung (size-adjust).

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: WOFF2 + unicode-range
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.11 Security-Header & CSP

StandardBaseline newlyKonzept📱 Bestens für Handy

Die _headers-Datei dieser Bibliothek setzt CSP, HSTS und Co. Inline-Skripte nur per Hash.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: Cloudflare Pages _headers
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.12 Secure Form Handling

StandardKonzeptKonzept📱 Bestens für Handy

Serverseitige Validierung in einer Pages Function, Bot-Schutz mit Turnstile (ohne reCAPTCHA-Cookies).

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Pages Function + Cloudflare Turnstile
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.13 Structured Data / JSON-LD

StandardKonzeptKonzept📱 Bestens für Handy

Maschinenlesbare Fakten für Google und KI-Suche (LocalBusiness, ItemList, Breadcrumb).

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: <script type="application/ld+json">
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.14 Technical SEO

StandardKonzeptKonzept📱 Bestens für Handy

Canonical, sprechende Titel, Sitemap, robots, indexierbare Inhalte ohne JS-Zwang.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: HTML/Meta/Sitemap
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.15 Rendering-Strategien (SSG/SSR)

Premium / modernKonzeptKonzept📱 Bestens für Handy

Statisch (SSG) für Firmensites wie diese Bibliothek; SSR nur bei personalisierten Inhalten.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: –
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.16 llms.txt & Agent-Readiness

Premium / modernKonzeptKonzept📱 Bestens für Handy

Optionale Kurzfassung für KI-Agenten; wichtiger sind semantisches HTML und JSON-LD.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: Textdatei + Semantik
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

9.17 Cookie-freie Statistik

StandardKonzeptKonzept📱 Bestens für Handy

Reichweite messen ohne Cookies, localStorage oder Fingerprinting; im Pages-Projekt per Klick aktivierbar.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: Cloudflare Web Analytics
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

10 Web-Apps und Experimente 15 Techniken

10.1 PWA (+ Service Worker, Offline)

Premium / modernBaseline widelyKonzept📱 Bestens für Handy

Installierbar und offline-fähig. Der Service Worker braucht eine eigene Datei, passt also nicht in die eine HTML.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: sw.js (eigene Datei)
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: SaaS, Restaurant

10.2 Web Components

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Wiederverwendbares Element ohne Framework: <ta-badge> mit eigenem Shadow-Stil.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Vanilla Custom Elements
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

10.3 Web Animations API

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Keyframes per JavaScript steuern: play, pause, reverse, finished.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: alle

10.4 Intersection Observer

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Sichtbarkeit beobachten statt scroll-Events: Grundlage für Reveal, Lazy-Logik, Analytics.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

10.5 Resize Observer

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Elementgröße beobachten (hier: Box per Griff ziehen).

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

10.6 Web Workers

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Rechenlast vom Main Thread: Primzahlen zählen, ohne dass die Animation daneben stockt.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Inline-Blob-Worker
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: SaaS

10.7 WebAssembly

Award-LevelBaseline widelyKonzeptHandy: mit Einschränkung

Konzept: native Rechenleistung (Bild-/Videoverarbeitung, Physik, Codecs) im Browser.

Aufwand: ●●●●●
Laufzeit: ●●●○○
Technik: –
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: –
Eignung: SaaS, Kunst

10.8 Web Audio API (+ Spatial Audio)

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Synthese und Effekte im Browser; Panner lässt den Ton wandern.

Aufwand: ●●●○○
Laufzeit: ●●○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: Tap startet
Reduced Motion: –
Eignung: Kunst, Portfolio

10.9 Audio-Reactive Visuals

Award-LevelBaseline widelyLive-DemoHandy: mit Einschränkung

Visuals reagieren auf Frequenzen; Demo nutzt einen Oszillator statt Mikrofon.

Aufwand: ●●●●○
Laufzeit: ●●●○○
Technik: AnalyserNode + Canvas
Handy: Handy: mit Einschränkung
Touch: Tap
Reduced Motion: statisch
Eignung: Kunst

10.10 Device Orientation & Motion

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Neigen des Geräts steuert den Effekt; am Desktop ersatzweise die Maus.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: ist Touch-Feature
Reduced Motion: aus
Eignung: Kunst, Portfolio

10.11 WebXR / AR

Award-LevelexperimentellKonzeptHandy: mit Einschränkung

Konzept: AR-Produktansicht auf dem Handy (model-viewer schaltet in Android/iOS-AR).

Aufwand: ●●●●●
Laufzeit: ●●●●●
Technik: <model-viewer> AR
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: –
Eignung: Shop

10.12 Camera-Based Interaction

Award-LevelBaseline widelyKonzeptHandy: mit Einschränkung

Konzept: Handgesten oder Gesicht steuern die Seite. Ein Kamera-Prompt in einer Katalogkarte wäre unangemessen.

Aufwand: ●●●●○
Laufzeit: ●●●●●
Technik: MediaPipe (Google), lazy
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: –
Eignung: Kunst

10.13 Speech & Voice Interfaces

Premium / modernChrome + SafariLive-Demo📱 Bestens für Handy

Vorlesen per SpeechSynthesis; Spracherkennung läuft bei Chrome über Google-Server (Datenschutzhinweis nötig).

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: –
Eignung: SaaS, Kunst

10.14 Real-Time Collaborative UI

Award-LevelBaseline widelyKonzeptHandy: mit Einschränkung

Konzept: gemeinsame Cursor oder Editoren über WebSockets, Zustand in einem Durable Object.

Aufwand: ●●●●●
Laufzeit: ●●●○○
Technik: Cloudflare Durable Objects
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: –
Eignung: SaaS

10.15 AI-Powered Interfaces

Award-LevelexperimentellKonzeptHandy: mit Einschränkung

Konzept: KI-Suche oder Assistent auf der Site, Aufrufe über Cloudflare Workers AI oder Gemini API serverseitig.

Aufwand: ●●●●○
Laufzeit: ●●●●●
Technik: Gemini API / Workers AI
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: –
Eignung: SaaS, Shop

11 Weitere Techniken 12 Techniken

11.1 FLIP Layout Animation

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

First–Last–Invert–Play: Layoutwechsel flüssig animieren.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Vanilla / GSAP Flip
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: Sprung
Eignung: SaaS, Shop

11.2 Motion Path

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Elemente folgen einer Bahn – rein in CSS (offset-path, offset-rotate:auto): ein Papierflieger dreht einen Looping über der Stadt und zieht einen Kondensstreifen, zwei Vögel folgen versetzt. Die Bahn wird nur einmal definiert; Tippen wirft einen neuen Flieger.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: Portfolio, Kunst

11.3 Counters & Flip Clock

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Zahlen, die Eindruck machen: ein Walzen-Zählwerk rollt jede Ziffer einzeln mit Nachfedern auf den Umsatz, ein Ring füllt sich auf die Zufriedenheit, die Projekte zählen hoch, und eine Flip-Uhr klappt jede Sekunde um. Startet beim Sichtbarwerden; Tippen spielt erneut ab.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS @property + counter()
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: Endwert sofort
Eignung: Handwerk, SaaS, Shop

11.4 Animated Data Viz (+ SVG-Diagramme)

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Ein Finanz-Chart, der sich selbst zeichnet: Kurslinie mit Glühen und Farbverlauf, Volumenbalken wachsen gestaffelt, der Endpunkt pulsiert, der Kopf zählt Kurs und Veränderung hoch. Zeitraum 1M / 6M / 1J morpht die Daten weich, das Fadenkreuz folgt der Maus (ohne Maus fährt es selbst). Reines SVG + 60 Zeilen JS.

Aufwand: ●●●○○
Laufzeit: ●○○○○
Technik: Vanilla SVG (D3 optional)
Handy: 📱 Bestens für Handy
Touch: Tap statt Hover
Reduced Motion: ohne Aufbau
Eignung: SaaS, Portfolio

11.5 Interactive Hotspots

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Punkte auf einem Foto öffnen kurze Infos – ideal für Produkte, Räume, Werkstätten. Maus über einen Punkt zeigt genau seine Info; am Handy öffnet Tippen. Ohne Bedienung stellen sich die Punkte nacheinander selbst vor.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: Vanilla (Buttons + Infokarte)
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: –
Eignung: Shop, Handwerk, Restaurant

11.6 360° Product Spin

Premium / modernBaseline widelyLive-DemoHandy: mit Einschränkung

Produkt per Ziehen drehen; Demo generiert die 36 Ansichten selbst.

Aufwand: ●●●○○
Laufzeit: ●●●○○
Technik: Vanilla (24–36 Bilder)
Handy: Handy: mit Einschränkung
Touch: Drag nativ
Reduced Motion: kein Auto-Spin
Eignung: Shop

11.7 Preloader / Loading Transitions

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Ein Ladeschirm als Auftritt: Die Buchstaben von thomashilgert.dev fliegen ein, der Balken läuft wie echtes Laden (schnell, stockt kurz, Endspurt), dann öffnet sich ein Vorhang aus Streifen von der Mitte aus und gibt die Startseite frei, deren Zeilen nacheinander aufsteigen. Läuft einmal; Tippen startet neu. Wichtig: nie als künstliche Wartezeit, nur solange wirklich geladen wird.

Aufwand: ●●○○○
Laufzeit: ●●○○○
Technik: CSS + 30 Zeilen JS
Handy: 📱 Bestens für Handy
Touch: Tippen = nochmal
Reduced Motion: sofort fertig
Eignung: Kunst

11.8 Skeleton Loading

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Platzhalter in Zielform, solange Daten laden; dann blendet der echte Inhalt ohne Layoutsprung ein (kein CLS). Demo: lädt simuliert 1,8 s, „Neu laden“ wiederholt.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: Shimmer aus
Eignung: SaaS, Shop

11.9 Optimistic UI

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Die Oberfläche reagiert sofort, der Server bestätigt später (oder rollt zurück).

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: Vanilla
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: SaaS, Shop

11.10 Interactive Timeline

Premium / modernBaseline widelyLive-Demo📱 Bestens für Handy

Ablauf als Zeitleiste: vier Schritte vom Erstgespräch bis zum Launch, die Linie füllt sich, der aktive Schritt wächst; Tippen springt zu einem Schritt. Zweites Beispiel: senkrechte Chronik zum Scrollen.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: scroll-snap + view() / IO
Handy: 📱 Bestens für Handy
Touch: Swipe
Reduced Motion: nur Snap, keine Skalierung
Eignung: Handwerk, Portfolio, Kunst

11.11 Interactive Maps

Premium / modernBaseline widelyBibliothek lädt nach KlickHandy: mit Einschränkung

Karte erst nach Klick laden (Datenschutz, Performance); vorher statische Fassade.

Aufwand: ●●○○○
Laufzeit: ●●●●○
Technik: Google Maps Embed mit Klick-Fassade
Handy: Handy: mit Einschränkung
Touch: nativ
Reduced Motion: –
Eignung: Handwerk, Restaurant

11.12 Infinite Canvas

Award-LevelBaseline widelyLive-Demo📱 Bestens für Handy

Endlose, zoombare Fläche wie in Figma oder Miro: ein Moodboard mit Fotos, Notizen und Verbindungslinien. Ziehen verschiebt, Mausrad oder zwei Finger zoomen zum Zeiger hin, die Minikarte zeigt den Ausschnitt. Plus/Minus und „Alles“ helfen beim Zurechtfinden.

Aufwand: ●●●●○
Laufzeit: ●●○○○
Technik: Vanilla Pointer + transform
Handy: 📱 Bestens für Handy
Touch: Pinch via Pointer Events
Reduced Motion: ohne Trägheit
Eignung: Kunst, Portfolio

12 Native Web-Plattform 2026 16 Techniken

12.1 Popover API

StandardBaseline newlyLive-Demo📱 Bestens für Handy

Top-Layer-Overlays mit Light-Dismiss und Esc, ganz ohne JavaScript.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: Fade aus
Eignung: alle

12.2 <dialog>

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Modale mit Fokusfalle, Esc, ::backdrop und Formular-Methode dialog.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: Fade aus
Eignung: alle

12.3 CSS Anchor Positioning

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Elemente an andere Elemente koppeln, mit automatischem Ausweichen (position-try-fallbacks).

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

12.4 @starting-style + transition-behavior

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Einblend-Animationen aus display: none heraus, rein in CSS.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: aus
Eignung: alle

12.5 color-mix()

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Farben im Browser mischen: Hover-Töne und Tints aus einer Markenfarbe.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

12.6 oklch() + Relative Color

StandardBaseline newlyLive-Demo📱 Bestens für Handy

Wahrnehmungsgleiche Paletten aus einer Markenfarbe; Hue drehen, Helligkeit halten.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

12.7 contrast-color()

Premium / modernBaseline newlyLive-DemoHandy: mit Einschränkung

Der Browser wählt automatisch schwarzen oder weißen Text zur Hintergrundfarbe.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: Handy: mit Einschränkung
Touch: –
Reduced Motion: –
Eignung: alle

12.8 :has()

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Eltern- und Zustandsselektor, der viel JavaScript überflüssig macht.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

12.9 CSS Nesting

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Verschachtelte Regeln ohne Präprozessor.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

12.10 @layer

StandardBaseline widelyLive-Demo📱 Bestens für Handy

Kaskaden-Ebenen: Reihenfolge der Ebenen schlägt Spezifität.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

12.11 @scope

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Styles auf einen Teilbaum begrenzen, mit unterer Grenze (Donut-Scope).

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

12.12 field-sizing: content

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Textarea und Inputs wachsen mit dem Inhalt, ohne JavaScript.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: –
Eignung: alle

12.13 interpolate-size / calc-size()

Premium / modernnur ChromiumLive-Demo📱 Bestens für Handy

Animation zu height: auto. Fallback-Variante mit Grid läuft überall.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS; Fallback grid-template-rows 0fr→1fr
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: aus
Eignung: alle

12.14 @property

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Typisierte Custom Properties, die der Browser animieren kann (hier: ein Verlaufswinkel).

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: CSS
Handy: 📱 Bestens für Handy
Touch: –
Reduced Motion: stat
Eignung: alle

12.15 Invoker Commands (command/commandfor)

Premium / modernBaseline newlyLive-Demo📱 Bestens für Handy

Buttons steuern Dialog und Popover deklarativ, ohne Event-Listener.

Aufwand: ●○○○○
Laufzeit: ●○○○○
Technik: HTML
Handy: 📱 Bestens für Handy
Touch: Tap
Reduced Motion: –
Eignung: alle

12.16 Customizable <select>

Premium / modernnur ChromiumLive-DemoHandy: mit Einschränkung

Voll stylebares Select mit Rich Content in den Optionen.

Aufwand: ●●○○○
Laufzeit: ●○○○○
Technik: CSS appearance: base-select
Handy: Handy: mit Einschränkung
Touch: nativ
Reduced Motion: –
Eignung: alle