> ## Documentation Index
> Fetch the complete documentation index at: https://blacksilva.com/silva-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Visuals

> Add named gradients and lightweight motion with the same props used by Silva UI primitives.

# Gradients and animation

Silva UI adds named gradient values to `backgroundColor` and `color`, plus an `animation` prop for lightweight entrance and attention motion. They work on every primitive that accepts `BaseProps`.

## Gradient backgrounds

Use a gradient name anywhere you would normally set `backgroundColor`.

> [tab] Preview
>
> [Named gradient background preview](https://black-silva.github.io/silva-ui/previews/?example=visuals-1)

> [tab] Code
>
> ```tsx theme={null}
> import { Card, Heading, Paragraph, YStack } from "silva-ui"
>
> export function LaunchCard() {
>   return (
>     <Card backgroundColor="aurora" p="large" borderRadius="xl">
>       <YStack gap="small">
>         <Heading level={2} color="white">Ship with confidence</Heading>
>         <Paragraph color="white">A named gradient without app-owned CSS.</Paragraph>
>       </YStack>
>     </Card>
>   )
> }
> ```

## Gradient text

Set `color` to a gradient name to render text with a clipped gradient fill. Keep a meaningful text label in the markup: the gradient is decorative styling, not content.

> [tab] Preview
>
> [Gradient text preview](https://black-silva.github.io/silva-ui/previews/?example=visuals-2)

> [tab] Code
>
> ```tsx theme={null}
> <Heading level={1} color="ocean">
>   Build the next thing
> </Heading>
> ```

## Available gradients

| Name | Character |
| - | - |
| `aurora` | Blue, violet and pink |
| `sunrise` | Orange, red and magenta |
| `ocean` | Cyan, blue and indigo |
| `forest` | Green, teal and sky blue |
| `midnight` | Slate, indigo and purple |

`backgroundColor` and `color` continue to accept normal Silva UI theme tokens. A gradient name is simply an additional supported value.

## Named or theme-aware?

Named gradients are fixed library presets. When a component needs custom stops that automatically follow the nearest built-in or custom `Theme`, use the [`Box` `gradient` prop](https://blacksilva.com/silva-ui/silva-ui/docs/foundations/gradients) instead. That API also supports linear, radial, and conic gradients.

## Animation

Use `animation` for a prebuilt animation declaration. The component still renders as normal HTML before the animation starts.

> [tab] Preview
>
> [Animation preview](https://black-silva.github.io/silva-ui/previews/?example=visuals-3)

> [tab] Code
>
> ```tsx theme={null}
> import { Card, Heading, Text, YStack } from "silva-ui"
>
> export function ReleaseNotice() {
>   return (
>     <Card animation="slideUp" p="large" borderRadius="large" bg="card">
>       <YStack gap="xs">
>         <Heading level={2}>Version 1.1 is here</Heading>
>         <Text animation="pulse" color="primary">New visual primitives included</Text>
>       </YStack>
>     </Card>
>   )
> }
> ```

| Name | Behaviour |
| - | - |
| `fadeIn` | Fades in over 260ms |
| `slideUp` | Fades in while moving up over 360ms |
| `pulse` | Repeats a subtle opacity pulse |

Use `pulse` only for information that is not essential to understand or operate the page. Do not rely on motion alone to communicate status.

## Reuse the definitions

Import `gradients` or `animations` when a wrapper component needs the underlying named definitions. Most applications should use `backgroundColor`, `color` and `animation` directly.

```tsx theme={null}
import { animations, gradients } from "silva-ui"

console.log(gradients.aurora)
console.log(animations.slideUp)
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.