PetalComponents.BorderPlasma (petal_components v4.15.1)

Copy Markdown View Source

A border of whispery, warping light: long thin washes of colour ride a hairline rim, whole corners swell and dissipate on their own clocks, and by default a soft halo spills past the border onto the page. Set glow="inside" to keep every layer inside a crisp silhouette, or glow="both" for the halo and the inner wash together. Pure CSS (registered custom properties driving one shared gradient field through a stack of differently-masked layers) — no JavaScript required.

The sibling of border_beam: the beam sends one travelling light around the edge; plasma keeps a field of light alive on it. mode="pulse" (default) breathes the jewels in place; mode="rotate" sweeps a neutral arc of light around the rim that illuminates them as it passes. Good for CTAs, pricing cards and hero panels that need to pull the eye without moving anything across the screen.

Cost

This is the most paint-expensive effect in the library and it should be spent like it: one hero panel or one CTA per view, not a border on every card. Animated custom properties repaint on the main thread, so each instance re-rasterises its gradient layers (two of them blurred; three with glow="both", which restores the near halo via a dedicated aura layer and is the most expensive configuration) at up to the display's refresh rate. A page full of simultaneous instances - like the playground demo - is a worst case no real app should ship. The glow's invisible paint boxes extend ~120px past the panel, so give it that much clearance inside overflow: auto containers or the scroll range grows. Reduced-motion users pay nothing: the field rests lit and still.

Summary

Functions

border_plasma(assigns)

Wraps any content in a bordered panel with a glowing border. The panel carries the surface (background, border, radius) — put plain content inside, not another card.

Functions

border_plasma(assigns)

Wraps any content in a bordered panel with a glowing border. The panel carries the surface (background, border, radius) — put plain content inside, not another card.

<.border_plasma>
  <div class="p-8">
    <.h3>Upgrade to Pro</.h3>
    ...
  </div>
</.border_plasma>

Sweep a light around the rim instead of breathing it:

<.border_plasma mode="rotate" duration="4s">
  ...
</.border_plasma>

Stay on brand instead of the rainbow, or turn the glow up on a CTA:

<.border_plasma palette="brand">...</.border_plasma>

<.border_plasma intensity="strong" palette="brand" color_from="#f43f5e" color_to="#3b82f6">
  <div class="px-6 py-2.5 font-medium">Buy now</div>
</.border_plasma>

Attributes

  • mode (:string) - pulse breathes the whole ring in place; rotate sweeps a conic gradient arc around the border. Defaults to "pulse". Must be one of "pulse", or "rotate".
  • palette (:string) - where the light gets its colours: an eight-hue rainbow (the reference look), the theme's primary/secondary (brand), grayscale (mono), blues (ocean), or ambers (sunset). Only rainbow runs the slow hue revolution; every other palette holds its anchor hues, so brand light stays on brand. Defaults to "rainbow". Must be one of "rainbow", "brand", "mono", "ocean", or "sunset".
  • color_from (:string) - palette="brand" only: overrides the primary anchor colour. Defaults to nil.
  • color_to (:string) - palette="brand" only: overrides the secondary anchor colour. Defaults to nil.
  • duration (:string) - length of one breath (pulse) or one lap (rotate). Defaults to 2.3s for pulse, 2s for rotate. Defaults to nil.
  • intensity (:string) - how bright the rim jewels burn and how much light washes inward over the panel. Defaults to "medium". Must be one of "subtle", "medium", or "strong".
  • glow (:string) - where PULSE's light lives: a halo spilling past the border onto the page (outside, the default), a wash hugging the edges inside a crisp silhouette (inside), or the two together (both - the most paint-expensive option; prefer outside or inside when several instances share a view). Rotate always keeps its light inside the silhouette, as the reference effect does. Defaults to "outside". Must be one of "outside", "inside", or "both".
  • border_width (:string) - thickness of the glowing rim line. The reference look is a 1px hairline; 2px+ reads as a band. Defaults to "1px".
  • border_radius (:string) - border radius of the container. When unset, follows the theme radius (--pc-radius, scaled for panels). Defaults to nil.
  • class (:any) - extra classes for the container. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)