### Vue 3 Composition API: script setup

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Demonstrates the use of `<script setup>` for a more concise and streamlined way to write component logic in Vue 3 Composition API.

```html
<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

--------------------------------

### useForceRerender Usage in Setup

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/composables.md

Demonstrates how to import and use the `useForceRerender` composable within a Vue 3 component's setup function.

```typescript
import { useForceRerender } from '@/composables/useForceRerender'

export default {
  setup() {
    const { rerenderKey, forceRerender } = useForceRerender()
    
    return { rerenderKey, forceRerender }
  }
}
```

--------------------------------

### Usage Example for Audio Utilities

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/utilities.md

Demonstrates how to import and use the `preloadSounds` and `playSound` functions. It shows optional explicit preloading and examples of playing sounds with default and custom parameters.

```typescript
import { playSound, preloadSounds } from '@/utils/audio'

// Optional: explicitly preload
preloadSounds()

// Play with default volume
playSound('tick')

// Play with custom volume and cooldown
playSound('click', 0.5, 100)
```

--------------------------------

### useStars Usage in Setup

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/composables.md

Demonstrates how to import and use the `useStars` composable within a Vue 3 component's setup function to fetch GitHub stars.

```typescript
import { useStars } from '@/composables/useStars'

export default {
  setup() {
    const stars = useStars()
    return { stars }
  }
}
```

--------------------------------

### LiquidChrome Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-backgrounds.md

Demonstrates how to import and use the LiquidChrome component within a Vue.js application, with examples of setting custom prop values for speed, reflection, and distortion.

```vue
<template>
  <LiquidChrome
    :speed="0.8"
    :reflection="0.9"
    :distortion="0.6"
  />
</template>

<script setup>
import { LiquidChrome } from '@/content/Backgrounds/LiquidChrome'
</script>
```

--------------------------------

### Example Component Imports

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/category-overview.md

Demonstrates importing specific components like Counter, SplitText, and DotGrid using the defined import pattern.

```typescript
import { Counter } from '@/content/Components/Counter/Counter.vue'
import { SplitText } from '@/content/TextAnimations/SplitText/SplitText.vue'
import { DotGrid } from '@/content/Backgrounds/DotGrid/DotGrid.vue'
```

--------------------------------

### Running Local Development Server

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/INDEX.md

Commands to start the Vite development server, build the project, and run linting or formatting checks.

```bash
npm run dev      # Start Vite dev server at localhost:5173
npm run build    # Build registry + production dist
npm run lint     # ESLint with auto-fix
npm run format   # Prettier formatting
```

--------------------------------

### Vue Particles Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-backgrounds.md

Demonstrates how to integrate and configure the Particles component within a Vue application's template and script setup.

```vue
<template>
  <Particles
    :particleCount="100"
    :particleSize="4"
    particleColor="#ff00ff"
    speed="1.5"
    direction="random"
    :bounce="true"
  />
</template>

<script setup>
import { Particles } from '@/content/Backgrounds/Particles'
</script>
```

--------------------------------

### Waves Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-backgrounds.md

Demonstrates how to import and use the Waves component in a Vue application, with custom prop values.

```vue
<template>
  <Waves
    waveColor1="#ff0000"
    waveColor2="#ffff00"
    :speed="1.5"
    :amplitude="2"
    :waveCount="4"
  />
</template>

<script setup>
import { Waves } from '@/content/Backgrounds/Waves'
</script>
```

--------------------------------

### BlobCursor Vue Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-animations.md

Demonstrates how to import and use the BlobCursor component in a Vue application, with examples of customizing its props.

```vue
<template>
  <div class="page-wrapper">
    <BlobCursor
      blobType="circle"
      fillColor="#ff0000"
      :trailCount="4"
      :sizes="[50, 100, 60, 30]"
    />
    <!-- Page content here -->
  </div>
</template>

<script setup>
import { BlobCursor } from '@/content/Animations/BlobCursor'
</script>
```

--------------------------------

### SplitText Vue Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-text-animations.md

Demonstrates how to use the SplitText component in a Vue.js template and script setup. It shows how to pass props like text, splitType, duration, ease, and animation states, and how to handle the 'animation-complete' event.

```vue
<template>
  <SplitText
    text="Animated text effect"
    splitType="chars"
    :duration="1"
    ease="back.out"
    :from="{ opacity: 0, y: 50 }"
    :to="{ opacity: 1, y: 0 }"
    @animation-complete="onComplete"
  />
</template>

<script setup>
import { SplitText } from '@/content/TextAnimations/SplitText'

const onComplete = () => {
  console.log('Text animation done')
}
</script>
```

--------------------------------

### DotGrid Vue Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-backgrounds.md

Demonstrates how to import and use the DotGrid component in a Vue.js application, with custom prop values.

```vue
<template>
  <DotGrid
    :dotSize="20"
    :gap="40"
    baseColor="#00ff00"
    :proximity="200"
    :shockRadius="300"
    className="w-full h-screen"
  />
