
Continuous morph journey ending in a swirling black hole
19.6K views · 121 likes · 141 saves · 28 reposts · Posted Sep 23, 2026 · 0:28 · Production
OUR NOTEA 28-second procedural short that morphs through scenes such as a galaxy collapsing into a black hole; the creator shared a long shot-by-shot prompt for Vite, TypeScript and Canvas 2D.
Opus 5.5 直出,秀到飞边子了!我愿称之为最强!!!
参考提示词如下(温馨提示额度消耗和耗时会有点大):
你现在是 Claude Opus 5.5,作为资深创意编程工程师(Creative Coder)、动态设计师(Motion Designer)与前端动画工程师。
你的任务是复现我所提供的参考视频中的视觉语言、节奏律动、转场逻辑以及整体氛围质感。
核心目标不是做一个常规网页。
核心目标是使用代码构建一部全程序化生成、具备电影质感且能够自动播放的动画短片。
最终成片应呈现出精致的手作动态设计(Motion Design)质感,而非一堆网页组件的拼接。
1. 项目目标
基于参考视频,构建一部时长 25–30 秒的程序化动画短片。
整段动画需串联多个视觉意象:
可爱角色
→ 神经元 / 电流脉冲结构
→ 三棱镜与彩虹色散
→ 几何色彩构型
→ 向日葵
→ 螺旋星系
→ 黑洞
→ 宇宙隧道
→ 地球升起(地出)
→ 回归角色
最核心的要求:
绝对不要做成互相割裂的幻灯片切换。
每一个场景都必须自然地在视觉上形变过渡至下一个场景。
运用手段包括:
形状渐变(Morphing)
粒子过渡(Particle transitions)
缩放过渡(Scale transitions)
镜头推进(Camera pushes)
径向展开过渡(Radial transitions)
溶解渗透(Dissolves)
实体到实体的几何形变(Object-to-object transformations)
色彩连续性(Color continuity)
运动动量延续(Motion continuity)
整部动画应当呈现为一次连贯流动的“意识流”。
2. 技术栈
技术选用:
Vite
TypeScript
HTML Canvas 2D
requestAnimationFrame
确定性时间轴系统(Deterministic timeline system)
程序化图形生成(Procedural graphics)
可复用的场景模块
仅在对以下视觉实现有实质性帮助时,才允许引入 Three.js:
星系
黑洞
地球
镜头景深
切勿无端引入重型依赖库。
除非有不可替代的理由,否则避免使用 React。
这是一项动画短片工程,而非 UI 应用。
3. 画布参数设定
设计基准分辨率:1920 × 1080
画面宽高比:16:9
目标帧率:30 FPS
动画必须支持自适应响应式缩放,同时严格保持 16:9 的设计坐标系。
必须正确处理 devicePixelRatio,确保动画在高分屏(Retina / High-DPI)上清晰锐利。
4. 视觉风格
参考范本具有插画风科普动画的质感。
目标视觉特征:
手绘质感
微带瑕疵的不规则形状
细微的线条抖动感(Line wobble)
柔和的肌理纹理
有机自然而非机械生硬的几何体
灵动俏皮却不失高级感
干净通透的构图
清晰鲜明的剪影造型
克制但极具表现力的配色方案
避免出现:
泛滥的通用 SaaS 插画风
扁平化企业图标感
冗余的 UI 界面元素
拟真写实风格(Photorealism)
赛博朋克美学
过度的霓虹光污染
千篇一律的 AI 生成式渐变
带有素材库库感的素材
5. 配色导向
主背景色:
暖奶油色 / 米白色
例如:#F2E8CF
深色宇宙场景:
深海蓝
暗紫色
近乎纯黑的夜空蓝
点缀高光色:
橙色
向日葵黄
紫罗兰
青色
洋红
柔红
克制且克制地使用渐变色。
色彩在不同场景间应保持过渡流动,而非突兀瞬变。
6. 肌理与质感
生成细腻的程序化纸张质感。
可选实现路径:
低透明度的随机噪点
背景亮度的细微不均
轻微的颗粒感叠加层(Grain overlay)
质感需清晰可感知,但绝不能喧宾夺主。
禁止加载体积庞大的纸张实拍贴图资源。
尽量全部采用程序化计算生成。
7. 动画时间轴
搭建统一的中控时间轴系统。
时间参考规划:
0.0s – 4.0s:角色登场
4.0s – 7.5s:神经元 / 电流脉冲网络
7.5s – 10.0s:三棱镜 / 光线色散
10.0s – 13.5s:色彩几何 → 向日葵
13.5s – 17.0s:向日葵 → 螺旋星系
17.0s – 20.5s:星系 → 黑洞
20.5s – 23.5s:黑洞 → 宇宙隧道 / 光柱
23.5s – 27.0s:地出(Earth Rise)
27.0s – 30.0s:回归角色
以上时间分配非死板硬性规定,若有助于增强视觉韵律与节奏感,可按需微调。
8. 场景 01 — 角色
时长: 约 0–4 秒。
绘制一个简洁可爱的矩形橙色小生物。
特征:
圆角矩形身体
小短腿
极简的面部特征
轻微不对称的手绘轮廓线条
亲和灵动的性格表现
动画细节:
小生物从画外缓缓走向画面中央。
行走动画需包含:
身体起伏颠簸(Bounce)
双腿交替摆动
轻微的身体倾角晃动
细腻的挤压与拉伸(Squash and stretch)
避免机械僵硬的匀速运动。
充分应用缓动曲线(Easing)与次级跟随动作(Secondary motion)。
场景尾声:
小生物对身旁浮现的事物产生反应。
该反应动作将直接触发下一阶段的转场。
9. 角色 → 神经元转场
不要生硬剪辑。
过渡方案:
角色身旁亮起一个微小的光点。
光点逐渐扩散放大。
细小的分支线开始从中抽枝蔓延。
镜头向前推近。
在逐渐膨胀铺展的网络对比下,角色身形显现得越来越小。
最终,神经元脉络结构铺满整个屏幕。
10. 场景 02 — 神经网络
时长: 约 4–7.5 秒。
具象化一种介于以下元素之间的视觉形态:
神经元 / 生物电 / 分支生物形态 / 闪电脉冲。
使用程序化分形/分支算法生成。
节点伴随脉冲呼吸。
信号流沿各个分支游走传导。
要求:
动态电脉冲流动
有机自然的分支几何体
微小的飞溅火花粒子
线条粗细富于节奏变化
兼具可控的随机感
切勿做成千篇一律的机器学习拓扑网络拓扑图。
它应当充满生物活力与能量感。
11. 神经元 → 三棱镜转场
选中其中一条极为明亮的电脉冲分支。
让这条分支逐渐拉直伸展。
流动其中的能量凝聚为一束纯净的白色光束。
神经网络的其余部分逐渐消隐在暗色背景中。
白光光束横穿画面。
精准投射射入一座三角形三棱镜。
12. 场景 03 — 三棱镜
时长: 约 7.5–10 秒。
绘制一个手绘透明感的三棱镜。
白光自一侧射入。
经三棱镜折射并色散为:
红、橙、黄、绿、青、蓝、紫。
不要只画死板固定的彩虹线。
需制作动态效果:
光束到达的冲击动态
三棱镜受光泛出的辉光
色散铺开的过程
细微的折射光线游移
柔和的光晕泛光(Bloom)
展开的光谱将作为承接后续画面的关键转场媒介。
13. 三棱镜 → 色彩几何
折射出的彩虹光束发生弯曲。
逐步转化为同心圆弧。
圆弧相互嵌套,化作多层旋转的同心圆环。
镜头向视觉中心推近。
三棱镜自然消隐退出视野。
14. 场景 04 — 色彩光环
时长: 约 10–11.5 秒。
构建层层嵌套的彩色同心圆环。
运动方式:
缓慢旋转
正反方向交错旋转
微弱的呼吸式缩放
有机微动的抖动摆动(Wobble)
圆环线条需带有轻微的手作不完美质感。
避免数学上绝对冷硬工整的圆周。
15. 光环 → 向日葵
缓慢改变圆环的几何拓扑结构。
外侧圆环渐变分离为独立的花瓣。
中心圆环转化为密布的向日葵葵花籽花盘。
黄色逐渐占据视觉主导。
整个演化形变过程需清晰可见。
避免使用透明度淡入淡出(Crossfade)的偷懒手法。
让观者能够直观看到一种几何形态如何演变为另一种生命形态。
16. 场景 05 — 向日葵
时长: 约 11.5–14 秒。
生成一朵风格化的程序化向日葵。
视觉构成:
明亮的金黄花瓣
温暖橙黄的花心
深色螺旋状排列的花籽
隐约可见的纤细花茎或植物形态
动画表现:
花瓣舒展盛放
轻柔的生命呼吸感
整体微微旋转
籽粒螺旋排列运动
若条件允许,葵花籽可采用斐波那契数列 / 黄金角分布算法生成。
17. 向日葵 → 螺旋星系
这将是整部短片视觉张力最强的转场之一。
向日葵中心加速旋转。
外围花瓣逐渐剥离脱散。
每一片花瓣解构为一颗发光的星尘粒子。
中心的花籽阵列向外螺旋扩张。
色调柔和渐次推移:
黄色
→ 橙色
→ 紫色
→ 深蓝
整朵向日葵无缝蜕变为一座旋转的旋涡星系。
切忌使用简单的画面叠化淡出。
18. 场景 06 — 螺旋星系
时长: 约 14–17 秒。
构建一座程序化生成的旋涡星系。
要求:
在性能允许的前提下布置成千上万个微型粒子
采用对数螺线 / 旋臂分布规律
极度明亮致密的星系核心
错落点缀的背景繁星
呈现深邃的空间纵深感
镜头缓慢向前推进
整体缓慢转动
粒子需拥有丰富的透明度梯次与大小半径。
避免机械匀质的死板星点分布。
使用带有固定种子(Seeded Random)的随机算法,确保每次播放呈现的画面细节完全一致。
19. 星系 → 黑洞
星系中心区域的自转角速度逐渐加快。
中央区域急剧暗沉塌缩。
周围粒子开始加速环绕运转。
沿切线方向将运动的粒子微微拉伸拖尾。
中央的纯黑视界向外扩张。
整个星系逐步转化为狂暴的吸积盘。
20. 场景 07 — 黑洞
时长: 约 17–20.5 秒。
构建一座风格化的黑洞。
要素:
吞噬一切的纯黑球体核心
炽热发光的吸积盘
橙金交织的内层强光
紫蓝晕染的外围辉光
沿弯曲引力轨迹运动的粒子流
可选实现:做近似引力透镜效果的视觉扭曲。
无需苛求物理层面上严格精确的广义相对论模拟。
以呈现上乘的视觉美感为第一优先级。
镜头向视界面缓慢平稳推近。
21. 黑洞 → 宇宙隧道
镜头彻底穿透坠入中心黑暗。
吸积盘受透视拉伸拉长为同心光环。
周围星尘被径向拉伸成向外散射的放射线。
营造出跃入时空隧道的穿梭沉浸感。
22. 场景 08 — 宇宙隧道
时长: 约 20.5–23.5 秒。
构建由同心发光环或粒子光环构成的深邃通道。
镜头高速向前飞行穿梭。
重点注意:
严禁使用老套庸俗的科幻“超空间跃迁(Hyperspace)”特效。
严格维系短片一贯的插画手绘风味。
临近该段尾声:
通道中央骤然凝聚为一束笔直刺目的白色垂直光柱。
23. 隧道 → 地球转场
这道垂直光柱横向延展放平。
其底边下沉拉平,化作一条地平线。
地平线下方的大片幽黑转化为静谧的月球表面。
一抹深邃纯净的幽蓝辉光在地平线后方缓缓漫溢升腾。
24. 场景 09 — 地出(Earth Rise)
时长: 约 23.5–27 秒。
呈现一幅电影质感的大幅画面:一颗蔚蓝星球自幽暗的月球地平线后缓缓升起。
地球细节包含:
泛着光晕的蔚蓝大气层
高度概括简化的云气流动
提炼简化的陆地轮廓
细腻柔和的外缘辉光
除非绝对必要,否则严禁使用外部实拍 NASA 图片贴图。
优先采用纯代码程序化 / 矢量风格化方式渲染。
月表前景保持绝大部分深邃剪影。
匹配极度舒缓沉稳的运镜节奏。
此处应作为整部影片中最空灵宁静的高光时刻。
25. 地球 → 角色转场
镜头快速向地球表面的一处极亮星斑推近。
那抹幽蓝辉光凝聚为一颗极小的球形光点。
光球进一步缩小。
背景底色褪去深黑,无缝褪回最初温润的暖奶油色。
光点轻盈落在了最初那只小生物的身旁。
镜头缓缓拉远回撤。
26. 尾声终幕
画面回归最初那只橙色小生物。
小生物转过头,注视着身旁落下的微光小点。
反应动作建议:
眨一眨眼睛
露出微笑
轻轻雀跃蹦跳一下THE PROMPT
The creator didn't publish a prompt for this one. The post text is below.
MAKE ONE LIKE THIS
Three steps, using what the creators in this index used.- 1 · Copy the prompt
This creator didn't share a prompt. Start from our template instead.
PROMPT TEMPLATE → - 2 · Direct it like an editor
- Ask for one self-contained HTML file on a fixed 1920×1080 stage.
- Link this video as the reference for pacing and style.
- Send two or three rounds of specific notes.
- 3 · Render it to MP4
A short piece like this can be screen-recorded, or captured frame by frame for exact timing.
TURN AN HTML ANIMATION INTO AN MP4 →
The creator didn't name their tools. Most videos like this are HTML, canvas or SVG animation written by Claude and screen-recorded or rendered to MP4 — how that works.
Indexed Sep 28, 2026, 8:28 AM · Views as of indexing. Video and post © their creator.