Fundus
Kategorien & Filter
Technik
Was im Web gerade geht. Nur das Beste, von ausgezeichneten Seiten abgeschaut, vermessen und nachgebaut.
347 Techniken · 18 Kategorien · 54 neu
/Taste Schrägstrich springt ins Suchfeld, Escape leert es.
347 Techniken
Seitenübergänge 15
-

Clip-Path-Reveal der neuen Seite (Inset, Kreis, Polygon)
-

Persistente 3D-Szene: Seitenwechsel als Kamerafahrt
-

Farbvorhang / Panel-Wipe in Markenfarbe
-

Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)
-

Vorschaubild wird zur Hero (Shared-Element-Morph)
-
Standbild folgt
Wortmarke wird Kopfmarkeneu
-

Wipe mit gebogener Kante (Curved Wipe)
-

Paralleler Übergang mit Vorladen (beide Seiten gleichzeitig im DOM)
-

Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)
-

Scroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)
-

Neue Seite schiebt sich über die alte (Stack / Slide-over mit Parallax)
-

Seitenname als Übergang (Typo-Overlay, kinetische Schrift)
-

Spalten-, Streifen- und Jalousie-Wipe
-
Standbild folgt
Seitenwechsel in wachsender Markenformneu
-

3D-Kipp-Übergänge (Würfel, Ecke, Riss)
Preloader & Intro 9
-

Intro ohne Wartezeit (LCP-sicheres Eröffnungsballett)
-

Nahtlose Übergabe: Loader-Element wird Teil des Layouts
-

Bildstapel-Intro (Stapel flippt durch und verteilt sich ins Layout)
-

Intro nur beim ersten Besuch (Session-Gedächtnis)
-

Prozent-Zähler-Preloader (0 bis 100)
-

WebGL-Ladeszene mit echtem Fortschritt
-

Logo-Aufbau-Intro (Linien zeichnen, Teile fügen sich, Logo fliegt in die Navigation)
-

Boot-Sequenz / System-Start-Intro (Retro-Interface)
-

Kinetisches Typo-Intro (Wortwiederholung, Kreistext)
Hero & Section-Layouts 32
-

Bento-Grid mit lebenden Zellen
-

Sichtbares Raster (Swiss/Blueprint-Linien)
-

Gebrochenes / asymmetrisches Raster
-

Case-Study-Gerüst auf Award-Niveau
-

Kinoreifer Vollbild-Video-Hero
-

Editorial-/Magazin-Layout
-

Projektindex als Liste mit Hover-Bildvorschau
-

Übergroßer Schrift-Hero (randlos eingepasste Wortmarke)
-

Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)
-

Prompt-Hero mit rotierenden Beispiel-Prompts
-

Logo-Wand / Social-Proof-Band
-
Standbild folgt
Ansprechperson-Bandneu
-

Foto-Hero: echtes Foto, ein Satz, ein Wegneu
-

Meta-Labels & HUD-Typografie (Mikrotypo als Layout-Ebene)
-

Team-/Über-mich-Layout mit Porträt-Interaktion
-

Testimonials neu gedacht
-

Zahlen-/Fakten-Sektion als Typo-Ereignis
-

Produkt-UI-Hero mit Perspektiv-Tilt (Screenshot richtet sich beim Scrollen auf)
-

Prozess-/Timeline-Sektion mit wachsender Linie
-

Kontakt- und Anfrageformular als eigene Sektion
-

Termin-Buchung per 2-Klick-Einbettung
-

Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)
-

Foto-Hero mit Leiste, Karte oder Weicheneu
-

Foto-Hero mit Wortmarkeneu
-

Responsive Sektionskanten mit shape()neu
-

Collage-/Scrapbook-Layout
-

Elastisches Raster (Spalten mit Scroll-Verzögerung)
-

Preis-Sektion mit Haltung
-

Bild-Scheiben in der Tiefe
-

Trennlinien im Raster (Gap Decorations)
-

Hero-Komposition nach Seitenverhältnisneu
-
Standbild folgt
Sektion schaltet ihren Ton per Style Queryneu
Scroll & Section-Animationen 21
-

Bildsequenz-/Video-Scrub
-

Bild-Reveal per Clip-Path/Maske
-

Native CSS-Scroll-Reveals mit view()
-

Gepinnte Horizontal-Scroll-Section
-

Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)
-

Subtiler mehrschichtiger Parallax
-

Gepinnte Scrub-Sequenz (Scrollytelling)
-

Sections, die übereinander gleiten (Vorhang-Übergang)
-
Standbild folgt
Kapitel-Kante als Signaturneu
-