</template>

<script setup>
import { DotGrid } from '@/content/Backgrounds/DotGrid'
</script>
```

--------------------------------

### Example ComponentMetadata Entry

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/types.md

Illustrates a typical entry within the ComponentMetadata type, showing the structure for a single component's registry information.

```json
{
  "Animations/AnimatedContent": {
    "videoUrl": "/assets/videos/animatedcontent.webm",
    "description": "Wrapper that animates any children on scroll…",
    "category": "Animations",
    "name": "AnimatedContent",
    "docsUrl": "https://vue-bits.dev/animations/animated-content",
    "tags": []
  }
}
```

--------------------------------

### Usage Example for GlareHover Component

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-animations.md

Demonstrates how to integrate the GlareHover component in a Vue template, customizing its appearance with props. Ensure the component is imported correctly.

```vue
<template>
  <GlareHover glareColor="rgba(255, 255, 255, 0.5)" :glareSize="400">
    <div class="card">
      <h2>Hover me</h2>
      <p>The glare will follow your cursor.</p>
    </div>
  </GlareHover>
</template>

<script setup>
import { GlareHover } from '@/content/Animations/GlareHover'
</script>
```

--------------------------------

### Counter Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-components.md

Demonstrates how to import and use the Counter component in a Vue.js application, including setting custom props and updating the value dynamically.

```vue
<template>
  <Counter
    :value="1234"
    :fontSize="120"
    textColor="#27FF64"
    :places="[1000, 100, 10, 1]"
  />
</template>

<script setup>
import { Counter } from '@/content/Components/Counter'
import { ref } from 'vue'

const count = ref(0)
setInterval(() => count.value++, 1000)
</script>
```

--------------------------------

### GradientText Component Usage

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-text-animations.md

Demonstrates how to import and use the GradientText component in a Vue application, with examples of customizing its props.

```APIDOC
## GradientText Component

### Description

A Vue component that displays text with an animated gradient background that shifts across the text. It utilizes CSS background-clip: text for coloring and features an infinite loop animation.

### Props

- **text** (string) - Required - The text content to display.
- **colors** (string[]) - Optional - An array of CSS color strings to define the gradient. Defaults to `['#ff0000', '#00ff00', '#0000ff']`.
- **duration** (number) - Optional - The duration of the gradient animation in seconds. Defaults to `3`.
- **angle** (number) - Optional - The angle of the gradient in degrees. Defaults to `90`.
- **intensity** (number) - Optional - A multiplier (0-2) to adjust the gradient's intensity. Defaults to `1`.
- **className** (string) - Optional - An additional CSS class to apply to the component. Defaults to `''`.

### Usage Example

```vue
<template>
  <GradientText
    text="Animated Gradient"
    :colors="['#00c6ff', '#0072ff', '#00c6ff']"
    :duration="5"
    :angle="135"
  />
</template>

<script setup>
import { GradientText } from '@/content/TextAnimations/GradientText'
</script>
```

### Behavior

- Applies a CSS gradient background that is clipped to the text.
- Animates the gradient's position and/or angle over time.
- The animation runs in an infinite loop.
```

--------------------------------

### BorderGlow Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-components.md

Demonstrates how to use the BorderGlow component in a Vue template, including importing the component and passing custom props.

```vue
<template>
  <BorderGlow glowColor="#ff0000" :glowIntensity="1.5">
    <div class="content">
      Glowing border content
    </div>
  </BorderGlow>
</template>

<script setup>
import { BorderGlow } from '@/content/Components/BorderGlow'
</script>
```

--------------------------------

### Dock Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-components.md

Demonstrates how to import and use the Dock component in a Vue application. It shows how to pass an array of dock items with icons and labels, and customize magnification and distance.

```vue
<template>
  <Dock
    :items="dockItems"
    :magnification="2"
    :distance="160"
  />
</template>

<script setup>
import { Dock } from '@/content/Components/Dock'
import HomeIcon from 'lucide-vue-next/Home'
import SettingsIcon from 'lucide-vue-next/Settings'

const dockItems = [
  {
    icon: HomeIcon,
    label: 'Home',
    onClick: () => router.push('/')
  },
  {
    icon: SettingsIcon,
    label: 'Settings',
    onClick: () => router.push('/settings')
  }
]
</script>
```

--------------------------------

### TextCursor Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-text-animations.md

Demonstrates how to use the TextCursor component in a Vue template, including importing the component and passing props for text, speed, and cursor color.

```vue
<template>
  <TextCursor
    text="Hello, world!"
    :speed="40"
    cursorColor="#27FF64"
  />
</template>

<script setup>
import { TextCursor } from '@/content/TextAnimations/TextCursor'
</script>
```

--------------------------------

### Backgrounds API

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Detailed API documentation for background components including DotGrid, Particles, Waves, Aurora, Plasma, Threads, GridMotion, and LiquidChrome. Includes props, usage examples, and behavior descriptions.

```APIDOC
## Backgrounds API Reference

This section details the API for several background components.

