开发者使用MiniMax海螺H3生成完整动态UI落地页原型

Hailuo @MiniMax_AI @Hailuo_AI H3

这是一个冰淇淋动态图形落地页原型，目的是测试 H3 在 UI 动画、排版、转场、悬停交互和产品动态效果上能做到什么程度。我之前试过在 Adobe After Effects 里手动制作类似效果，但这个版本完全是由 H3 生成的。

这个模型处理这些复杂动态设计元素的表现非常出色，结果令人惊叹：
- 动态形状图层
- 动态排版
- 光标悬停更新
- 弹跳效果
- 抖动效果
- 动态背景
- 精细文字渲染
- 缓入缓出关键帧

提示词在下方：

使用上传的六款冰淇淋参考图 Image1 作为精确产品来源，创建一个 15 秒、16:9 比例的高品质冰淇淋落地页动画。打造一个随光标动的趣味体验：光标依次悬停在 01 到 06 号冰淇淋上。

每次悬停时，对应冰淇淋需要立刻出现在屏幕高度约 70% 的主视觉区域，同时更换排版、背景配色、动态图形、粒子和装饰元素。交互逻辑必须清晰体现：光标悬停 → 缩略图反应 → 对应主视觉出现 → 整体视觉风格切换。

美术风格：有趣的 3D 电商 × Y2K 图形 × 当代编辑设计 × 高端糖果品牌设计。使用彩色有机 blob、棋盘格、波浪线、螺旋线、曲线、圆点、星星、扭曲网格、悬浮球体和手绘形状。整体保持活力但构图专业。每个口味都有自己的视觉识别，同时网站结构保持一致。不要 HUD、科幻图形、过度毛玻璃效果或通用模板风格。

排版：使用受 Cooper Black、Fredoka 和充气气泡字体启发的粗实圆润趣味字体。产品名要巨大、有表现力，略带不规则感。导航和小标签使用干净的几何无衬线字体。转场过程中标题可以挤压、拉伸、弹跳，但最终必须是完全清晰可读的文字。

产品：必须严格使用：“01 — NOIR SWIRL”、“02 — MATCHA CLOUD”、“03 — CARAMEL TAIYAKI”、“04 — SAKURA DREAM”、“05 — DARK OBSESSION”、“06 — TROPICAL GOLD”。保留参考图中精确的产品设计、顶料、颜色、蛋筒和比例。

网站布局：左上角：“SWIRL°”。居中：“FLAVORS OUR STORY SHOP”。右上角：“BAG 00”。将六款迷你冰淇淋沿底部排列，标注“01 02 03 04 05 06”。被悬停的缩略图向上抬起并放大。选中的主视觉放在偏中心右、屏幕高度 70% 位置，巨大的产品文字放在它的后方和侧边。

00:00–00:01 — 开场
以趣味奶黄色背景开场。有机 blob 充气放大，星星旋转，波浪线自行绘制，彩色圆球弹跳到位。以交错弹簧动画显示“SWIRL°”、导航和所有六款产品缩略图。圆形光标进入并靠近 01。

00:01–00:03 — 01 NOIR SWIRL
光标悬停“01”。01 号缩略图放大，NOIR SWIRL 带着 3D 旋转和弹性过冲进入主视觉区域。显示“NOIR SWIRL”和“DARK. BOLD. UNEXPECTED.”。背景切换为奶油色 + 炭黑色，搭配黑色螺旋、棋盘格、弹跳球体和墨色圆形。细小炭黑色粒子围绕产品旋转。主视觉轻轻向光标方向倾斜。

00:03–00:05 — 02 MATCHA CLOUD
光标滑到“02”上。NOIR SWIRL 挤压退出，同时 MATCHA CLOUD 从 02 缩略图扩张到主视觉位置。显示“MATCHA CLOUD”和“EARTHY. SOFT. ADDICTIVE.”。环境切换为开心果绿 + 奶油色 + 红色点缀。添加麻糬圆、流动抹茶带、扭曲棋盘格和旋转环的动画。两个麻糬球短暂绕主视觉旋转。文字做一次柔和的橡胶式晃动。

