Animated Background

Visually highlights selected items by sliding a background into view when hovered over or clicked.

Installation

npx raya-ui@latest add animated-background

API Reference

v-model

string | number

The active item identifier (maps to item ID).

items

any[]

Array of items to render. Each must have a unique id.

enable-hover

boolean

If true, background follows mouse enter instead of click.

Settings

Enable Hover

Bounce0.2

Duration0.3s

source-code.vue

<script setup lang="ts">
import { ref } from 'vue'
import { AnimatedBackground } from '@/components/ui/animated-background'

const activeTab = ref(1)
const TABS = [...] // Home, About, Services, Contact
</script>

<template>
  <AnimatedBackground
    v-model="activeTab"
    :items="TABS"
    :transition="{ type: 'spring', bounce: 0.2, duration: 0.3 }"
    class="rounded-lg bg-zinc-100 dark:bg-zinc-800"
  >
    <template #default="{ item, isActive }">
      <button
        type="button"
        class="p-2 transition-colors"
        :class="isActive ? 'text-foreground' : 'text-muted-foreground'"
      >
        <component :is="item.icon" class="size-5" />
      </button>
    </template>
  </AnimatedBackground>
</template>