858 lines
36 KiB
HTML
858 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Vibe Motion — AI 动效革命深度解析</title>
|
||
<style>
|
||
/* ===== Reset & Base ===== */
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
:root {
|
||
--bg: #08090d;
|
||
--bg2: #0d0f15;
|
||
--surface: rgba(255,255,255,0.04);
|
||
--surface2: rgba(255,255,255,0.07);
|
||
--border: rgba(255,255,255,0.08);
|
||
--text: #e8e8ec;
|
||
--text2: rgba(255,255,255,0.55);
|
||
--accent: #00ff8c;
|
||
--accent2: #00ccff;
|
||
--purple: #a855f7;
|
||
--pink: #ff44aa;
|
||
--orange: #ff9500;
|
||
--glow: 0 0 60px rgba(0,255,140,0.15);
|
||
}
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.7;
|
||
overflow-x: hidden;
|
||
}
|
||
a { color: var(--accent); text-decoration: none; transition: opacity .2s; }
|
||
a:hover { opacity: .8; }
|
||
|
||
/* ===== Ambient Background ===== */
|
||
.ambient {
|
||
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||
background:
|
||
radial-gradient(ellipse 800px 600px at 20% 30%, rgba(0,255,140,0.04) 0%, transparent 70%),
|
||
radial-gradient(ellipse 600px 500px at 80% 60%, rgba(0,200,255,0.03) 0%, transparent 70%),
|
||
radial-gradient(ellipse 500px 400px at 50% 80%, rgba(168,85,247,0.03) 0%, transparent 70%);
|
||
}
|
||
.grid-bg {
|
||
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||
background-image:
|
||
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent);
|
||
}
|
||
|
||
/* ===== Layout ===== */
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
|
||
section { padding: 100px 0; }
|
||
|
||
/* ===== Hero ===== */
|
||
.hero {
|
||
min-height: 100vh; display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center; text-align: center;
|
||
position: relative;
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 6px 16px; border-radius: 100px;
|
||
background: rgba(0,255,140,0.08); border: 1px solid rgba(0,255,140,0.2);
|
||
font-size: 13px; color: var(--accent); letter-spacing: 2px;
|
||
text-transform: uppercase; margin-bottom: 32px;
|
||
animation: fadeInUp .8s ease both;
|
||
}
|
||
.hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
|
||
.hero h1 {
|
||
font-size: clamp(48px, 8vw, 96px); font-weight: 800;
|
||
letter-spacing: -3px; line-height: 1.05;
|
||
background: linear-gradient(135deg, #fff 0%, var(--accent) 50%, var(--accent2) 100%);
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
animation: fadeInUp .8s .1s ease both;
|
||
}
|
||
.hero p {
|
||
font-size: clamp(16px, 2vw, 22px); color: var(--text2);
|
||
max-width: 680px; margin: 24px auto 0;
|
||
animation: fadeInUp .8s .2s ease both;
|
||
}
|
||
.hero-cta {
|
||
display: flex; gap: 16px; margin-top: 48px;
|
||
animation: fadeInUp .8s .3s ease both;
|
||
}
|
||
.btn {
|
||
padding: 14px 32px; border-radius: 12px; font-size: 15px; font-weight: 600;
|
||
cursor: pointer; border: none; transition: all .3s;
|
||
}
|
||
.btn-primary {
|
||
background: var(--accent); color: #000;
|
||
box-shadow: 0 0 30px rgba(0,255,140,0.3);
|
||
}
|
||
.btn-primary:hover { box-shadow: 0 0 50px rgba(0,255,140,0.5); transform: translateY(-2px); }
|
||
.btn-ghost {
|
||
background: var(--surface2); color: var(--text);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.btn-ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
|
||
|
||
.scroll-hint {
|
||
position: absolute; bottom: 40px;
|
||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||
color: var(--text2); font-size: 12px; letter-spacing: 2px;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
.scroll-hint svg { width: 20px; height: 20px; stroke: var(--text2); }
|
||
|
||
/* ===== Section Headers ===== */
|
||
.section-tag {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
|
||
color: var(--accent); margin-bottom: 16px;
|
||
}
|
||
.section-tag::before { content: ''; width: 24px; height: 1px; background: var(--accent); }
|
||
.section-title {
|
||
font-size: clamp(32px, 4vw, 52px); font-weight: 800;
|
||
letter-spacing: -1.5px; margin-bottom: 16px;
|
||
}
|
||
.section-desc { color: var(--text2); font-size: 17px; max-width: 640px; margin-bottom: 48px; }
|
||
|
||
/* ===== Paradigm Shift Section ===== */
|
||
.paradigm-grid {
|
||
display: grid; grid-template-columns: 1fr 80px 1fr; gap: 24px; align-items: stretch;
|
||
}
|
||
.paradigm-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 20px; padding: 36px; position: relative; overflow: hidden;
|
||
}
|
||
.paradigm-card::before {
|
||
content: ''; position: absolute; inset: 0; opacity: 0;
|
||
transition: opacity .4s;
|
||
}
|
||
.paradigm-card:hover::before { opacity: 1; }
|
||
.paradigm-card.old::before { background: radial-gradient(circle at 50% 0, rgba(255,68,68,0.06), transparent 60%); }
|
||
.paradigm-card.new::before { background: radial-gradient(circle at 50% 0, rgba(0,255,140,0.08), transparent 60%); }
|
||
.paradigm-card h3 { font-size: 22px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
|
||
.paradigm-card ul { list-style: none; }
|
||
.paradigm-card li {
|
||
padding: 10px 0; border-bottom: 1px solid var(--border);
|
||
font-size: 14px; color: var(--text2); display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.paradigm-card li:last-child { border-bottom: none; }
|
||
.paradigm-card.old li::before { content: '✕'; color: #ff4444; font-size: 12px; font-weight: 700; }
|
||
.paradigm-card.new li::before { content: '✓'; color: var(--accent); font-size: 14px; font-weight: 700; }
|
||
.vs-divider {
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px; font-weight: 900; color: var(--text2);
|
||
background: var(--surface); border-radius: 50%;
|
||
width: 56px; height: 56px; margin: auto;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
/* ===== How It Works ===== */
|
||
.flow-steps {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
|
||
}
|
||
.flow-step {
|
||
background: var(--surface); padding: 32px 24px; position: relative;
|
||
border: 1px solid var(--border); overflow: hidden;
|
||
transition: all .3s;
|
||
}
|
||
.flow-step:first-child { border-radius: 16px 0 0 16px; }
|
||
.flow-step:last-child { border-radius: 0 16px 16px 0; }
|
||
.flow-step:hover { background: var(--surface2); transform: translateY(-4px); border-color: rgba(0,255,140,0.2); }
|
||
.flow-step .step-num {
|
||
font-size: 48px; font-weight: 900;
|
||
background: linear-gradient(135deg, var(--accent), var(--accent2));
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
opacity: .3; position: absolute; top: 16px; right: 16px;
|
||
}
|
||
.flow-step h4 { font-size: 16px; margin-bottom: 8px; }
|
||
.flow-step p { font-size: 13px; color: var(--text2); line-height: 1.6; }
|
||
.flow-arrow { color: var(--accent); font-size: 20px; margin: 0 -8px; z-index: 1; align-self: center; }
|
||
|
||
/* ===== Ecosystem ===== */
|
||
.eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||
.eco-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 28px; transition: all .4s;
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.eco-card:hover {
|
||
transform: translateY(-6px);
|
||
border-color: rgba(0,255,140,0.25);
|
||
box-shadow: var(--glow);
|
||
}
|
||
.eco-card .eco-icon {
|
||
width: 48px; height: 48px; border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 22px; margin-bottom: 16px;
|
||
}
|
||
.eco-card h3 { font-size: 18px; margin-bottom: 4px; }
|
||
.eco-card .eco-tag {
|
||
font-size: 11px; color: var(--accent); letter-spacing: 1px;
|
||
text-transform: uppercase; margin-bottom: 12px; display: block;
|
||
}
|
||
.eco-card p { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 16px; }
|
||
.eco-card .eco-meta {
|
||
display: flex; gap: 16px; font-size: 12px; color: var(--text2);
|
||
border-top: 1px solid var(--border); padding-top: 12px;
|
||
}
|
||
.eco-card .eco-meta span { display: flex; align-items: center; gap: 4px; }
|
||
.eco-card .eco-meta .stars { color: var(--orange); }
|
||
|
||
/* ===== Comparison Table ===== */
|
||
.compare-table {
|
||
width: 100%; border-collapse: separate; border-spacing: 0;
|
||
background: var(--surface); border-radius: 16px; overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.compare-table th, .compare-table td {
|
||
padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border);
|
||
}
|
||
.compare-table th {
|
||
font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
|
||
color: var(--text2); background: rgba(255,255,255,0.02);
|
||
}
|
||
.compare-table td { font-size: 14px; color: var(--text2); }
|
||
.compare-table tr:last-child td { border-bottom: none; }
|
||
.compare-table td:first-child { color: var(--text); font-weight: 600; }
|
||
.compare-table .check { color: var(--accent); }
|
||
.compare-table .cross { color: rgba(255,255,255,0.2); }
|
||
.highlight-row { background: rgba(0,255,140,0.03); }
|
||
|
||
/* ===== Use Cases ===== */
|
||
.use-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
||
.use-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 28px; transition: all .3s;
|
||
display: flex; gap: 20px;
|
||
}
|
||
.use-card:hover { border-color: rgba(0,255,140,0.2); transform: translateY(-3px); }
|
||
.use-icon {
|
||
width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
.use-card h4 { font-size: 16px; margin-bottom: 6px; }
|
||
.use-card p { font-size: 13px; color: var(--text2); }
|
||
|
||
/* ===== Timeline ===== */
|
||
.timeline { position: relative; padding-left: 40px; }
|
||
.timeline::before {
|
||
content: ''; position: absolute; left: 14px; top: 0; bottom: 0;
|
||
width: 2px; background: linear-gradient(to bottom, var(--accent), var(--purple), transparent);
|
||
}
|
||
.timeline-item {
|
||
position: relative; margin-bottom: 36px; padding: 20px 24px;
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
}
|
||
.timeline-item::before {
|
||
content: ''; position: absolute; left: -33px; top: 24px;
|
||
width: 10px; height: 10px; border-radius: 50%;
|
||
background: var(--accent); box-shadow: 0 0 12px rgba(0,255,140,0.5);
|
||
}
|
||
.timeline-item .date {
|
||
font-size: 12px; color: var(--accent); letter-spacing: 1px;
|
||
text-transform: uppercase; margin-bottom: 4px;
|
||
}
|
||
.timeline-item h4 { font-size: 16px; margin-bottom: 6px; }
|
||
.timeline-item p { font-size: 13px; color: var(--text2); }
|
||
|
||
/* ===== Code Demo ===== */
|
||
.code-block {
|
||
background: #0a0c12; border: 1px solid var(--border);
|
||
border-radius: 14px; overflow: hidden; margin: 32px 0;
|
||
}
|
||
.code-header {
|
||
display: flex; align-items: center; gap: 8px; padding: 14px 20px;
|
||
background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border);
|
||
}
|
||
.code-dot { width: 12px; height: 12px; border-radius: 50%; }
|
||
.code-dot.r { background: #ff5f57; }
|
||
.code-dot.y { background: #febc2e; }
|
||
.code-dot.g { background: #28c840; }
|
||
.code-filename { margin-left: 12px; font-size: 13px; color: var(--text2); font-family: 'SF Mono', monospace; }
|
||
.code-content {
|
||
padding: 20px 24px; font-family: 'SF Mono', 'Fira Code', monospace;
|
||
font-size: 13px; line-height: 1.8; overflow-x: auto;
|
||
color: #abb2bf;
|
||
}
|
||
.code-content .kw { color: #c678dd; }
|
||
.code-content .fn { color: #61afef; }
|
||
.code-content .str { color: #98c379; }
|
||
.code-content .num { color: #d19a66; }
|
||
.code-content .cm { color: #5c6370; font-style: italic; }
|
||
.code-content .tag { color: #e06c75; }
|
||
.code-content .attr { color: #d19a66; }
|
||
|
||
/* ===== Quick Start ===== */
|
||
.quickstart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||
.qs-card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: 16px; padding: 28px; text-align: center;
|
||
transition: all .3s;
|
||
}
|
||
.qs-card:hover { border-color: rgba(0,255,140,0.25); transform: translateY(-4px); }
|
||
.qs-card .qs-num {
|
||
width: 40px; height: 40px; border-radius: 50%;
|
||
background: rgba(0,255,140,0.1); border: 1px solid rgba(0,255,140,0.2);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px; font-weight: 800; color: var(--accent);
|
||
margin: 0 auto 16px;
|
||
}
|
||
.qs-card h4 { font-size: 16px; margin-bottom: 8px; }
|
||
.qs-card code {
|
||
display: inline-block; padding: 8px 16px; border-radius: 8px;
|
||
background: rgba(0,0,0,0.4); border: 1px solid var(--border);
|
||
font-family: 'SF Mono', monospace; font-size: 13px; color: var(--accent);
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* ===== Footer ===== */
|
||
footer {
|
||
border-top: 1px solid var(--border); padding: 48px 0;
|
||
text-align: center; color: var(--text2); font-size: 13px;
|
||
}
|
||
footer .footer-links { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; }
|
||
|
||
/* ===== Animations ===== */
|
||
@keyframes fadeInUp {
|
||
from { opacity: 0; transform: translateY(30px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(8px); }
|
||
}
|
||
|
||
/* IntersectionObserver reveal */
|
||
.reveal { opacity: 0; transform: translateY(40px); transition: all .7s cubic-bezier(.22,1,.36,1); }
|
||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||
|
||
/* ===== Responsive ===== */
|
||
@media (max-width: 768px) {
|
||
.paradigm-grid { grid-template-columns: 1fr; }
|
||
.vs-divider { margin: -8px auto; }
|
||
.flow-steps { grid-template-columns: 1fr; }
|
||
.flow-step { border-radius: 12px !important; }
|
||
.eco-grid, .quickstart-grid { grid-template-columns: 1fr; }
|
||
.use-grid { grid-template-columns: 1fr; }
|
||
.compare-table { font-size: 12px; }
|
||
.compare-table th, .compare-table td { padding: 10px 12px; }
|
||
section { padding: 60px 0; }
|
||
}
|
||
|
||
/* ===== Floating Lizard ===== */
|
||
.float-lizard {
|
||
position: fixed; bottom: 24px; right: 24px; z-index: 100;
|
||
width: 60px; height: 60px; border-radius: 50%;
|
||
background: rgba(0,255,140,0.1); border: 1px solid rgba(0,255,140,0.3);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 28px; cursor: pointer; transition: all .3s;
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.float-lizard:hover {
|
||
transform: scale(1.1); box-shadow: 0 0 30px rgba(0,255,140,0.3);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="ambient"></div>
|
||
<div class="grid-bg"></div>
|
||
|
||
<!-- ===== HERO ===== -->
|
||
<section class="hero">
|
||
<div class="hero-badge">2026 新范式</div>
|
||
<h1>Vibe Motion</h1>
|
||
<p>不再逐帧调关键帧，不再等 AI 生成模糊像素。用自然语言描述动画意图，AI 生成确定性代码，渲染出 4K/60fps 专业级动效视频。</p>
|
||
<div class="hero-cta">
|
||
<a href="#ecosystem" class="btn btn-primary">开源生态 ↓</a>
|
||
<a href="#quickstart" class="btn btn-ghost">快速开始</a>
|
||
</div>
|
||
<div class="scroll-hint">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
|
||
SCROLL
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PARADIGM SHIFT ===== -->
|
||
<section id="paradigm">
|
||
<div class="container">
|
||
<div class="section-tag">范式转移</div>
|
||
<h2 class="section-title reveal">从像素预测到代码生成</h2>
|
||
<p class="section-desc reveal">传统 AI 视频逐帧预测像素，文字会糊、元素会飘、不可编辑。<br>Vibe Motion 让 AI 生成 Remotion 代码——数学定义运动，确定性渲染，每一帧都精确。</p>
|
||
|
||
<div class="paradigm-grid reveal">
|
||
<!-- Old Way -->
|
||
<div class="paradigm-card old">
|
||
<h3><span style="font-size:28px">🎬</span> 传统方式</h3>
|
||
<ul>
|
||
<li>After Effects 手动调关键帧，学习曲线陡峭</li>
|
||
<li>AI 视频生成器（Sora/Kling）预测像素，文字变形</li>
|
||
<li>输出不可编辑，修改需重新生成</li>
|
||
<li>分辨率受限，放大即模糊</li>
|
||
<li>数万元 + 数周制作周期</li>
|
||
<li>品牌一致性难以保证</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="vs-divider">VS</div>
|
||
|
||
<!-- New Way -->
|
||
<div class="paradigm-card new">
|
||
<h3><span style="font-size:28px">⚡</span> Vibe Motion</h3>
|
||
<ul>
|
||
<li>自然语言描述 → AI 生成 React 动画代码</li>
|
||
<li>确定性渲染，文字永远清晰锐利</li>
|
||
<li>代码可编辑，迭代只需追加对话</li>
|
||
<li>原生支持 4K UHD / 60fps</li>
|
||
<li>10 分钟完成，成本趋近于零</li>
|
||
<li>代码即品牌规范，100% 一致</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== HOW IT WORKS ===== -->
|
||
<section id="howitworks" style="background: var(--bg2);">
|
||
<div class="container">
|
||
<div class="section-tag">工作原理</div>
|
||
<h2 class="section-title reveal">四步生成专业动效</h2>
|
||
<p class="section-desc reveal">从自然语言到 MP4 视频，中间是可审查、可编辑、可版本控制的代码。</p>
|
||
|
||
<div class="flow-steps reveal">
|
||
<div class="flow-step">
|
||
<div class="step-num">01</div>
|
||
<h4>描述意图</h4>
|
||
<p>用自然语言描述你想要的动画效果。"一只绿色蜥蜴从左侧滑入，尾巴摆动，舌头弹射捕捉萤火虫"</p>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">02</div>
|
||
<h4>AI 生成代码</h4>
|
||
<p>Claude / GPT 将创意意图翻译为 Remotion React 组件代码，包含 spring 动画、插值、序列编排</p>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">03</div>
|
||
<h4>实时预览</h4>
|
||
<p>Remotion Studio 在浏览器中实时预览，可拖拽时间轴、逐帧检查、热更新代码修改</p>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="step-num">04</div>
|
||
<h4>渲染输出</h4>
|
||
<p>一行命令渲染为 MP4/GIF/WebM，支持 4K 分辨率、60fps、透明通道，可批量生成万级变体</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CODE DEMO ===== -->
|
||
<section id="code">
|
||
<div class="container">
|
||
<div class="section-tag">代码即动画</div>
|
||
<h2 class="section-title reveal">一段对话，一个动画</h2>
|
||
<p class="section-desc reveal">你说"蜥蜴摆尾"，AI 生成这样的代码——数学精确、完全可控。</p>
|
||
|
||
<div class="code-block reveal">
|
||
<div class="code-header">
|
||
<span class="code-dot r"></span>
|
||
<span class="code-dot y"></span>
|
||
<span class="code-dot g"></span>
|
||
<span class="code-filename">LizardScene.tsx</span>
|
||
</div>
|
||
<div class="code-content">
|
||
<span class="cm">// 弹簧物理入场</span>
|
||
<span class="kw">const</span> scaleSpring = <span class="fn">spring</span>({
|
||
fps, frame: localFrame,
|
||
config: { damping: <span class="num">12</span>, stiffness: <span class="num">80</span> }
|
||
});
|
||
|
||
<span class="cm">// 尾巴正弦摆动</span>
|
||
<span class="kw">const</span> tailWag = Math.<span class="fn">sin</span>(localFrame * <span class="num">0.15</span>) * <span class="num">8</span>;
|
||
|
||
<span class="cm">// 舌头弹射 — 每80帧触发一次</span>
|
||
<span class="kw">const</span> tonguePhase = (localFrame % <span class="num">80</span>) / <span class="num">80</span>;
|
||
<span class="kw">const</span> tongueOut = tonguePhase > <span class="num">0.3</span> && tonguePhase < <span class="num">0.5</span>
|
||
? <span class="fn">interpolate</span>(tonguePhase, [<span class="num">0.3</span>, <span class="num">0.4</span>, <span class="num">0.5</span>], [<span class="num">0</span>, <span class="num">1</span>, <span class="num">0</span>])
|
||
: <span class="num">0</span>;
|
||
|
||
<span class="cm">// SVG 路径 + 渐变 + 发光</span>
|
||
<<span class="tag">path</span> <span class="attr">d</span>=<span class="str">{LIZARD_TAIL}</span>
|
||
<span class="attr">transform</span>=<span class="str">{`rotate(${tailWag}, 200, 33)`}</span>
|
||
<span class="attr">filter</span>=<span class="str">{`drop-shadow(0 0 ${glow}px ${color})`}</span> />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== ECOSYSTEM ===== -->
|
||
<section id="ecosystem" style="background: var(--bg2);">
|
||
<div class="container">
|
||
<div class="section-tag">开源生态</div>
|
||
<h2 class="section-title reveal">六大核心项目</h2>
|
||
<p class="section-desc reveal">Vibe Motion 不是一个工具，而是一个由开源项目构成的创作范式。以下是你需要关注的核心项目。</p>
|
||
|
||
<div class="eco-grid">
|
||
<!-- Remotion -->
|
||
<div class="eco-card reveal">
|
||
<div class="eco-icon" style="background: rgba(0,255,140,0.1); color: var(--accent);">🎥</div>
|
||
<h3>Remotion</h3>
|
||
<span class="eco-tag">核心引擎 · Vibe Motion 底层</span>
|
||
<p>用 React 编程式生成视频。支持 CSS/Canvas/SVG/WebGL，确定性逐帧渲染，可本地或云端批量生成。Higgsfield Vibe Motion 就是基于它。</p>
|
||
<div class="eco-meta">
|
||
<span class="stars">★ 25,000+</span>
|
||
<span>TypeScript</span>
|
||
<span><a href="https://github.com/remotion-dev/remotion">GitHub ↗</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Motion -->
|
||
<div class="eco-card reveal">
|
||
<div class="eco-icon" style="background: rgba(168,85,247,0.1); color: var(--purple);">✨</div>
|
||
<h3>Motion (Framer Motion)</h3>
|
||
<span class="eco-tag">网页动画之王</span>
|
||
<p>npm 月下载 3000万+，最主流的 React 动画库。已官方支持 AI Vibe Coding 工作流，Motion Studio 插件可在 VS Code 中实时编辑动画。</p>
|
||
<div class="eco-meta">
|
||
<span class="stars">★ 26,000+</span>
|
||
<span>TypeScript</span>
|
||
<span><a href="https://github.com/motiondivision/motion">GitHub ↗</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Motion Canvas -->
|
||
<div class="eco-card reveal">
|
||
<div class="eco-icon" style="background: rgba(0,200,255,0.1); color: var(--accent2);">🎨</div>
|
||
<h3>Motion Canvas</h3>
|
||
<span class="eco-tag">TypeScript 版 Manim</span>
|
||
<p>用 TypeScript 创建教育动画和解释视频，类似 3Blue1Brown 的 Manim 但基于 Web 技术栈。内置可视化编辑器和时间轴。</p>
|
||
<div class="eco-meta">
|
||
<span class="stars">★ 16,000+</span>
|
||
<span>TypeScript</span>
|
||
<span><a href="https://github.com/motion-canvas/motion-canvas">GitHub ↗</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Open-Sora -->
|
||
<div class="eco-card reveal">
|
||
<div class="eco-icon" style="background: rgba(255,149,0,0.1); color: var(--orange);">🎞️</div>
|
||
<h3>Open-Sora</h3>
|
||
<span class="eco-tag">像素级 AI 视频生成</span>
|
||
<p>开源复现 OpenAI Sora，11B 参数，支持 text/image/video-to-video。与 Vibe Motion 代码生成互补——适合真实场景视频，不适合精确图形动画。</p>
|
||
<div class="eco-meta">
|
||
<span class="stars">★ 25,000+</span>
|
||
<span>Python</span>
|
||
<span><a href="https://github.com/hpcaitech/Open-Sora">GitHub ↗</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Manim -->
|
||
<div class="eco-card reveal">
|
||
<div class="eco-icon" style="background: rgba(255,68,170,0.1); color: var(--pink);">∑</div>
|
||
<h3>Manim</h3>
|
||
<span class="eco-tag">数学动画传奇</span>
|
||
<p>3Blue1Brown 创造的数学动画引擎，Python 编写。适合数学公式推导、数据可视化、教育内容。社区版 MIT 协议。</p>
|
||
<div class="eco-meta">
|
||
<span class="stars">★ 70,000+</span>
|
||
<span>Python</span>
|
||
<span><a href="https://github.com/3b1b/manim">GitHub ↗</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rive -->
|
||
<div class="eco-card reveal">
|
||
<div class="eco-icon" style="background: rgba(255,255,255,0.06); color: #fff;">◆</div>
|
||
<h3>Rive</h3>
|
||
<span class="eco-tag">交互式状态机动画</span>
|
||
<p>可视化编辑器 + 状态机驱动，适合做 App 内交互动画（按钮微动效、加载动画、游戏 UI）。运行时开源，编辑器免费使用。</p>
|
||
<div class="eco-meta">
|
||
<span>跨平台</span>
|
||
<span><a href="https://rive.app">rive.app ↗</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== COMPARISON ===== -->
|
||
<section id="compare">
|
||
<div class="container">
|
||
<div class="section-tag">对比分析</div>
|
||
<h2 class="section-title reveal">选择适合你的工具</h2>
|
||
<p class="section-desc reveal">不同场景用不同工具，以下是核心维度对比。</p>
|
||
|
||
<div class="reveal" style="overflow-x: auto;">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr>
|
||
<th>维度</th>
|
||
<th>Remotion</th>
|
||
<th>Motion Canvas</th>
|
||
<th>Motion (Framer)</th>
|
||
<th>Open-Sora</th>
|
||
<th>After Effects</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="highlight-row">
|
||
<td>AI Vibe Coding</td>
|
||
<td><span class="check">★★★</span></td>
|
||
<td><span class="check">★★☆</span></td>
|
||
<td><span class="check">★★★</span></td>
|
||
<td><span class="check">★☆☆</span></td>
|
||
<td><span class="cross">—</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>输出格式</td>
|
||
<td>MP4/GIF/WebM</td>
|
||
<td>MP4</td>
|
||
<td>网页动画</td>
|
||
<td>MP4</td>
|
||
<td>全格式</td>
|
||
</tr>
|
||
<tr>
|
||
<td>分辨率</td>
|
||
<td>无限制 (4K+)</td>
|
||
<td>无限制</td>
|
||
<td>N/A (实时)</td>
|
||
<td>720p</td>
|
||
<td>无限制</td>
|
||
</tr>
|
||
<tr class="highlight-row">
|
||
<td>文字精度</td>
|
||
<td><span class="check">像素级精确</span></td>
|
||
<td><span class="check">像素级精确</span></td>
|
||
<td><span class="check">像素级精确</span></td>
|
||
<td><span class="cross">模糊/变形</span></td>
|
||
<td><span class="check">精确</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>学习曲线</td>
|
||
<td>React 基础</td>
|
||
<td>TypeScript</td>
|
||
<td>React 基础</td>
|
||
<td>Python/GPU</td>
|
||
<td>数月~年</td>
|
||
</tr>
|
||
<tr>
|
||
<td>批量生成</td>
|
||
<td><span class="check">✓ 参数化</span></td>
|
||
<td><span class="check">✓</span></td>
|
||
<td><span class="cross">✕</span></td>
|
||
<td><span class="check">✓</span></td>
|
||
<td><span class="cross">手动</span></td>
|
||
</tr>
|
||
<tr class="highlight-row">
|
||
<td>GPU 需求</td>
|
||
<td>不需要</td>
|
||
<td>不需要</td>
|
||
<td>不需要</td>
|
||
<td>A100 级</td>
|
||
<td>推荐有</td>
|
||
</tr>
|
||
<tr>
|
||
<td>开源协议</td>
|
||
<td>个人免费</td>
|
||
<td>MIT</td>
|
||
<td>MIT</td>
|
||
<td>Apache 2.0</td>
|
||
<td>商业</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== USE CASES ===== -->
|
||
<section id="usecases" style="background: var(--bg2);">
|
||
<div class="container">
|
||
<div class="section-tag">应用场景</div>
|
||
<h2 class="section-title reveal">从营销视频到教育内容</h2>
|
||
<p class="section-desc reveal">Vibe Motion 的代码生成模式在以下场景尤其强大：</p>
|
||
|
||
<div class="use-grid">
|
||
<div class="use-card reveal">
|
||
<div class="use-icon" style="background: rgba(0,255,140,0.1);">📱</div>
|
||
<div>
|
||
<h4>社交媒体营销</h4>
|
||
<p>10 分钟生成品牌一致的动效视频，支持批量生成万级个性化变体。传统制作需数万元 + 数周。</p>
|
||
</div>
|
||
</div>
|
||
<div class="use-card reveal">
|
||
<div class="use-icon" style="background: rgba(168,85,247,0.1);">🎓</div>
|
||
<div>
|
||
<h4>教育解释视频</h4>
|
||
<p>类似 3Blue1Brown 的数学动画，用 Remotion/Manim + AI 快速生成算法可视化、物理模拟、概念讲解。</p>
|
||
</div>
|
||
</div>
|
||
<div class="use-card reveal">
|
||
<div class="use-icon" style="background: rgba(0,200,255,0.1);">📊</div>
|
||
<div>
|
||
<h4>数据可视化</h4>
|
||
<p>将报表数据转化为动态图表视频，支持 API 驱动自动更新。年报、季度汇报、实时仪表盘录制。</p>
|
||
</div>
|
||
</div>
|
||
<div class="use-card reveal">
|
||
<div class="use-icon" style="background: rgba(255,149,0,0.1);">🚀</div>
|
||
<div>
|
||
<h4>产品发布视频</h4>
|
||
<p>Replit 等公司已用 Vibe Motion 制作产品 launch 视频。终端打字动画、代码高亮、截图飞入——10 分钟搞定。</p>
|
||
</div>
|
||
</div>
|
||
<div class="use-card reveal">
|
||
<div class="use-icon" style="background: rgba(255,68,170,0.1);">🎮</div>
|
||
<div>
|
||
<h4>游戏 UI & App 微动效</h4>
|
||
<p>Rive 状态机 + Motion 弹簧动画，做按钮反馈、加载指示器、成就解锁动画。运行时开源跨平台。</p>
|
||
</div>
|
||
</div>
|
||
<div class="use-card reveal">
|
||
<div class="use-icon" style="background: rgba(255,255,255,0.06);">🔄</div>
|
||
<div>
|
||
<h4>CI/CD 自动化视频</h4>
|
||
<p>代码即视频——纳入 Git 版本控制，PR review 审查动画变更，CI 自动渲染输出。视频生产变成 git commit。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== TIMELINE ===== -->
|
||
<section id="timeline">
|
||
<div class="container">
|
||
<div class="section-tag">发展脉络</div>
|
||
<h2 class="section-title reveal">Vibe Motion 简史</h2>
|
||
|
||
<div class="timeline reveal">
|
||
<div class="timeline-item">
|
||
<div class="date">2021</div>
|
||
<h4>Remotion 1.0 发布</h4>
|
||
<p>Jonny Burger 在苏黎世创建 Remotion，提出"用 React 写视频"的理念。开源社区开始关注代码生成视频的可能性。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="date">2023</div>
|
||
<h4>Motion Canvas 开源</h4>
|
||
<p>TypeScript 版的 Manim 问世，填补了 Web 开发者制作教育动画的空白。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="date">2025.02</div>
|
||
<h4>Andrej Karpathy 提出 "Vibe Coding"</h4>
|
||
<p>OpenAI 联合创始人定义了这个概念：用自然语言和 AI 协作写代码，而不是手动逐行编写。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="date">2025.12</div>
|
||
<h4>Remotion Claude Skill 爆发</h4>
|
||
<p>Remotion Agent Skill 上线 8 周达到 15 万安装量，成为 skills.sh 上 #1 视频技能。视频制作变成了 "git commit"。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="date">2026.02</div>
|
||
<h4>Higgsfield 发布 Vibe Motion</h4>
|
||
<p>将 Claude + Remotion 包装成无代码产品，$17.4/月起。正式定义了 "Vibe Motion" 这个品类——AI 驱动的代码生成动效。</p>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="date">2026.03</div>
|
||
<h4>生态爆发</h4>
|
||
<p>Replit 推出 Vibe Code Videos、Motion.dev 集成 AI Vibe Coding、Cursor 内置 Motion Studio。代码生成动效从小众走向主流。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== QUICK START ===== -->
|
||
<section id="quickstart" style="background: var(--bg2);">
|
||
<div class="container">
|
||
<div class="section-tag">快速开始</div>
|
||
<h2 class="section-title reveal">三步在你的电脑上运行</h2>
|
||
<p class="section-desc reveal">不需要 GPU，不需要 After Effects，只需要 Node.js + 你的想象力。</p>
|
||
|
||
<div class="quickstart-grid reveal">
|
||
<div class="qs-card">
|
||
<div class="qs-num">1</div>
|
||
<h4>创建项目</h4>
|
||
<p style="color: var(--text2); font-size: 13px;">一行命令初始化 Remotion 项目</p>
|
||
<code>pnpm create video@latest</code>
|
||
</div>
|
||
<div class="qs-card">
|
||
<div class="qs-num">2</div>
|
||
<h4>让 AI 写动画</h4>
|
||
<p style="color: var(--text2); font-size: 13px;">用 Claude Code 描述你想要的效果</p>
|
||
<code>"做一只蜥蜴摆尾动画"</code>
|
||
</div>
|
||
<div class="qs-card">
|
||
<div class="qs-num">3</div>
|
||
<h4>预览 & 渲染</h4>
|
||
<p style="color: var(--text2); font-size: 13px;">浏览器预览，一键导出 MP4</p>
|
||
<code>pnpm build → out/video.mp4</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-block reveal" style="margin-top: 40px;">
|
||
<div class="code-header">
|
||
<span class="code-dot r"></span>
|
||
<span class="code-dot y"></span>
|
||
<span class="code-dot g"></span>
|
||
<span class="code-filename">Terminal</span>
|
||
</div>
|
||
<div class="code-content">
|
||
<span class="cm"># 安装依赖</span>
|
||
pnpm add remotion @remotion/cli @remotion/player react react-dom
|
||
|
||
<span class="cm"># 启动 Studio（浏览器实时预览）</span>
|
||
pnpm remotion studio src/index.ts
|
||
|
||
<span class="cm"># 渲染为 MP4</span>
|
||
pnpm remotion render src/index.ts MyAnimation out/video.mp4
|
||
|
||
<span class="cm"># 渲染为 GIF</span>
|
||
pnpm remotion render src/index.ts MyAnimation out/video.gif --image-format png
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== FOOTER ===== -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-links">
|
||
<a href="https://github.com/remotion-dev/remotion">Remotion</a>
|
||
<a href="https://github.com/motiondivision/motion">Motion</a>
|
||
<a href="https://github.com/motion-canvas/motion-canvas">Motion Canvas</a>
|
||
<a href="https://higgsfield.ai/vibe-motion">Higgsfield</a>
|
||
<a href="https://www.remotion.dev/docs/ai/claude-code">Remotion × Claude</a>
|
||
</div>
|
||
<p>Built with Remotion + Claude Code · 2026</p>
|
||
<p style="margin-top: 8px; opacity: .4;">源码已下载至 repos/ — Remotion / Motion / Motion Canvas</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Floating lizard -->
|
||
<a href="#" class="float-lizard" title="回到顶部">🦎</a>
|
||
|
||
<script>
|
||
// IntersectionObserver for reveal animations
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||
|
||
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
||
|
||
// Smooth scroll for float lizard
|
||
document.querySelector('.float-lizard').addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|