A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.
Installation
Usage
<script setup lang="ts">
import GradientBackground from '@/components/animate-ui/backgrounds/gradient/GradientBackground.vue';
</script>
<template>
<section class="relative h-[480px] overflow-hidden">
<GradientBackground class="absolute inset-0" />
</section>
</template>Animation
- A large gradient slides back and forth behind the container (
background-position), one round trip every 15s. - It pauses off screen and while the tab is hidden.
- Under reduced motion, it holds its first frame.
API Reference
GradientBackground
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { duration: 15, ease: 'easeInOut', repeat: Infinity } |
...attrs? | HTMLMotionProps<'div'> | - |