website_skill

Effekt-Atlas · 0 Effekte · 11 Kapitel

Jeder Effekt. Eine Seite.

Scrollytelling, Shader, 3D, Micro-Interaktionen, Sections, Design-Stile und Browser-APIs – alles live, alles zum Anfassen.

Los geht’s

WebGL-Shader · Buchstaben-Kaskade · Maus bewegen

01

Typografie & Text

Text, der sich bewegt: zerlegt, verschlüsselt, getippt, gedreht, gefüllt, verzerrt. Kinetic Type ist einer der großen Trends – hier jede Spielart.

0 Effekte

Jeder Buchstabe zählt.

Buchstaben-Kaskade

Text wird in Buchstaben zerlegt, die gestaffelt aus einer Maske aufsteigen.

Fahr mit der Maus drüber.

 

Text-Scramble / Decode

Zeichen flackern durch Zufallssymbole, bevor sie sich zum Text entschlüsseln.

Wir bauen

Schreibmaschine

Tippt Wörter, hält kurz, löscht sie wieder – mit blinkendem Cursor.

Gemacht für Gründer.Closer.Designer.Entwickler.dich.

Wort-Rotation

Ein Wort-Schlitz, der durchrotiert und seine Breite weich anpasst.

Aurora-Verlauf

Schimmernder Text, der Licht fängt

Verlaufs- & Glanztext

Ein wandernder Verlauf im Text und ein Lichtstreif, der darüber zieht.

HOVER

Umriss → Füllung

Nur die Kontur, bis die Maus kommt – dann läuft die Farbe von links hinein.

Gute Websites erzählen eine Geschichte, nicht nur Fakten – und jedes Detail zählt.

Textmarker

Markierungen ziehen sich beim Hereinscrollen über die Wörter – mit animation-timeline: view(), wo verfügbar.

Variable Fonts

Maus annähern

Variable Schrift (Nähe)

Jeder Buchstabe wird fetter, je näher der Cursor kommt – stufenlos dank variabler Schrift.

GLITCH

Glitch

RGB-Versatz und zerhackte Streifen per clip-path – wie ein kaputtes Signal.

Wellenbewegung

Buchstaben-Welle

Beim Darüberfahren hüpfen die Buchstaben nacheinander wie eine Welle.

Worte erscheinen aus dem Nebel, eins nach dem anderen, ganz ruhig und klar.

Text aus dem Nebel

Wörter blenden aus der Unschärfe ein – der „Text Generate“-Effekt.

Open 24/7

Neon-Schild

Mehrschichtiges Leuchten mit gelegentlichem Flackern, nur mit text-shadow.

SCROLL · ENTDECKEN · STAUNEN · NOCHMAL ·

Kreistext-Badge

Text auf einem SVG-Pfad, der sich dreht – schneller beim Scrollen und Darüberfahren.

Zählwerk (Odometer)

Jede Ziffer rollt einzeln auf ihren neuen Wert – wie ein mechanischer Zähler.

Wir sind schnell.präzise.kreativ.mutig.

3D-Würfelwort

Wörter auf den Seiten eines 3D-Würfels, der sich Seite für Seite weiterdreht.

FLOW

Lebendige Füllung

Ein animiertes Canvas scheint nur durch die Buchstaben – per mix-blend-mode.


      
ASCII-Art in Echtzeit
Ein rotierender 3D-Donut, gerechnet und als Zeichen gesetzt – der Klassiker donut.c.

    


    

      
SPLIT

      
Geteilter Text
Ober- und Unterhälfte gleiten beim Hover gegeneinander – zwei Ebenen, ein Wort.

    


  






  

    02
    
Scrollytelling

      
Der Daumen wird zur Zeitleiste: Szenen kleben fest, während sie sich verwandeln – Parallax, Zoom, Masken, Sequenzen, Pfade. Alles läuft rückwärts, wenn du zurückscrollst.

    0 Effekte
  


  
  

    

      

      

      

      
      
      
      
      
      
      
Parallax-Landschaft
Fünf Ebenen bewegen sich unterschiedlich schnell – je näher, desto schneller. Dazu Himmel, Sonne und Sterne.

    

  


  
  

    

      

      

      

      

      

      

      

      
Zoom-Parallax
Sieben Bilder skalieren unterschiedlich stark – das mittlere wächst, bis es den ganzen Schirm füllt.

    

  


  
  

    

      

        
→ horizontal
Scroll
quer.
Du scrollst nach unten, die Reise geht nach rechts.

        
01 Polarlicht

        
02 Gebirge

        
03 Abendsonne

        
04 Ringe

        
05 Raster

        
06 Strömung

        
07 Nebel

        
Ende
der Reise.

      

      
      
