# `PhiaUi.Components.AnimatedSurface`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/surface/animated_surface.ex#L1)

Animated surface components for PhiaUI — 5 components covering rotating
border beams, shine effects, cursor-tracked gradients, spotlights, and
moving gradient borders.

JS hooks required: `PhiaMagicCard`, `PhiaCardSpotlight`.

## Components
- `border_beam/1` — rotating conic-gradient border animation (pure CSS)
- `shine_border/1` — rotating shine overlay animation (pure CSS)
- `magic_card/1` — cursor-tracked radial gradient (requires PhiaMagicCard hook)
- `card_spotlight/1` — cursor spotlight overlay (requires PhiaCardSpotlight hook)
- `moving_border/1` — animated gradient border (pure CSS)

# `border_beam`

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)

# `card_spotlight`

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)

# `magic_card`

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)

# `moving_border`

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)

# `shine_border`

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)

---

*Consult [api-reference.md](api-reference.md) for complete listing*