### DotGrid

**Description:** Generates a dynamic dot grid background.

### Particles

**Description:** Creates a particle-based background effect.

### Waves

**Description:** Generates animated wave backgrounds.

### Aurora

**Description:** Simulates an aurora borealis effect.

### Plasma

**Description:** Creates a plasma effect background.

### Threads

**Description:** Generates a background with thread-like patterns.

### GridMotion

**Description:** A background with a moving grid.

### LiquidChrome

**Description:** Creates a liquid chrome effect background.
```

--------------------------------

### Plasma Background Usage

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-backgrounds.md

Example of integrating the Plasma component into a Vue application. Import the component and specify props for speed, scale, and colors to create a dynamic plasma background.

```vue
<template>
  <Plasma
    :speed="1"
    :scale="1.2"
    :colors="['#00ff00', '#0000ff', '#ff00ff']"
  />
</template>

<script setup>
import { Plasma } from '@/content/Backgrounds/Plasma'
</script>
```

--------------------------------

### Vue ResizeObserver for Element Size Changes

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/implementation-patterns.md

Implements a ResizeObserver to detect and react to size changes of a specific DOM element. Includes setup in `onMounted` and cleanup in `onUnmounted`.

```typescript
const containerRef = useTemplateRef<HTMLDivElement>('container')
let resizeObserver: ResizeObserver | null = null

onMounted(() => {
  if (!containerRef.value) return
  
  resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      const { width, height } = entry.contentRect
      // React to size change
    }
  })
  
  resizeObserver.observe(containerRef.value)
})

onUnmounted(() => {
  resizeObserver?.disconnect()
})
```

--------------------------------

### Utility Function Documentation Standard

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Standard structure for documenting utility functions, including import paths, function signatures, parameter details, return types, and usage examples.

```APIDOC
## Utility Function Documentation

### Import Path
`[Path to the utility function]`

### Function Signature
```typescript
[Full function signature with types]
```

### Parameters
| Name | Type | Range | Description |
|---|---|---|---|
| `paramName` | `paramType` | `[Valid range or values]` | `Description of the parameter` |

### Return Type and Description
- **`returnType`**: `Description of the return value`

### Usage Example
```javascript
[JavaScript code example demonstrating function usage]
```

### Special Behavior or Caching
[Explanation of any unique behaviors, caching mechanisms, or side effects]
```

--------------------------------

### Vue State Management with ref and computed

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/implementation-patterns.md

Demonstrates the use of `ref` for reactive state and `computed` for derived values in Vue.js. Includes a basic `watch` example for side effects.

```typescript
// State (ref)
const count = ref(0)

// Derived (computed)
const doubled = computed(() => count.value * 2)

// Side effects (watch)
watch(() => count.value, (newVal) => {
  // Reaction
})
```

--------------------------------

### Component Documentation Standard

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Standard structure for documenting individual Vue components, including import paths, TypeScript interfaces, properties, return values, and usage examples.

```APIDOC
## Component Documentation

### Import Path
`[Path to the component]`

### TypeScript Interface
```typescript
[Full TypeScript interface for the component]
```

### Properties
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| `propName` | `propType` | Yes/No | `defaultValue` | `Description of the property` |

### Return Value
- **`returnType`**: `Description of the return value`

### Usage Example
```vue
[Vue code example demonstrating component usage]
```

### Behavior Description
[Detailed explanation of the component's behavior]

### Optional Sections
- **Emits**: `[List of emitted events]`
- **Special Cases**: `[Any special conditions or behaviors]`
- **Physics Config**: `[Configuration details for physics-related components]`
```

--------------------------------

### CountUp Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-text-animations.md

Demonstrates how to use the CountUp component in a Vue.js template. It shows how to bind props like targetValue, duration, ease, separator, and decimals.

```vue
<template>
  <CountUp
    :targetValue="1000"
    :duration="3"
    ease="back.out"
    separator=","
    :decimals="2"
  />
</template>

<script setup>
import { CountUp } from '@/content/TextAnimations/CountUp'
</script>
```

--------------------------------

### Browser API Pattern: localStorage

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Example of using the browser's `localStorage` API to store and retrieve data persistently on the client-side. Useful for user preferences or session data.

```javascript
// Store data
localStorage.setItem('userTheme', 'dark');

// Retrieve data
const theme = localStorage.getItem('userTheme');

// Remove data
// localStorage.removeItem('userTheme');
```

--------------------------------

### GridMotion Background Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-backgrounds.md

Demonstrates how to use the GridMotion background component in a Vue.js template. It shows how to pass custom values to the component's props for grid color, cell size, distortion amount, and speed.

```vue
<template>
  <GridMotion
    gridColor="#00ffff"
    :cellSize="60"
    :distortionAmount="0.5"
    :speed="1.2"
  />
</template>

<script setup>
import { GridMotion } from '@/content/Backgrounds/GridMotion'
</script>
```

--------------------------------

### ProfileCard Component Usage

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-components.md

Example of how to use the ProfileCard component in a Vue template, including importing the component and passing various props to customize its content and appearance.

```vue
<template>
  <ProfileCard
    name="John Doe"
    role="Software Engineer"
    image="https://example.com/avatar.jpg"
    bio="Building amazing things with Vue."
    :socials="[
      { icon: 'github', url: 'https://github.com/johndoe' },
      { icon: 'twitter', url: 'https://twitter.com/johndoe' }
    ]"
  />
