海洋
安装
用法
import { VideoText } from "@/registry/magicui/video-text";<div className="relative h-[500px] w-full overflow-hidden">
<VideoText src="https://cdn.magicui.design/ocean-small.webm">OCEAN</VideoText>
</div>属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
src | string | 必填 | 视频源URL |
as | 元素类型 | "div" | 用于渲染文本的元素类型 |
children | ReactNode | 必填 | 要显示的内容（视频将“在”其中） |
className | string | "" | 容器的额外className |
autoPlay | 布尔值 | 是 | 是否自动播放视频 |
muted | 布尔值 | 是 | 是否静音视频 |
loop | 布尔值 | 是 | 是否循环播放视频 |
preload | "auto" | "metadata" | "none" | "auto" | 是否预加载视频 |
fontSize | 字符串 | 数字 | "120" | 文本遮罩的字体大小 |
fontWeight | 字符串 | 数字 | "bold" | 文本遮罩的字体粗细 |
textAnchor | string | "middle" | 文本遮罩的文本锚点 |
dominantBaseline | string | "middle" | 文本遮罩的主基线 |
fontFamily | string | "sans-serif" | 文本遮罩的字体系列 |