Minicon Component Library

Fullscreen Hero-Sektion mit Hintergrundbild, Overlay, optionalem Logo und Call-to-Action.

Interaktive 3D-Galaxy-Animation mit Three.js. Reagiert auf Mausbewegung und Scroll.

Hero-Sektion mit animiertem Aurora-Gradient: wabernde Farb-Blobs (mix-blend-mode: screen), Grain-Overlay und Gradient-Headline. Nutzt CSS @property für den animierten Gradient-Winkel.

Hero-Sektion als 3D-Diorama: Headline und frei platzierbare Deko-Ebenen liegen auf verschiedenen Z-Tiefen und verschieben sich bei Mausbewegung gegeneinander, die ganze Bühne neigt sich subtil mit.

Responsive Navigation mit dynamischem Overflow-Burger-Menü. Misst automatisch die Breite der Nav-Items und verschiebt überzählige Einträge in ein ausklappbares Burger-Menü.

Navigation mit animierter Wasser-Spiegelung unter den Links. Bei Hover erscheint unter dem Text eine leicht wabernde Spiegelung — wie ein Schriftzug, der sich in einer Wasseroberfläche spiegelt. Inkl. Priority-Overflow ins Burger-Menü.

Sticky Header-Navigation mit gruppierten Sektionen (Desktop-Dropdown / Mobile-Drawer mit Kontakt-Block). Ideal für Vereine und Sites mit mehreren Inhaltsgruppen.

macOS-Dock-Navigation mit Magnification-Effekt: Icons vergrößern sich beim Überfahren mit Cosinus-Falloff, die Leiste ist echtes Glas (backdrop-filter: blur + saturate). Mit Tooltips und Aktiv-Indikator.

Fullscreen-Overlay-Menü mit übergroßer Typografie: nummerierte Links staggern zeilenweise herein (Line-Mask-Reveal), bei Hover gleitet ein Pfeil heran. Burger morpht zum X, Body-Scroll wird gesperrt.

Mega-Dropdown im Stripe-Stil: Das Panel klappt nicht neu auf, sondern gleitet beim Wechsel zwischen Menüpunkten weich zur neuen Position und morpht seine Größe. Inhalte mit Icons und Beschreibungen cross-faden.

⌘K/Strg+K öffnet eine Befehlspalette mit Suchfeld, Treffer-Ranking, gruppierten Einträgen und voller Tastatursteuerung (↑ ↓ Enter Esc) — die moderne Power-User-Navigation mit geblurtem Backdrop.

Mobile Bottom-Navigation im App-Stil: Das aktive Icon hebt sich in einer kreisrunden Bubble aus der Leiste, die mit Overshoot-Federung zur neuen Position springt. Ein Ring in Seitenfarbe erzeugt die Aussparungs-Illusion.

Floating-Action-Button, der seine Aktionen kreisförmig auffächert: Items federn mit Stagger an ihre trigonometrisch berechnete Position, das Plus rotiert zum X, Tooltips über den Items.

Schwebende Glas-Kapsel im Dynamic-Island-Stil: schrumpft beim Herunterscrollen zur kompakten Insel und dehnt sich beim Hochscrollen federnd aus. Ein Pill-Indikator gleitet elastisch zwischen den Links.

Vertikale Punkt-Navigation am Seitenrand mit IntersectionObserver-Scrollspy: Der aktive Punkt wächst mit Ring, Labels gleiten bei Hover heraus, Klick scrollt sanft zum Abschnitt. Der Onepager-Klassiker.

Der typografische Award-Hover: Beim Überfahren rollt jeder Buchstabe einzeln nach oben aus dem Sichtfeld, während sein farbiges Duplikat von unten hereinrollt — gestaffelt von links nach rechts, plus wachsende Underline.

Fullscreen-Menü, das als wachsender Kreis exakt aus der Trigger-Position expandiert (animierter clip-path: circle()) und beim Schließen dorthin zurück kollabiert. Links staggern herein.

Links, die vom Cursor magnetisch angezogen werden und beim Verlassen zurückfedern — darunter gleitet eine elastische Underline mit Overshoot zwischen den Menüpunkten.

Responsive Bildergalerie mit klickbarer Lightbox-Vollansicht und Navigation.

