ismael-joffroy-chandoutis/martini-film-teardown

[English](README.md) · [Français](README.fr.md) # martini-film-teardown [martini.film](https://www.martini.film/) 的构建方式解析：对该落地页的技术拆解，并使用占位内容从零开始重建其核心机制。 Martini (C47 Inc.) 是一款面向电影制作人的 AI 视频制作 SaaS 平台。它的落地页是一个很好的研究案例，因为它在几乎不使用任何 JavaScript 机制的情况下，呈现出了“高级感”：没有动画库，没有 3D，没有滚动库。所有核心逻辑完全由 CSS 承载。 **这里没有重新分发原网站的任何内容。** 没有图片、字体、文案或代码。重建版本 ([`rebuild/index.html`](rebuild/index.html)) 仅使用中立的占位内容重新实现了其*技术*。如果你需要查看真实的原貌，请访问 martini.film。 ## 技术栈（观测于 2026 年 7 月 19 日） | 层级 | 选择 | 证据 | |---|---|---| | 框架 | Next.js App Router，使用 Turbopack 构建 | `turbopack-*.js` chunk，`/_next/*` 资源路径，流式 RSC payload | | 托管 | Vercel | 每个资源 URL 上都固定有 `dpl_*` 部署 ID（skew protection） | | CSS | Tailwind CSS v4 | 单个 337 KB 的实用程序样式表，`var(--default-font-family)` 自定义属性模式 | | 字体 | `next/font` 自托管 | 6 个预加载的 `.woff2` 文件，带有尺寸调整的备用字体以消除布局偏移 | | 字体系统 | Geist + Geist Mono + Source Serif 4 + Tajawal | 无衬线字体用于 UI，等宽字体用于标签，编辑级衬线字体用于强调词汇，Tajawal 用于支持阿拉伯语 | | 媒体 | 子域上的 Supabase Storage | 演示视频由 `reception.martini.film/storage/v1/object/public/public-assets/` 提供 | | 图像 | `next/image` 优化器 | `/_next/image?url=...&w=...&q=75`，带有 1x/2x srcsets | | 动画 | 无。CSS keyframes + 一个 IntersectionObserver | 在约 950 KB 的 JS chunks 中，完全没有 GSAP、Framer Motion、Lenis、Three.js 或 Lottie 的痕迹 | ## 真正让它表现出色的原因 **1. 衬线体强调。** 标题采用 grotesque 无衬线字体，其中一到两个词被切换为斜体衬线字体 (Source Serif 4)。仅仅一次字体替换，就完成了整体“为电影制作人精心打造”的定位。 **2. 压缩循环的产品视频取代了截图。** 每个功能卡都会自动播放一段简短的无声 `.mp4`（如 `1-integrated-comp.mp4`、`2-collab-comp.mp4` 等文件名表明了其采用了带编号的压缩 pipeline）。这些视频托管在 Supabase 的公开 bucket 中，而不是打包在本地，从而保证了 Vercel 部署的极致轻量。 **3. 模拟的多人协作状态。** "Built for Teams" 部分以 Figma 风格，在 UI 上动画展示 drifting 的具名光标 (Sarah, Marcus, Alex, Yuki, Luna)。这是纯 CSS 实现的：`@keyframes cursor-wander` 和 `cursor-float` 在长周期循环中移动绝对定位的光标精灵图。没有 websocket，也不涉及 JS。 **4. 无需滚动库的滚动揭示效果。** 仅由一个 IntersectionObserver 切换 class；其余效果全部交由 `fadeInUp` 和 `textFadeIn`/`textFadeOut` keyframes 完成。 **5. 响应式标题副本。** Hero 标题和部分章节标题在 DOM 中存在两份，具有不同的换行规则，并根据屏幕断点进行显示或隐藏。这种做法虽然简单粗暴但很稳健，它确保了由设计师决定的换行效果，而不是任由视口尺寸来决定。 **6. 品牌化的微细节。** 加载状态是一个马提尼酒杯动画（`martini-loader-nod`、`martini-loader-olive-nod` keyframes）。Glitch keyframes (`glitch-1`, `glitch-2`, `glitch-shift`) 则专门保留用于 hover 时刻。品牌特色融入了等待状态中，而不仅仅停留在 Logo 上。 ## 页面解剖 1. 带有模糊背景的 Sticky nav：Logo、四个链接、登录、"Request Access" CTA 2. Hero 区：两个状态胶囊（"Early Access", "200+ Films Made"）、带有衬线强调的标题、副标题、单个 CTA、全宽产品视频 3. 定位部分："built for directing, not just prompting" 4. 三个功能区块，每个都包含一个主张 + 演示视频 + 一行具体的证明（"Export rough assemblies as XML for Premiere or Resolve"） 5. 页面中部的 CTA band 6. 作品展示：六个电影卡片（缩略图、标题、作者），链接到外部的社会认同域名，MadeWithMartini.com 7. 支持的模型 Logo 行（Kling、Sora、Veo 等）作为外部背书 8. 底部最终的 CTA band + 宽大的 footer 其转化结构是一个闭环：每一次向下的滚动深度最终都指向同一个操作——"Request Access"。页面上没有定价表，也没有与之竞争的次要操作。 ## 重建版本 [`rebuild/index.html`](rebuild/index.html) 是一个零依赖的单文件（HTML + CSS + 约 30 行 JS），重新实现了以下功能：带有模糊效果的 sticky nav、胶囊徽章、衬线强调标题、通过 IntersectionObserver 实现的滚动揭示、drifting 的模拟光标、带有循环媒体占位符的功能卡片、hover 放大的展示网格、Logo 跑马灯以及 CTA 循环。在浏览器中打开它，查看源代码，取你所需。 ## 许可证 本仓库中的所有内容均遵循 MIT 许可证。martini.film 的设计版权归 C47 Inc. 所有；这是一项针对公开服务标记的互操作性研究，仅供学习之用。

标签：CSS动画, Tailwind CSS, 后端开发, 多模态安全, 技术拆解, 数据可视化, 纯CSS实现, 网页设计