内容与媒体

SpotlightTile

跟随指针取光的聚光卡片：1px 边框沿指针位置亮起一圈色调光并铺一层内部柔光，角落的大号淡水印图标悬停时漂移转正，带色调渐变的图标底板轻微倾斜、箭头朝右上轻推。色调可为任意 CSS 颜色；标题链接铺满整张卡片而内层按钮仍可点击，支持 asChild、徽标、标签、进入视口时错开上浮、平滑圆角与减少动态效果。

卡片聚光指针光效工具入口便当格链接卡片平滑圆角

快速预览

查看 SpotlightTile 组件的基本效果

New

ExpandableCard

从原位置连续放大为居中详情，封面带分层视差。

容器变形
视差
浮层

SmoothCorners

Figma / iOS 风格的平滑圆角。

MatrixEffect

点阵与 ASCII 字符画实时渲染。

基本用法

使用 SpotlightTile 组件的基础示例

导入组件

1import { SpotlightTile } from "@/components/qiuye-ui/spotlight-tile";
2import { Button } from "@/components/ui/button";
3import { LanguagesIcon } from "lucide-react";

使用组件

1<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
2  <SpotlightTile
3    index={0} // 网格中的序号，错开上浮淡入
4    tone="oklch(0.62 0.19 255)" // 任意 CSS 颜色
5    icon={<LanguagesIcon />}
6    badge="Beta"
7    title="字幕翻译"
8    description="批量翻译 SRT / ASS 字幕，保留时间轴与样式。"
9    chips={["SRT", "ASS", "双语"]}
10    href="/tools/translate" // 标题链接的点击区域铺满整张卡片
11    actions={
12      // 浮在卡片链接之上，可以单独点击
13      <Button size="sm" variant="outline" className="h-7 rounded-full px-3 text-xs">
14        快速开始
15      </Button>
16    }
17  />
18</div>

组件演示

查看组件的各种使用方式和效果

工具目录

指针移到卡片上，边框沿指针位置亮起色调光；标题链接的点击区域铺满整张卡片，「快速开始」按钮仍可单独点击。Tab 聚焦时整张卡片显示色调描边。

字幕翻译

批量翻译 SRT / ASS 字幕，保留时间轴、样式与双语排版。

SRT
ASS
双语

Beta

语音转写

从音视频中识别语音，生成带时间轴的字幕草稿。

Whisper
多语言

格式转换

在常见字幕格式之间互转，自动修正编码与换行。

字幕提取

从视频的内嵌轨道或画面中提取字幕。

批量重命名

按剧集规则让字幕与视频文件名一一对应。

正则
预览

Labs

实验功能

还在打磨中的小工具，欢迎试用并反馈。

预览版

任意色调

tone 接受任意 CSS 颜色，边框光、柔光、图标底板、水印、阴影与聚焦描边都由它派生。

Beta

智能校对

检查错别字、标点与时间轴重叠，一键修正。

校对
时间轴

tone="oklch(0.6 0.22 295)"

更多形态

整张卡片作为链接（asChild）、配合路由库的标题链接，以及不可点击的静态信息卡。

阅读文档

整张卡片就是一个链接，适合没有内层按钮的入口。

组件目录

用 SpotlightTileLink asChild 接入 next/link 等路由链接。

本周处理

不传链接时没有箭头，也不会上浮。

1,284条字幕