Team-Vorstellung in zwei Varianten: Einzelbild mit Text oder Mitglieder-Grid mit Fotos.

Interaktive Speisekarte mit Kategorie- und Diät-Filtern, Preisvarianten und Tags.

Öffnungszeiten-Anzeige als Tabelle. Hebt den aktuellen Wochentag hervor.

Card-Grid im Linear-Stil: Ein leuchtender Rand folgt der Mausposition (radial-gradient unter der Kartenfläche), dazu ein subtiles Spotlight auf der Oberfläche. Nutzt CSS Custom Properties und color-mix().

3D-Tilt-Karte: neigt sich zur Mausposition (perspective + rotateX/Y), ein Glanzlicht wandert über die Oberfläche, der Schatten verschiebt sich gegenläufig. Federt beim Verlassen weich zurück.

Bildvergleich mit Drag-Handle: Das Vorher-Bild wird per clip-path beschnitten, der Trenner lässt sich mit Maus, Touch und Tastatur verschieben (ARIA-Slider). Ideal für Handwerker und Renovierungen.

Kundenstimmen in einer nahtlosen Endlosschleife. Die Ränder blenden weich aus (mask-image), bei Hover pausiert die Animation, bei prefers-reduced-motion wird stattdessen gescrollt.

Scroll-getriggerte Zähler: Zahlen zählen mit easeOutExpo hoch, sobald die Sektion sichtbar wird (IntersectionObserver). Optional mit animiertem SVG-Progress-Ring. Deutsche Zahlenformatierung.

Preistabelle mit rotierendem conic-gradient-Rand am hervorgehobenen Plan (animiert über CSS @property) und Pill-Toggle für monatliche/jährliche Abrechnung mit Preis-Flip-Animation.

Accordion mit butterweicher Höhen-Animation über den grid-template-rows-Trick (0fr → 1fr) — ohne JavaScript-Höhenmessung. Das Plus-Icon morpht beim Öffnen zum Minus. Vollständig tastaturbedienbar.

CoverFlow-Karussell mit echter 3D-Tiefe: Die aktive Karte steht frontal, Nachbarn rotieren räumlich nach hinten weg und dunkeln ab. Mit Spiegelung, Swipe, Pfeiltasten und Punkte-Navigation.

Rotierender 3D-Würfel mit vier Inhaltsflächen (Bilder oder freier Inhalt). Die Tiefe wird responsive aus der Containerbreite berechnet, Navigation per Buttons und Swipe mit Federungs-Easing.

Grid aus 3D-Flip-Karten: Vorderseite mit Icon und Titel, bei Hover/Tap dreht die Karte auf die Gradient-Rückseite mit Text und Link. Der Klassiker für Leistungsübersichten.

Aufklappbares 3D-Buch mit geprägtem Cover, Lesezeichen und Papierkanten. Bei Klick klappt das Cover am Buchrücken-Scharnier auf und zeigt zwei Innenseiten — perfekt für Speisekarten und Broschüren.

Schwebendes 3D-Geräte-Mockup aus purem CSS (Laptop oder Smartphone), das sich zur Maus neigt und einen Screenshot zeigt — inklusive Float-Animation und gegenläufigem Bodenschatten. Ideal für Projekt-Referenzen.

Eine Leitfigur (Emoji, Logo, beliebiger ReactNode) wandert beim Scrollen entlang eines geschwungenen Pfads von Station zu Station durch die Customer Journey. Der Pfad zeichnet sich mit, die aktive Station leuchtet auf, der Guide spricht in einer Sprechblase. Inspiriert von process-academy.org.

Vollständiges Vereins-Anmeldungs-Formular mit Persönlichen Daten, Familienmitgliedern, SEPA-Lastschrift, Einwilligungen, digitaler Unterschrift (Canvas), Minderjährigen-Option und optionaler PDF-Generierung.

DSGVO-konformes Kontaktformular mit API-Anbindung an die Minicon Contact API.

DSGVO Cookie-Hinweis Banner. Speichert die Zustimmung in localStorage.

Facebook Page Plugin mit DSGVO Zwei-Klick-Consent. Lädt externe Inhalte erst nach Zustimmung.

