@horanf/begonia-theme

取一抹秋海棠红，绘几枝数字花开。

Vue 3 装饰性背景组件库 —— 流体渐变着色器 & 海棠花生成艺术。

灵感

• 配色 源自 中国色 · 秋海棠红 #ec2b24
• 花枝动画 受 antfu.me 生成艺术风格启发

特性

• 🎨 GLSL 流体渐变着色器，基于 Simplex 噪声的程序化色彩流动
• 🌺 Canvas 2D 递归生长的海棠花枝 —— 不对称花瓣、径向渐变、花蕊与叶片
• 🌓 深色 / 浅色主题自适应（深色偏绛红，浅色偏珊瑚粉）
• 🖱️ 轻微鼠标视差交互
• 📦 不依赖 Tailwind CSS 或 Pinia，完全独立

安装

本包发布在 GitHub Packages，需要先配置 registry。

1. 创建或编辑项目根目录的 .npmrc：

@horanf:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. 安装：

npm install @horanf/begonia-theme

使用

快速开始

<script setup lang="ts">
import { BegoniaTheme } from '@horanf/begonia-theme'
import '@horanf/begonia-theme/style.css'

const isDark = ref(false)
</script>

<template>
  <BegoniaTheme :is-dark="isDark" />
  <main>
    <!-- 你的页面内容 -->
  </main>
</template>

单独使用子组件

<script setup lang="ts">
import { ThreeBackground, BegoniaArt } from '@horanf/begonia-theme'
import '@horanf/begonia-theme/style.css'
</script>

<template>
  <!-- 仅流体渐变 -->
  <ThreeBackground :is-dark="isDark" />

  <!-- 仅海棠花枝 -->
  <BegoniaArt :is-dark="isDark" />
</template>

组件

| 组件 | 说明 | |------|------| | BegoniaTheme | 组合容器，同时渲染渐变背景与海棠花枝 | | ThreeBackground | Three.js GLSL 流体渐变着色器，程序化噪声 + 鼠标视差 | | BegoniaArt | Canvas 2D 递归海棠花枝 —— 花瓣、花蕊、叶片、曲线枝干 |

Props

所有组件接受相同的 prop：

| Prop | 类型 | 必填 | 说明 | |------|------|------|------| | isDark | boolean | 是 | 当前是否为深色主题 |

Peer Dependencies

{
  "vue": ">=3.3.0",
  "three": ">=0.150.0"
}

License

MIT © horanf