Continuous morph journey ending in a swirling black hole

你现在是 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. 尾声终幕
画面回归最初那只橙色小生物。
小生物转过头，注视着身旁落下的微光小点。
反应动作建议：
眨一眨眼睛
露出微笑

轻轻雀跃蹦跳一下