---
title: Compare
description: Slide to compare any two pieces of content - images, designs, code, or custom elements
---

::ComponentLoader{label="Preview" componentName="CompareDemo" type="examples" id="compare"}
::

## Examples

Drag handle with custom content

::ComponentLoader{label="Preview" componentName="CompareDragDemo" type="examples" id="compare"}
::

AutoPlay

::ComponentLoader{label="Preview" componentName="CompareAutoplayDemo" type="examples" id="compare"}
::

Custom Content with AutoPlay

::ComponentLoader{label="Preview" componentName="CompareCustomContentDemo" type="examples" id="compare"}
::

## API

| Prop Name                 | Type                | Default          | Description                               |
| ------------------------- | ------------------- | ---------------- | ----------------------------------------- |
| `firstImage`              | `string`            | `""`             | URL of the first image                    |
| `secondImage`             | `string`            | `""`             | URL of the second image                   |
| `firstImageAlt`           | `string`            | `"First image"`  | Alt text for first image                  |
| `secondImageAlt`          | `string`            | `"Second image"` | Alt text for second image                 |
| `class`                   | `string`            | `""`             | Additional classes for the component      |
| `firstContentClass`       | `string`            | `""`             | Classes applied to first content wrapper  |
| `secondContentClass`      | `string`            | `""`             | Classes applied to second content wrapper |
| `initialSliderPercentage` | `number`            | `50`             | Initial position of slider (0-100)        |
| `slideMode`               | `"hover" \| "drag"` | `"hover"`        | Interaction mode for the slider           |
| `showHandlebar`           | `boolean`           | `true`           | Show/hide the handle bar                  |
| `autoplay`                | `boolean`           | `false`          | Enable/disable autoplay                   |
| `autoplayDuration`        | `number`            | `5000`           | Duration of autoplay cycle in ms          |

| Event Name          | Payload  | Description                                  |
| ------------------- | -------- | -------------------------------------------- |
| `update:percentage` | `number` | Emitted when slider position changes (0-100) |
| `drag:start`        | -        | Emitted when dragging starts                 |
| `drag:end`          | -        | Emitted when dragging ends                   |
| `hover:enter`       | -        | Emitted when mouse enters component          |
| `hover:leave`       | -        | Emitted when mouse leaves component          |

| Slot Name        | Default Content                                   | Description                                                                                |
| ---------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `first-content`  | `<img>` element if `firstImage` prop is provided  | Content shown on the left/first side of the comparison. Has full access to component width/height.                                |
| `second-content` | `<img>` element if `secondImage` prop is provided | Content shown on the right/second side of the comparison. Has full access to component width/height.                              |
| `handle`         | Default slider handle with dots icon              | Custom handle for the slider. Automatically positioned at the dividing line. Should handle positioning with absolute positioning. |

## Component Code

You can copy and paste the following code to create this component:

::code-group

::CodeViewerTab{filename="Compare.vue" language="vue" componentName="Compare" type="ui" id="compare"}
::

::CodeViewerTab{filename="StarField.vue" language="vue" componentName="StarField" type="ui" id="compare"}
::

::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for this component.

