Claude Video

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.

THE CREATOR'S POST
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. 1 · Copy the prompt

    This creator didn't share a prompt. Start from our template instead.

    PROMPT TEMPLATE →
  2. 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.
    PROMPT TEMPLATE →
  3. 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 →
HOW IT WAS MADE

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.

LOOK
generative-artparticlescinematic

Indexed Sep 28, 2026, 8:28 AM · Views as of indexing. Video and post © their creator.