Horizontale Galerie
Die Szene klebt, während die Spur quer durchläuft. Karten in der Mitte richten sich auf.

    

  


  
  

    
Stapelkarten
Karten kleben übereinander und die unteren treten zurück – nur position: sticky plus ein wenig Skalierung.

    

      
01
Entdecken
Wer sind die Menschen, für die wir bauen? Was hält sie nachts wach?

      
02
Skizzieren
Hundert schlechte Ideen auf Papier, bevor eine gute auf den Bildschirm kommt.

      
03
Gestalten
Raster, Typografie, Farbe – und Bewegung als eigenes Material.

      
04
Bauen
Schnell, zugänglich, ohne unnötige Bibliotheken. Jede Millisekunde zählt.

      
05
Starten
Live gehen, messen, verbessern. Und dann wieder von vorn.

    

  


  
  

    

      
Klapp es
auf.

      

        

          

            

              

              
Deine neue Website

              

            

            

          

          

        

      

      
Laptop-Scroll
Ein 3D-Laptop aus reinem CSS: Der Deckel öffnet sich beim Scrollen, dann fliegt die Kamera in den Bildschirm.

    

  


  
  

    

      
Was liegt
darunter?

      
Eine neue
Welt.

      
Clip-Path-Reveal
Ein Kreis wächst aus der Mitte und deckt die nächste Ebene auf – clip-path: circle() am Scroll.

    

  


  
  

    

      
      
Frame 000 / 180

      
Bildsequenz / Explosionszeichnung
Wie bei Apple: Das Gerät zerlegt sich Bild für Bild am Scroll – hier live auf Canvas gerechnet statt aus 180 Fotos.

    

  


  
  

    

      

        
Sticky Scroll Reveal
Links scrollt der Text, rechts klebt das Bild und wechselt passend zum Abschnitt.

        
01
Die Idee
Alles beginnt mit einem Funken. Ein Problem, das niemand gelöst hat – oder schlecht.

        
02
Der Plan
Wireframes, Nutzerwege, ein Raster. Struktur, bevor es schön wird.

        
03
Der Bau
Baustein für Baustein entsteht, was vorher nur Skizze war.

        
04
Der Start
Zündung. Die Seite geht live und findet ihre Besucher.

      

      
    

  


  
  

    
Pfad, der sich zeichnet
Eine SVG-Linie wächst mit dem Scroll durch die Seite und schaltet unterwegs Stationen frei.

    

      
      
2019Erste Idee

      
2021Erstes Team

      
2023Erster Kunde

      
2025Expansion

      
2026Hier bist du

    

  


  
  

    

      
Scrollen ist die neue Fernbedienung. Jede Bewegung des Daumens erzählt die Geschichte ein Stück weiter – langsam, präzise, genau im Takt des Lesers.

      
Wort für Wort
Ein Absatz wird beim Scrollen Wort für Wort hell – Lesetempo als Gestaltungsmittel.

    

  


  
  

    

      
ORDNUNGAUS CHAOS

      
Ordnung aus Chaos
Verstreute, gedrehte Buchstaben finden beim Scrollen an ihren Platz.

    

  


  
  

    

      
      
      
↓ in den Buchstaben

      
Masken-Zoom
Das Wort ist ein Fenster. Beim Scrollen fliegt die Kamera durch den Buchstaben ins Bild dahinter.

    

  


  
  

    
Gegenlauf-Spalten
Drei Bildspalten wandern in unterschiedliche Richtungen – die mittlere gegen den Strom.

    

      

      

      

    

  


  
  

    
Scroll-Geschwindigkeit
Laufbänder reagieren auf Tempo und Richtung, die Bilder neigen sich mit dem Schwung.

    
Geschwindigkeit · Richtung · Schwung · Momentum · Geschwindigkeit · Richtung · Schwung · Momentum · 

    
Scroll schneller · Scroll schneller · Scroll schneller · Scroll schneller · 

    

  


  
  

    
Chamäleon-Hintergrund
Die Hintergrundfarbe wechselt weich mit dem Abschnitt, der gerade im Fokus steht.

    
01
Indigo
Nacht.

    
02
Limonen
Morgen.

    
03
Korallen
Mittag.

    
04
Ozean
Abend.

  


  
  

    
3D-Kipp-Raster
Kacheln kippen in die Tiefe, wenn sie oben oder unten aus dem Bild laufen – in der Mitte liegen sie flach.

    

  


  
  

    
Scroll-Driven Animations (reines CSS)
Ohne eine Zeile JavaScript: animation-timeline: view() und scroll(). 

    

      
slidevon links

      
slidevon rechts

      
zoomwächst

      
rotatedreht sich ein

      
blurwird scharf

      
flipklappt auf

      
huefärbt sich

      
scroll()Seitenfortschritt

    

  







  

    03
    
Hintergründe

      
Atmosphäre ohne Video: Verläufe, Shader, Partikel, Raster und Licht. Die Canvas-Varianten laufen nur, solange sie zu sehen sind.

    0 Effekte
  

  


    

      
