48 lines
2.7 KiB
XML
48 lines
2.7 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
|
|
width="1200" height="420" viewBox="0 0 1200 420"
|
||
|
|
role="img" aria-labelledby="title desc">
|
||
|
|
<title id="title">Oil Motion — 把 AI 视频编译成可交互网页动画</title>
|
||
|
|
<desc id="desc">左侧是项目名称与流程，右侧是油画风格漫画插画：戴圆眼镜的小人通过滚动旋钮控制一条手机动作胶片，黄色牧羊犬注视着手机从完整状态逐步变化成爆炸图。</desc>
|
||
|
|
|
||
|
|
<defs>
|
||
|
|
<pattern id="grid" width="32" height="32" patternUnits="userSpaceOnUse">
|
||
|
|
<path d="M32 0H0V32" fill="none" stroke="#1A1A1A" stroke-opacity=".055" stroke-width="1"/>
|
||
|
|
</pattern>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<rect width="1200" height="420" rx="28" fill="#FCFAF3"/>
|
||
|
|
<rect width="1200" height="420" rx="28" fill="url(#grid)"/>
|
||
|
|
<path d="M502 34V386" stroke="#1A1A1A" stroke-opacity=".12"/>
|
||
|
|
|
||
|
|
<g id="title-block" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif">
|
||
|
|
<text x="56" y="66" font-size="18" font-weight="700" letter-spacing="3.1" fill="#74726C">AI VIDEO → INTERACTIVE MOTION</text>
|
||
|
|
<text x="52" y="151" font-size="72" font-weight="850" letter-spacing="-3.4" fill="#171717">Oil Motion</text>
|
||
|
|
<rect x="54" y="166" width="302" height="15" fill="#F6C85F" opacity=".78"/>
|
||
|
|
<text x="56" y="224" font-size="29" font-weight="760" fill="#171717">把 AI 视频编译成可交互动画</text>
|
||
|
|
<text x="56" y="261" font-size="20" font-weight="520" fill="#77756F">关键帧锁定结果，MiniMax 补全动作。</text>
|
||
|
|
<text x="56" y="291" font-size="20" font-weight="520" fill="#77756F">程序负责切帧、质检、压缩与映射。</text>
|
||
|
|
|
||
|
|
<g id="process" transform="translate(58 329)"
|
||
|
|
font-family="ui-monospace,SFMono-Regular,Menlo,monospace"
|
||
|
|
font-size="17" font-weight="760">
|
||
|
|
<path d="M9 10H365" fill="none" stroke="#171717" stroke-opacity=".25" stroke-width="2"/>
|
||
|
|
<circle cx="9" cy="10" r="8" fill="#171717"/>
|
||
|
|
<circle cx="184" cy="10" r="8" fill="#F6C85F" stroke="#171717" stroke-width="2"/>
|
||
|
|
<circle cx="365" cy="10" r="8" fill="#D9E4EE" stroke="#171717" stroke-width="2"/>
|
||
|
|
<text x="0" y="43" fill="#171717">KEYFRAMES</text>
|
||
|
|
<text x="139" y="43" fill="#171717">MINIMAX H3</text>
|
||
|
|
<text x="315" y="43" fill="#171717">WEB MOTION</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g id="oil-visual-illustration">
|
||
|
|
<image x="514" y="29" width="668" height="389"
|
||
|
|
preserveAspectRatio="xMidYMid meet"
|
||
|
|
href="./hero-illustration-crop-v1.webp"
|
||
|
|
xlink:href="./hero-illustration-crop-v1.webp"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<circle cx="1160" cy="36" r="6" fill="#F6C85F"/>
|
||
|
|
<path d="M1139 36H1119M1129 26V46" stroke="#171717" stroke-width="2" opacity=".42"/>
|
||
|
|
</svg>
|