</template>

<script setup>
import { ProfileCard } from '@/content/Components/ProfileCard'
</script>
```

--------------------------------

### Vue 3 Composition API: emit

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Shows how to use the `emit` function within `<script setup>` to dispatch custom events from a child component to its parent in Vue 3.

```javascript
<script setup>
const emit = defineEmits(['customEvent']);

function handleClick() {
  emit('customEvent', 'some data');
}
</script>

<template>
  <button @click="handleClick">Click Me</button>
</template>
```

--------------------------------

### Composables API

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Documentation for available composable functions, including useForceRerender for forcing component re-renders and useStars for fetching GitHub star counts with caching. Includes function signatures and usage examples.

```APIDOC
## Composables API Reference

This section details the available composable functions.

### useForceRerender()

**Description:** Forces a component to re-render.

**Usage Example:**
```javascript
import { useForceRerender } from 'vue-bits';

const forceUpdate = useForceRerender();
// Call forceUpdate() when needed to trigger a re-render.
```

### useStars()

**Description:** Fetches the GitHub star count for a repository with caching.

**Usage Example:**
```javascript
import { useStars } from 'vue-bits';

const { stars, loading, error } = useStars('owner/repo');
// stars: number | null
// loading: boolean
// error: Error | null
```
```

--------------------------------

### UI Components API

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Detailed API documentation for essential UI components such as Counter, Dock, Carousel, ProfileCard, and BorderGlow. Includes comprehensive props tables and usage examples.

```APIDOC
## UI Components API Reference

This section details the API for several UI components.

### Counter

**Description:** A component to display animated counters.

### Dock

**Description:** Implements a dockable interface element.

### Carousel

**Description:** A component for displaying items in a carousel format.

### ProfileCard

**Description:** Displays user profile information.

### BorderGlow

**Description:** Adds a glowing border effect to elements.
```

--------------------------------

### Vue Carousel Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-components.md

Demonstrates how to use the Carousel component in a Vue template, binding props for slides, autoplay, and transition duration. Ensure the Carousel is imported correctly.

```vue
<template>
  <Carousel
    :slides="['Slide 1', 'Slide 2', 'Slide 3']"
    :autoPlay="true"
    :autoPlayDuration="4000"
    transitionDuration="0.7"
  />
</template>

<script setup>
import { Carousel } from '@/content/Components/Carousel'
</script>
```

--------------------------------

### GradientText Component Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-text-animations.md

Demonstrates how to use the GradientText component in a Vue template. It shows how to pass custom values for text, colors, duration, and angle. Ensure the component is imported correctly.

```vue
<template>
  <GradientText
    text="Gradient Text"
    :colors="['#00ff00', '#00ffff', '#00ff00']"
    :duration="4"
    :angle="45"
  />
</template>

<script setup>
import { GradientText } from '@/content/TextAnimations/GradientText'
</script>
```

--------------------------------

### PrimeVue and Aura Theme Integration

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/project-structure.md

Integrates PrimeVue with the Aura theme preset for consistent UI styling. This setup is typically done in the main application entry point.

```typescript
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'

app.use(PrimeVue, { theme: { preset: Aura } })
```

--------------------------------

### GSAP ScrollTrigger Animation Setup

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/implementation-patterns.md

Set up a GSAP animation triggered by scroll events. Ensure GSAP and ScrollTrigger are registered. Clean up animations and ScrollTriggers on unmount to prevent memory leaks.

```typescript
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const el = ref(null)

onMounted(() => {
  const target = el.value
  if (!target) return
  
  gsap.to(target, {
    opacity: 1,
    y: 0,
    duration: 0.8,
    ease: 'power3.out',
    delay: 0.2,
    scrollTrigger: {
      trigger: target,
      start: 'top 80%',
      toggleActions: 'play none none none',
      once: true
    }
  })
})

onUnmounted(() => {
  // Clean up GSAP timelines
  gsap.killTweensOf(el.value)
  ScrollTrigger.getAll().forEach(t => {
    if (t.trigger === el.value) t.kill()
  })
})
```

--------------------------------

### Threads Background Usage Example

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-backgrounds.md

Demonstrates how to use the Threads background component in a Vue.js template. It shows how to pass custom values to the component's props for thread color, width, speed, and density.

```vue
<template>
  <Threads
    threadColor="#ff00ff"
    :threadWidth="3"
    :speed="1.5"
    :density="0.7"
  />
</template>