Aurora

      
Aurora-Verlauf
Vier unscharfe Farbflecken treiben übereinander – Nordlicht aus filter: blur().

    


    

      
Mesh-Gradient

      
Mesh-Verlauf mit @property
Typisierte CSS-Variablen machen Verlaufspositionen animierbar – flüssig, ohne JavaScript.

    


    

      
GLSL-Shader

      
WebGL-Shader
Ein Fragment-Shader rechnet jedes Pixel auf der Grafikkarte – Höhenlinien eines fließenden Rauschfelds.

    


    

      
Partikel-Netz

      
Partikel-Netz
Punkte verbinden sich, wenn sie sich nahekommen – und weichen der Maus aus.

    


    

      
Hyperraum

      
Sternenflug / Warp
Sterne fliegen auf die Kamera zu. Beim Darüberfahren geht es in den Hyperraum.

    


    

      
Meteore

      
Meteorschauer
Zufällig verteilte Sternschnuppen mit leuchtendem Schweif, reines CSS-Keyframing.

    


    

      
Spotlight-Raster

      
Punkteraster mit Spotlight
Ein Punktraster leuchtet nur dort auf, wo die Maus gerade ist – Maske am Cursor.

    


    

      
Synthwave

      
Retro-Grid
Perspektivisches Gitter, das endlos auf den Horizont zuläuft – mit gestreifter Synthwave-Sonne.

    


    

      
Flimmer-Raster

      
Flimmerndes Raster
Hunderte kleine Quadrate, die zufällig auf- und abglimmen.

    


    

      
Light Beams

      
Lichtstrahlen auf Pfaden
Leuchtende Kometen wandern entlang geschwungener SVG-Pfade.

    


    

      
Wellen

      
Sinuswellen
Fünf überlagerte Wellen mit eigener Frequenz und Phase – additiv gemischt.

    


    

      
Digitaler Regen

      
Matrix-Regen
Zeichenkolonnen, die mit leuchtendem Kopf und verblassender Spur herabregnen.

    


    

      
Metaballs

      
Metaballs / Gooey
Ein SVG-Filter verschmilzt Kreise zu flüssigen Tropfen. Einer folgt der Maus.

    


    

      
Rauschen

      
Analoges Rauschen
feTurbulence mit wechselndem Samen – Grain wie bei altem Film oder Fernsehen.

    


    

      
Ripple

      
Konzentrische Wellen
Ringe breiten sich gestaffelt aus und verblassen – wie ein Stein im Wasser.

    


    

      
Lichtfächer

      
Rotierender Lichtfächer
Ein repeating-conic-gradient, weich maskiert und langsam drehend.

    


    

      
Iso-Boxen

      
Isometrisches Raster
Ein schräg gestelltes Zellenraster, dessen Felder beim Überfahren aufleuchten.

    


    

      

        
        

      
Reine CSS-Muster
Streifen, Karo, Punkte, Zickzack, Wellen, Schachbrett – nur aus Verläufen, ohne ein Bild.

    


  






  

    04
    
Karten & Hover

      
Die Karte ist der Baustein des Webs. Hier kippt, glänzt, wendet, bricht und fliegt sie – inklusive Apples Liquid Glass.

    0 Effekte
  

  


    

      

        

        3D
        
NeigungEbenen mit translateZ

        

      
3D-Tilt mit Glanz
Die Karte neigt sich zur Maus, Ebenen schweben in unterschiedlicher Tiefe, ein Lichtreflex wandert mit.

    


    

      
@property --winkelBorder BeamEin Licht kreist um den Rand – animierter Winkel im conic-gradient.

      
Kreisender Rahmen
Ein Lichtstrahl läuft endlos um die Kante, mit weichem Leuchten dahinter.

    


    

      

        
⚡Schnell
Unter 100 ms bis zur ersten Antwort.

        
◎Präzise
Jeder Pixel sitzt, auf jedem Schirm.

        
✦Schön
Bewegung als eigenes Material.

      

      
Spotlight-Karten
Ein Licht folgt der Maus über alle Karten hinweg und beleuchtet Fläche und Kanten – wie bei Linear und Vercel.

    


    

      

        
Vorderseite

        
Rückseite
Hover oder Tippen dreht die Karte um ihre senkrechte Achse.
Mehr erfahren

      

      
Wendekarte
Zwei Seiten, eine Karte: backface-visibility und eine halbe Drehung.

    


    

      

        
NordHover von irgendwo

        
OstHover von irgendwo

        
SüdHover von irgendwo

        
WestHover von irgendwo

      

      
Richtungs-Hover
Die Ebene gleitet von der Seite herein, von der die Maus kommt – und dorthin wieder hinaus.

    


    

      

        
Wald
Meer

        
Wüste
Stadt

      

      
Fokus-Karten
Fährst du über eine Karte, treten alle anderen unscharf zurück.

    


    

      

        

        
LEGENDÄR#001 · Holo

      
Holo-Sammelkarte
Regenbogenfolie per mix-blend-mode: color-dodge, die mit dem Blickwinkel schillert.

    


    

      

        
Glas bricht LichtLiquid GlassiOS 26 · macOS Tahoe

        
Zieh mich

        

        

      

      
Liquid Glass (Apple 2025)
Drei Stufen: Milchglas, getöntes Glas und echte Lichtbrechung über eine SVG-Verschiebungskarte, die die Kanten wie eine Linse biegt. Die Linse lässt sich verschieben.

    


    

      
⌘

      
Verschlüsselte Karte
Unter der Maus erscheint ein Feld aus Zufallszeichen in Verlaufsfarbe – bei jeder Bewegung neu gewürfelt.

    


    

      

        

      
Swipe-Stapel
Karte ziehen und loslassen: weit genug, und sie fliegt davon. Sonst federt sie zurück.

    


    

      

        
♥ Liebe
✦ Neu

        
★ Top
⚡ Schnell

      
Wurf-Sticker (Physik)
Aufheben, schwungvoll loslassen: Die Sticker gleiten mit Trägheit weiter und prallen von den Wänden ab.

    


    

      

        
Polarlicht01

        
Gebirge02

        
Sonne03

        
Ringe04

        
Raster05

      

      
Aufklapp-Panels
Die Galerie als Akkordeon: Das aktive Bild nimmt sich den Platz, die anderen werden schmal.

    


    

      
Darüberfahren

      
Wasser-Verzerrung
feTurbulence und feDisplacementMap lassen das Bild wabern, solange die Maus darauf liegt.

    


    

      

      
Kartenfächer
Ein Stapel, der sich beim Darüberfahren wie ein Kartenblatt in der Hand auffächert.

    


  






  

    05
    
