Rotating conic-gradient border beam animation. Pure CSS using @keyframes phia-border-beam defined in theme.css.

Examples

<.border_beam duration={6} color_from="#00ff88" color_to="#0088ff">
  Content inside the beam border
</.border_beam>

Attributes

• duration (:integer) - Defaults to 8.
• color_from (:string) - Defaults to "#ffaa40".
• color_to (:string) - Defaults to "#9c40ff".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Cursor-following spotlight overlay card. Requires PhiaCardSpotlight JS hook.

The hook reads data-size and data-color, tracking mousemove to apply a radial-gradient spotlight to the [data-spotlight-overlay] child div.

Examples

<.card_spotlight id="spotlight-card" color="rgba(120,80,255,0.15)" size={400}>
  Card content with spotlight
</.card_spotlight>

Attributes

• id (:string) (required)
• color (:string) - Defaults to "rgba(255,255,255,0.1)".
• size (:integer) - Defaults to 300.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Cursor-tracked radial gradient card. Requires PhiaMagicCard JS hook.

The hook reads data-gradient-color and tracks mousemove to apply a radial-gradient to the [data-magic-overlay] child div.

Examples

<.magic_card id="feature-card" gradient_color="#1a1a2e">
  Feature content
</.magic_card>

Attributes

• id (:string) (required)
• gradient_color (:string) - Defaults to "#262626".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Animated shifting gradient border. Pure CSS using @keyframes phia-moving-border.

Examples

<.moving_border duration={6}>
  Animated border content
</.moving_border>

Attributes

• duration (:integer) - Defaults to 4.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Rotating shine overlay border animation. Pure CSS.

Examples

<.shine_border shine_color="#gold" duration={4}>
  Shiny content
</.shine_border>

Attributes

• shine_color (:string) - Defaults to "#ffffff".
• duration (:integer) - Defaults to 6.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)