Google Maps Karte mit DSGVO Zwei-Klick-Consent. Lädt die Karte erst nach Zustimmung.

Universelle Karten-Einbettung für Google Maps und OpenStreetMap — koordinatenbasiert (lat/lng/zoom) oder über fertige Embed-URL. Google ohne API-Key. DSGVO: Google mit Zwei-Klick-Consent, OpenStreetMap (EU-Server) lädt standardmäßig direkt.

Massive Display-Headline mit echter Tiefenwirkung: Die Extrusion entsteht aus gestapelten text-shadow-Ebenen, der Schriftzug rotiert zur Mausposition und die Tiefe verschiebt sich sichtbar mit.

Wogendes 3D-Partikelfeld (Three.js): Tausende Lichtpunkte bewegen sich wie eine Wasseroberfläche aus überlagerten Sinuswellen, die Kamera schwebt sanft mit der Maus. Edler, ruhiger Hero-Hintergrund.

Rotierender Partikel-Globus (Three.js): Punkte auf einer Fibonacci-Kugel mit leuchtenden Großkreis-Bögen zwischen zufälligen Orten. Per Drag rotierbar mit Trägheit — die "weltweit vernetzt"-Ästhetik.

Organisch morphender 3D-Blob (Three.js): Eine Ikosaeder-Oberfläche wird von Sinusfeldern verformt und von zwei farbigen Lichtern irisierend beleuchtet. Lehnt sich zur Maus. Der Trend-Hingucker für Hero-Sektionen.

GPU-Fluid-Simulation „Regen auf Glas“ (WebGL2): Tropfen als prozedurales Höhenfeld im Fragment-Shader mit Stick-Slip-Lauf, Schweifen und Tröpfchen-Spuren. Brechung entsteht physikalisch aus dem Normalenfeld, Tiefenschärfe pro Pixel aus Mipmap-LODs. Mit Bokeh-Nachtszene, Laterne, Maus-Parallax und Ken-Burns-Hover.

Regen auf einer Fensterscheibe bei Nacht: verschwommene Bokeh-Lichter im Hintergrund, Tropfen brechen das Licht wie echte Wasserlinsen (invertiertes scharfes Abbild der Szene im Tropfen), wachsen durch Kondensation, verschmelzen und laufen mit schlängelnder Spur herunter.

Fotorealistische Regen-Simulation (Canvas 2D) mit echter Physik: Tropfen beschleunigen bis zur Terminal-Velocity (Motion-Blur-Streaks, Tiefenstaffelung), ballistische Splash-Partikel und perspektivische Ripples beim Aufprall, nasser Boden mit gespiegelten Lichtquellen und Tropfen-Reflexionen, Windböen, optional Blitze.

Scroll-Reise durch ein komplexes 3D-Molekül (Three.js): Die Kamera fliegt beim Scrollen weich von Atom zu Atom, das aktive Atom glüht und pulsiert, dazu blendet die zugehörige Inhalts-Karte mit Glas-Optik ein. Prozedural generiert und deterministisch.

3D Neon-Grid mit schwebenden Cubes, Partikeln, Glow-Orbs und hexagonalem Overlay. Ideal als Hintergrund für Tech-Landingpages.

3D Diamond-Visualisierung mit Energy-Lines, schwebenden Code-Snippets, Sparkles und Orbiting-Ringen.

SVG-basiertes animiertes Circuit-Logo mit Glow-Effekten und Verbindungspfaden.

Animierte Pipeline-Visualisierung mit Agent-Nodes, Bezier-Verbindungen und fließenden Task-Segmenten.

Wrapper für Scroll-getriggerte Einblendungen mit sechs Varianten (fade-up, blur-in, zoom-in, …). Standard: IntersectionObserver + CSS-Transition. Mit scrub koppelt sich die Animation an die Scroll-Position (natives CSS animation-timeline: view()) und läuft beim Zurückscrollen rückwärts.

Kaufhinweis-Banner für Demo-Websites. Prüft über die API ob die Site bezahlt ist. Zeigt personalisierten Angebotspreis.

Lila Banner für Preview-Domains. Zeigt "Vorschau-Ansicht" mit Link zur Live-Website.