Buttons & Micro

      
Die kleinsten Momente entscheiden, ob sich etwas lebendig anfühlt: Rückmeldung auf Hover, Klick, Erfolg. Probier jeden Knopf aus – mit UI-Tönen in den Einstellungen klingt es sogar.

    0 Effekte
  

  


    

      

      
Magnet-Button
Zieht sich zur Maus hin, der Text sogar ein Stück weiter – und federt zurück.

    


    

      

      
Shimmer-Button
Ein Funke kreist um den Rand, ein Glanz läuft über die Fläche.

    


    

      

      
Ripple-Klick
Eine Welle breitet sich genau dort aus, wo geklickt wurde – Material Design.

    


    

      

      
Füllung ab Eintrittspunkt
Die Farbe läuft als Kreis von der Stelle hinein, an der die Maus den Knopf betritt.

    


    

      

      
Lade-Status
Knopf → Ladekreis → Haken. Der Knopf verwandelt sich, statt einen Spinner daneben zu stellen.

    


    

      

      
Konfetti
Ein Schwall Papierschnipsel mit Schwerkraft, Drall und Luftwiderstand.

    


    

      

      
Like mit Funken
Herz platzt auf, Funken fliegen, der Zähler rollt eine Zahl weiter.

    


    

      
npm i website-skill

      
In die Zwischenablage
Clipboard-API mit Symbol-Wechsel und kurzer Sprechblase als Bestätigung.

    


    

      

      
Regenbogen-Rahmen
Ein wandernder Farbverlauf als Rand und weicher Schein darunter.

    


    

      

      
Pulsierender Call-to-Action
Ringe atmen aus dem Knopf heraus – unaufdringlich, aber nicht zu übersehen.

    


    

      

        
        
        
      

      
Icon-Morphs
Menü ↔ Kreuz, Play ↔ Pause, Plus ↔ Minus – die Linien wandern, statt das Symbol zu tauschen.

    


    

      

        
        
        

      

      
Schalter, Checkbox, Radio
Federnder Schalter, ein Haken, der sich selbst zeichnet, und Radios mit Punkt-Sprung.

    


    

      

      
Glocke mit Zähler
Klingeln, Badge hüpft, Zahl zählt hoch – Klick holt neue Hinweise.

    


    

    

      

        
        
      

      
Text-Roll
Beim Hover rollt der Text Buchstabe für Buchstabe nach oben aus dem Knopf, sein Doppel rückt nach.

    


    

      

      
3D-Druckknopf
Ein Knopf mit Tiefe, der sich beim Drücken spürbar absenkt.

    


    

      

      
Licht unter der Maus
Ein Lichtfleck folgt dem Cursor auf der Knopffläche und am Rand.

    


  






  

    06
    
UI-Bausteine

      
Navigation, Formulare, Rückmeldung: die Bauteile, aus denen Oberflächen bestehen – mit den neuen nativen Browser-Fähigkeiten wie Popover-API, Anchor Positioning und @starting-style.

    0 Effekte
  

  


    

      

      
macOS-Dock
Symbole wachsen, je näher die Maus kommt – und schieben die Nachbarn weich zur Seite.

    


    

      

        

        

          
Alles auf einen Blick
Die Pille gleitet zum gewählten Reiter, der Inhalt blendet aus der passenden Richtung über.

          
Was drin ist
Über 150 Effekte, Kapitel für Kapitel, alle zum Anfassen.

          
Kostet nichts
Kein Abo, keine Bibliothek, kein Build. Nur ein Ordner.

        

      
Reiter mit gleitender Pille
Aktiver Reiter wandert, Inhalt wechselt richtungsabhängig.

    


    

      

        
Was ist neu daran?
Exklusives Akkordeon per <details name> – ohne JavaScript.

        
Wie animiert es?
interpolate-size und ::details-content animieren endlich auf height: auto.

        
Und ohne Unterstützung?
Dann klappt es eben ohne Animation – funktioniert trotzdem.

      

      
Natives Akkordeon
Immer nur eins offen, weich animiert auf echte Höhe – reines HTML und CSS.

    


    

      

      
Toast-Benachrichtigungen
Stapeln sich unten rechts, laufen ab, pausieren beim Darüberfahren, schließen per Klick.

    


    

      

        
✦
Änderungen speichern?
Natives <dialog> mit Unschärfe dahinter und Einblendung per @starting-style.

          

      
Modaler Dialog
Fokus gefangen, Esc schließt, Hintergrund wird unscharf – alles eingebaut.

    


    

      

        
Ich hänge am Knopf
Popover-API plus CSS Anchor Positioning – kein JavaScript für Position oder Schließen.

      
Popover & Anchor Positioning
Liegt in der obersten Ebene, schließt bei Klick daneben und dockt an seinen Auslöser an.

    


    

      

        
123

        

          

          

          
✓Geschafft!

        

        

      

      
Mehrschritt-Formular
Schritte gleiten seitwärts, die Leiste füllt sich, am Ende gibt es Konfetti.

    


    

      

        
62

        

      

      
Regler & Segment
Eigener Schieberegler mit Wert-Blase und eine Segment-Auswahl mit gleitendem Daumen.

    


    

      

      
Platzhalter & Auflösen
Wechselnde Platzhalter; beim Absenden zerfällt der Text in Partikel und weht davon.

    


    

      

        
Ada LovelaceSchrieb das erste Programm

        
Alan TuringErfand die Maschine

        

      
Skeleton-Loader
Schimmernde Platzhalter in der Form des Inhalts – dann blendet das Echte über.

    


    

      

        

        Wie gefällt’s dir?

      
