Snowflake animation component for creating winter/fall effects.

Examples

<.dm_fun_snow
  id="snow-1"
  count="50"
  container_class="h-screen relative overflow-hidden"
/>

<.dm_fun_snow
  id="snow-2"
  count="20"
  size_range={{5, 15}}
  color="#FFFFFF"
  use_unicode={true}
  animation_duration={{10, 30}}
/>

Attributes

• id - Component ID (required)
• count - Number of snowflakes (default: 30)
• size_range - Tuple of {min_size, max_size} in pixels (default: {5, 20})
• color - Snowflake color (default: "#FFFFFF")
• use_unicode - Use Unicode snowflake character instead of circles (default: false)
• animation_duration - Tuple of {min_duration, max_duration} in seconds (default: {5, 15})
• container_class - CSS class for the container (default: "relative w-full h-full")
• snowflake_class - Additional CSS classes for individual snowflakes

Usage Notes

This component creates animated snowflakes that fall from top to bottom. Each snowflake has randomized properties for natural-looking animation. The component is container-relative, so it works within any positioned container.

LiveView Integration

You can dynamically control the snow effect:

def handle_event("toggle_snow", _, socket) do
  {:noreply, assign(socket, snow_enabled: !socket.assigns.snow_enabled)}
end