Phoenix Duskmoon UI Storybook

Plasma Ball

Default Open in playground 
<.dm_fun_plasma_ball id="plasma-ball-single-default" size="medium"/>
Small Open in playground 
<.dm_fun_plasma_ball id="plasma-ball-single-small" size="small"/>
Large Open in playground 
<.dm_fun_plasma_ball id="plasma-ball-single-large" size="large"/>
Dark theme Open in playground 
<div class="bg-black p-8 rounded-lg">
  <.dm_fun_plasma_ball id="plasma-dark" size="medium" base_color="#000000" />
</div>
Purple theme Open in playground 
<div class="bg-purple-950 p-8 rounded-lg">
  <.dm_fun_plasma_ball id="plasma-purple" size="medium" base_color="#2d1b69" />
</div>
Blue theme Open in playground 
<div class="bg-blue-950 p-8 rounded-lg">
  <.dm_fun_plasma_ball id="plasma-blue" size="medium" base_color="#0c4a6e" />
</div>
No electrode Open in playground 
<.dm_fun_plasma_ball id="plasma-ball-single-no-electrode" size="medium"/>
Interactive demo Open in playground

Click the plasma ball to toggle the electricity effect!

<div class="bg-gradient-to-br from-slate-900 to-slate-800 p-8 rounded-lg">
  <div class="text-center mb-4">
    <p class="text-slate-300 text-sm">Click the plasma ball to toggle the electricity effect!</p>
  </div>
  <.dm_fun_plasma_ball id="plasma-interactive" size="medium" />
</div>
Size comparison Open in playground

Small

Medium

Large

<div class="bg-slate-900 p-8 rounded-lg">
  <div class="grid grid-cols-3 gap-8 items-center">
    <div class="text-center">
      <h3 class="text-white text-sm mb-4">Small</h3>
      <div class="flex justify-center">
        <.dm_fun_plasma_ball id="plasma-comp-small" size="small" base_color="#1a1a2e" />
      </div>
    </div>
    <div class="text-center">
      <h3 class="text-white text-sm mb-4">Medium</h3>
      <div class="flex justify-center">
        <.dm_fun_plasma_ball id="plasma-comp-medium" size="medium" base_color="#1a1a2e" />
      </div>
    </div>
    <div class="text-center">
      <h3 class="text-white text-sm mb-4">Large</h3>
      <div class="flex justify-center">
        <.dm_fun_plasma_ball id="plasma-comp-large" size="large" base_color="#1a1a2e" />
      </div>
    </div>
  </div>
</div>
Color variations Open in playground

Red Plasma

Green Plasma

Blue Plasma

Purple Plasma

Orange Plasma

Cyan Plasma

<div class="p-8 bg-gradient-to-br from-gray-900 to-black rounded-lg">
  <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
    <div class="text-center">
      <.dm_fun_plasma_ball id="plasma-color-1" size="small" base_color="#dc2626" />
      <p class="text-red-400 text-xs mt-2">Red Plasma</p>
    </div>
    <div class="text-center">
      <.dm_fun_plasma_ball id="plasma-color-2" size="small" base_color="#16a34a" />
      <p class="text-green-400 text-xs mt-2">Green Plasma</p>
    </div>
    <div class="text-center">
      <.dm_fun_plasma_ball id="plasma-color-3" size="small" base_color="#2563eb" />
      <p class="text-blue-400 text-xs mt-2">Blue Plasma</p>
    </div>
    <div class="text-center">
      <.dm_fun_plasma_ball id="plasma-color-4" size="small" base_color="#9333ea" />
      <p class="text-purple-400 text-xs mt-2">Purple Plasma</p>
    </div>
    <div class="text-center">
      <.dm_fun_plasma_ball id="plasma-color-5" size="small" base_color="#ea580c" />
      <p class="text-orange-400 text-xs mt-2">Orange Plasma</p>
    </div>
    <div class="text-center">
      <.dm_fun_plasma_ball id="plasma-color-6" size="small" base_color="#0891b2" />
      <p class="text-cyan-400 text-xs mt-2">Cyan Plasma</p>
    </div>
  </div>
</div>