Sterne-Bewertung
Vorschau beim Darüberfahren, Sprung beim Klick, Feuerwerk bei fünf Sternen.

    


    

      

        
Tipp: 424242

      
Code-Eingabe (OTP)
Springt von Feld zu Feld, versteht Einfügen und Rücktaste, wackelt bei falschem Code.

    


    

      
    
        
  • Recherche2 h
  • Skizzen3 h
    • 
        
  • Gestaltung8 h
  • Umsetzung13 h
  • Start1 h

      
Drag & Drop sortieren
Ziehen zum Umordnen – die anderen weichen mit FLIP-Animation weich aus.

    


    

      

      
Upload-Zone
Leuchtet beim Darüberziehen, listet Dateien mit Fortschrittsbalken.

    


    

      

        

        

        

          
          
          
        

        
      

      
Fortschritt
Balken, gestreifter Balken, Ringe und ein Spinner – alles gefüllt beim Erscheinen.

    


    

      

        ALAT
        GHLT
        MH
        

      
Avatar-Gruppe mit Tooltip
Überlappende Avatare, der Tooltip schwingt beim Bewegen mit der Maus hin und her.

    


    

      
Rechtsklick (oder lange tippen) hier

        

      
Eigenes Kontextmenü
Ersetzt das Browser-Menü per contextmenu, bleibt im Fenster und schließt bei Klick daneben.

    


    

      
⌘K

      
Befehlspalette (⌘K)
Unscharfe Suche über alle Effekte dieser Seite, mit Pfeiltasten und Enter – wie bei Linear, Raycast und Vercel.

    


    

      
    
      
    Progressive Blur
    Die Liste wird zum Rand hin stufenweise unscharf – mehrere maskierte backdrop-filter-Ebenen.
    
    
    

    
    
      
      Nichts gefunden 🍂
      
      
      Live-Suche
      Filtert bei jedem Tastendruck, markiert den Treffer im Wort.
      
    
      

  
      

      


      
  
      
    07
    
      Medien & Galerien
      
      
      Bilder zeigen, vergleichen, vergrößern, durchblättern. Alle Bilder hier sind übrigens kleine SVG-Kompositionen, live erzeugt – kein einziges Foto wird geladen.
      
    0 Effekte
  
      
  
      

    
      
      
      
        
      
        
        
      
      
      Snap-Karussell
      Natives scroll-snap, mit der Maus ziehbar, Pfeile und Punkte – die Folie in der Mitte steht im Fokus.
      
    
      

    
      
      
      VorherNachher
        VorherNachher
      
      
      Vorher / Nachher
      Ein Griff schiebt die Grenze zwischen zwei Bildern – mit der Tastatur bedienbar.
      
    
      

    
      
      
      
      
      Lupe
      Ein runder Ausschnitt zeigt das Bild dreifach vergrößert und folgt der Maus.
      
    
      

    
      
      
      
      
      Masonry + View-Transition-Lightbox
      Ein Klick lässt das Vorschaubild per View Transitions API nahtlos ins Großbild wachsen – und wieder zurück.
      
    
      

    
      
      
      
      
      3D-Karussellring
      Karten auf einem Zylinder, der sich selbst dreht und mit Schwung angestoßen werden kann.
      
    
      

    
      
      
      
      
      3D-Marquee-Wand
      Eine gekippte Bilderwand, deren Spalten gegeneinander laufen.
      
    
      

    
      
      
      Fahr schnell mit der Maus hier drüber
      
      
      Bildspur
      Hinter dem Cursor fallen Bilder aus – je schneller die Bewegung, desto dichter die Spur.
      
    
      

    
      
      
      
        
      website-skill.dev
      
        
      
      
      Geräte-Mockups
      Browserfenster und Telefon aus reinem CSS – ideal, um Screenshots zu rahmen.
      
    
      

    
      
      
      
      
      Ken-Burns-Diashow
      Langsamer Zoom und Schwenk, dazu weiche Überblendung – wie in Dokumentarfilmen.
      
    
      

    
      
      
      
      
      Pixel → Scharf
      Das Bild ist grob verpixelt und wird beim Darüberfahren stufenweise scharf.
      
    
      

    
      
      
      
      
      Bild-Parallax im Rahmen
      Der Rahmen scrollt normal, das Bild darin langsamer – ein Fenster mit Tiefe.
      
    
      

  
      

      


      
  
      
    08
    
      Daten & Visualisierung
      
      
      Zahlen, die sich aufbauen, Diagramme, die sich zeichnen, Systeme, die arbeiten. Ohne Chart-Bibliothek – SVG, Canvas und ein paar Zeilen Mathe.
      
    0 Effekte
  
      
  
      

    
      
      
      
        
      0umgesetzte Projekte
      
        
      0Zufriedenheit
      
        
      0Bewertung
      
        
      0Ladezeit
      
      
      
      
      Hochzählende Kennzahlen
      Zahlen laufen beim Erscheinen von null hoch und bremsen weich ab – mit deutscher Schreibweise.
      
    
      

    
      
      
      
      
      Balkendiagramm
      Balken wachsen gestaffelt, beim Darüberfahren zeigt ein Tooltip den Wert.
      
    
      

    
      
      
      
      
      Liniendiagramm mit Fadenkreuz
      Die Linie zeichnet sich selbst, die Fläche darunter verläuft, das Fadenkreuz rastet am nächsten Punkt ein.
      
    
      

    
      
      
      100 %Gesamt
        
      
        Donut-Diagramm
        Segmente füllen sich nacheinander; die Legende hebt beim Darüberfahren ihr Segment hervor.
        
    
        

    
        
      
        
      
        Punkt-Globus mit Flugbögen
        900 Punkte auf einer Kugel, Bögen zwischen Städten – ziehbar, mit Trägheit.
        
    
        

    
        
      
          
        
        1. 2019Idee auf einer Serviette
        2. 2020Erster Prototyp
        3. 202210.000 Nutzer
          4. 
        
        4. 2024Team aus zwölf
        5. 2026Du liest das hier
        
      
        Zeitleiste
        Die Linie füllt sich, während die Karte durchs Bild scrollt, und zündet jede Station an.
        
    
        

    
        
      
        effekt.js
        
      
        Code-Block
        Syntax-Hervorhebung ohne Bibliothek, getippt Zeichen für Zeichen, mit Kopierknopf.
        
    
        

    
        
      
        zsh — website_skill
        
      
        Terminal
        Befehle werden getippt, Ausgaben erscheinen, ein Fortschrittsbalken läuft – in Schleife.
        
    
        

    
        
      
        
        
        ✦
        
        
        ⚡◎✳
        
        
        ▲●■◆
        
      
        
      
        Orbit
        Symbole kreisen auf zwei Bahnen in Gegenrichtung und bleiben dabei aufrecht.
        
    
        

    
        
      
        
        
        GSN
        
        ✦
        
        ⚙
        
        
        
      
        Datenstrahlen
        Lichtpulse laufen über berechnete Kurven von den Quellen zum Knotenpunkt – ideal für Integrations-Grafiken.
        
    
        

    
        
      
        Fahr über ein Feldweniger  mehr
        
      
        Aktivitäts-Heatmap
        Ein Jahr in 371 Feldern, Spalte für Spalte eingeblendet – wie die Beiträge auf GitHub.
        
    
        

    
        
      
        LIVE0
        
      
        Live-Ticker
        Ein Wert, der sich ständig ändert: Kurve läuft durch, Zahl färbt sich nach Richtung.
        
    
        

    
        
      
        
        
        
        
        • 0/600 kcal
        • 0/30 Min
        • 0/12 Std
        
        
        
      
        Aktivitätsringe
        Drei Ringe wie bei der Apple Watch, die sich auf ihre Tageswerte füllen.
        
    
        

  
        

        


        
  
        
    09
    
        Landing-Page-Sections
        
      
        Die Bausteine, aus denen fast jede Landingpage besteht – fertig gestaltet und lebendig: von der Logo-Wolke bis zum Call-to-Action.
        
    0 Effekte
  
        
  
        

    
        
      
        Neuwebsite_skill 2.0 ist da – jetzt mit Liquid GlassAnsehen →
        
        
        
      
        Ankündigungsleiste
        Schimmernder Hinweis oben auf der Seite, schließbar – die Seite rückt weich nach.
        
    
        

    
        
      
        Vertraut von Teams, die Wert auf Details legen
        
      
        Logo-Wolke
        Zwei Reihen laufen gegenläufig, Ränder blenden aus, beim Darüberfahren hält alles an und das Logo bekommt Farbe.
        
    
        

    
        
      
        
        
        ⚡Blitzschnell
        Kein Build, keine Bibliothek. Die Seite ist da, bevor du blinzelst.
        
        
        ◐Hell & Dunkel
        Ein Thema für jede Tageszeit – mit Kreis-Übergang beim Wechseln.
        
        
        ♿Zugänglich
        Respektiert „weniger Bewegung“, Tastatur und Screenreader.
        
        
        ✦Lebendig
        Über 150 Effekte, die nur laufen, wenn man sie sieht.
        
        
        ⌘Durchsuchbar
        Befehlspalette mit unscharfer Suche über alles.
        
        
        ☁Offline
        Alle Bilder entstehen im Browser. Kein Foto, kein CDN-Bild.
        
      
        
      
        Feature-Raster
        Sechs Vorteile mit Symbol, die beim Darüberfahren aufleuchten und sich heben.
        
    
        

    
        
      
        
        
        LeistungUnter 100 ms
        
        
        Wien00:00
        
        
        Dunkelmodus
        
        
        Team
        ABC+9
        
        
        Weltweit42 Länder
        
        
        „Endlich eine Seite, auf der man einfach alles ausprobieren kann.“
        — jemand, der scrollt
        
      
        
      
        Bento-Grid mit Live-Widgets
        Ungleich große Kacheln mit echten Inhalten: tickende Uhr, Diagramm, Schalter, der wirklich das Thema wechselt.
        
    
        

    
        
      
        
      
        Testimonial-Spalten
        Drei endlose Spalten mit Kundenstimmen in unterschiedlichem Tempo – Hover hält an.
        
    
        

    
        
      
        
        
        MonatlichJährlich −20 %
        
        
        
          
        Start
        Zum Ausprobieren
        0€ / Monat
        • 10 Effekte
        • Community
        • Eigene Farben
        
          
        BeliebtPro
        Für Profis
        29€ / Monat
        • Alle Effekte
        • Eigene Farben
        • Updates
        
          
        Team
        Für Agenturen
        79€ / Monat
        • Alles aus Pro
        • 5 Plätze
        • Support
        
        
        
      
        Preistabelle
        Monat/Jahr umschalten, die Preise zählen weich um; der empfohlene Plan hat einen kreisenden Rahmen.
        
    
        

    
        
      
        
        
        FunktionBaukastenwebsite_skillAgentur
        
        
          
        Keine Abhängigkeiten✕✓✕
        
          
        Scroll-Szenenteilweise17✓
        
          
        Liquid Glass✕✓✓
        
          
        Kosten29 €/Monat0 €ab 8.000 €
        
          
        Startklar in1 Tag1 Sekunde6 Wochen
        
        
        
      
        Vergleichstabelle
        Die eigene Spalte hervorgehoben, Zeilen leuchten beim Darüberfahren, die erste Spalte bleibt beim Wischen stehen.
        
    
        

    
        
      
        
        
        Häufige Fragen
        Alles, was du wissen willst – und ein paar Dinge, die du nicht gefragt hast.
        
        
        
          
        Darf ich die Effekte verwenden?
        Ja. Abschauen ist ausdrücklich erwünscht – genau dafür ist diese Seite da.
        
          
        Funktioniert das auf dem Handy?
        Ja. Szenen, Karten und Formulare sind für Touch gebaut; einige Hover-Effekte zeigen dort einen Ersatz.
        
          
        Warum keine Bibliothek?
        Weil moderne Browser fast alles selbst können: Scroll-Timelines, View Transitions, Popover, Anchor Positioning.
        
          
        Was ist mit Barrierefreiheit?
        „Weniger Bewegung“ wird respektiert (System oder Einstellungen), alles ist per Tastatur erreichbar.
        
        
        
      
        FAQ-Section
        Zweispaltig: links Einleitung, rechts das native, exklusive Akkordeon.
        
    
        

    
        
      
        
        
        Mara KernDesign
        in✉
        
        
        Jonas FeldEntwicklung
        in✉
        
        
        Lea SturmBewegung
        in✉
        
        
        Ben LichtStrategie
        in✉
        
      
        
      
        Team-Section
        Graustufen werden farbig, Name und Kontakte gleiten beim Darüberfahren herein.
        
    
        

    
        
      
        Bereit für den
        nächsten Effekt?
        Nach oben ↑
        
      
        Call-to-Action mit Lampe
        Ein Lichtkegel fällt von oben auf die Überschrift – zwei konische Verläufe und eine leuchtende Kante.
        
    
        

    
        
      
        Kein Effekt verpassen
        Einmal im Monat das Neueste – kein Spam, versprochen.
        
        
        
        
        
      
        Newsletter-Formular
        Prüft die Adresse live, wackelt bei Fehlern, verwandelt sich bei Erfolg – mit Konfetti.
        
    
        

  
        

        


        
  
        
    10
    
        Design-Stile
        
      
        Dieselbe kleine Karte in dreizehn Stilrichtungen – von Glas über Ton bis Brutalismus. So sieht man, wie sehr Material und Schatten den Charakter bestimmen.
        
    0 Effekte
  
        
  
        

    
        
      
        GlasGlassmorphism
        Milchglas über leuchtender Farbe.
        
      
        Glassmorphism
        backdrop-filter: blur(), halbtransparente Fläche, heller Rand.
        
    
        

    
        
      
        iOS 26Liquid Glass
        Glanzkanten, Sättigung, Tiefe.
        
      
        Liquid Glass (statisch)
        Apples Material von 2025: gesättigter Hintergrund, Lichtkante oben, Spiegelung innen.
        
    
        

    
        
      
        SoftNeumorphism
        Aus der Fläche gedrückt.
        
      
        Neumorphism
        Zwei Schatten – hell oben links, dunkel unten rechts – auf gleichfarbigem Grund.
        
    
        

    
        
      
        TonClaymorphism
        Weich, rund, aufgeblasen.
        
      
        Claymorphism
        Pastell, große Radien und Innenschatten, die wie Knete wirken.
        
    
        

    
        
      
        LautNeo-Brutalismus
        Harte Kanten, harte Schatten.
        
      
        Neo-Brutalismus
        Schwarze Ränder, versetzte Vollschatten, knallige Flächen – bewusst roh.
        
    
        

    
        
      
        LederSkeuomorphismus
        Echte Materialien nachgebaut.
        
      
        Skeuomorphismus
        Naht, Prägung, glänzender Knopf – wie iOS 6.
        
    
        

    
        
      
        2000Y2K-Chrom
        Glänzend, blasig, futuristisch.
        
      
        Y2K / Chrome
        Chromschrift, Seifenblasen-Knopf und ein Himmel aus dem Jahr 2000.
        
    
        

    
        
      
        8-BITPixel-Retro
        PRESS START
        
      
        Pixel / 8-Bit
        Stufenrahmen aus box-shadow, Monospace und eine Konsolen-Palette.
        
    
        

    
        
      
        01Swiss Style
        Raster. Rot. Ordnung.
        
      
        Swiss / International
        Groteskschrift, strenges Raster, Weißraum und genau eine Signalfarbe.
        
    
        

    
        
      
        // SYSCyberpunk
        Neon im Dauerregen.
        
      
        Cyberpunk / Neon
        Abgeschnittene Ecken per clip-path, Neonkanten, Scanlines.
        
    
        

    
        
      
        Ausgabe Nr. 12Editorial
        Ein guter Text braucht nur Papier, eine Serifenschrift und Ruhe.
        
      
        Editorial / Print
        Papierton, Serifen, Initial und feine Linien – wie ein Magazin.
        
    
        

    
        
      
        Soft UIPastell-Verlauf
        Freundlich, luftig, modern.
        
      
        Soft Gradient
        Pastellige Verläufe, viel Weiß, weiche lange Schatten – der SaaS-Klassiker.
        
    
        

    
        
      
        1919Bauhaus
        Kreis. Quadrat. Dreieck.
        
      
        Bauhaus
        Primärfarben und geometrische Grundformen – Form folgt Funktion.
        
    
        

  
        

        


        
  
        
    11
    
        Browser-APIs & Gadgets
        
      
        Was der Browser heute alles kann, wenn man ihn lässt: Übergänge, Vollbild, Teilen, Sprechen, Hören, Farben vom Bildschirm holen, Sensoren lesen, Töne erzeugen.
        
    0 Effekte
  
        
  
        

    
        
      
        
      
        View Transitions API
        Der Browser fotografiert vorher und nachher und animiert jede Kachel an ihren neuen Platz – Umordnen, Filtern, Größe, alles mit einer Zeile.
        
    
        

    
        
      
        
        
        01
        Start
        Klick oben auf einen Menüpunkt.
        
      
        Seitenwechsel-Vorhang
        Vier Streifen fallen gestaffelt, der Inhalt wechselt dahinter, dann ziehen sie nach oben ab.
        
    
        

    
        
      
        Vollbild
        Esc beendet
        
      
        Fullscreen API
        Ein einzelnes Element füllt den ganzen Bildschirm – perfekt für Galerien und Präsentationen.
        
    
        

    
        
      
        Web Share API – sonst Zwischenablage
        
      
        Web Share API
        Öffnet das Teilen-Menü des Systems (Telefon, Safari) und kopiert ersatzweise den Link.
        
    
        

    
        
      
        Hallo! Ich bin website_skill. Ich lese dir diesen Satz vor und zeige dabei jedes Wort an, das ich gerade spreche.
        
        
        
      
        Sprachausgabe
        SpeechSynthesis mit Wortgrenzen-Ereignissen: Das gesprochene Wort leuchtet mit.
        
    
        

    
        
      
        #——————
        
      
        EyeDropper API
        Eine Pipette für den ganzen Bildschirm – auch außerhalb des Browserfensters.
        
    
        

    
        
      
        Am Telefon spürbar
        
      
        Vibration API
        Muster aus Vibrieren und Pause – haptische Rückmeldung auf Android-Geräten.
        
    
        

    
        
      
        
        
        
        
        
        
        Tasten A S D F G H J K – oder klicken
        
      
        Web-Audio-Synthesizer
        Oszillator, Hüllkurve und Analyser: Ein kleines Instrument mit Oszilloskop, direkt im Browser.
        
    
        

    
        
      
        
      
        Geräte-Steckbrief
        Was die Seite über dein Gerät weiß: Netz, Akku, Bildschirm, Kerne, Vorlieben – live aktualisiert.
        
    
        

    
        
      
        β 0° · γ 0°
        
      
        Wasserwaage (Lagesensor)
        DeviceOrientation am Telefon – am Rechner spielt die Maus den Sensor.
        
    
        

    
        
      
        0Mal weggeschaut
        Wechsle kurz den Tab und komm zurück – der Titel ändert sich, und hier wird gezählt.
        
      
        Page Visibility
        Erkennt, ob der Tab im Vordergrund ist: Animationen pausieren, der Titel winkt dir.
        
    
        

    
        
      
        Sag „Konfetti“, „Dunkel“ oder „Hell“.
        
      
        Spracheingabe
        Web Speech API: Die Seite hört zu und gehorcht ein paar Befehlen (fragt vorher nach dem Mikrofon).
        
    
        

    
        
      
        ↑↑↓↓←→←→BA
        
      
        Easter Egg: Konami-Code
        Die berühmte Tastenfolge irgendwo auf der Seite eintippen – und die Party beginnt.