diff --git a/assets/css/app.css b/assets/css/app.css index d6f65712..0855b700 100644 --- a/assets/css/app.css +++ b/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); } \ No newline at end of file diff --git a/lib/ares_web/components/squiggly_effect.ex b/lib/ares_web/components/squiggly_effect.ex new file mode 100644 index 00000000..3c26816f --- /dev/null +++ b/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""" + + """ + end +end diff --git a/lib/ares_web/live/landing/home.ex b/lib/ares_web/live/landing/home.ex index 994d41fd..f06688fd 100644 --- a/lib/ares_web/live/landing/home.ex +++ b/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 diff --git a/lib/ares_web/live/landing/home.html.heex b/lib/ares_web/live/landing/home.html.heex index 58f1d0b0..5b26ef87 100644 --- a/lib/ares_web/live/landing/home.html.heex +++ b/lib/ares_web/live/landing/home.html.heex @@ -1,4 +1,5 @@