<script setup>
import { Threads } from '@/content/Backgrounds/Threads'
</script>
```

--------------------------------

### Animation Components API

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Detailed API documentation for key animation components including AnimatedContent, BlobCursor, GlareHover, Magnet, and Crosshair. This section provides props tables, usage examples, and behavior descriptions for each component.

```APIDOC
## Animation Components API Reference

This section details the API for several animation components.

### AnimatedContent

**Description:** Provides animated content display.

### BlobCursor

**Description:** Implements a dynamic blob cursor effect.

### GlareHover

**Description:** Adds a glare effect on hover.

### Magnet

**Description:** Creates a magnetic effect for elements.

### Crosshair

**Description:** Displays a crosshair element.
```

--------------------------------

### preloadSounds()

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/utilities.md

Initializes the audio context and begins loading sound files in the background. Called automatically by playSound() if the context does not exist.

```APIDOC
## preloadSounds()

### Description
Initializes the audio context and begins loading sound files in the background. Called automatically by `playSound()` if the context does not exist.

### Signature
```typescript
function preloadSounds(): void
```

### Sound Files Preloaded:
- `tick` → `/sounds/click-004.mp3`
- `color` → `/sounds/drop-003.mp3`
- `toggle` → `/sounds/switch-007.mp3`

### Behavior:
- No-op if called in a non-browser environment
- No-op if audio context is already initialized
- Silently fails if sound files are missing (returns no error)
- Loads files asynchronously via fetch and decodeAudioData
```

--------------------------------

### Utilities API

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Reference for utility functions covering audio (preloadSounds, playSound), color manipulation (hsvToHex, hexToHsv, parseHexRgb), favorites management, fuzzy search, and general utilities.

```APIDOC
## Utilities API Reference

This section details various utility functions.

### Audio Module

- **preloadSounds(sounds: string[]): void**
- **playSound(soundName: string): void**

### Color Module

- **hsvToHex(h: number, s: number, v: number): string**
- **hexToHsv(hex: string): HSVColor**
- **parseHexRgb(hex: string): RGBColor**

### Favorites Module

- Manages saved components.

### Fuzzy Search Module

- **levenshtein(str1: string, str2: string): number**
- **fuzzyMatch(query: string, target: string): boolean**

### General Utilities

- Includes functions for GitHub API interaction, label decoding, and Toast styles.
```

--------------------------------

### AnimatedContent Vue Component Usage

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-animations.md

Example of using the AnimatedContent component in a Vue template, configuring animation properties and handling the 'complete' event.

```vue
<template>
  <AnimatedContent
    :distance="50"
    direction="horizontal"
    :duration="1"
    ease="elastic.out"
    @complete="onAnimationDone"
  >
    <h1>Animated Heading</h1>
    <p>This content fades in and slides horizontally on scroll.</p>
  </AnimatedContent>
</template>

<script setup>
import { AnimatedContent } from '@/content/Animations/AnimatedContent'

const onAnimationDone = () => {
  console.log('Animation complete')
}
</script>
```

--------------------------------

### Play Sound with Audio Module

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

The audio module provides functions to preload and play sounds. Ensure sounds are preloaded before attempting to play them for a smoother experience.

```javascript
import { preloadSounds, playSound } from 'vue-bits/audio';

// Preload sounds (e.g., on component mount)
preloadSounds(['/path/to/sound.mp3', '/path/to/another.wav']);

// Play a sound
playSound('sound.mp3');
```

--------------------------------

### Get Saved Components

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/utilities.md

Retrieves all saved component keys from localStorage. Assumes the keys are stored as a JSON string array under the 'savedComponents' key.

```typescript
const saved = getSavedComponents()
// ['animated-content', 'counter', ...]
```

--------------------------------

### Preload Sound Files

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/utilities.md

Initializes the audio context and preloads specified sound files. This function is a no-op in non-browser environments or if the audio context is already initialized. It handles asynchronous loading and fails silently if files are missing.

```typescript
function preloadSounds(): void
```

--------------------------------

### Fetch GitHub Stars API Endpoint

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/INDEX.md

The GET endpoint for the GitHub Stars API used by the getStarsCount() utility to fetch the repository star count.

```http
GET https://api.github.com/repos/DavidHDev/vue-bits
```

--------------------------------

### Browser API Pattern: ResizeObserver

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Shows how to use the `ResizeObserver` API to efficiently observe changes in the size of DOM elements, often used for responsive layouts or element-specific adjustments.

```javascript
const targetElement = document.getElementById('my-element');
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Element size changed:', entry.contentRect);
  }
});

if (targetElement) {
  resizeObserver.observe(targetElement);
}

// Remember to unobserve when done:
// resizeObserver.unobserve(targetElement);
```

--------------------------------

### Vue Application Entry Point

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/project-structure.md

This is the main entry point for a Vue.js web application. It creates and mounts the Vue application instance, using the root component and router.

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')
```

--------------------------------

### Dynamic Tailwind CSS Classes

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/implementation-patterns.md

Combine static and dynamic classes for elements using computed properties. This example filters out falsy values before joining them into a string.

