API

安装

npm install agent-aura

import { aura } from 'agent-aura'

aura.glow('#hero')
aura.border('#card')
aura.fire('#card')
aura.burning('#agent')
aura.shape('#avatar')
aura.water('#stream')
aura.cultivation('#dao')
aura.demonic('#mo')
aura.thunder('#jie')
aura.void('#hole')
aura.glitch('#crash')

CDN：https://unpkg.com/agent-aura/build/agent-aura.min.js，全局 AgentAura。包是 ESM，没有 CJS。glow / border / fire / burning / thunder / shape / water / cultivation / demonic / void / glitch 需要 WebGL2。

aura

aura.glow(target, options?: GlowOptions): Glow
aura.border(target, options?: AttachOptions<MotionBorderOptions>): MotionBorder
aura.fire(target, options?: AttachOptions<FireBorderOptions>): FireBorder
aura.burning(target, options?: AttachOptions<BurningFireOptions>): BurningFire
aura.shape(target, options?: AttachOptions<ShapeAuraOptions>): ShapeAura
aura.water(target, options?: AttachOptions<WaterAuraOptions>): WaterAura
aura.cultivation(target, options?: AttachOptions<CultivationAuraOptions>): CultivationAura
aura.demonic(target, options?: AttachOptions<DemonicAuraOptions>): DemonicAura
aura.thunder(target, options?: AttachOptions<ThunderAuraOptions>): ThunderAura
aura.void(target, options?: AttachOptions<VoidAuraOptions>): VoidAura
aura.glitch(target, options?: AttachOptions<GlitchAuraOptions>): GlitchAura

target 是选择器或 HTMLElement。等价于对应 class 的 attach()。找不到节点抛 agent-aura: target not found。

生命周期

const fx = aura.fire('#card')
fx.pause()
fx.start()
fx.dispose()

挂载

aura.border('#card', { container: '#stage' })
aura.fire('#card', { container: '#stage' })
aura.shape('#card', { container: '#stage' })
aura.void('#hole', { container: '#stage' })
aura.glitch('#crash', { container: '#stage' })

border / fire / burning / thunder / shape / water / cultivation / demonic / void / glitch 在 overflow / transform / 滚动容器里必须传 container。

aura.glow

流光遮罩。canvas 插在 target 里面。暗底用 mode: 'dark'。

aura.glow('#hero', {
  mode: 'dark',
  borderRadius: 16,
  borderWidth: 6,
  glowWidth: 140,
})

额外方法：resize、autoResize、fadeIn() / fadeOut()（300ms Promise）。内部约 32fps。没有 container。

aura.border

神经光场绕圆角边框流动。

aura.border('#neural-card', {
  container: '#neural-preview',
  glowPadding: 64,
  glowWidth: 90,
  borderWidth: 2,
  borderRadius: 22,
  speed: 1.2,
})

setTarget / setContainer 可热切换跟随节点。

aura.fire

火焰沿边框烧。内部强制无烟、无热浪。

aura.fire('#fire-card', {
  container: '#fire-preview',
  particleCount: 800,
})

aura.burning

大火 + 烟雾 + 背景热浪。

aura.burning('#burn-card', {
  container: '#burn-preview',
  particleCount: 1800,
  smokeCount: 300,
  glow: true,
})

笔记本建议把粒子降到 600–1000，烟 150–300。离屏 pause()。

aura.shape

形状感知 AI 光环。WebGL2 沿轮廓的有宽度 ribbon + 外层柔光 + 能量尘，自动跟随目标的 border-radius 和 clip-path。

const fx = aura.shape('#agent', {
  container: '#stage',
  offset: 5,
  auraWidth: 33,
  outerGlowWidth: 86,
  dustCount: 75,
  pathSamples: 500,
  speed: 1,
})

aura.water

形状感知液态水流。SVG 扰动滤镜 + 高光折射 + 水珠，自动跟随 border-radius 和 clip-path。

const fx = aura.water('#agent', {
  container: '#stage',
  offset: 7,
  fieldCount: 180,
  detailCount: 110,
  pathSamples: 420,
  speed: 1,
})

aura.cultivation

形状感知金色修仙灵气。WebGL2 沿轮廓流转的金光脉 + 仙雾粒子 + 灵子，自动跟随 border-radius 和 clip-path。

const fx = aura.cultivation('#agent', {
  container: '#stage',
  offset: 7,
  fieldCount: 180,
  detailCount: 110,
  pathSamples: 420,
  speed: 1,
})

aura.demonic

形状感知紫黑魔气。SVG 魔雾扰动 + 旋转魔气流 + 黑金高光 + 魔焰粒子 + 魔纹 + 裂隙 + 内层侵蚀，自动跟随 border-radius 和 clip-path。

const fx = aura.demonic('#agent', {
  container: '#stage',
  offset: 7,
  fieldCount: 180,
  detailCount: 110,
  pathSamples: 420,
  speed: 1,
})

aura.thunder

形状感知雷劫电弧。WebGL2 沿轮廓游走的雷霆边框 + 能量粒子 + 随机外放电弧，自动跟随 border-radius 和 clip-path。

const fx = aura.thunder('#agent', {
  container: '#stage',
  offset: 8,
  particleCount: 90,
  maxBranches: 16,
  branchInterval: 85,
})

aura.void

形状感知黑洞虚空。WebGL2 暗影光带 + 事件视界 + 紫白高光 + 虚空雾 + 星屑，自动跟随 border-radius 和 clip-path。

const fx = aura.void('#agent', {
  container: '#stage',
  offset: 6,
  shadowWidth: 78,
  horizonWidth: 30,
  highlightWidth: 12,
  mistCount: 190,
  sparkCount: 95,
})

aura.glitch

形状感知故障崩坏。WebGL2 RGB 错位 + 数字撕裂 + 边缘断层 + 方形数据碎片，自动跟随 border-radius 和 clip-path。

const fx = aura.glitch('#agent', {
  container: '#stage',
  offset: 5,
  outerWidth: 45,
  rgbWidth: 11,
  fragmentCount: 130,
})

框架

// React
useEffect(() => {
  const fx = aura.border(el)
  return () => fx.dispose()
}, [])

// Vue 3
onMounted(() => { fx = aura.fire(card.value) })
onBeforeUnmount(() => fx?.dispose())

class 导出：Glow、MotionBorder、FireBorder、 BurningFire、ShapeAura、WaterAura、CultivationAura、DemonicAura、ThunderAura、VoidAura、GlitchAura。推荐使用 aura.* 或 X.attach()。