Effect Web Components

基于 Lit + Tailwind CSS 构建的 Web Components 组件库。

开发

pnpm install
pnpm run dev        # 启动开发服务，预览组件
pnpm run build      # 构建预览页面
pnpm run build:lib  # 构建组件库
pnpm run lint       # ESLint 检查
pnpm run lint:fix   # ESLint 自动修复
pnpm run typecheck  # TypeScript 类型检查

组件

AnimateShimmer

文字闪光动画组件，基于 CSS background-clip: text + background-position 动画实现，一道高光从左到右（或右到左）扫过文字。纯 CSS 动画，无需 JS 驱动。

<animate-shimmer
  content="闪光文字"
  duration="2"
  color="#a1a1aa"
  shimmer-color="#000"
></animate-shimmer>

Props

| Prop | Attribute | Type | Default | 说明 | |------|-----------|------|---------|------| | content | content | string | '' | 显示的文字 | | duration | duration | number | 2 | 动画周期（秒） | | spread | spread | number | 2 | 闪光宽度系数（px/字符） | | direction | direction | 'left'\|'right' | 'left' | 闪光方向 | | color | color | string | '#a1a1aa' | 文字基础颜色 | | shimmerColor | shimmer-color | string | '#000' | 闪光高亮颜色 | | extraClass | class-name | string | '' | 附加 CSS 类名 |

使用示例

向左闪光（默认）：

<animate-shimmer content="闪光文字效果" shimmer-color="#000"></animate-shimmer>

向右闪光：

<animate-shimmer content="向右闪光" direction="right" color="#a5b4fc" shimmer-color="#4f46e5"></animate-shimmer>

自定义速度和样式：

<animate-shimmer content="快速闪光" duration="1" spread="3" class-name="text-2xl font-bold"></animate-shimmer>

ScrollTextMarquee

滚动文字跑马灯组件，基于 requestAnimationFrame 驱动，支持速度控制、方向切换、页面滚动联动和延迟启动。

<scroll-text-marquee
  content="这是滚动的文字内容"
  base-velocity="-2"
  class-name="text-lg text-indigo-600"
  scroll-dependent
  delay="1000"
></scroll-text-marquee>

Props

| Prop | Attribute | Type | Default | 说明 | |------|-----------|------|---------|------| | content | content | string | '' | 滚动显示的文本内容 | | baseVelocity | base-velocity | number | -2 | 基础速度。负值向左滚动，正值向右滚动，绝对值越大越快 | | extraClass | class-name | string | '' | 附加到每段文本上的 CSS 类名，用于自定义样式 | | scrollDependent | scroll-dependent | boolean | false | 开启后滚动速度会跟随页面滚动变化 | | delay | delay | number | 0 | 动画启动延迟，单位毫秒 |

使用示例

基础用法：

<scroll-text-marquee content="欢迎使用 Effect 组件库"></scroll-text-marquee>

向右滚动：

<scroll-text-marquee content="向右滚动的文字" base-velocity="3"></scroll-text-marquee>

滚动联动：

<scroll-text-marquee content="跟随页面滚动" base-velocity="-1" scroll-dependent></scroll-text-marquee>

延迟启动：

<scroll-text-marquee content="2 秒后开始滚动" delay="2000"></scroll-text-marquee>

BlurVignette

边缘模糊晕影效果组件，使用 backdrop-filter + CSS mask 实现，只模糊容器边缘区域，中心保持清晰。适用于图片、视频等媒体内容的装饰效果。

<blur-vignette radius="16px" inset="20px" transition-length="80px" blur="10px">
  <img src="image.jpg" alt="demo" />
</blur-vignette>

Props

| Prop | Attribute | Type | Default | 说明 | |------|-----------|------|---------|------| | radius | radius | string | '24px' | 容器和晕影遮罩的圆角 | | inset | inset | string | '20px' | 模糊区域距边缘的内缩距离，值越大中心清晰区域越小 | | transitionLength | transition-length | string | '44px' | 模糊到清晰的渐变过渡长度，值越大过渡越柔和 | | blurAmount | blur | string | '6px' | 模糊强度 |

Slots

| Slot | 说明 | |------|------| | 默认 | 放置图片、视频等主内容 | | overlay | 叠加在模糊层上方的内容（如文字、按钮） |

使用示例

图片晕影：

<blur-vignette radius="16px" inset="20px" transition-length="80px" blur="10px">
  <img src="photo.jpg" alt="photo" />
</blur-vignette>

