feat:add compatible squiggle effect

Author: EdroCode

assets/css/app.css

@@ -127,4 +127,19 @@
 
 .alert-info {
   @apply bg-[#67b22e] text-[#0a0a0a] border-transparent;
+}
+
+.squiggle-slow {
+  filter: url(#melt-flow-slow);
+  -webkit-filter: url(#melt-flow-slow);
+}
+
+.squiggle-medium {
+  filter: url(#melt-flow-medium);
+  -webkit-filter: url(#melt-flow-medium);
+}
+
+.squiggle-fast {
+  filter: url(#melt-flow-fast);
+  -webkit-filter: url(#melt-flow-fast);
 }

lib/ares_web/components/squiggly_effect.ex

@@ -0,0 +1,96 @@
+defmodule AresWeb.Components.SquigglyEffect do
+  @moduledoc """
+  SVG filter component used to apply animated squiggly distortion effects.
+  """
+  use Phoenix.Component
+
+  attr :id, :string, default: "squiggly-filters"
+  attr :class, :string, default: "absolute"
+
+  def squiggly_effect(assigns) do
+    ~H"""
+    <svg width="0" height="0" id={@id} class={@class}>
+      <defs>
+        <filter id="melt-flow-slow">
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.008 0.012"
+            numOctaves="5"
+            result="turbulence"
+          >
+            <animate
+              attributeName="seed"
+              from="1"
+              to="6000"
+              dur="4220s"
+              repeatCount="indefinite"
+            />
+          </feTurbulence>
+
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="turbulence"
+            scale="18"
+            xChannelSelector="R"
+            yChannelSelector="G"
+          />
+
+          <feGaussianBlur stdDeviation="0.4" />
+        </filter>
+        <filter id="melt-flow-medium">
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.008 0.012"
+            numOctaves="5"
+            result="turbulence"
+          >
+            <animate
+              attributeName="seed"
+              from="1"
+              to="6000"
+              dur="1220s"
+              repeatCount="indefinite"
+            />
+          </feTurbulence>
+
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="turbulence"
+            scale="18"
+            xChannelSelector="R"
+            yChannelSelector="G"
+          />
+
+          <feGaussianBlur stdDeviation="0.4" />
+        </filter>
+        <filter id="melt-flow-fast">
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.008 0.012"
+            numOctaves="5"
+            result="turbulence"
+          >
+            <animate
+              attributeName="seed"
+              from="1"
+              to="6000"
+              dur="720s"
+              repeatCount="indefinite"
+            />
+          </feTurbulence>
+
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="turbulence"
+            scale="18"
+            xChannelSelector="R"
+            yChannelSelector="G"
+          />
+
+          <feGaussianBlur stdDeviation="0.4" />
+        </filter>
+      </defs>
+    </svg>
+    """
+  end
+end

lib/ares_web/live/landing/home.ex

@@ -1,5 +1,6 @@
 defmodule AresWeb.LandingLive.Home do
   use AresWeb, :live_view
+  import AresWeb.Components.SquigglyEffect
 
   @impl true
   def mount(_params, _session, socket) do

lib/ares_web/live/landing/home.html.heex

@@ -1,4 +1,5 @@
 <div class="h-screen overflow-hidden bg-black z-10">
+  <.squiggly_effect />
   <div
     class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-40"
     style="background-image: url('/images/background.jpg') ;"
@@ -14,7 +15,7 @@
         </div>
 
         <div class="">
-          <h1 class="font-resegrg tracking-wider leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl uppercase">
+          <h1 class="font-resegrg tracking-wider leading-none text-4xl sm:text-5xl md:text-6xl lg:text-7xl uppercase squiggle-fast">
             {gettext("BugsByte")}
           </h1>
         </div>