Implement chamaleon header

resources/assets/css/main.css

@@ -12,7 +12,7 @@
 }
 
 @theme {
-    --color-chamaleon: hsl(120, 40%, 80%);
+    --color-chamaleon: hsl(180, 40%, 80%);
 }
 
 @layer components {

resources/assets/js/alpine/chamaleon.js

@@ -0,0 +1,25 @@
+import Alpine from 'alpinejs';
+
+function updateColor(el) {
+    el.style.setProperty(
+        '--color-chamaleon',
+        'hsl(' + ((Date.now() / 100) % 360) + ', 40%, 80%)',
+    );
+
+    requestAnimationFrame(() => updateColor(el));
+}
+
+Alpine.directive('chamaleon', (el) => {
+    updateColor(el);
+    setTimeout(() => {
+        const tintedElements = Array.from(el.querySelectorAll('.bg-chamaleon'));
+
+        if (el.matches('.bg-chamaleon')) {
+            tintedElements.push(el);
+        }
+
+        tintedElements.forEach((tintedElement) => {
+            tintedElement.classList.remove('transition-colors');
+        });
+    }, 1000);
+});

resources/assets/js/main.js

@@ -1,5 +1,6 @@
 import Alpine from 'alpinejs';
 
+import './alpine/chamaleon';
 import './alpine/datetime';
 
 Alpine.start();

resources/views/components/layout-header.blade.php

@@ -1,6 +1,7 @@
 <header
-    class="bg-chamaleon {{ $collapsed ? "md:mt-[calc(theme('height.5')+2*theme('height.2')-theme('height.32'))] lg:mt-[calc(theme('height.5')+2*theme('height.2')-theme('height.40'))]" : "" }} z-10 flex h-16 flex-col items-center md:h-32 lg:h-40"
+    class="bg-chamaleon {{ $collapsed ? "md:mt-[calc(theme('height.5')+2*theme('height.2')-theme('height.32'))] lg:mt-[calc(theme('height.5')+2*theme('height.2')-theme('height.40'))]" : "" }} z-10 flex h-16 flex-col items-center transition-colors duration-300 md:h-32 lg:h-40"
     :class="navigationOpen ? 'fixed top-0 inset-x-0' : ''"
+    x-chamaleon
 >
     <div class="max-w-content flex w-full overflow-hidden">
         <a
@@ -32,7 +33,7 @@ class="h-full fill-current text-black"
     </div>
     <nav
         aria-label="Site navigation"
-        class="md:bg-overlay bg-chamaleon fixed top-16 bottom-0 w-full -translate-x-full transition-transform duration-300 md:relative md:top-0 md:translate-x-0"
+        class="md:bg-overlay bg-chamaleon fixed top-16 bottom-0 w-full -translate-x-full transition-colors transition-transform duration-300 md:relative md:top-0 md:translate-x-0"
         :class="{
             'translate-x-0': navigationOpen,
             '-translate-x-full md:translate-x-0': !navigationOpen,