Stapelkarten beim Scrollen (Stacking Cards)
-

Ein Element wandert über mehrere Sections
-

Raster/Layout formiert sich beim Scrollen
-

Smooth Scroll mit Lenis
-

Farb-/Theme-Wechsel beim Scrollen
-
Standbild folgt
Scroll-Hinweis, der verschwindetneu
-

CSS Scroll-Triggered Animations (zeitbasiert, ausgelöst durch Scroll)
-

Zoom-Parallax / Zoom-through
-

Abschnittsweises Einrasten (Fullpage-Snap)
-

SVG-Pfad zeichnet sich beim Scrollen
-

Verzerrung nach Scrollgeschwindigkeit (Skew/Stretch)
-

Daten-Scrollytelling
Schrift-Animationen 20
-

Unschärfe-Enthüllung (Blur-to-sharp) pro Wort
-

Wort-für-Wort-Aufhellen beim Scrollen
-

Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)
-

Text-Roll beim Hover (doppelte Zeile rollt durch)
-

Rollende Ziffern (Zahlen-Ticker / Odometer)
-

Marquee-Laufband (optional scroll-gekoppelt)
-

Scramble/Decode-Text (Zeichen entschlüsseln sich)
-

Animierte Variable-Font-Achsen
-

Gezeichnete Markierung und Unterstreichung
-

3D- und Shader-Typografie
-

Wechselnde Wörter / Begrüßungs-Loader
-

Scroll-gescrubbte Zeichen-Choreografie
-

Text auf Pfad
-

Schreibmaschine mit natürlichem Takt
-

Bild/Video in Schrift (Typo-Maske)
-

Buchstaben-Physik
-

Schimmer-/Verlaufs-Text
-

Buchstaben zerstreuen sich beim Hover
-

Echo-/Stapel-Typografie
-

Rotierendes Kreistext-Siegel (Badge, Stempel, Scroll-Hinweis)
Hover 16
-

Bild-Spur hinter dem Cursor (Image Trail)
-

Bild-Zoom in der Maske
-

Karten-Spotlight (Glow folgt der Maus)
-

Bildvorschau beim Listen-Hover
-

Unterstreichungs-Varianten
-
Standbild folgt
Ganze Karte klickbarneu
-

Magnetische Buttons und Elemente
-

Form-Morph-Buttons (Clip-Path)
-

Hover-Absicht und Zeitlogik
-

3D-Kippen von Karten (Tilt)
-

Nachbarn reagieren auf Hover
-

Graustufen zu Farbe / Duoton-Bildbehandlung
-
Standbild folgt
Produktkarte mit Bildwechselneu
-

Füllung vom Eintrittspunkt
-

Hovercard / Vorschau per Interest Invoker
-

SVG-Filter-Verzerrung (Turbulenz und Gooey) für Bild und Text
Cursor 7
Mikroanimationen 30
-

Akkordeon mit Höhenanimation auf auto
-

Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)
-

Druck-Feedback (Press/Tap)
-

Ein-/Ausblenden mit @starting-style
-

Kopieren-Feedback
-

Skeleton mit Schimmer
-

Toast-Benachrichtigungen im Stapel
-

Toggle-Schalter
-

Validierung erst nach Interaktion
-

Animiertes Auswahlmenü (anpassbares select)
-

KI-Streaming-Text und Denk-Indikator mit Shimmer
-
Standbild folgt
Absenden wird Bestätigungneu
-

Animierte Checkbox und Radio
-

Fortschrittsring
-

Gestaffelte Einblendung per sibling-index()
-

Gedrückt halten zum Bestätigen
-

Icon-Squash-and-Stretch (Pfeil dehnt sich)
-

Like/Herz mit Partikel-Burst
-

Scroll-Fortschrittsbalken und -ring
-

Spinner und Ladeindikatoren
-

Eckenformen mit corner-shape (Squircle, Scoop, Notch, Bevel)
-

Drag-and-drop-Sortieren mit Platzhalter- und Drop-Animation
-
Standbild folgt
Anker-Landung markierenneu
-
Standbild folgt
Mengen-Stepper mit Einheit und Summeneu
-

In-den-Warenkorb-Flug
-

Figuren-/Maskottchen-Zustände
-

Passwortstärke-Visualisierung
-

Konfetti / Erfolgs-Feier
-
Standbild folgt
Teilen und In den Kalenderneu
-

Zustandsautomat mit Datenbindung (Rive-Prinzip)
Glas & Material 15
-

Frosted Glass mit erweitertem Backdrop
-

Grain-/Noise-Überlagerung
-

Liquid Glass mit Refraktion
-

