彩光边框

An animated border effect.

This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.

Installation

Add following entry to inline theme in your main.css file.

@theme inline {
  --animate-glow: glow var(--duration) infinite linear;
  @keyframes glow {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    to {
      background-position: 0% 0%;
    }
  }
}

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/glow-border.json"

手动安装

复制并粘贴以下代码：

GlowBorder.vue

API

Prop 名称	类型	默认值	描述
`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.

感谢

Credits to Magic UI for this fantastic component.

五彩纸屑

一个五彩纸屑动画的Vue组件。

光效

A dynamic proximity-based glow effect that reacts to mouse movements and scroll events, perfect for highlighting interactive elements.

本页

Installation
通过 CLI 安装
手动安装
API
感谢

GitHub 收藏创建问题加入 Discord 社区关注 X 关注 Bluesky