00:05–00:07 — 03 CARAMEL TAIYAKI
光标悬停“03”。MATCHA CLOUD 缩小消失，同时 CARAMEL TAIYAKI 翻转进入主视觉区域。显示“CARAMEL TAIYAKI”和“CRISPY. GOLDEN. CREAMY.”。背景变为焦糖橙 + 黄油黄 + 奶油色。添加焦糖环、鱼形轮廓、糖浆曲线、粗星星和悬浮面包屑的动画。一道焦糖波浪从产品后方扫过。

00:07–00:09 — 04 SAKURA DREAM
光标移动到“04”上。SAKURA DREAM 沿对角线射入主视觉位置，同时上一个产品退出。显示“SAKURA DREAM”和“SWEET. SOFT. DREAMY.”。页面切换为泡泡糖粉 + 奶油色 + 樱桃红。添加充气粉色 blob、抽象花朵、手绘心形、糖果圆点和流动丝带。大标题短暂像棉花糖一样充气，然后稳定下来。

00:09–00:11 — 05 DARK OBSESSION
光标悬停“05”。触发流动巧克力擦除，将 SAKURA DREAM 替换为 DARK OBSESSION。显示“DARK OBSESSION”和“RICH. DEEP. DECADENT.”。背景变为巧克力棕 + 可可色 + 奶油色。添加布朗尼方块、融化巧克力曲线、曲线、锯齿线和扭曲棋盘格的动画。布朗尼块短暂旋转，同时主视觉做一次细微的 3D 旋转。

00:11–00:13 — 06 TROPICAL GOLD
光标到达“06”。DARK OBSESSION 挤压回到它的缩略图位置，同时 TROPICAL GOLD 向上爆发进入最终主视觉位置。显示“TROPICAL GOLD”和“BRIGHT. CREAMY. TROPICAL.”。背景切换为绿松石色 + 芒果黄 + 奶油色 + 少量紫色点缀。添加热带花、日芒、芒果块、绿松石色丝带、星星和波浪图案。在主视觉后方放一个巨大的扭曲“06”。芒果块带着趣味物理效果绕产品漂浮。

00:13–00:15 — 收尾
将 TROPICAL GOLD 保留在 70% 位置的主视觉。光标快速扫过六款缩略图，让每一个都弹跳、亮起自己的点缀色，然后回到 06。背景形状做出延迟视差反应。“TROPICAL GOLD”拉伸后用弹簧物理效果弹回。显示“TASTE THE FUN →”。光标悬停在 CTA 上，它磁吸放大，下方画出波浪下划线，箭头向右射出后返回。保持最终完成构图。

悬停系统
所有转场必须严格按照“01 → 02 → 03 → 04 → 05 → 06”的顺序，由光标悬停触发。每次悬停时：放大缩略图、替换主视觉、更新标题和标语、更换背景配色、触发对应口味的专属动态图形。绝对不能让序列看起来像自动幻灯片切换。

动态风格
使用 60 fps WebGL / GSAP / Framer Motion 级别的动画，搭配弹簧物理、磁吸光标交互、挤压拉伸、弹性过冲、3D 旋转、光标响应倾斜、动态排版、变形 blob、动态曲线、食材粒子、液体擦除、遮罩和分层视差。保持动态效果有趣、流畅、高品质。

文字准确性
所有可见文字必须和书写内容完全一致。不要填充文字、随机字符、拼写错误、破损排版、假 logo 或额外导航。在显示新文字前用遮罩隐藏退出的文字，因此永远不要出现变形的过渡字母。

构图
保持层级：70% 位置主冰淇淋 → 巨大趣味产品名 → 趣味动态图形 → 标语 → 口味选择器 → 导航。为了增加深度，文字可以部分穿过主视觉后方，但必须保持可读。装饰图形要避开重要 UI。最终成品要给人获奖互动冰淇淋网站的感觉，结合了高品质 3D 产品、趣味排版、趣味图形背景和响应式悬停驱动动态。