```typescript
const wrapperClass = computed(() =>
  ['base-class', 'flex', 'gap-2', props.className]
    .filter(Boolean)
    .join(' ')
)
```

--------------------------------

### Vue Template References with useTemplateRef

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/implementation-patterns.md

Use `useTemplateRef` to get a typed reference to a DOM element in the template. Ensure the element exists before accessing its properties in `onMounted`.

```typescript
import { useTemplateRef } from 'vue'

const containerRef = useTemplateRef<HTMLDivElement>('containerRef')

onMounted(() => {
  if (containerRef.value) {
    // Use the DOM element
  }
})
```

```vue
<div ref="containerRef">Content</div>
```

--------------------------------

### Play Sound with Options

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/utilities.md

Plays a preloaded sound by its name, with optional volume and cooldown settings. This function is a no-op if called in a non-browser environment or if the audio context or sound is unavailable. Cooldown tracking uses `performance.now()`.

```typescript
function playSound(name: string, volume = 0.25, cooldown = 0): void
```

--------------------------------

### Text Animations API

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

API reference for text animation components like SplitText, CountUp, GradientText, ShinyText, BlurText, and TextCursor. Features props tables and usage examples.

```APIDOC
## Text Animations API Reference

This section details the API for several text animation components.

### SplitText

**Description:** Splits text into individual characters or words for animation.

### CountUp

**Description:** Animates numerical values counting up.

### GradientText

**Description:** Applies a gradient effect to text.

### ShinyText

**Description:** Creates a shimmering or shiny text effect.

### BlurText

**Description:** Applies a blur effect to text.

### TextCursor

**Description:** Displays an animated text cursor.
```

--------------------------------

### Animation Pattern: GSAP Integration

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Example of integrating GSAP (GreenSock Animation Platform) for complex animations within a Vue application, likely using its timeline or tweening capabilities.

```javascript
import gsap from 'gsap';

// Assuming 'myElement' is a ref to the target DOM element
// const myElement = ref(null);

// Example GSAP animation
tween: {
  targets: myElement.value,
  opacity: 0,
  duration: 1
}
```

--------------------------------

### Vue 3 Composition API: useTemplateRef

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Illustrates how to use `useTemplateRef` to get a reference to a DOM element or component instance within the template in Vue 3 Composition API.

```javascript
import { ref } from 'vue';
import { useTemplateRef } from 'vue-bits'; // Assuming this utility exists

const myElement = useTemplateRef();

// Access the element after the component is mounted
// console.log(myElement.value); // This would be the DOM element
```

--------------------------------

### Styling Pattern: Inline Styles

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Shows how to apply inline styles directly to HTML elements using Vue's `:style` binding, which accepts an object or an array of objects.

```html
<template>
  <div :style="{ color: active ? 'blue' : 'gray', fontSize: '16px' }">
    Styled Text
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(true);
</script>
```

--------------------------------

### Aurora Background Usage

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/api-reference-backgrounds.md

Example of how to use the Aurora component in a Vue template. Import the component and pass custom props for colors, intensity, and speed to achieve a unique aurora effect.

```vue
<template>
  <Aurora
    :colors="['#00ff00', '#ff00ff', '#ffff00']"
    :intensity="0.8"
    :speed="2"
  />
</template>

<script setup>
import { Aurora } from '@/content/Backgrounds/Aurora'
</script>
```

--------------------------------

### Optional Callback Props in Vue

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/implementation-patterns.md

Define optional callback props that a parent component can provide to be executed on certain events within the child. This example also shows emitting a corresponding event.

```typescript
interface Props {
  onAnimationComplete?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  onAnimationComplete: undefined
})

const emit = defineEmits<{ 
  complete: []
}>()

const handleAnimationComplete = () => {
  // Call prop callback if provided
  props.onAnimationComplete?.()
  
  // Also emit event
  emit('complete')
}
```

--------------------------------

### Standard Component Import Pattern

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/category-overview.md

Use this pattern to import components from their respective categories and names within the project.

```typescript
import ComponentName from '@/content/Category/ComponentName/ComponentName.vue'
```

--------------------------------

### useForceRerender Usage in Template

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/composables.md

Shows how to use the `rerenderKey` for conditional rendering and `forceRerender` to trigger a component restart in a Vue template.

```vue
<template>
  <div :key="rerenderKey">
    <YourComponent ref="component" />
    <button @click="forceRerender">Restart Animation</button>
  </div>
</template>
```

--------------------------------

### Vue 3 Composition API with TypeScript Props

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/implementation-patterns.md

Define component props using TypeScript interfaces and `withDefaults` for default values within `<script setup>`. All component variables are automatically available in the template.

```typescript
<script setup lang="ts">
import { ref, computed, onMounted, useTemplateRef } from 'vue'

interface ComponentProps {
  propName?: string
  numValue?: number
}

const props = withDefaults(defineProps<ComponentProps>(), {
  propName: 'default',
  numValue: 42
})

// Rest of logic here
</script>
```

