Packages
phoenix_duskmoon
6.0.2
9.9.2
9.9.1
9.9.0
9.8.0
9.7.1
9.7.0
9.6.4
9.6.3
9.6.2
9.6.1
9.6.0
9.5.4
9.5.3
9.5.2
9.5.1
9.5.0
9.4.3
9.4.2
9.4.1
9.4.0
9.3.0
9.2.0
9.1.4
9.1.3
9.1.1
9.1.1-rc.1
retired
9.0.1
9.0.0-rc.3
9.0.0-rc.2
9.0.0-rc.1
8.0.0
7.2.1
7.2.0
7.1.3
7.1.2
7.1.1
6.3.2
6.3.1
6.3.0
6.2.0
6.1.3
6.1.2
6.1.1
6.1.0
6.0.10
6.0.9
6.0.8
6.0.7
6.0.6
6.0.5
6.0.4
6.0.3
6.0.2
6.0.1
6.0.0
5.2.0-beta.5
5.2.0-beta.4
5.2.0-beta.3
5.2.0-beta.2
5.2.0-beta.1
5.1.0
5.0.6
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
5.0.0
4.6.6
4.6.5
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.2
4.5.1
4.5.0
4.4.4
4.4.3
4.4.2
4.4.1
4.4.0
4.3.2
4.3.1
4.3.0
4.2.0
4.1.1
4.1.0
4.0.0
Duskmoon UI component library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
lib/phoenix_duskmoon/fun/element.ex
defmodule PhoenixDuskmoon.Fun.Element do
@moduledoc """
Duskmoon UI Fun Element components
"""
use PhoenixDuskmoon.Component, :html
@doc """
Generates a eclipse effect
## Example
```heex
<PhoenixDuskmoon.Fun.Element.dmf_eclipse
/>
```
"""
@doc type: :component
attr(:id, :any,
default: nil,
doc: """
html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:background, :string,
default: "#09090b",
doc: """
Background color
"""
)
attr(:size, :string,
default: "400px",
doc: """
size
"""
)
def dmf_eclipse(assigns) do
~H"""
<div
id={@id}
class={["eclipse", @class]}
style={"--bg-color: #{@background}; --size: #{@size};"}
>
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3"></div>
<div class="layer layer-4"></div>
<div class="layer layer-5"></div>
<div class="layer layer-6"></div>
</div>
"""
end
@doc """
Generates a plasma ball effect
## Example
```heex
<PhoenixDuskmoon.Fun.Element.dmf_plasma_ball />
```
"""
@doc type: :component
attr(:id, :any,
default: nil,
doc: """
html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:size, :string,
default: "350px",
doc: """
size
"""
)
attr(:show_base, :boolean,
default: false,
doc: """
show base of plasma ball
"""
)
attr(:show_electrode, :boolean,
default: true,
doc: """
show electrode of plasma ball
"""
)
def dmf_plasma_ball(assigns) do
~H"""
<div class="plasma-ball" style={"--size: #{@size};"}>
<input type="checkbox" class={["switcher", if(@show_base, do: "", else: "hidden")]} checked="checked" />
<div class="glassball">
<div class={["electrode", if(!@show_electrode, do: "hide-electrode")]}></div>
<div class="rays">
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
</div>
<div class="rays">
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
</div>
<div class="rays">
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
</div>
<div class="rays">
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray bigwave"><span></span><span></span></div>
</div>
<div class="rays">
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
</div>
<div class="rays">
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
<div class="ray"><span></span><span></span><span></span></div>
</div>
</div>
<div :if={@show_base} class="base">
<div></div>
<div></div>
<span></span>
</div>
<div :if={@show_base} class="switch"></div>
</div>
"""
end
@doc """
Generates a atom effect
## Example
```heex
<PhoenixDuskmoon.Fun.Element.dmf_atom />
```
"""
@doc type: :component
attr(:id, :any,
default: nil,
doc: """
html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:size, :string,
default: "200px",
doc: """
size
"""
)
attr(:atom_color, :string,
default: "#00d8ff",
doc: """
atom color
"""
)
attr(:electron_color, :string,
default: "#99f8ff",
doc: """
electron color
"""
)
def dmf_atom(assigns) do
~H"""
<div id={@id} class={["atom", @class]}, style={"--atom-size: #{@size};--atom-color: #{@atom_color};--electron-color: #{@electron_color};"}>
<div class="electron"></div>
<div class="electron-alpha"></div>
<div class="electron-omega"></div>
</div>
"""
end
@doc """
Generates snowflakes, bubbles or unicode `❆`.
## Example
```heex
<PhoenixDuskmoon.Fun.Element.dmf_snow />
```
"""
@doc type: :component
attr(:class, :any,
default: "",
doc: """
html attribute class for each snowflake
"""
)
attr(:count, :integer,
default: 200,
doc: """
snowflake count
"""
)
attr(:color, :string,
default: "#fff",
doc: """
snowflake color
"""
)
attr(:size, :string,
default: "10px",
doc: """
snowflake size
"""
)
attr(:unicode, :boolean,
default: false,
doc: """
show snowflake by using unicode character [❆]
"""
)
def dmf_snow(assigns) do
~H"""
<style>
<%= for n <- 0..@count do %>
<% random_x = Enum.random(1..1000000) * 0.0001 %>
<% random_offset = Enum.random(-100000..100000) * 0.0001 %>
.snowflake-<%= n %> {
opacity: <%= Enum.random(1..10000) * 0.0001 %>;
transform: translate(<%= random_x %>vw, -10px) scale(<%= Enum.random(1..10000) * 0.0001 %>);
animation: snowflake-fall-<%= n %> <%= Enum.random(10..30) * 1 %>s <%= Enum.random(0..30) * -1 %>s linear infinite;
}
@keyframes snowflake-fall-<%= n %> {
<%= Enum.random(30000..80000) / 1000 %>% {
transform: translate(<%= random_x + random_offset %>vw, <%= Enum.random(30000..80000) / 1000 %>vh) scale(<%= Enum.random(1..10000) * 0.0001 %>);
}
to {
transform: translate(<%= random_x + random_offset / 2 %>vw, 100vh) scale(<%= Enum.random(1..10000) * 0.0001 %>);
}
}
<% end %>
</style>
<div
:for={n <- 0..@count}
class={["snowflake", "snowflake-#{n}", @class, if(@unicode, do: "snowflake-unicode")]}
style={"--snowflake-color: #{@color}; --snowflake-size: #{@size};"}
/>
"""
end
@doc """
Generates bubbles fly up from this element.
## Example
```heex
<PhoenixDuskmoon.Fun.Element.dmf_footer_bubbles />
```
"""
@doc type: :component
attr(:id, :any,
default: nil,
doc: """
html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class for bubbles container
"""
)
attr(:color, :string,
default: "#fff",
doc: """
bubble color
"""
)
attr(:count, :integer,
default: 128,
doc: """
snowflake count
"""
)
def dmf_footer_bubbles(assigns) do
assigns =
assigns
|> assign_new(:blob_id, fn ->
"footer-bubbles-blob-#{Enum.random(0..999_999_999_999)}"
end)
~H"""
<div
id={@id}
class={["footer-bubbles", @class]}
style={"--footer-bg-color: #{@color}; filter: url(\"##{@blob_id}\");"}
>
<div
:for={_n <- 1..@count}
class="bubble"
style={[
"--size: #{2 + Enum.random(0..999_999_999_999) * 1.0e-12 * 4}rem",
"--distance: #{6 + Enum.random(0..999_999_999_999) * 1.0e-12 * 4}rem",
"--position: min(calc(100% - var(--size) / 2), #{-5 + Enum.random(0..999_999_999_999) * 1.0e-12 * 110}%)",
"--time: #{2 + Enum.random(0..999_999_999_999) * 1.0e-12 * 2}s",
"--delay: #{-1 * (2 + Enum.random(0..999_999_999_999) * 1.0e-12 * 2)}s"
] |> Enum.join(";")}
></div>
</div>
<svg style="position: fixed; top: 100vh">
<defs>
<filter id={@blob_id}>
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="blob"></feColorMatrix>
</filter>
</defs>
</svg>
"""
end
end