极光背景

为您的网站提供一个微妙的极光或南极光背景。

API

Prop 名称	类型	默认值	描述
`class`	`string`	`-`	Additional CSS classes to apply to the component for styling.
`radialGradient`	`boolean`	`true`	Determines whether a radial gradient effect is applied to the background.

安装

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

@theme inline {
  --animate-aurora: aurora 60s linear infinite;
  @keyframes aurora {
    from {
      background-position:
        50% 50%,
        50% 50%;
    }
    to {
      background-position:
        350% 50%,
        350% 50%;
    }
  }
}

通过 CLI 安装

npm

pnpm

bun

yarn

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

手动安装

复制并粘贴以下代码：

AuroraBackground.vue

功能特性

支持插槽: 使用默认插槽轻松地在组件中添加任何内容。

感谢

Credits to Aceternity UI.
Credits to SivaReddy Uppathi for porting this component.

行为准则

行为准则概述了我们对参与者行为的期望以及不可接受行为的后果。

黑洞背景

A mesmerizing, canvas-driven background effect that simulates a warped “black-hole” tunnel with animated discs, radial lines, and particles.

本页

API
安装
通过 CLI 安装
手动安装
功能特性
感谢

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