Animierter Mesh-Verlauf
-

Flüssigmetall / Chrom
-

Geriffeltes Glas (Fluted Glass)
-

Linien- und Punktraster
-

Progressiver Verlaufs-Blur
-

Animierter Verlaufsrahmen
-

Neo-Skeuomorphismus / taktile UI (Material mit Lichtkante)
-
Standbild folgt
Zeichnungsfamilie für Produkte, Läden und Leistungenneu
-

Halbton-Raster
-

Papier- und Drucktextur
-

Holo-/Irisierungsfolie auf Neigung und Cursor
-

Flüssiger Marmor-Hintergrund
3D & WebGL 20
-

ASCII-, Dither- und Pixel-Stil (Render und Hover)
-

Glas- und Kristallobjekte in 3D
-

Interaktives 3D-Objekt im Hero
-

Morphende Partikel und Punktwolken
-

Scroll-gesteuerte 3D-Szene / 3D-Modell (Kamerafahrt)
-

Shader- und Dissolve-Übergang (Noise, Displacement, Pixel)
-

WebGL-Bildverzerrung per Shader (Hover, Linse, RGB-Shift)
-

CSS-3D-Räume und -Objekte
-

Gaussian Splats (gescannte Räume)
-

Typografie in WebGL
-

Audioreaktive 3D-Szenen
-

Instanzierte Objektfelder
-

No-Code-Shader-Hintergründe als Embed (Unicorn Studio, Paper Shaders)
-

Post-Processing-Filmlook
-

Spielbare 3D-Welt als Navigation
-

2.5D-Bilder mit Tiefenkarte
-

WebGPU mit Three.js-TSL
-

Shader auf echtem DOM (HTML-in-Canvas)
-

Spline-Szenen als Embed
-

Atmosphärische Partikel
Galerien & Slider 21
-

3D-Karussell / Bildzylinder (Scroll- und Drag-gesteuert)
-

Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)
-

Drag-Slider mit Trägheit und Endlosschleife
-

Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)
-

Endlose Leinwand – Drag-Galerie in alle Richtungen
-

Video-Vorschau bei Hover / im Viewport
-

Karussell-Steuerung und Anzeigeneu
-

Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie
-

Animierter Filter- und Ansichtswechsel (FLIP / View Transitions)
-

Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)
-

Raster am Desktop, Wischreihe am Telefonneu
-

Tiefenflug-Galerie
-

Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung
-

Endlose Scroll-Galerie mit Tiefenparallaxe
-

Karten-Stapel und Fächer zum Wegschnippen
-

Kuppel- und Kugel-Galerie
-

Radial- und Bogen-Slider (Karten auf Kreisbahn)
-

Vorher-Nachher-Vergleichsregler
-

Kartenfächer nach Containerbreiteneu
-

Karussell mit verformten Karten
-
Standbild folgt
Scroll-Snap-Ereignisseneu
Animationsstile 13
-

Animationsstil „Editorial langsam“
-

Animationsstil „Federnd verspielt“
-

Animationsstil „Kinetisch filmisch“ (inOut-Raumwechsel)
-

Animationsstil „Physik träge“ (Lerp, Trägheit, Geschwindigkeit)
-

Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)
-

Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
-

Animationsstil „Tech präzise“ (Produkt-UI)
-

Animationsstil „Luxus weich“
-

Animationsstil „Swiss knackig“
-

Animationsstil „Brutal hart“
-

Animationsstil „Shader linear“ (Zeit linear, Form im Material)
-
Standbild folgt
Bewegung als CSS-Funktionneu
-

Generatives Markenzeichen
Typo-Techniken 16
-

Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty
-

Optisch exakte Textabstände mit text-box-trim / text-box-edge
-

Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten
-
Standbild folgt
Silbentrennung für deutsche Kompositaneu
-
Standbild folgt
Deutscher Satz für Zahlen, Datum, Telefon und Preiseneu
-

Eine Familie, wenige Gewichte (Hierarchie über Größe)
-

Gemischte Schnitte in einer Zeile (Grotesk + Kursiv-Serif)
-

Enge Laufweite und Zeilenabstand bei riesigen Headlines
-

Mono als Label- und Metaschrift (kleine Versalien)
-

Optische Größen nutzen (opsz-Achse)
-

Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)
-

Tabellenziffern für Preis- und Datenblöcke
-

Kondensierte Versal-Headlines auf volle Breite (fit-to-width)
-

Echte Initialen mit initial-letter
-
Standbild folgt
Text-Hervorhebung mit ::highlight()neu
-