--------------------------------

### Vue-Bits Project Directory Structure

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/project-structure.md

This outlines the standard directory structure for the Vue-Bits project, including source files, public assets, and configuration files.

```tree
vue-bits/
├── src/
│   ├── App.vue                    # Root app component
│   ├── main.ts                    # Entry point (DOM mounting)
│   ├── env.d.ts                   # TypeScript environment declarations
│   ├── content/                   # All publishable components
│   │   ├── Animations/            # 30 animation components
│   │   ├── Components/            # 34 UI/interactive components
│   │   ├── TextAnimations/        # 23 text effect components
│   │   └── Backgrounds/           # 45 background components
│   ├── demo/                      # Demo/example components for each library component
│   │   ├── Animations/
│   │   ├── Components/
│   │   ├── TextAnimations/
│   │   └── Backgrounds/
│   ├── composables/               # Vue composition functions
│   │   ├── useForceRerender.ts    # Re-render trigger composable
│   │   └── useStars.ts            # GitHub stars fetcher composable
│   ├── utils/                     # Utility functions
│   │   ├── audio.ts               # Audio playback utilities
│   │   ├── color.ts               # Color conversion utilities
│   │   ├── favorites.ts           # Component favorites/saved list
│   │   ├── fuzzy.ts               # Fuzzy search utilities
│   │   └── utils.ts               # General utilities
│   ├── constants/                 # Static constants & metadata
│   │   ├── Categories.ts          # Category definitions
│   │   ├── Components.ts          # Dynamic component imports map
│   │   ├── Information.ts         # Component metadata catalog
│   │   └── cli.ts                 # CLI-related constants
│   ├── css/                       # Global styles
│   │   └── main.css               # Tailwind imports, global styles
│   ├── router/                    # Vue Router setup
│   ├── pages/                     # Page-level components
│   ├── components/                # Shared UI components (non-library)
│   │   ├── code/                  # Code display components
│   │   ├── common/                # Common shared components
│   │   ├── landing/               # Landing page sections
│   │   └── navs/                  # Navigation components
│   ├── assets/                    # Static assets (images, logos, videos)
│   │   ├── logos/
│   │   ├── videos/
│   │   └── ...
│   └── types/                     # TypeScript type definitions
├── public/                        # Static public files
├── scripts/                       # Build and automation scripts
├── package.json                   # NPM package configuration
├── vite.config.ts                 # Vite build configuration
├── tsconfig.json                  # TypeScript configuration
├── jsrepo.config.ts              # Component registry configuration
├── wrangler.jsonc                # Cloudflare Workers config
├── tailwind.config.ts            # Tailwind CSS configuration
├── eslint.config.ts              # ESLint configuration
└── .prettierrc                    # Prettier code formatting

```

--------------------------------

### Performance Pattern: Throttling

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Illustrates the concept of throttling, a performance technique used to limit the rate at which a function can be called. Useful for event handlers like scroll or resize.

```javascript
// Assuming a throttle utility function is available
// import { throttle } from 'vue-bits/performance';

function handleScroll() {
  console.log('Scrolled!');
}

// const throttledScroll = throttle(handleScroll, 200);
// window.addEventListener('scroll', throttledScroll);
```

--------------------------------

### playSound(name: string, volume?: number, cooldown?: number): void

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/utilities.md

Plays a preloaded sound file with optional volume control and cooldown between plays.

```APIDOC
## playSound(name: string, volume?: number, cooldown?: number): void

### Description
Plays a preloaded sound file with optional volume control and cooldown between plays.

### Signature
```typescript
function playSound(name: string, volume = 0.25, cooldown = 0): void
```

### Parameters:
#### Parameters
- **name** (string) - Required - Name of the sound to play: `'tick'`, `'color'`, or `'toggle'`
- **volume** (number) - Optional - Default: `0.25` - Volume level 0–1 (0 = mute, 1 = max)
- **cooldown** (number) - Optional - Default: `0` - Minimum milliseconds between consecutive plays of the same sound

### Behavior:
- No-op if called in a non-browser environment
- No-op if the audio context does not exist or the sound is not preloaded
- If `cooldown > 0`, prevents playing the same sound more than once per `cooldown` ms
- Uses `performance.now()` for cooldown tracking
- Returns immediately; audio plays asynchronously

### Usage:
```typescript
import { playSound, preloadSounds } from '@/utils/audio'

// Optional: explicitly preload
preloadSounds()

// Play with default volume
playSound('tick')

// Play with custom volume and cooldown
playSound('click', 0.5, 100)
```
```

--------------------------------

### preloadSounds Utility

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/project-structure.md

Utility function to preload sound files using the Web Audio API. Part of the audio management module.

```typescript
preloadSounds(): void
```

--------------------------------

### Performance Pattern: Debouncing

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Demonstrates debouncing, another performance optimization technique that ensures a function is only called after a certain period of inactivity. Commonly used for search input or window resizing.