- Inspired from [Aceternity UI's Compare](https://ui.aceternity.com/components/compare).


---
title: Container Scroll
description: A container scrolling effect that transforms the content inside based on scroll progress. Features smooth transitions with scaling and rotating effects on scroll.
---

::ComponentLoader{label="Preview" componentName="ContainerScrollDemo" type="examples"}
::

## API

::steps

### `ContainerScroll`

The `ContainerScroll` component creates a 3D scroll effect. As the user scrolls, the content inside the container is transformed with scale, rotation, and translation effects.

#### Props

| Prop Name    | Type   | Default | Description                                                                   |
| ------------ | ------ | ------- | ----------------------------------------------------------------------------- |
| `rotate`     | Number | `0`     | Controls the rotation of the inner content based on the scroll progress.      |
| `scale`      | Number | `1`     | Controls the scaling transformation applied to the content during the scroll. |
| `translateY` | Number | `0`     | Controls the vertical translation of the title during the scroll.             |

#### Usage

```vue [ContainerScroll.vue]
<ContainerScroll :rotate="rotateValue" :scale="scaleValue" :translateY="translateYValue">
  <template #title>
    <!-- Your title content here -->
  </template>
  <template #card>
    <!-- Your card content here -->
  </template>
</ContainerScroll>
```

### `ContainerScrollTitle`

The `ContainerScrollTitle` component handles the title's transformation as the user scrolls, applying a vertical translation effect.

#### Props

| Prop Name   | Type   | Default | Description                                     |
| ----------- | ------ | ------- | ----------------------------------------------- |
| `translate` | Number | `0`     | Controls the vertical translation of the title. |

#### Usage

```vue [ContainerScrollTitle.vue]
<ContainerScrollTitle :translate="translateYValue">
  <!-- Title content here -->
</ContainerScrollTitle>
```

### `ContainerScrollCard`

The `ContainerScrollCard` component applies scale and rotation effects to the card content as the user scrolls through the page.

#### Props

| Prop Name | Type   | Default | Description                                      |
| --------- | ------ | ------- | ------------------------------------------------ |
| `rotate`  | Number | `0`     | Controls the rotation effect of the card.        |
| `scale`   | Number | `1`     | Controls the scaling effect applied to the card. |

#### Usage

```vue [ContainerScrollCard.vue]
<ContainerScrollCard :rotate="rotateValue" :scale="scaleValue">
  <!-- Card content here -->
</ContainerScrollCard>
```

::

## Features

- **3D Scroll Effects**: The content transforms based on scroll progress, including rotation, scaling, and translation.
- **Responsive Design**: Adjusts behavior dynamically for mobile and desktop views.
- **Smooth Transitions**: Leverages CSS keyframes and scroll-based transformations for a fluid user experience.

## CSS Variables

To customize the scroll animations and responsiveness, you can set the following CSS variables:

- **`--scale-start`**: Initial scale value for the card.
- **`--scale-end`**: Final scale value for the card as the scroll progresses.
- **`--rotate-start`**: Initial rotation value for the card.
- **`--rotate-end`**: Final rotation value for the card as the scroll progresses.

## Component Code

You can copy and paste the following code to create these components:

::code-group

    ::CodeViewerTab{label="ContainerScroll.vue" language="vue" componentName="ContainerScroll" type="ui" id="container-scroll"}
    ::

    ::CodeViewerTab{label="ContainerScrollTitle.vue" language="vue" componentName="ContainerScrollTitle" type="ui" id="container-scroll"}
    ::

    ::CodeViewerTab{label="ContainerScrollCard.vue" language="vue" componentName="ContainerScrollCard" type="ui" id="container-scroll"}
    ::

::

## Features

- **Dynamic Transformations**: Based on scroll position, the content scales, rotates, and translates for a 3D effect.
- **Flexible Content**: Place any custom content inside the title and card slots.
- **Responsive**: Adjusts for mobile and desktop, providing a consistent experience across devices.

## Credits

- Inspired by [Aceternity UI Container Scroll Animation](https://ui.aceternity.com/components/container-scroll-animation).

Build beautiful website using Vue & Nuxt.


---
title: Expandable Gallery
description: A responsive image gallery with an interactive hover effect that expands images dynamically.
---

::ComponentLoader{label="Preview" componentName="ExpandableGalleryDemo" type="examples" id="expandable-gallery"}
::

## API

| Prop Name | Type       | Default | Description                                    |
| --------- | ---------- | ------- | ---------------------------------------------- |
| `images`  | `string[]` | `[]`    | Array of image URLs to display in the gallery. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="ExpandableGallery.vue" language="vue" componentName="ExpandableGallery" type="ui" id="expandable-gallery"}
::

## Features

- **Interactive Hover Effect**: Images expand when hovered over, creating a dynamic and engaging user experience.
- **Responsive Design**: The gallery automatically adjusts to the container size, ensuring it looks great on all devices.
- **Smooth Transitions**: Includes smooth scaling animations for a polished visual effect.
- **Customizable Content**: Easily update the `images` array to change the gallery's content.

## Credits

- Inspired from [Expandable Gallery Component by David Mráz](https://x.com/davidm_ml/status/1872319793124282653)


---
title: Images Slider
description: A full page slider with images that can be navigated with the keyboard.
---

::ComponentLoader{label="Preview" componentName="ImagesSliderDemo" type="examples" id="images-slider"}
::

## API

| Prop Name          | Type                       | Default                                           | Description                                                                    |
| ------------------ | -------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------ |
| `images`           | `string[]`                 | `[]`                                              | An array of image URLs to show in the slider.                                  |
| `hideOverlay`      | `boolean`                  | `false`                                           | Don't create an overlay for the image slider. Slot won't be rendered.          |
| `overlayClass`     | `string`                   | `''`                                              | A class string to be applied to the overlay container.                         |
| `imageClass`       | `string`                   | `'bg-cover bg-center bg-no-repeat'`               | Class string to apply to each of the images.                                   |
| `enterFromClass`   | `string`                   | `'scale-0 origin-center'`                         | Class string applied to the 'enter-from-class' prop on the image transition.   |
| `enterActiveClass` | `string`                   | `'transition-transform duration-300 ease-in-out'` | Class string applied to the 'enter-active-class' prop on the image transition. |
| `leaveActiveClass` | `string`                   | `'transition-transform duration-300 ease-in-out'` | Class string applied to the 'leave-active-class' prop on the image transition. |
| `autoplay`         | `boolean\|number`          | `false`                                           | Autoplay interval in ms, or `false` to disable.                                |
| `direction`        | `'vertical'\|'horizontal'` | `'vertical'`                                      | The axis on which the slider should operate.                                   |
| `perspective`      | `string`                   | `'1000px'`                                        | The perspective to apply to the slider container.                              |
| `modelValue`       | `number`                   | `0`                                               | Two-way binding for the current slide image index.                             |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{label="ImagesSlider.vue" language="vue" componentName="ImagesSlider" type="ui" id="images-slider"}
::

## Features

- **Horizontal & Vertical Animations**: You can animate the images horizontally (default) or vertically with the `direction` prop.
- **Preloaded Images**: Images are preloaded before showing, preventing flickering loading animation.
- **Customisable Autoplay**: Automatically transition through your slides, or allow your users to navigate manually.
- **Overlay Anything**: The default slot allows you to overlay whatever content you wish overlay slider.

## Credits

- Component by [Craig Riley](https://github.com/craigrileyuk) for porting this component.
- Credits to [Aceternity UI](https://ui.aceternity.com/components/images-slider) for inspiring this component.


---
title: Lens
description: A lens component to zoom into images, videos, or practically anything.
---

::ComponentLoader{label="Preview" componentName="LensDemo" type="examples" id="lens"}
::

## Examples

### Basic

::ComponentLoader{label="Preview" componentName="LensDemo" type="examples" id="lens"}
::

### Static

Lens are static in center

::ComponentLoader{label="Preview" componentName="StaticLensDemo" type="examples" id="lens"}
::

## API

| Prop Name    | Type                       | Default              | Description                                                                  |
| ------------ | -------------------------- | -------------------- | ---------------------------------------------------------------------------- |
| `zoomFactor` | `number`                   | `1.5`                | The magnification factor for the lens.                                       |
| `lensSize`   | `number`                   | `170`                | The diameter of the lens in pixels.                                          |
| `position`   | `{ x: number, y: number }` | `{ x: 200, y: 150 }` | The static position of the lens (when isStatic is true).                     |
| `isStatic`   | `boolean`                  | `false`              | If true, the lens stays in a fixed position; if false, it follows the mouse. |
| `hovering`   | `boolean`                  | `"false"`            | External control for the hover state.                                        |

## Component Code

You can copy and paste the following code to create these components:

::code-group
::CodeViewerTab{label="Lens.vue" icon="vscode-icons:file-type-vue" componentName="Lens" type="ui" id="lens"}
::

::CodeViewerTab{label="Rays.vue" icon="vscode-icons:file-type-vue" componentName="Rays" type="examples" id="lens"}
::

::CodeViewerTab{label="Beams.vue" icon="vscode-icons:file-type-vue" componentName="Beams" type="examples" id="lens"}
::

## Features

- **Slot Support**: Easily add any content inside the component using the default slot.

## Credits

- Credits to [Aceternity UI](https://ui.aceternity.com/components/lens).
- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for porting this component.


---
title: Link Preview
description: Dynamic link previews for your anchor tags
---

::ComponentLoader{label="Preview" componentName="LinkPreviewDemo" type="examples"}
::

::alert{type="info"}
**Note:** This component requires `qss` npm package as a dependency.

Please install qss using following commands.

    ::code-group

    ```bash [npm]
    npm install qss
    ```

    ```bash [pnpm]
    pnpm install qss
    ```

    ```bash [bun]
    bun add qss
    ```

    ```bash [yarn]
    yarn add qss
    ```
    ::

::

## API

| Prop Name   | Type      | Default | Description                                                                                |
| ----------- | --------- | ------- | ------------------------------------------------------------------------------------------- |
| `class`     | `string`  | `""`    | Custom class applied to the main element.                                                   |
| `linkClass` | `string`  | `""`    | Custom class applied to the link element.                                                   |
| `width`     | `number`  | `200`   | Width of the preview image.                                                                 |
| `height`    | `number`  | `125`   | Height of the preview image.                                                                |
| `isStatic`  | `boolean` | `false` | Determines if the preview image is static or a URL preview (set to `true` for static mode). |
| `imageSrc`  | `string`  | `""`    | The source of the image to display (required if `isStatic` is `true`).                      |
| `url`       | `string`  | `""`    | URL for the link and for generating the preview image (required if `isStatic` is `false`).  |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="LinkPreview.vue" language="vue" componentName="LinkPreview" type="ui" id="link-preview"}
::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for porting this component.

- Ported from [Aceternity UI's Link Preview](https://ui.aceternity.com/components/link-preview).


---
title: Marquee
description: A customizable scrolling component that loops its content horizontally or vertically, with configurable direction, hover pause, and repeat options.
---

::ComponentLoader{label="Preview" componentName="MarqueeDemo" type="examples" id="marquee"}
::

## API

| Prop Name      | Type      | Default | Description                                                               |
| -------------- | --------- | ------- | ------------------------------------------------------------------------- |
| `class`        | `string`  | `''`    | Custom CSS classes to apply to the outermost container of the marquee.    |
| `reverse`      | `boolean` | `false` | Sets the scrolling direction to reverse (right to left or bottom to top). |
| `pauseOnHover` | `boolean` | `false` | Pauses the marquee animation when hovered.                                |
| `vertical`     | `boolean` | `false` | Sets the scrolling direction to vertical instead of horizontal.           |
| `repeat`       | `number`  | `4`     | Number of times the content inside the marquee should be repeated.        |

## Component Code

You can copy and paste the following code to create this component:

::code-group

::CodeViewerTab{label="Marquee.vue" language="vue" componentName="Marquee" type="ui" id="marquee"}
::
::CodeViewerTab{label="ReviewCard.vue" language="vue" componentName="ReviewCard" type="examples" id="marquee"}
::

::

## Features

- **Horizontal & Vertical Scrolling**: You can scroll the content horizontally (default) or vertically with the `vertical` prop.
- **Reverse Direction**: Enable reverse scrolling for dynamic effects using the `reverse` prop.
- **Pause on Hover**: Pauses the scrolling animation when the user hovers over the marquee.
- **Content Repetition**: The `repeat` prop controls how many times the content inside the marquee will loop.
- **Custom Duration and Gap**: You can control the animation duration and gap between the repeated items using CSS variables `--duration` and `--gap`.

## CSS Variables

You can customize the speed and gap between the items by setting the following CSS variables:

- **`--duration`**: Controls the speed of the marquee animation.
- **`--gap`**: Sets the space between repeated items in the marquee.

## Features

- **Fully Customizable**: Easily adjust the duration, gap, direction, and hover behavior to suit your needs.
- **Smooth Transitions**: The component uses CSS keyframes to achieve smooth scrolling and transitions.
- **Multi-Directional**: Scroll content either horizontally or vertically with a simple prop change.
- **Content Flexibility**: Place any Vue components or HTML elements inside the marquee slot for dynamic content scrolling.

## Credits

- Inspired by [Magic UI](https://magicui.design/docs/components/marquee).


---
title: Morphing Tabs
description: This is a morphing tabs interaction, recreated by Preet's work and featuring the gooey effect component.
---

::ComponentLoader{label="Preview" componentName="MorphingTabsDemo" type="examples" id="morphing-tabs"}
::

## API

| Prop Name          | Type       | Default | Description                                    |
| ------------------ | ---------- | ------- | ---------------------------------------------- |
| `class`            | `string`   | `""`    | Additional class names to style the component. |
| `tabs`             | `string[]` | `[]`    | Tabs.                                          |
| `activeTab`        | `string`   | `""`    | Current active Tab.                            |
| `margin`           | `number`   | `20`    | Active tab margin left and right.              |
| `blurStdDeviation` | `number`   | `6`     | Svg blur stdDeviation, tab rounded use it.     |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="MorphingTabs.vue" language="vue" componentName="MorphingTabs" type="ui" id="morphing-tabs"}
::

## Credits

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Inspired and ported from [@Preet "Exclusion tabs"](https://x.com/wickedmishra/status/1823026659894940124).


---
title: Multi Step Loader
description: A step loader for screens that works with async conditions too.
---

::ComponentLoader{label="Preview" componentName="MultiStepLoaderDemo" type="examples"}
::

## API

| Prop Name         | Type      | Default | Description                                                                  |
| ----------------- | --------- | ------- | ---------------------------------------------------------------------------- |
| `loading`         | `boolean` | `false` | Controls the visibility of the loader. When `true`, the loader is displayed. |
| `steps`           | `Step[]`  | `[]`    | Array of step objects defining the loading sequence.                         |
| `defaultDuration` | `number`  | `1500`  | The duration of each step in milliseconds.                                   |
| `preventClose`    | `boolean` | `false` | If `true`, the close button will not be shown.                               |

| Event Name     | Payload Type | Description                                                          |
| -------------- | ------------ | -------------------------------------------------------------------- |
| `state-change` | `number`     | Emitted when the current step changes, providing the new step index. |
| `complete`     | `void`       | Emitted when all steps have been completed.                          |
| `close`        | `void`       | Emitted when the loader is closed by button.                         |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="MultiStepLoader.vue" language="vue" componentName="MultiStepLoader" type="ui" id="multi-step-loader"}
::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for this component.

- Inspired from [Aceternity UI's Multi Step Loader](https://ui.aceternity.com/components/multi-step-loader).


---
title: Photo Gallery
description: Showcase your team with pride using our stunning Photo Gallery Component.
---

::ComponentLoader{label="Preview" componentName="PhotoGalleryDemo" type="examples" id="photo-gallery"}
::

## API

| Prop Name        | Type                | Default | Description                                            |
| ---------------- | ------------------- | ------- | ------------------------------------------------------ |
| `items`          | `"[{src: string}]"` | `[]`    | Pass items / image src to animate                      |
| `containerClass` | `string`            | `""`    | Additional tailwind CSS classes for container styling. |
| `class`          | `string`            | `""`    | Additional tailwind CSS classes for custom styling.    |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="PhotoGallery.vue" language="vue" componentName="PhotoGallery" type="ui" id="photo-gallery"}
::

## Credits

- All images from [Pexels](https://www.pexels.com/@soldiervip/)
- Thanks to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for providing this component.


---
title: Scroll Island
description: A dynamic and interactive component that displays scroll progress with animated visuals and an expandable area for additional content.
---

::ComponentLoader{label="Preview" componentName="ScrollIslandDemo" type="examples" id="scroll-island"}
::

::alert{type="info"}
**Note:** This component uses NumberFlow & requires `@number-flow/vue` npm package as a dependency.

Please install NumberFlow using following commands.

    ::code-group

    ```bash [npm]
    npm install @number-flow/vue
    ```

    ```bash [pnpm]
    pnpm install @number-flow/vue
    ```

    ```bash [bun]
    bun add @number-flow/vue
    ```

    ```bash [yarn]
    yarn add @number-flow/vue
    ```
    ::

::

## API

| Prop Name | Type     | Default      | Description                                     |
| --------- | -------- | ------------ | ----------------------------------------------- |
| `class`   | `string` | `""`         | Additional CSS classes for custom styling.      |
| `title`   | `string` | `"Progress"` | Title displayed in the header of the component. |
| `height`  | `string` | `44`         | Height of the component.                        |

## Component Code

You can copy and paste the following code to create this component:

::code-group

    ::CodeViewerTab{label="ScrollIsland.vue" language="vue" componentName="ScrollIsland" type="ui" id="scroll-island"}
    ::

::

## Features

- **Scroll Progress Tracking**: Dynamically displays the scroll progress of the page as a percentage.
- **Expandable Layout**: Transforms between a circular and a rectangular layout based on user interaction.
- **Animated Circular Progress Bar**: Displays a visually appealing progress bar with smooth transitions.
- **Dynamic Content Slot**: Supports additional content in the expandable section.
- **Dark Mode Support**: Adapts to the dark or light mode of the user's system preferences.

## Credits

- Inspired by the work of [Ali Samadi](https://x.com/alisamadi__/status/1854312982559502556) & [Nitish Khagwal](https://x.com/nitishkmrk)
- [NumberFlow by Maxwell Barvian](https://number-flow.barvian.me/vue) for number formatting and animations.


---
title: SVG Mask
description: A dynamic SVG mask component that reveals content with hover and mouse movement.
---

::ComponentLoader{label="Preview" componentName="SvgMaskDemo" type="examples" id="svg-mask"}
::

## API

| Prop Name    | Type     | Default | Description                                |
| ------------ | -------- | ------- | ------------------------------------------ |
| `class`      | `string` | `""`    | Additional CSS classes for custom styling. |
| `size`       | `number` | `10`    | Initial size of the mask in pixels.        |
| `revealSize` | `number` | `600`   | Size of the mask during hover in pixels.   |

## Component Code

You can copy and paste the following code to create this component:

::code-group

::CodeViewerTab{label="SVGMask.vue" language="vue" componentName="SVGMask" type="ui" id="svg-mask"}
::

```html [mask.svg]
<svg
  width="1298"
  height="1298"
  viewBox="0 0 1298 1298"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <circle
    cx="649"
    cy="649"
    r="649"
    fill="black"
  />
</svg>
```

::

## Features

- **Hover-Activated Mask**: The SVG mask dynamically enlarges when hovered, revealing the content beneath.
- **Mouse Tracking**: The mask follows the cursor, creating an engaging and interactive effect.
- **Customizable Mask Size**: Adjust the initial size (`size`) and hover size (`revealSize`) for different effects.
- **Slot-Based Content**: Supports named slots for base and reveal content, making it flexible for various use cases.
- **Responsive Background**: Includes hover-based background color transitions for added visual appeal.

## Credits

- Ported from [Aceternity UI's SVG Mask Effect](https://ui.aceternity.com/components/text-generate-effect).


---
title: Timeline
description: A visually appealing and interactive timeline component with smooth animations, sticky labels, and a gradient scrolling effect.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="TimelineDemo" type="examples" id="timeline"}
::

## API

| Prop Name        | Type                               | Default | Description                                        |
| ---------------- | ---------------------------------- | ------- | -------------------------------------------------- |
| `containerClass` | `string`                           | `""`    | Additional CSS classes for the timeline container. |
| `class`          | `string`                           | `""`    | Additional CSS classes for styling.                |
| `items`          | `{ id: string; label: string; }[]` | `[]`    | List of timeline items, each with an ID and label. |
| `title`          | `string`                           | `""`    | Title of the timeline section.                     |
| `description`    | `string`                           | `""`    | Description text displayed below the title.        |

## Component Code

You can copy and paste the following code to create this component:

::code-group

    ::CodeViewerTab{label="Timeline.vue" language="vue" componentName="Timeline" type="ui" id="timeline"}
    ::

::

## Features

- **Animated Scroll Effect**: The timeline bar animates smoothly as the user scrolls.
- **Sticky Labels**: Each event label remains visible while scrolling.
- **Gradient Progress Bar**: A visually appealing timeline indicator with gradient effects.
- **Slot Support**: Custom content can be placed within each timeline item.
- **Responsive Design**: Adapts seamlessly to different screen sizes.
- **Dark Mode Support**: Automatically adjusts to light or dark themes.

## Credits

- Inspired and ported from [Aceternity UI's Timeline](https://ui.aceternity.com/components/timeline).


---
title: Tracing Beam
description: A component that renders a tracing beam effect with dynamic scrolling animations and gradient strokes.
---

::ComponentLoader{label="Preview" componentName="TracingBeamDemo" type="examples"}
::

## API

| Prop Name | Type     | Default | Description                                |
| --------- | -------- | ------- | ------------------------------------------ |
| `class`   | `string` | `""`    | Additional CSS classes for custom styling. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="TracingBeam.vue" language="vue" componentName="TracingBeam" type="ui" id="tracing-beam"}
::

## Features

- **Dynamic Tracing Beam**: Renders a gradient tracing beam that follows the scroll position, adding a modern visual effect.
- **Scroll-Based Animation**: As the user scrolls, the beam animates along a path with varying gradients, responding to scroll depth.
- **Gradient Transition**: Smoothly transitions colors along the beam from cyan to purple with fading edges for a subtle effect.
- **Slot-Based Content**: Supports a default slot to add content inside the tracing beam container.

## Credits

- Ported from [Aceternity UI](https://ui.aceternity.com/components/tracing-beam);


---
title: Animated Beam
description: An SVG beam connecting elements with animation.
---

::ComponentLoader{label="Preview" componentName="AnimatedBeamDemo" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name            | Type          | Default                | Description                                                                  |
| -------------------- | ------------- | ---------------------- | ---------------------------------------------------------------------------- |
| `class`              | `string`      | `""`                   | Additional CSS classes to apply to the component for customization.          |
| `containerRef`       | `HTMLElement` | N/A                    | Reference to the container element where the beam is rendered.               |
| `fromRef`            | `HTMLElement` | N/A                    | Reference to the starting element from which the beam originates.            |
| `toRef`              | `HTMLElement` | N/A                    | Reference to the ending element where the beam points to.                    |
| `curvature`          | `number`      | `0`                    | Controls the curvature of the beam; higher values create a more curved path. |
| `reverse`            | `boolean`     | `false`                | Reverses the animation direction of the beam if set to `true`.               |
| `pathColor`          | `string`      | `"gray"`               | Color of the beam's path.                                                    |
| `pathWidth`          | `number`      | `2`                    | Stroke width of the beam's path.                                             |
| `pathOpacity`        | `number`      | `0.2`                  | Opacity of the beam's path.                                                  |
| `gradientStartColor` | `string`      | `"#FFAA40"`            | Starting color of the beam's gradient animation.                             |
| `gradientStopColor`  | `string`      | `"#9C40FF"`            | Ending color of the beam's gradient animation.                               |
| `delay`              | `number`      | `0`                    | Delay before the beam's animation starts, in seconds.                        |
| `duration`           | `number`      | `Random between 4–7 s` | Duration of the beam's animation cycle, in seconds.                          |
| `startXOffset`       | `number`      | `0`                    | Horizontal offset for the beam's starting point.                             |
| `startYOffset`       | `number`      | `0`                    | Vertical offset for the beam's starting point.                               |
| `endXOffset`         | `number`      | `0`                    | Horizontal offset for the beam's ending point.                               |
| `endYOffset`         | `number`      | `0`                    | Vertical offset for the beam's ending point.                                 |

## Example

Double-sided beam.

::ComponentLoader{label="Preview" componentName="AnimatedBeamDemo2" type="examples"}
::

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="AnimatedBeam.vue" language="vue" componentName="AnimatedBeam" type="ui" id="animated-beam"}
::

## Features

- **Dynamic Beam Drawing**: Automatically renders a beam between two specified elements on the page.
- **Smooth Animation**: Features a gradient animation that flows along the beam's path for a visually engaging effect.
- **Customizable Appearance**: Easily adjust color, width, opacity, and curvature to match your design requirements.
- **Responsive Updates**: The beam adjusts its position and size in response to window resizing and element repositioning.
- **Flexible Animation Control**: Customize the animation's duration, delay, and direction for precise timing.

## Credits

- Inspired and ported from [Magic UI Animated Beam](https://magicui.design/docs/components/animated-beam).


---
title: Border Beam
description: A stylish animated border beam effect with customizable size, duration, colors, and delay.
---

::ComponentLoader{label="Preview" componentName="BorderBeamDemo" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name     | Type     | Default     | Description                                                           |
| ------------- | -------- | ----------- | --------------------------------------------------------------------- |
| `class`       | `string` | `""`        | Additional CSS classes for custom styling.                            |
| `size`        | `number` | `200`       | Size of the animated border beam effect.                              |
| `duration`    | `number` | `15`        | Duration of the animation in seconds.                                 |
| `borderWidth` | `number` | `1.5`       | Width of the border around the beam effect.                           |
| `anchor`      | `number` | `90`        | Anchor point for the beam, determining its position along the border. |
| `colorFrom`   | `string` | `"#ffaa40"` | Starting color for the gradient of the beam.                          |
| `colorTo`     | `string` | `"#9c40ff"` | Ending color for the gradient of the beam.                            |
| `delay`       | `number` | `0`         | Delay before the animation starts, in seconds.                        |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="BorderBeam.vue" language="vue" componentName="BorderBeam" type="ui" id="border-beam"}
::

## Features

- **Animated Border Beam**: Adds a dynamic border beam effect that animates around the border.
- **Customizable Gradient Colors**: Adjust the `colorFrom` and `colorTo` props to create a gradient effect that suits your design.
- **Flexible Animation Settings**: Control the size, duration, and delay of the animation to fine-tune the visual experience.
- **Anchor Positioning**: Use the `anchor` prop to set the starting position of the beam along the border.

## Credits

- Ported from [Magic UI](https://magicui.design/docs/components/border-beam).


---
title: Confetti
description: A Vue component for confetti animations.
---

::ComponentLoader{label="Preview" componentName="ConfettiDemo" type="examples" id="confetti"}
::

## Examples

### Basic

::ComponentLoader{label="Preview" componentName="ConfettiBasicDemo" type="examples" id="confetti"}
::

### Random Direction

::ComponentLoader{label="Preview" componentName="ConfettiRandomDirectionDemo" type="examples" id="confetti"}
::

### Fireworks

::ComponentLoader{label="Preview" componentName="ConfettiFireworksDemo" type="examples" id="confetti"}
::

### Side Cannons

::ComponentLoader{label="Preview" componentName="ConfettiCannonsDemo" type="examples" id="confetti"}
::

::alert{type="info"}
**Note:** This component uses `canvas-confetti` npm package as a dependency.

Install package using following commands.

    ::code-group

    ```bash [npm]
    npm install canvas-confetti
    npm install -D @types/canvas-confetti
    ```

    ```bash [pnpm]
    pnpm install canvas-confetti
    pnpm install -D @types/canvas-confetti
    ```

    ```bash [bun]
    bun add canvas-confetti
    bun add -d @types/canvas-confetti
    ```

    ```bash [yarn]
    yarn add canvas-confetti
    yarn add --dev @types/canvas-confetti
    ```
    ::

::

## API

::steps

### Confetti

| Prop Name       | Type                    | Default | Description                                                       |
| --------------- | ----------------------- | ------- | ----------------------------------------------------------------- |
| `options`       | `ConfettiOptions`       | `{}`    | Options for individual confetti bursts.                           |
| `globalOptions` | `ConfettiGlobalOptions` | `{}`    | Global options for the confetti instance (e.g., resize behavior). |
| `manualstart`   | `boolean`               | `false` | If `true`, confetti won't start automatically on mount.           |

#### `ConfettiOptions` Properties

| Property                  | Type                        | Default                                                                         | Description                                                            |
| ------------------------- | --------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| `particleCount`           | `number`                    | `50`                                                                            | The number of confetti particles to launch.                            |
| `angle`                   | `number`                    | `90`                                                                            | The angle in degrees at which to launch the confetti.                  |
| `spread`                  | `number`                    | `45`                                                                            | The spread in degrees of the confetti.                                 |
| `startVelocity`           | `number`                    | `45`                                                                            | The initial velocity of the confetti particles.                        |
| `decay`                   | `number`                    | `0.9`                                                                           | The rate at which confetti particles slow down.                        |
| `gravity`                 | `number`                    | `1`                                                                             | The gravity applied to confetti particles.                             |
| `drift`                   | `number`                    | `0`                                                                             | The horizontal drift applied to confetti particles.                    |
| `ticks`                   | `number`                    | `200`                                                                           | The number of animation frames the confetti should last.               |
| `origin`                  | `{ x: number, y: number }`  | `{ x: 0.5, y: 0.5 }`                                                            | The origin point (from 0 to 1) of the confetti emission.               |
| `colors`                  | `string[]`                  | `['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff']` | Array of color strings in HEX format for the confetti particles.       |
| `shapes`                  | `string[]`                  | `['square', 'circle']`                                                          | Array of shapes for the confetti particles.                            |
| `scalar`                  | `number`                    | `1`                                                                             | Scaling factor for confetti particle sizes.                            |
| `zIndex`                  | `number`                    | `100`                                                                           | The z-index value for the confetti canvas element.                     |
| `disableForReducedMotion` | `boolean`                   | `false`                                                                         | Disables confetti for users who prefer reduced motion.                 |
| `useWorker`               | `boolean`                   | `true`                                                                          | Use a Web Worker for better performance.                               |
| `resize`                  | `boolean`                   | `true`                                                                          | Whether to automatically resize the canvas when the window resizes.    |
| `canvas`                  | `HTMLCanvasElement \| null` | `null`                                                                          | Custom canvas element to draw confetti on.                             |
| `gravity`                 | `number`                    | `1`                                                                             | The gravity applied to confetti particles.                             |
| `drift`                   | `number`                    | `0`                                                                             | The horizontal drift applied to particles.                             |
| `flat`                    | `boolean`                   | `false`                                                                         | If `true`, confetti particles will be flat (no rotation or 3D effect). |

### Confetti Button

| Prop Name | Type                                               | Default | Description                                      |
| --------- | -------------------------------------------------- | ------- | ------------------------------------------------ |
| `options` | `ConfettiOptions & { canvas?: HTMLCanvasElement }` | `{}`    | Options for confetti when the button is clicked. |

::

## Component Code

You can copy and paste the following code to create these components:

::code-group

    ::CodeViewerTab{label="Confetti.vue" language="vue" componentName="Confetti" type="ui" id="confetti"}
    ::
    ::CodeViewerTab{label="ConfettiButton.vue" language="vue" componentName="ConfettiButton" type="ui" id="confetti"}
    ::

::

## Features

- **Confetti Animation**: Easily add confetti animations to your Vue application.
- **Customizable Options**: Configure both global and individual options for confetti behavior.
- **Manual Control**: Choose whether to start confetti automatically or manually trigger it.
- **Button Integration**: Use the `ConfettiButton` component to trigger confetti on button clicks.

## Credits

- Built using the [canvas-confetti](https://www.npmjs.com/package/canvas-confetti) library.
- Ported from [Magic UI Confetti](https://magicui.design/docs/components/confetti).


---
title: Glow Border
description: An animated border effect.
---

::ComponentLoader{label="Preview" componentName="GlowBorderDemo" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name      | Type                 | Default | Description                                                |
| -------------- | -------------------- | ------- | ---------------------------------------------------------- |
| `duration`     | `number`             | `10`    | Duration of the glowing border animation.                  |
| `color`        | `string \| string[]` | `#FFF`  | Color or array of colors to applied on the glowing border. |
| `borderRadius` | `number`             | `10`    | Radius of the border.                                      |
| `borderWidth`  | `number`             | `2`     | Width of the border.                                       |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="GlowBorder.vue" language="vue" componentName="GlowBorder" type="ui" id="glow-border"}
::

## Credits

- Credits to [Magic UI](https://magicui.design/docs/components/shine-border) for this fantastic component.


---
title: Meteor
description: A component that displays a meteor shower animation with customizable meteor count and styling.
---

::ComponentLoader{label="Preview" componentName="MeteorsDemo" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name | Type     | Default | Description                                                       |
| --------- | -------- | ------- | ----------------------------------------------------------------- |
| `count`   | `number` | `20`    | The number of meteors to display in the animation.                |
| `class`   | `string` | `""`    | Additional CSS classes to apply to the meteors for customization. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="Meteors.vue" language="vue" componentName="Meteors" type="ui" id="meteors"}
::

## Features

- **Meteor Shower Animation**: The component renders an animated meteor shower effect, adding a dynamic visual element to your application.

- **Customizable Meteor Count**: Adjust the number of meteors by setting the `count` prop to control the density of the meteor shower.

- **Randomized Animations**: Each meteor has randomized position, delay, and duration, creating a natural and varied animation.

- **Styling Flexibility**: Pass additional CSS classes through the `class` prop to customize the appearance of the meteors.

- **Responsive Design**: The component adapts to different screen sizes and uses Vue’s reactivity for smooth animations.

## Credits

- Ported from [Aceternity UI's Meteor Effect](https://ui.aceternity.com/components/meteors)


---
title: Particle Image
description: Visually appealing particle animation applied to images as seen on NuxtLabs.com
---

::ComponentLoader{label="Preview" componentName="ParticleImageDemo" type="examples"}
::

## API

| Prop Name         | Type                                                                          | Default  | Description                                                                     |
| ----------------- | ----------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------- |
| `imageSrc`        | `string`                                                                      | `null`   | Source URL for the image to which the particle effect is applied.               |
| `class`           | `string`                                                                      | `null`   | Additional CSS classes to apply to the image element.                           |
| `canvasWidth`     | `string`                                                                      | `null`   | Width of the particle effect canvas.                                            |
| `canvasHeight`    | `string`                                                                      | `null`   | Height of the particle effect canvas.                                           |
| `gravity`         | `string`                                                                      | `null`   | Gravity force affecting the particle movement.                                  |
| `particleSize`    | `string`                                                                      | `null`   | Size of the particles.                                                          |
| `particleGap`     | `string`                                                                      | `null`   | Gap between particles.                                                          |
| `mouseForce`      | `string`                                                                      | `null`   | Force applied to particles based on mouse movement.                             |
| `renderer`        | `"default" \| "webgl"`                                                        | `null`   | The renderer to use for particle generation, either default or WebGL.           |
| `color`           | `string`                                                                      | `#FFF`   | Hexadecimal color code used for particles. Supports 3 or 6 character hex codes. |
| `colorArr`        | `number[]`                                                                    | `null`   | Array of numbers to define multiple particle colors.                            |
| `initPosition`    | `"random" \| "top" \| "left" \| "bottom" \| "right" \| "misplaced" \| "none"` | `random` | Initial position of the particles when the animation starts.                    |
| `initDirection`   | `"random" \| "top" \| "left" \| "bottom" \| "right" \| "none"`                | `random` | Initial direction of the particles when the animation starts.                   |
| `fadePosition`    | `"explode" \| "top" \| "left" \| "bottom" \| "right" \| "random" \| "none"`   | `none`   | Position where the particles fade out.                                          |
| `fadeDirection`   | `"random" \| "top" \| "left" \| "bottom" \| "right" \| "none"`                | `none`   | Direction in which the particles fade out.                                      |
| `noise`           | `number`                                                                      | `null`   | Noise of the particles.                                                         |
| `responsiveWidth` | `boolean`                                                                     | `false`  | Should the canvas be responsive.                                                |

## Component Code

You can copy and paste the following code to create these components:

::code-group
::CodeViewerTab{label="ParticleImage.vue" icon="vscode-icons:file-type-vue" componentName="ParticleImage" type="ui" id="particle-image"}
::

::CodeViewerTab{label="inspiraImageParticles.js" icon="vscode-icons:file-type-js" componentName="inspiraImageParticles" type="ui" id="particle-image" extension="js"}
::

::CodeViewerTab{label="inspiraImageParticles.d.ts" icon="vscode-icons:file-type-typescriptdef" componentName="inspiraImageParticles" type="ui" id="particle-image" extension="d.ts"}
::

::

## Credits

- Credits to [Nuxt Labs](https://nuxtlabs.com) for this inspiration.
- Credits to [NextParticles](https://nextparticle.nextco.de) for the base of the animation library.


---
title: Scratch To Reveal
description: The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.
---

::ComponentLoader{label="Preview" componentName="ScratchToRevealDemo" type="examples" id="scratch-to-reveal"}
::

## API

| Prop Name              | Type                     | Default | Description                                                                                |
| ---------------------- | ------------------------ | ------- | --------------------------------------------------------------------------------------------- |
| `class`                | `string`                 | `""`    | The class name to apply to the component.                                                     |
| `width`                | `number`                 | `""`    | Width of the scratch container.                                                               |
| `height`               | `number`                 | `""`    | Height of the scratch container.                                                              |
| `minScratchPercentage` | `number`                 | `50`    | Minimum percentage of scratched area to be considered as completed (Value between 0 and 100). |
| `gradientColors`       | `[string,string,string]` | `-`     | Gradient colors for the scratch effect.                                                       |

| Event Name | Payload | Description                                        |
| ---------- | ------- | -------------------------------------------------- |
| `complete` | `-`     | Callback function called when scratch is completed |

| Slot Name | Default Content | Description                            |
| --------- | --------------- | -------------------------------------- |
| `default` | `-`             | The text below the scratch-off ticket. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="ScratchToReveal.vue" language="vue" componentName="ScratchToReveal" type="ui" id="scratch-to-reveal"}
::

## Credits

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Inspired by [MagicUI Scratch To Reveal](https://magicui.design/docs/components/scratch-to-reveal).


---
title: 3D Text
description: A stylish 3D text component with customizable colors, shadows, and animation options.
---

::ComponentLoader{label="Preview" componentName="Text3dDemo" type="examples"}
::

## API

| Prop Name           | Type      | Default    | Description                                        |
| ------------------- | --------- | ---------- | -------------------------------------------------- |
| `textColor`         | `string`  | `"white"`  | Color of the main text.                            |
| `letterSpacing`     | `number`  | `-0.1`     | Adjusts the spacing between letters in `ch` units. |
| `strokeColor`       | `string`  | `"black"`  | Color of the text stroke.                          |
| `shadowColor`       | `string`  | `"yellow"` | Color of the text shadow.                          |
| `strokeSize`        | `number`  | `20`       | Thickness of the text stroke in pixels.            |
| `shadow1Size`       | `number`  | `7`        | Size of the first shadow layer in pixels.          |
| `shadow2Size`       | `number`  | `10`       | Size of the second shadow layer in pixels.         |
| `class`             | `string`  | `""`       | Additional CSS classes for custom styling.         |
| `animate`           | `boolean` | `true`     | Enables wiggle animation when set to `true`.       |
| `animationDuration` | `number`  | `1500`     | Duration of the wiggle animation in milliseconds.  |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="Text3d.vue" language="vue" componentName="Text3d" type="ui" id="text-3d"}
::

## Features

- **3D Text Effect**: Adds a three-dimensional stroke and shadow effect to text for a bold, layered look.
- **Customizable Colors & Sizes**: Easily adjust text color, stroke size, shadow colors, and letter spacing.
- **Wiggle Animation**: Includes an optional wiggle animation to make the text bounce for added emphasis.
- **Flexible Animation Control**: Customize the animation speed with the `animationDuration` prop.


---
title: Blur Reveal
description: A component to smoothly blur fade in content.
---

::ComponentLoader{label="Preview" componentName="BlurRevealDemo" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name  | Type     | Default | Description                                                                  |
| ---------- | -------- | ------- | ---------------------------------------------------------------------------- |
| `duration` | `number` | `1`     | Duration of the blur fade in animation.                                      |
| `delay`    | `number` | `1`     | Delay between child components to reveal                                     |
| `blur`     | `string` | `10px`  | Amount of blur to apply to the child components.                             |
| `yOffset`  | `number` | `20`    | Specifies the vertical offset distance (yOffset) for the entrance animation. |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="BlurReveal.vue" language="vue" componentName="BlurReveal" type="ui" id="blur-reveal"}
::

## Credits

- Credits to [Magic UI](https://magicui.design/docs/components/blur-fade) for this fantastic component.


---
title: Box Reveal
description: An animated box reveal effect with customizable colors, duration, and delay.
---

::ComponentLoader{label="Preview" componentName="BoxRevealDemo" type="examples"}
::

## API

| Prop Name  | Type     | Default     | Description                                          |
| ---------- | -------- | ----------- | ---------------------------------------------------- |
| `color`    | `string` | `"#5046e6"` | Background color of the reveal box.                  |
| `duration` | `number` | `0.5`       | Duration of the reveal animation in seconds.         |
| `delay`    | `number` | `0.25`      | Delay before the reveal animation starts in seconds. |
| `class`    | `string` | `""`        | Additional CSS classes for custom styling.           |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="BoxReveal.vue" language="vue" componentName="BoxReveal" type="ui" id="box-reveal"}
::

## Features

- **Box Reveal Animation**: Creates a sliding box reveal effect with smooth transitions.
- **Customizable Animation**: Control the animation timing with the `duration` and `delay` props.
- **Slot-Based Content**: Supports default slot content that appears once the reveal animation completes.
- **Custom Background Color**: Easily customize the box's background color using the `color` prop.

## Credits

- Ported from [Magic UI Box Reveal](https://magicui.design/docs/components/box-reveal).


---
title: Colourful Text
description: A text component with various colours, filter and scale effects.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="ColourfulTextDemo" type="examples" id="colourful-text"}
::

## API

| Prop Name    | Type       | Default                                                                                | Description                                                                                |
| ------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`       | `string`   | `"black"`                                                                                | The text string to be rendered with colorful animated characters. Each character will be individually animated with color transitions and motion effects. |
| `colors`     | `string[]` | `[ "rgb(131, 179, 32)", "rgb(47, 195, 106)", "rgb(42, 169, 210)", "rgb(4, 112, 202)", "rgb(107, 10, 255)", "rgb(183, 0, 218)", "rgb(218, 0, 171)", "rgb(230, 64, 92)", "rgb(232, 98, 63)", "rgb(249, 129, 47)", ]` | The text use colors.                                                                                |
| `startColor` | `string`   | `"rgb(255,255,255)"`                                                                                | The char start color.                                                                                |
| `duration`   | `number`   | `5`                                                                                | The animation duration time in seconds.                                                                                |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="ColourfulText.vue" language="vue" componentName="ColourfulText" type="ui" id="colourful-text"}
::

## Credits

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Ported from [Aceternity UI Colourful Text](https://ui.aceternity.com/components/colourful-text)


---
title: Flip Words
description: A component that flips through a list of words.
---

::ComponentLoader{label="Preview" componentName="FlipWordsDemo" type="examples"}
::

## API

| Prop Name  | Type     | Description                                                                                |
| ---------- | -------- | ------------------------------------------------------------------------------------------ |
| `words`    | `Array`  | An array of words to be displayed and animated.                                            |
| `duration` | `number` | Duration (in milliseconds) for each word to be displayed before flipping to the next word. |
| `class`    | `string` | Additional CSS classes to apply to the component.                                          |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="FlipWords.vue" language="vue" componentName="FlipWords" type="ui" id="flip-words"}
::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for porting this component.

- Ported from [Aceternity UI's Flip Words](https://ui.aceternity.com/components/flip-words)


---
title: Hyper Text
description: A hyper changing text animation as you hover..
---

::ComponentLoader{label="Preview" componentName="HyperTextDemo" type="examples"}
::

## API

| Prop Name       | Type      | Default  | Description                                               |
| --------------- | --------- | -------- | --------------------------------------------------------- |
| `class`         | `string`  | `""`     | Additional CSS classes to apply to the component.         |
| `text`          | `string`  | Required | Text to animate                                           |
| `duration`      | `number`  | `0.8`    | The total duration (in seconds) for the entire animation. |
| `animateOnLoad` | `boolean` | `true`   | Play animation on load                                    |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="HyperText.vue" language="vue" componentName="HyperText" type="ui" id="hyper-text"}
::

## Credits

- Inspired by [Magic UI's Hyper Text](https://magicui.design/docs/components/hyper-text) component.
- Credits to [Prem](https://github.com/premdasvm) for porting this component.


---
title: Letter Pullup
description: Staggered letter pull up text animation.
---

::ComponentLoader{label="Preview" componentName="LetterPullupDemo" type="examples" id="letter-pullup"}
::

## API

| Prop Name | Type     | Default                    | Description                                        |
| --------- | -------- | -------------------------- | -------------------------------------------------- |
| `class`   | `string` | `-`                        | The class to be applied to the component.          |
| `words`   | `string` | `Staggered Letter Pull Up` | Text to animate.                                   |
| `delay`   | `number` | `0.05`                     | Delay each letter's animation by this many seconds |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="LetterPullup.vue" language="vue" componentName="LetterPullup" type="ui" id="letter-pullup"}
::

## Credits

- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for this component.
- Inspired from [Magic UI](https://magicui.design/docs/components/letter-pullup).


---
title: Line Shadow Text
description: A line shadow text component for Magic UI that adds a shadow effect to the text, making it visually appealing and engaging.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="LineShadowTextDemo" type="examples" id="line-shadow-text"}
::

## API

| Prop Name     | Type     | Default   | Description                                |
| ------------- | -------- | --------- | ------------------------------------------ |
| `shadowColor` | `string` | `"black"` | The color of the shadow effect             |
| `class`       | `string` | `""`      | Additional CSS classes for custom styling. |
| `as`          | `string` | `"span"`  | The HTML element to render the text as.    |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="LineShadowText.vue" language="vue" componentName="LineShadowText" type="ui" id="line-shadow-text"}
::

## Features

- **Slot-Based Content**: Supports default slots for dynamic content, making it flexible for various use cases.

## Credits

- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for this component.
- Ported from [Magic UI's Line Shadow Text](https://magicui.design/docs/components/line-shadow-text)


---
title: Morphing Text
description: This MorphingText component dynamically transitions between an array of text strings, creating a smooth, engaging visual effect.
---

::ComponentLoader{label="Preview" componentName="MorphingTextDemo" type="examples" id="morphing-text"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name      | Type       | Default | Description                           |
| -------------- | ---------- | ------- | ------------------------------------- |
| `texts`        | `string[]` | `[]`    | Array of texts to morph between.      |
| `class`        | `string`   | `""`    | Additional classes for the container. |
| `morphTime`    | `number`   | `1.5`   | Animation execution time.             |
| `coolDownTime` | `number`   | `0.5`   | Animation dwell time.                 |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="MorphingText.vue" language="vue" componentName="MorphingText" type="ui" id="morphing-text"}
::

## Credits

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Inspired and ported from [Magic UI Morphing Text](https://magicui.design/docs/components/morphing-text).


---
title: Number Ticker
description: Animate numbers to count up or down to a target number
---

::ComponentLoader{label="Preview" componentName="NumberTickerDemo" type="examples"}
::

---

## API

| Prop Name       | Type                | Default        | Description                                                       |
| --------------- | ------------------- | -------------- | ----------------------------------------------------------------- |
| `value`         | `int`               | `0`            | Value to count to                                                 |
| `direction`     | `up \| down`        | `up`           | Direction to count in                                             |
| `decimalPlaces` | `number`            | `0`            | Number of decimal places to show                                  |
| `delay`         | `number`            | `0`            | Delay before counting (in milliseconds)                           |
| `duration`      | `number`            | `1000`         | Total duration for the entire animation (in milliseconds).        |
| `transition`    | `TransitionPresets` | `easeOutCubic` | Name of transition preset (https://vueuse.org/core/useTransition) |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="NumberTicker.vue" language="vue" componentName="NumberTicker" type="ui" id="number-ticker"}
::

## Credits

- Credits to [Grzegorz Krol](https://github.com/Grzechu335) for porting this component.
- Ported from [Magic UI NumberTicker](https://magicui.design/docs/components/number-ticker).


---
title: Radiant Text
description: A glare effect on text.
---

::ComponentLoader{label="Preview" componentName="RadiantTextDemo" type="examples"}
::

## API

| Prop Name      | Type     | Default | Description                           |
| -------------- | -------- | ------- | ------------------------------------- |
| `duration`     | `number` | `10`    | Duration of the animation in seconds. |
| `radiantWidth` | `number` | `100`   | Width of the radiant animation.       |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="RadiantText.vue" language="vue" componentName="RadiantText" type="ui" id="radiant-text"}
::

## Credits

- Credits to [Magic UI](https://magicui.design/docs/components/animated-shiny-text) for this fantastic component.


---
title: Sparkles Text
description: A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
---

::ComponentLoader{label="Preview" componentName="SparklesTextDemo" type="examples" id="sparkles-text"}
::

## API

| Prop Name       | Type     | Default                                  | Description                                   |
| --------------- | -------- | ---------------------------------------- | --------------------------------------------- |
| `class`         | `string` | `-`                                      | The class to be applied to the sparkles text. |
| `text`          | `string` | ``                                       | The text to display.                          |
| `sparklesCount` | `number` | `10`                                     | sparkles count that appears on the text.      |
| `colors`        | `object` | `{first: '#A07CFE'; second: '#FE8FB5';}` | The sparkles colors.                          |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="SparklesText.vue" language="vue" componentName="SparklesText" type="ui" id="sparkles-text"}
::

## Credits

- Credits to [SivaReddy Uppathi](https://github.com/sivareddyuppathi) for this component.
- Inspired from [Magic UI](https://magicui.design/docs/components/sparkles-text).
- Credits to [M Atif](https://github.com/atif0075) for updating this component.


---
title: Text Generate Effect
description: A cool text effect that fades in text on page load, one by one.
---

::ComponentLoader{label="Preview" componentName="TextGenerateDemo" type="examples"}
::

## Examples

Two text with different delay

::ComponentLoader{label="Preview" componentName="TextGenerateEffectDemoDelayed" type="examples" id="text-generate-effect"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name  | Type      | Default  | Description                                                            |
| ---------- | --------- | -------- | ---------------------------------------------------------------------- |
| `words`    | `string`  | Required | The text to be displayed with the generating effect.                   |
| `duration` | `number`  | `0.7`    | The duration of the text generation animation in seconds.              |
| `delay`    | `number`  | `0`      | The delay before the text generation animation starts in milliseconds. |
| `filter`   | `boolean` | `true`   | The blur of the text.                                                  |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="TextGenerateEffect.vue" language="vue" componentName="TextGenerateEffect" type="ui" id="text-generate-effect"}
::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for porting this component.

- Ported from [Aceternity UI's Text Generate Effect](https://ui.aceternity.com/components/text-generate-effect).


---
title: Text Highlight
description: A text effect that fill background of a text to highlight it.
---

::ComponentLoader{label="Preview" componentName="TextHighlightDemo" type="examples" id="text-highlight"}
::

## Examples

With 3s delay

::ComponentLoader{label="Preview" componentName="TextHighlightDemoDelayed" type="examples" id="text-highlight"}
::

Rounded text background

::ComponentLoader{label="Preview" componentName="TextHighlightDemoRounded" type="examples" id="text-highlight"}
::

Color from CSS variables: use the paintbrush icon in the top right corner to change the color.

::ComponentLoader{label="Preview" componentName="TextHighlightDemoColorsFromCssVariable" type="examples" id="text-highlight"}
::

With text color change.

::ComponentLoader{label="Preview" componentName="TextHighlightDemoTextColorChange" type="examples" id="text-highlight"}
::

## API

| Prop Name        | Type     | Default   | Description                                                                |
| ---------------- | -------- | --------- | -------------------------------------------------------------------------- |
| `delay`          | `number` | `0`       | Delay before the animation starts, in `ms`.                                |
| `duration`       | `number` | `2000`    | Duration of the animation, in `ms`.                                        |
| `text-end-color` | `string` | `inherit` | Color of the text at the end of the animation. Match WCAG recommendations. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="TextHighlight.vue" language="vue" componentName="TextHighlight" type="ui" id="text-highlight"}
::

## Credits

- Inspired by [Aceternity UI](https://ui.aceternity.com/components/hero-highlight)
- Credits to [Nathan De Pachtere](https://nathandepachtere.com) for porting this component.


---
title: Text Hover Effect
description: A text hover effect that animates and outlines gradient on hover, as seen on x.ai
---

::ComponentLoader{label="Preview" componentName="TextHoverEffectDemo" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name     | Type     | Default  | Description                                               |
| ------------- | -------- | -------- | --------------------------------------------------------- |
| `text`        | `string` | Required | The text to be displayed with the hover effect.           |
| `duration`    | `number` | `200`    | The duration of the mask transition animation in seconds. |
| `strokeWidth` | `number` | `0.75`   | The width of the text stroke.                             |
| `opacity`     | `number` | `null`   | The opacity of the text.                                  |

## Component Code

You can copy and paste the following code to create these components:

::CodeViewer{filename="TextHoverEffect.vue" language="vue" componentName="TextHoverEffect" type="ui" id="text-hover-effect"}
::


---
title: Text Reveal Card
description: Mousemove effect to reveal text content at the bottom of the card.
---

::ComponentLoader{label="Preview" componentName="TextRevealDemo" type="examples"}
::

## API

| Prop Name  | Type     | Description                                                      |
| ---------- | -------- | ---------------------------------------------------------------- |
| class      | `String` | Additional classes to be added to the card.                      |
| starsCount | `Number` | Control the number of stars that are generated                   |
| starsClass | `String` | Additional classes to be added to the stars floating on content. |

| Slot Name  | Description                                             |
| ---------- | ------------------------------------------------------- |
| header     | `String`                                                |
| text       | Display default text when the card is not hovered over. |
| revealText | Text to be revealed when hovered over the card.         |

## Component Code

You can copy and paste the following code to create these components:

::code-group

    ::CodeViewerTab{label="TextRevealCard.vue" language="vue" componentName="TextRevealCard" type="ui" id="text-reveal-card"}
    ::
    ::CodeViewerTab{label="TextRevealStars.vue" language="vue" componentName="TextRevealStars" type="ui" id="text-reveal-card"}
    ::

::

## Credits

- Credits to [M Atif](https://github.com/atif0075) for porting this component.

- Ported from [Aceternity UI's Text Reveal Card](https://ui.aceternity.com/components/text-reveal-card).


---
title: Text Scroll Reveal
description: A component that reveals text word by word as you scroll, with customizable text and styling.
---

::ComponentLoader{label="Preview" componentName="TextScrollRevealDemo" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## API

| Prop Name | Type     | Default | Description                                                         |
| --------- | -------- | ------- | ------------------------------------------------------------------- |
| `text`    | `string` | N/A     | The text content to display and reveal word by word during scroll.  |
| `class`   | `string` | `""`    | Additional CSS classes to apply to the component for customization. |

## Component Code

You can copy and paste the following code to create this component:

::code-group
::CodeViewerTab{label="TextScrollReveal.vue" language="vue" componentName="TextScrollReveal" type="ui" id="text-scroll-reveal"}
::

::CodeViewerTab{label="ScrollWord.vue" language="vue" componentName="ScrollWord" type="ui" id="text-scroll-reveal"}
::

::

## Features

- **Scroll-Activated Text Reveal**: The component reveals the provided text word by word as the user scrolls, creating an engaging visual effect.

- **Customizable Text Content**: Set the `text` prop to display any text content you wish to reveal during scroll.

- **Smooth Animations**: Each word's opacity transitions smoothly based on scroll position, providing a visually appealing experience.

- **Styling Flexibility**: Use the `class` prop to pass additional CSS classes for custom styling.

- **Reactive Design**: The component uses Vue's reactivity system to update the scroll progress and word visibility in real-time.

## Credits

- Ported from [Magic UI Text Reveal](https://magicui.design/docs/components/text-reveal).


---
title: 3D Carousel
description: A dynamic and interactive 3D carousel component using Three.js and Motion-V, allowing smooth infinite rotation and user-controlled interactions.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="Carousel3dDemo" type="examples" id="carousel-3d"}
::

## API

| Prop Name        | Type        | Default | Description                                                 |
| ---------------- | ----------- | ------- | ----------------------------------------------------------- |
| `items`          | `unknown[]` | `[]`    | List of images or elements to be displayed in the carousel. |
| `class`          | `string`    | `""`    | Additional CSS classes for styling the carousel overlay.    |
| `containerClass` | `string`    | `""`    | CSS classes for styling the carousel container.             |
| `width`          | `number`    | `450`   | Width of individual carousel items.                         |
| `height`         | `number`    | `600`   | Height of individual carousel items.                        |

## Component Code

You can copy and paste the following code to create this component:

::code-group

    ::CodeViewerTab{label="Carousel3D.vue" language="vue" componentName="Carousel3D" type="ui" id="carousel-3d"}
    ::

::

## Features

- **3D Rotating Carousel**: Displays a rotating 3D carousel using Three.js.
- **Smooth Infinite Rotation**: The carousel continuously rotates smoothly.
- **User Interaction Support**: Supports mouse and touch interactions to manually rotate the carousel.
- **Fully Responsive**: Adapts to different screen sizes dynamically.
- **Performance Optimized**: Utilizes Motion-V for smooth animations and easing functions.
- **Dynamic Item Rendering**: Accepts an array of items to render in the carousel dynamically.
- **Dark Mode Support**: Adaptable to dark and light themes for better UI consistency.

## Credits

- Built using Three.js for 3D rendering.
- Utilizes Motion-V for seamless animations.
- Thanks [@safakdinc](https://github.com/safakdinc) for sharing this component.


---
title: File Tree
description: A component used to showcase the folder and file structure of a directory.
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="FileTreeDemo" type="examples"}
::

## API

::steps

### `Tree`

The `Tree` component serves as a container for displaying a hierarchical file/folder structure.

#### Props

| Prop Name              | Type                | Default                | Description                                        |
| ---------------------- | ------------------- | ---------------------- | -------------------------------------------------- |
| `class`                | `string`            | -                      | Additional classes for styling the tree container. |
| `initialSelectedId`    | `string`            | -                      | ID of the initially selected item.                 |
| `indicator`            | `boolean`           | `true`                 | Whether to show the tree indicator line.           |
| `elements`             | `TreeViewElement[]` | -                      | Array of tree elements to display.                 |
| `initialExpandedItems` | `string[]`          | -                      | Array of IDs of initially expanded folders.        |
| `openIcon`             | `string`            | `"lucide:folder-open"` | Icon to show for open folders.                     |
| `closeIcon`            | `string`            | `"lucide:folder"`      | Icon to show for closed folders.                   |
| `fileIcon`             | `string`            | `"lucide:file"`        | Icon to show for files.                            |
| `direction`            | `"rtl" \| "ltr"`    | `"ltr"`                | Text direction of the tree.                        |

#### Usage

```vue [MyComponent.vue]
<Tree initialSelectedId="1" :initial-expanded-items="['1', '2']" :elements="ELEMENTS">
  <!-- Your structure here -->
</Tree>
```

### `Folder` and `File`

The `Folder` and `File` components represent folders and files in the file tree. Folders can contain other `Folder` and `File` components.

#### Props

| Prop Name      | Type      | Default | Description                             |
| -------------- | --------- | ------- | --------------------------------------- |
| `class`        | `string`  | -       | Additional classes for custom styling.  |
| `id`           | `string`  | -       | Unique identifier for the item.         |
| `name`         | `string`  | -       | Display name of the folder/file.        |
| `isSelectable` | `boolean` | `true`  | Whether the item can be selected.       |
| `isSelect`     | `boolean` | `false` | Whether the item is currently selected. |

#### Usage

```vue [MyComponent.vue]
<Folder id="1" name="root">
  <Folder id="2" name="components">
    <File id="3" name="Button.vue" />
    <File id="4" name="Card.vue" />
  </Folder>
</Folder>
```

::

## Component Code

You can copy and paste the following code to create these components:

::code-group
::CodeViewerTab{label="Tree.vue" icon="vscode-icons:file-type-vue" componentName="Tree" type="ui" id="file-tree"}
::

::CodeViewerTab{label="Folder.vue" icon="vscode-icons:file-type-vue" componentName="Folder" type="ui" id="file-tree"}
::

::CodeViewerTab{label="File.vue" icon="vscode-icons:file-type-vue" componentName="File" type="ui" id="file-tree"}
::

::CodeViewerTab{label="TreeIndicator.vue" icon="vscode-icons:file-type-vue" componentName="TreeIndicator" type="ui" id="file-tree"}
::

```ts [index.ts]
import type { HTMLAttributes } from "vue";

export interface TreeProps {
  class?: HTMLAttributes["class"];
  initialSelectedId: string;
  indicator?: boolean;
  elements: TreeViewElement[];
  initialExpandedItems: string[];
  openIcon?: string;
  closeIcon?: string;
  fileIcon?: string;
  direction?: "rtl" | "ltr";
}

export interface TreeContextProps {
  selectedId: Ref<string | undefined>;
  expandedItems: Ref<string[] | undefined>;
  indicator: boolean;
  openIcon: string;
  closeIcon: string;
  fileIcon: string;
  direction: "rtl" | "ltr";
  handleExpand: (id: string) => void;
  selectItem: (id: string) => void;
  setExpandedItems: (items: string[] | undefined) => void;
}

export interface TreeViewElement {
  id: string;
  name: string;
  isSelectable?: boolean;
  children?: TreeViewElement[];
}

export interface BaseItemProps {
  class?: HTMLAttributes["class"];
  id: string;
  name: string;
  isSelectable?: boolean;
  isSelect?: boolean;
}

export interface FolderProps extends BaseItemProps {}

export interface FileProps extends BaseItemProps {}

export const TREE_CONTEXT_SYMBOL = Symbol("TREE_CONTEXT_SYMBOL");

export { default as Tree } from "./Tree.vue";
export { default as Folder } from "./Folder.vue";
export { default as File } from "./File.vue";
```

::

## Credits

- Inspired by [Magic UI](https://magicui.design/docs/components/file-tree).
- Credit to [kalix127](https://github.com/kalix127) for porting this component.


---
title: Github Globe
description: A 3D interactive globe visualization with customizable arcs, points, and animation options inspired from Github.
---

::ComponentLoader{label="Preview" componentName="GithubGlobeDemo" type="examples" id="globe"}
::

::alert{type="info"}
**Note:** This component uses Three.js & requires `three`, `three-globe` & `postprocessing` npm package as a dependency.

Please install Three.js using following commands.

    ::code-group

    ```bash [npm]
    npm install three postprocessing three-globe
    npm install -D @types/three
    ```

    ```bash [pnpm]
    pnpm install three postprocessing three-globe
    pnpm install -D @types/three
    ```

    ```bash [bun]
    bun add three postprocessing three-globe
    bun add -d @types/three
    ```

    ```bash [yarn]
    yarn add three postprocessing three-globe
    yarn add --dev @types/three
    ```
    ::

::

::alert{type="warning"}
**For Nuxt users**:

Use `<ClientOnly>` tag to wrap this component to avoid `window is not defined` error.
::

## API

| Prop Name     | Type         | Default | Description                                                                                |
| ------------- | ------------ | ------- | --------------------------------------------------------------------------------------------------- |
| `globeConfig` | `object`     | `{}`    | Configuration options for the globe, including colors, atmosphere, rotation speed, and lighting.    |
| `data`        | `Position[]` | `[]`    | Array of positions representing arcs and points on the globe, with latitude, longitude, color, etc. |
| `class`       | `string`     | `""`    | Additional CSS classes for custom styling.                                                          |

### `globeConfig` Properties

| Property             | Type      | Default                 | Description                                              |
| -------------------- | --------- | ----------------------- | -------------------------------------------------------- |
| `pointSize`          | `number`  | `1`                     | Size of individual points on the globe.                  |
| `globeColor`         | `string`  | `"#1d072e"`             | Color of the globe surface.                              |
| `showAtmosphere`     | `boolean` | `true`                  | Whether to display atmosphere around the globe.          |
| `atmosphereColor`    | `string`  | `"#ffffff"`             | Color of the atmosphere around the globe.                |
| `atmosphereAltitude` | `number`  | `0.1`                   | Altitude of the atmosphere layer.                        |
| `emissive`           | `string`  | `"#000000"`             | Emissive color for the globe material.                   |
| `emissiveIntensity`  | `number`  | `0.1`                   | Intensity of the emissive color.                         |
| `shininess`          | `number`  | `0.9`                   | Shininess of the globe material.                         |
| `polygonColor`       | `string`  | `rgba(255,255,255,0.7)` | Color of polygon boundaries on the globe.                |
| `arcTime`            | `number`  | `2000`                  | Duration for arcs animation.                             |
| `arcLength`          | `number`  | `0.9`                   | Length of arcs on the globe.                             |
| `rings`              | `number`  | `1`                     | Number of rings to display per point.                    |
| `maxRings`           | `number`  | `3`                     | Maximum rings around each point.                         |
| `initialPosition`    | `object`  | `{ lat: 0, lng: 0 }`    | Initial latitude and longitude for the globe's position. |
| `autoRotate`         | `boolean` | `false`                 | Automatically rotate the globe.                          |
| `autoRotateSpeed`    | `number`  | `0.8`                   | Speed of auto-rotation when enabled.                     |

### `data` Structure (Position)

| Field      | Type     | Description                                     |
| ---------- | -------- | ----------------------------------------------- |
| `order`    | `number` | Order of the point or arc for sequencing.       |
| `startLat` | `number` | Starting latitude for an arc.                   |
| `startLng` | `number` | Starting longitude for an arc.                  |
| `endLat`   | `number` | Ending latitude for an arc.                     |
| `endLng`   | `number` | Ending longitude for an arc.                    |
| `arcAlt`   | `number` | Altitude of the arc (determines arc height).    |
| `color`    | `string` | Color of the arc or point in hex or RGB format. |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="GithubGlobe.vue" language="vue" componentName="GithubGlobe" type="ui" id="github-globe"}
::

## Features

- **3D Interactive Globe**: A Three.js-based globe with interactive controls and orbit support.
- **Customizable Globe & Atmosphere**: Allows configuration of globe color, atmosphere visibility, and colors.
- **Arcs & Points Visualization**: Display arcs and points on the globe, simulating connections and locations.
- **Auto-Rotate and Zoom**: Supports auto-rotation, zoom, and customizable controls for a dynamic experience.
- **Responsive Design**: Adapts to container size and maintains performance with WebGL rendering.

## Credits

- Built with Three.js and Three Globe libraries, designed for global data visualizations and dynamic effects.
- Ported from [Aceternity UI](https://ui.aceternity.com/components/github-globe).


---
title: Globe
description: An interactive rotating globe component.
---

::ComponentLoader{label="Preview" componentName="GlobeDemo" type="examples" id="globe"}
::

::alert
**Note:** This component requires `cobe` and `vue-use-spring` as a dependency. Please install these using following commands.

    ::code-group

    ```bash [npm]
    npm install cobe vue-use-spring
    ```

    ```bash [pnpm]
    pnpm install cobe vue-use-spring
    ```

    ```bash [bun]
    bun add cobe vue-use-spring
    ```

    ```bash [yarn]
    yarn add cobe vue-use-spring
    ```
    ::

::

## API

| Prop Name   | Type          | Default | Description                                                                                |
| ----------- | ------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
| `class`     | `string`      | `""`    | Additional CSS classes for custom styling.                                                                  |
| `config`    | `COBEOptions` | N/A     | Configuration object for the globe, following **[COBE]**(https://cobe.vercel.app/docs/api) library options. |
| `mass`      | `number`      | `1`     | Mass parameter for the spring animation controlling rotation inertia.                                       |
| `tension`   | `number`      | `280`   | Tension parameter for the spring animation, affecting responsiveness.                                       |
| `friction`  | `number`      | `100`   | Friction parameter for the spring animation, affecting damping.                                             |
| `precision` | `number`      | `0.001` | Precision parameter for the spring animation calculations.                                                  |

## Component Code

You can copy and paste the following code to create this component:

::CodeViewer{filename="Globe.vue" language="vue" componentName="Globe" type="ui" id="globe"}
::

## Features

- **Interactive 3D Globe**: Provides an interactive 3D globe visualization that users can rotate with mouse or touch interactions.

- **Customizable Markers**: Display markers on the globe at specified locations with customizable sizes.

- **Smooth Animations**: Utilizes physics-based spring animations for smooth and responsive globe rotations.

- **Configurable Appearance**: Customize the globe's appearance and behavior through the `config` prop using COBE library options.

- **Responsive Design**: Automatically adjusts to different screen sizes and resolutions.

## Credits

- Built using the [cobe](https://github.com/shuding/cobe) library for WebGL globe visualization.

- Ported from [Magic UI](https://magicui.design/docs/components/globe).


---
title: Icon Cloud
description: An interactive 3D tag cloud component
navBadges:
  - value: New
    type: lime
---

::ComponentLoader{label="Preview" componentName="IconCloudDemo" type="examples"}
::

## API

| Prop Name | Type     | Default | Description                                   |
| --------- | -------- | ------- | --------------------------------------------- |
| `class`   | `string` | -       | Additional classes for styling the component. |
| `images`  | `array`  | `[]`    | Array of image URLs to render in the cloud    |

## Component Code

You can copy and paste the following code to create this component:

::code-group

::CodeViewerTab{filename="IconCloud.vue" language="vue" componentName="IconCloud" type="ui" id="icon-cloud"}
::

::CodeViewerTab{filename="index.ts" language="typescript" componentName="index" type="ui" id="icon-cloud" extension="ts"}
::

::

## Credits

- Inspired by [MagicUI](https://magicui.design/docs/components/icon-cloud).
- Credits to [kalix127](https://github.com/kalix127) for porting this component.