Update fast-search-card.js

Author: fastender

dist/fast-search-card.js

@@ -1258,6 +1258,7 @@ class FastSearchCard extends HTMLElement {
                 gap: 12px;
                 opacity: 0;
                 transform: translateX(20px);
+                filter: url(#categoryGooey);
             }
 
             /* Mobile: Category-Buttons zentrieren */
@@ -4588,9 +4589,59 @@ class FastSearchCard extends HTMLElement {
                 height: 24px;
                 transition: all 0.2s ease;
             }
+
+
+            
+            /* NEU: SVG Gooey Filter für Liquid Animation */
+            .gooey-filter {
+                position: absolute;
+                width: 0;
+                height: 0;
+                pointer-events: none;
+            }        
+            
+            /* Blob Animation Container */
+            .blob-container {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 400px;
+                height: 72px;
+                pointer-events: none;
+                z-index: 5;
+                display: none;
+            }
+            
+            .liquid-blob {
+                position: absolute;
+                background: rgba(255, 255, 255, 0.15);
+                backdrop-filter: blur(var(--glass-blur-amount));
+                border-radius: 50%;
+                opacity: 0;
+                will-change: transform, opacity;
+            }   
+
+            /* Blob-spezifische Größen */
+            .blob-1 { width: 72px; height: 72px; }
+            .blob-2 { width: 72px; height: 72px; }
+            .blob-3 { width: 72px; height: 72px; }
+            .blob-4 { width: 72px; height: 72px; }
+            .blob-5 { width: 72px; height: 72px; }            
 
             </style>
 
+            <!-- NEU: SVG Filter für Gooey Effect -->
+            <svg class="gooey-filter">
+                <defs>
+                    <filter id="categoryGooey" x="-50%" y="-50%" width="200%" height="200%">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
+                        <feComponentTransfer>
+                            <feFuncA type="discrete" tableValues="0 .7 1"/>
+                        </feComponentTransfer>
+                    </filter>
+                </defs>
+            </svg>
+
             <div class="main-container">
                 <div class="search-row">
                     <div class="search-panel glass-panel">
@@ -4750,6 +4801,16 @@ class FastSearchCard extends HTMLElement {
                     <div class="detail-panel glass-panel">
                         </div>
 
+                    <!-- NEU: Blob Container für Liquid Animation -->
+                    <div class="blob-container" id="blobContainer">
+                        <div class="liquid-blob blob-1"></div>
+                        <div class="liquid-blob blob-2"></div>
+                        <div class="liquid-blob blob-3"></div>
+                        <div class="liquid-blob blob-4"></div>
+                        <div class="liquid-blob blob-5"></div>
+                    </div>
+                        
+
                     <div class="category-buttons">
                         <button class="category-button glass-panel active" data-category="devices" title="Geräte">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -4987,8 +5048,8 @@ class FastSearchCard extends HTMLElement {
     }    
 
     showCategoryButtons() {
-        this.collapsePanel(); // <-- HINZUGEFÜGTE ZEILE
-
+        this.collapsePanel();
+    
         // NEU: Search-Wrapper auf Mobile verstecken
         if (this.isMobile()) {
             const searchWrapper = this.shadowRoot.querySelector('.search-panel');
@@ -4997,10 +5058,10 @@ class FastSearchCard extends HTMLElement {
             }
         }
 
-        const categoryButtons = this.shadowRoot.querySelector('.category-buttons');
         this.isMenuView = true;
-        categoryButtons.classList.add('visible');
-        categoryButtons.animate([{ opacity: 0, transform: 'translateX(20px) scale(0.9)' }, { opacity: 1, transform: 'translateX(0) scale(1)' }], { duration: 400, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'forwards' });
+        
+        // 🌊 NEUE LIQUID ANIMATION statt der alten Animation
+        this.startLiquidCategoryAnimation();
     }
 
     hideCategoryButtons() {
@@ -5041,6 +5102,110 @@ class FastSearchCard extends HTMLElement {
         this.hideCategoryButtons();
     }
 
+    // 🌊 LIQUID ANIMATION METHODEN
+    
+    createBlobAnimation() {
+        const blobContainer = this.shadowRoot.querySelector('#blobContainer');
+        const blobs = blobContainer.querySelectorAll('.liquid-blob');
+        
+        // Alle Blobs zurücksetzen
+        blobs.forEach(blob => {
+            blob.style.opacity = '0';
+            blob.style.transform = 'scale(0) translateX(0px)';
+        });
+        
+        return { blobContainer, blobs };
+    }
+    
+    animateBlobEmergence(blobs) {
+        return new Promise((resolve) => {
+            // Schritt 1: Ersten Blob erscheinen lassen
+            const firstBlob = blobs[0];
+            firstBlob.style.display = 'block';
+            firstBlob.style.left = '0px';
+            firstBlob.style.top = '0px';
+            
+            firstBlob.animate([
+                { opacity: 0, transform: 'scale(0) translateX(0px)' },
+                { opacity: 1, transform: 'scale(1) translateX(0px)' }
+            ], {
+                duration: 300,
+                easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+                fill: 'forwards'
+            }).finished.then(() => {
+                setTimeout(resolve, 100);
+            });
+        });
+    }
+    
+    animateBlobSegmentation(blobs) {
+        return new Promise((resolve) => {
+            // Alle 5 Blobs zu ihren finalen Positionen animieren
+            const positions = [
+                { x: 0, y: 0 },      // devices
+                { x: 84, y: 0 },     // scripts  
+                { x: 168, y: 0 },    // automations
+                { x: 252, y: 0 },    // scenes
+                { x: 336, y: 0 }     // custom
+            ];
+            
+            const animations = Array.from(blobs).map((blob, index) => {
+                const pos = positions[index];
+                
+                return blob.animate([
+                    { 
+                        opacity: index === 0 ? 1 : 0, 
+                        transform: `scale(${index === 0 ? 1 : 0}) translateX(0px)` 
+                    },
+                    { 
+                        opacity: 1, 
+                        transform: `scale(1) translateX(${pos.x}px)` 
+                    }
+                ], {
+                    duration: 400,
+                    delay: index * 80,
+                    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+                    fill: 'forwards'
+                });
+            });
+            
+            Promise.all(animations.map(anim => anim.finished)).then(() => {
+                setTimeout(resolve, 200);
+            });
+        });
+    }
+
+    startLiquidCategoryAnimation() {
+        const { blobContainer, blobs } = this.createBlobAnimation();
+        
+        // Blob-Container anzeigen
+        blobContainer.style.display = 'block';
+        
+        // Starte Animations-Kette
+        this.animateBlobEmergence(blobs)
+            .then(() => this.animateBlobSegmentation(blobs))
+            .then(() => this.materialiseCategoryButtons());
+    }
+    
+    materialiseCategoryButtons() {
+        const categoryButtons = this.shadowRoot.querySelector('.category-buttons');
+        const blobContainer = this.shadowRoot.querySelector('#blobContainer');
+        
+        // Category-Buttons anzeigen und Blobs verstecken
+        categoryButtons.classList.add('visible');
+        blobContainer.style.display = 'none';
+        
+        // Finale Category-Button Animation
+        categoryButtons.animate([
+            { opacity: 0, transform: 'translateX(20px) scale(0.9)' }, 
+            { opacity: 1, transform: 'translateX(0) scale(1)' }
+        ], { 
+            duration: 300, 
+            easing: 'cubic-bezier(0.16, 1, 0.3, 1)', 
+            fill: 'forwards' 
+        });
+    }    
+
     handleSubcategorySelect(selectedChip) {
         let subcategory = selectedChip.dataset.subcategory;
         if (subcategory === this.activeSubcategory && subcategory !== 'all') {