带文字叠加：

<blur-vignette radius="15px" inset="100px" transition-length="200px" blur="15px">
  <img src="photo.jpg" alt="photo" />
  <div slot="overlay" style="padding: 1rem; color: white;">
    <h2>标题</h2>
    <p>描述文字</p>
  </div>
</blur-vignette>

PenFlow

手写笔触动画组件，基于 Canvas 2D 和 typr.js 字体轮廓解析，逐字描绘出手写效果。支持自定义字体、速度、颜色和自动循环播放。

<pen-flow text="hello world" font-url="/fonts/BrittanySignature.ttf" size="84" color="#1e293b"></pen-flow>

Props

| Prop | Attribute | Type | Default | 说明 | |------|-----------|------|---------|------| | text | text | string | '' | 要动画显示的文本 | | fontUrl | font-url | string | '' | 字体文件 URL（.ttf / .otf） | | size | size | number | 84 | 字体大小（px） | | color | color | string | '#0f1117' | 描边颜色 | | speed | speed | number | 1 | 动画速度倍率，值越大越快 | | lineHeightRatio | line-height | number | 1.32 | 行高倍率 | | enableAnimate | animate | boolean | true | 是否开启动画，关闭则直接显示完整文字 | | autoReplay | auto-replay | boolean | false | 是否自动循环播放 | | replayDelay | replay-delay | number | 600 | 自动循环时每轮结束后的等待间隔（ms） | | seed | seed | number | 0 | 随机种子，相同种子产生相同的笔触变化 |

Methods

| 方法 | 说明 | |------|------| | play() | 从暂停处继续播放动画 | | stop() | 暂停动画，停在当前帧 | | replay() | 重新从头播放动画 |

使用示例

基础用法：

<pen-flow text="hello world" font-url="/fonts/BrittanySignature.ttf"></pen-flow>

自动循环 + 自定义间隔：

<pen-flow text="Effect" font-url="/fonts/BrittanySignature.ttf" color="#6366f1" auto-replay replay-delay="1000"></pen-flow>

手动控制播放：

<pen-flow id="pen" text="hello" font-url="/fonts/BrittanySignature.ttf"></pen-flow>
<button onclick="document.getElementById('pen').play()">播放</button>
<button onclick="document.getElementById('pen').stop()">停止</button>
<button onclick="document.getElementById('pen').replay()">重新播放</button>

ShineBorder

发光边框效果组件，使用 CSS mask-composite: exclude + radial-gradient 实现光效沿边框旋转流动。纯 CSS 动画，支持多色渐变。

<shine-border border-radius="12" border-width="2" duration="10" color="#000000">
  <div>内容</div>
</shine-border>

Props

| Prop | Attribute | Type | Default | 说明 | |------|-----------|------|---------|------| | borderRadius | border-radius | number | 8 | 边框圆角（px） | | borderWidth | border-width | number | 1 | 发光边框宽度（px） | | duration | duration | number | 14 | 动画周期（秒） | | color | color | string | '#000000' | 发光颜色，支持逗号分隔多色 | | extraClass | class-name | string | '' | 附加 CSS 类名 |

Slots

| Slot | 说明 | |------|------| | 默认 | 放置任意子内容 |

使用示例

单色发光：

<shine-border border-radius="12" border-width="2" color="#000000">
  <div>Shine Border</div>
</shine-border>

多色渐变：

<shine-border border-radius="12" border-width="2" color="#FF007F,#39FF14,#00FFFF">
  <div>多色发光边框</div>
</shine-border>

自定义动画速度：

<shine-border duration="6" border-width="3" color="#6366f1">
  <div>快速发光</div>
</shine-border>

Spinner

加载旋转器组件，12 根条状元素呈圆形排列，通过逐个淡入淡出的 CSS 动画实现旋转加载效果。纯 CSS 动画，无需 JS 驱动。

<effect-spinner size="24" color="currentColor" duration="1.3"></effect-spinner>

Props

| Prop | Attribute | Type | Default | 说明 | |------|-----------|------|---------|------| | size | size | number | 24 | 尺寸（px） | | color | color | string | 'currentColor' | 条状元素颜色 | | duration | duration | number | 1.3 | 动画周期（秒） |

使用示例

基础用法：

<effect-spinner></effect-spinner>

自定义颜色和尺寸：

<effect-spinner size="48" color="#6366f1"></effect-spinner>

自定义动画速度：

<effect-spinner size="36" color="#ef4444" duration="2.5"></effect-spinner>