加载中…
创作者 · MotionSites
查看原始来源 ↗
Prompt
为 React + Vite + Tailwind CSS 项目构建一个“CTA + 页脚”区块组件。这是一个具有电影质感的全宽行动号召区块，包含 HLS 视频背景、居中文本、两个 CTA 按钮，以及底部的极简页脚栏。黑色背景、白色文本、液态玻璃拟态效果。
---
### 字体（在 index.css 或 HTML head 中导入）
```
https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap
```
- 标题：`Instrument Serif` 斜体——Tailwind 类 `font-heading`
- 正文：`Barlow`——Tailwind 类 `font-body`
在 `tailwind.config.ts` 的 `theme.extend.fontFamily` 下添加：
```js
heading: ["'Instrument Serif'", "serif"],
body: ["'Barlow'", "sans-serif"],
```
`index.css` 中的基础样式：
```css
body {
font-family: 'Barlow', sans-serif;
background: #000;
color: #fff;
}
h1, h2, h3 {
font-family: 'Instrument Serif', serif;
}
```
---
### 液态玻璃 CSS（添加到 index.css 的 `@layer components` 内）
```css
@layer components {
.liquid-glass-strong {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border: none;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05),
inset 0 1px 1px rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.liquid-glass-strong::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0.2) 80%,
rgba(255, 255, 255, 0.5) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
}
```
`::before` 伪元素使用 mask-composite 技巧渲染一条纤细的发光渐变边框，并在每条边的中间逐渐淡出。
---
### 依赖项
```
npm install lucide-react hls.js
```
- 来自 `lucide-react` 的 `ArrowUpRight` 图标
- 用于流式播放 Mux HLS 视频的 `hls.js`
---
### HLS 视频 URL（Mux）
```
https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8
```
这是一个 HLS 流，在非 Safari 浏览器中需要使用 `hls.js` 播放。Safari 通过 `<video>` 原生支持 HLS。
---
### 完整组件代码
```tsx
import { useEffect, useRef } from "react";
import { ArrowUpRight } from "lucide-react";
import Hls from "hls.js";
const CtaFooter = () => {
const videoRef = useRef<HTMLVideoElement>(null);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const src = "https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8";
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(src);
hls.attachMedia(video);
return () => hls.destroy();
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = src;
}
}, []);
return (
<section className="relative py-32 px-6 md:px-16 lg:px-24 text-center overflow-hidden">
{/* HLS 视频背景 */}
<video
ref={videoRef}
autoPlay
loop
muted
playsInline
className="absolute inset-0 w-full h-full object-cover z-0"
/>
{/* 顶部淡出 */}
<div
className="absolute top-0 left-0 right-0 z-[1] pointer-events-none"
style={{ height: '200px', background: 'linear-gradient(to bottom, black, transparent)' }}
/>
{/* 底部淡出 */}
<div
className="absolute bottom-0 left-0 right-0 z-[1] pointer-events-none"
style={{ height: '200px', background: 'linear-gradient(to top, black, transparent)' }}
/>
{/* 内容 */}
<div className="relative z-10">
<h2 className="text-5xl md:text-6xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.85] max-w-3xl mx-auto mb-4">
你的下一个网站，从这里开始。
</h2>
<p className="text-white/60 font-body font-light text-sm md:text-base max-w-xl mx-auto mb-8">
预约一次免费策略通话。看看 AI‑驱动的设计能带来什么。无需承诺，没有压力。只有无限可能。
</p>
<div className="flex items-center justify-center gap-6">
<button className="liquid-glass-strong rounded-full px-6 py-3 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-all font-body">
预约通话
<ArrowUpRight className="h-5 w-5" />
</button>
<button className="bg-white text-black rounded-full px-6 py-3 text-sm font-medium flex items-center gap-2 hover:bg-white/90 transition-colors font-body">
查看价格
<ArrowUpRight className="h-4 w-4" />
</button>
</div>
{/* 页脚 */}
<div className="mt-32 pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4">
<p className="text-white/40 font-body font-light text-xs">
© 2026 Studio。保留所有权利。
</p>
<div className="flex items-center gap-6">
{["隐私", "条款", "联系"].map((link) => (
<a key={link} href="#" className="text-white/40 hover:text-white/70 font-body font-light text-xs transition-colors">
{link}
</a>
))}
</div>
</div>
</div>
</section>
);
};
export default CtaFooter;
```
---
### 区块结构拆解
```
<section> (relative, py-32, px-6 md:px-16 lg:px-24, text-center, overflow-hidden)
|
+-- <video> (absolute inset-0, full cover, z-0, autoPlay loop muted playsInline)
|
+-- 顶部渐变淡出 (absolute top-0, 高 200px, black->transparent, z-[1])
+-- 底部渐变淡出 (absolute bottom-0, 高 200px, transparent<-black, z-[1])
|
+-- 内容容器 (relative z-10)
|
+-- <h2> 标题
+-- <p> 副文案
+-- 按钮行 (flex, 居中, gap-6)
| +-- "预约通话" (liquid-glass-strong, rounded-full)
| +-- "查看价格" (bg-white text-black, rounded-full)
|
+-- 页脚栏 (mt-32, border-t border-white/10)
+-- 版权信息（左侧）
+-- 链接：隐私、条款、联系（右侧）
```
---
### HLS 视频设置模式
`useEffect` hook 为非 Safari 浏览器初始化 `hls.js`，并为 Safari 回退到原生 HLS：
1. 检查 `Hls.isSupported()`——如果为 true，则创建一个 `Hls` 实例，加载 `.m3u8` 源，并将其附加到 `<video>` 元素
2. 如果不支持，但浏览器可以播放 `application/vnd.apple.mpegurl`（Safari），则直接设置 `video.src`
3. 清理：卸载时调用 `hls.destroy()`
`<video>` 元素使用 `autoPlay loop muted playsInline`——要使自动播放在各浏览器（尤其是移动端）中正常工作，这四个属性缺一不可。
---
### 视频叠层淡出模式
两个绝对定位的 `<div>` 元素在顶部和底部边缘创建黑色渐变淡出，使视频与周围的黑色背景无缝融合：
- **顶部淡出**：`height: 200px`、`background: linear-gradient(to bottom, black, transparent)`、`z-[1]`、`pointer-events-none`
- **底部淡出**：`height: 200px`、`background: linear-gradient(to top, black, transparent)`、`z-[1]`、`pointer-events-none`
内容位于 `z-10`，处在视频和两个淡出层之上。
---
### 响应式行为
| 断点 | 标题字号 | 内边距 | 页脚布局 |
|---|---|---|---|
| 移动端（默认） | `text-5xl` | `px-6` | 垂直堆叠（`flex-col`） |
| 平板端（`md:`） | `text-6xl` | `px-16` | 水平排列（`md:flex-row`） |
| 桌面端（`lg:`） | `text-7xl` | `px-24` | 水平排列 |
- 按钮行始终水平排列（`flex items-center justify-center gap-6`），如果视口非常窄，按钮会自然堆叠
- 页脚：`flex-col md:flex-row`——版权信息和链接在移动端堆叠，在平板端及以上并排显示
- 副文案限制为 `max-w-xl mx-auto`
- 标题限制为 `max-w-3xl mx-auto`
---
### 排版细节
| 元素 | 类 |
|---|---|
| 标题 | `text-5xl md:text-6xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.85] max-w-3xl mx-auto mb-4` |
| 副文案 | `text-white/60 font-body font-light text-sm md:text-base max-w-xl mx-auto mb-8` |
| 玻璃按钮文本 | `text-sm font-medium text-white font-body` |
| 实心按钮文本 | `text-sm font-medium`（继承 `bg-white text-black` 中的 `text-black`） |
| 版权信息 | `text-white/40 font-body font-light text-xs` |
| 页脚链接 | `text-white/40 hover:text-white/70 font-body font-light text-xs transition-colors` |
---
### 按钮细节
**主要 CTA（“预约通话”）：**
`liquid-glass-strong rounded-full px-6 py-3 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-all font-body`
- 通过 `::before` 实现带渐变边框的玻璃背景
- `ArrowUpRight` 图标尺寸为 `h-5 w-5`
**次要 CTA（“查看价格”）：**
`bg-white text-black rounded-full px-6 py-3 text-sm font-medium flex items-center gap-2 hover:bg-white/90 transition-colors font-body`
- 纯白背景、黑色文本
- `ArrowUpRight` 图标尺寸为 `h-4 w-4`（比主要按钮稍小）
---
### 准确文本内容
**标题**：“你的下一个网站，从这里开始。”
**副文案**：“预约一次免费策略通话。看看 AI-powered 设计能带来什么。无需承诺，没有压力。只有无限可能。”
**按钮 1**：“预约通话”
**按钮 2**：“查看价格”
**版权信息**：“(c) 2026 Studio。保留所有权利。”
**页脚链接**：“隐私”、“条款”、“联系”
---
### 父级上下文
此区块位于一个 `bg-black` 父容器中，是页面的最后一个区块。顶部渐变淡出让视频融入上方区块（其背景同样为黑色）。页脚栏属于同一个组件——不存在单独的页脚组件。适用模型与稳定度
建议模型
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…
提示语
首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。 将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。 在浏览器中创建一个细节极其丰富的实时 {argument nam