Text fließt um eine bewegte Form (Experiment)
Sektionen & Funktionen 56
-
Standbild folgt
Aktion mit Preisangabe nach § 11 PAngVneu
-
Standbild folgt
Artikelseite mit Autorin, Stand und Strukturdatenneu
-

Bewertungen mit Sternverteilung
-

Plattform-Bewertungen mit Echtheitshinweis
-

Bild mit Markierungspunktenneu
-

Buchungsleiste mit Datumsbereich
-
Standbild folgt
Danke-Seite: was jetzt passiertneu
-

Datei-Ablage mit Vorschau und Prüfungneu
-

Download-Center für technische Dokumente
-

Eigener Videoplayer
-

EU-Hinweis zur Gewährleistung und Garantie-Labelneu
-

Facettenfilter mit Ergebnisliste
-

Fahrzeugbestand aus dem Börsen-Feed
-
Standbild folgt
FAQ-Seite mit Sucheneu
-

Fehlerseite und Leerzustände
-

Finanzierung mit Pflichtangaben und Warnhinweisneu
-

Traueranzeigen und Gedenkseite mit Kondolenzbuch
-

Gutschein-Konfigurator
-

Kostenrechner mit Spanne
-

Lagen mit Steckbrief und eigener Karte
-

Leistungsseite: Antwort zuerst
-

Mehrschritt-Anfrage mit Zusammenfassung
-
Standbild folgt
News-Übersicht mit Kategorien und Jahr-Archivneu
-
Standbild folgt
Notdienst mit Plan und Verweisneu
-

Objekt-Steckbrief im Exposé
-

Öffnungszeiten mit Live-Status
-
Standbild folgt
Mehr laden mit Rückkehr an die Stelleneu
-
Standbild folgt
Personen-Detailseiteneu
-

Player per Zwei-Klick (Spotify, Apple Music, Bandcamp, SoundCloud, YouTube, Vimeo)
-
Standbild folgt
Preisseite: Endpreise, Rechenweg, Vergleichneu
-

Kaufbox mit Farb- und Größenwahl
-

Produktfinder in wenigen Fragen
-

Programm-Kalender mit Liste und Monat
-

Räume mit Kapazitäten je Bestuhlung
-
Standbild folgt
Rechtstexte lesbar setzenneu
-

Reparatur-Richtpreise und Reparaturwegneu
-

Speisekarte als Editorial
-

Spendenmodul mit Wirkungssatz
-
Standbild folgt
Standort-Detailseiteneu
-

Standortfinder als Liste
-

Stellenliste mit Kurzbewerbung
-

Stellenseite mit Gehalt, Ablauf und JobPosting-Daten
-
Standbild folgt
Status- und Störungsseiteneu
-

Produktseite mit technischen Daten
-

Wunschtermin mit freien Terminen und Anfrage-Übergabe
-

Tourdaten und Termine mit Ticketstatus
-

Trauerfall-Sofortleiste mit erster Anleitung
-
Standbild folgt
Veranstaltung: Detailseite mit Zuständenneu
-

Vergleichstabelle mit fester Kopfzeile
-
Standbild folgt
Vorbestellung mit Abholtag und Zeitfensterneu
-

Warenkorb als Seitenpanel
-

Wein-Steckbrief mit Pflichtangaben
-

Widerrufs- und Kündigungs-Button
-

Wochen-Kursplan mit Live-Status
-

Agentenformular mit WebMCP
-

Balkendiagramm aus Datenattributenneu
Zugang & Robustheit 17
-

Seite „Barrierefreiheit“ als Vorlage
-

Schalter „Bewegung reduzieren“ mit Pause-Knöpfen
-

Natives Modal mit <dialog>
-
Standbild folgt
Druckansicht als Systemneu
-
Standbild folgt
Seite in Einfacher und Leichter Sprache
-
Standbild folgt
Favicon-Satz und Teilbild je Seiteneu
-

Firmendaten aus einer Quelle
-

Fokus-Stil als Gestaltungssystem
-
Standbild folgt
Eingabehilfen und Autofillneu
-

Fehlerzusammenfassung im Formular
-

Kontrastmodus und contrast-color()
-

Lesereihenfolge im Raster
-

Sofortige Seitenwechsel durch Vorladen
-

Sprunglinks und Landmarken
-
Standbild folgt
Tabelle schmal und robustneu
-

Tabs und Segmente mit Pfeiltasten
-

Zoom- und textabstandfestes Layout
Buttons 7
Keine Technik passt.
Lass einen Filter weg, prüfe die Schreibweise oder . Oder schau hier:
Hero & Section-LayoutsScroll & Section-AnimationenHoverSektionen & FunktionenZugang & Robustheit









