```javascript
// Assuming a debounce utility function is available
// import { debounce } from 'vue-bits/performance';

function handleInput(event) {
  console.log('Input:', event.target.value);
}

// const debouncedInput = debounce(handleInput, 300);
// searchInput.addEventListener('input', debouncedInput);
```

--------------------------------

### motion-v Spring Animation with Transformation

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/implementation-patterns.md

Implement physics-based spring animations using motion-v. Use `useSpring` for animating values and `useTransform` to derive new values based on the animation. Configure stiffness and damping for desired spring behavior.

```typescript
import { useSpring, useMotionValue, useTransform, Motion } from 'motion-v'
import { defineComponent, h, computed } from 'vue'

const MotionComponent = Motion as unknown as ConcreteComponent

const setup = () => {
  const targetValue = ref(0)
  const animatedValue = useSpring(targetValue.value, {
    stiffness: 300,
    damping: 30
  })
  
  watch(
    () => targetValue.value,
    (newValue) => {
      animatedValue.set(newValue)
    }
  )
  
  const transformedValue = useTransform(animatedValue, (latest) => {
    return latest * 2  // Transform the value
  })
  
  return { animatedValue, transformedValue }
}

// In render function:
return h(MotionComponent, {
  style: { x: animatedValue }
}, () => 'Content')
```

--------------------------------

### Fetch GitHub Star Count with useStars

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

The `useStars` composable fetches the GitHub star count for a repository, including caching for performance. It requires the repository owner and name.

```javascript
import { useStars } from 'vue-bits';

const { stars, isLoading, error } = useStars('vuejs', 'vue');

// stars: number | null
// isLoading: boolean
// error: Error | null
```

--------------------------------

### Favorites/Saved Components Utilities

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/utilities.md

Utilities for managing a list of saved component keys in browser localStorage.

```APIDOC
## getSavedComponents

### Description
Returns all saved component keys.

### Signature
`getSavedComponents(): string[]`

### Returns
- `string[]`: An array of saved component keys.

### Example
```typescript
const saved = getSavedComponents()
// ['animated-content', 'counter', ...]
```
```

```APIDOC
## isComponentSaved

### Description
Checks if a component is in the saved list.

### Signature
`isComponentSaved(key: string): boolean`

### Parameters
#### Path Parameters
- **key** (string) - Required - The component key to check.

### Returns
- `boolean`: `true` if the component is saved, `false` otherwise.

### Example
```typescript
if (isComponentSaved('counter')) {
  // Component is saved
}
```
```

```APIDOC
## addSavedComponent

### Description
Adds a component to the saved list. Returns the updated list.

### Signature
`addSavedComponent(key: string): string[]`

### Parameters
#### Path Parameters
- **key** (string) - Required - The component key to add.

### Returns
- `string[]`: The updated list of saved component keys.

### Example
```typescript
const updated = addSavedComponent('counter')
```
```

```APIDOC
## removeSavedComponent

### Description
Removes a component from the saved list. Returns the updated list.

### Signature
`removeSavedComponent(key: string): string[]`

### Parameters
#### Path Parameters
- **key** (string) - Required - The component key to remove.

### Returns
- `string[]`: The updated list of saved component keys.

### Example
```typescript
const updated = removeSavedComponent('counter')
```
```

```APIDOC
## toggleSavedComponent

### Description
Toggles a component's saved status. Returns the new state and updated list.

### Signature
`toggleSavedComponent(key: string): { saved: boolean; list: string[] }`

### Parameters
#### Path Parameters
- **key** (string) - Required - The component key to toggle.

### Returns
- `{ saved: boolean; list: string[] }`: An object containing the new saved status and the updated list.

### Example
```typescript
const { saved, list } = toggleSavedComponent('counter')
if (saved) {
  console.log('Component is now saved')
}
```
```

--------------------------------

### Component Metadata Registry

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/project-structure.md

A master registry containing metadata for all components, including video URLs, descriptions, categories, and documentation links. Essential for managing component information.

```typescript
{
  'Animations/AnimatedContent': {
    videoUrl: '/assets/videos/animatedcontent.webm',
    description: 'Wrapper that animates any children...', 
    category: 'Animations',
    name: 'AnimatedContent',
    docsUrl: 'https://vue-bits.dev/animations/animated-content',
    tags: []
  },
  // ... 131 more
}
```

--------------------------------

### Type Definition Documentation Standard

Source: https://github.com/davidhdev/vue-bits/blob/main/_autodocs/MANIFEST.txt

Standard structure for documenting type definitions (aliases and interfaces), including source file location, type definition, and field tables for interfaces.

```APIDOC
## Type Definition Documentation

### Source File Location
`[Path to the source file]`

### Type Definition
```typescript
[TypeScript type definition (alias or interface)]
```

### Fields (for Interfaces)
| Field | Type | Description |
|---|---|---|
| `fieldName` | `fieldType` | `Description of the field` |

### Usage
- **Used by**: `[List of functions/components that use this type]`
```