Highlights from each release
等高线改为印刷地图质感,Shield 三种结构统一为玻璃材质,柔色圆环换成黑曜光环。
地形加入圆润支脉与整体扭曲,每五层一条计曲线,线过密时先隐去中间细线;新增地形晕渲、强调高度与强调线色,模板改为两浅一深配色,旧配方照常导入。
完整护盾是扫描光带点亮的螺旋菱形网,分层球壳是三道带倒角与细槽的玻璃环,开放核心是玻璃腰带包着白金色核心;轮廓不再出现虚线,模板、系列、作品与应用直接沿用新画面。
柔色圆环换成深黑球体与单道发光环:环绕固定轴单向旋转,前后遮挡清楚,中心光点居中且与环同色;预览以 2 倍分辨率、四点采样绘制,旧配方迁移时保留相位、配色与构图。
D3、Lottie、Rive 与 Canvas 成为独立的一级菜单,便于各自扩展页面。
侧边栏不再用「数据与矢量」分组收纳四个运行时;D3、Lottie、Rive 直达各自实验页,Canvas 下分运行时评估与 Diamond Grid。
作品与参数迁到单独页面,Canvas 实验页改放带实时预览的作品卡片,示例库卡片同步指向新页面。
Diamond Grid 归入 Canvas 运行时:即时模式逐帧绘制,不是 Shader。
淡淡的斜向菱形网格被点亮事件逐一照亮,光沿网格线向外传播,64 秒一个循环;可在 Canvas 实验页调整种子、网格间距、事件数、速度与背景。
总览新增卡片直达这件作品;出现第二件 Canvas 作品时再升级为独立集合页。
新增编号 10–30:浑天仪、十种有序粒子结构和十种从零设计的运动语法,少量粒子跟随主题色。
10 号的共心环各绕自身直径翻转,每 24 秒同时回正合成一组同心圆,两颗主题色彗星沿环缓急运行。
11–20 号以螺旋、环面、原子轨道、纬线、灯笼、螺旋盘、立方线格、层叠圆盘、三叶结与镜像新月表达 Thinking。
21–30 号从零设计:三叶摆、莫比乌斯带、超立方、折叠圆面、鼓膜振型、黄金三框、陀螺、梳理球面、翻转环与图西双圆。
整体、点与主题色特殊点各有一层运动,轮廓保持几何精确;主题色随应用配色重绘,20px 保留各自的简化调校。
以稳定编号选择视觉形态,统一预览、调速与尺寸对照。
通过 01–09 缩略图切换九种原作形态,全部用于表达 Thinking,无需为每种形态绑定不同任务状态。
暂停、恢复与改速保留运动相位;对比 64px 和 20px 独立调校,调整预览尺寸、明暗底色和文字,并通过网址恢复配置。
完成全屋建模、林景与网页光照,沉淀可重建、可对照的建筑制作流程。
浏览十个正式渲染机位,对照原始平面、拆顶模型及作者参考,检查房间关系与尺度依据。
客厅织物、餐厨木作、书房设备、主卧床品和石材卫浴共享同一场景,支持与历史成果逐轮比较。
切换房间查看分区光照与实时镜面,旋转、拆顶或检查线框;高清纹理按需加载,停止操作后停止持续绘制。
提供模型资源包、制作脚本、固定机位基线和恢复式构建流程,校验效果图与网页资产来自同一版本。
补齐体创作工作流,精选十二件 Shader 作品,并加入两张可交互的 Three.js 卡片。
从构图模板、结构系列到本地作品与四套明暗版式,均可连续编辑;空心光壳支持三种构图及完整参数、相位与动画时钟备份。
点、线、面、体各收录三件代表作,可按方向、明暗和场景筛选,按需预览后进入对应工作台或设计应用。
移动指针显露虹彩刻线与递归三角形,卡面轻微倾斜并平滑回正,支持材质调节与自动演示。
悬停点亮向上柔光与浮雕投影,金属拨钮可保持常亮;支持明暗主题、键盘、触屏及光影参数调节。
三套构图衍生材质系列,保存个人作品,再进入四种明暗设计版式。
在完整悬浮球、偏置近景和微距曲面之间切换,保留固定画框比例,可调位置、尺度并导出当前画面。
每种构图搭配冷银、黑铬和暖钛,支持命名、更新、复制、准确恢复参数与动画时钟,以及 JSON 备份和导入。
将当前创作带入海报、Hero、名片或信用卡,选择明暗与画面适配,保存版式后可携带完整快照返回材质编辑。
建立体母版入口,扩展球壳、分形与金属球,并加入两套 HUD 光环。
六个现有球体、空间与能量示例拥有统一入口;Shield 可比较完整护盾、分层球壳和开放能量核心。
新增可拖拽分形球、OrbKit SHDR-31 光壳与液态金属球,保留来源说明并提供独立参数检查器。
在面的母版中体验灰白循光和青蓝扩散扫描,各有一个衍生变体,支持播放、调参、网址恢复及 PNG/JSON 导出。
版式预设独立成库,Page 与 Card 各两款,每款都提供明暗两种设计。
动态海报、Hero、个人名片与信用卡,分别组织文字、留白和实时视觉,作品明暗不改变应用主题。
切换面素材、播放暂停或恢复推荐搭配;分类、版式、明暗和素材选择可随网址刷新与返回恢复。
Hero 在窄屏下纵向重排,预览遵循减少动态偏好;从创作侧栏、总览或母版工具栏即可进入。
新增两张 OpenShaders 母版,以及分别围绕旋转光弧和焦外反射构建的环形实验。
保留作者来源与原始参数,支持色彩、运动、明暗调节和 PNG/JSON 交换。
多层光弧以不同相位旋转,可调整轨道、拖尾、色彩与曝光。
对数环轨与解析焦外光斑结合,支持蓝、冰白、琥珀配色及焦点调节。
银蓝细纹褶皱、柔色圆环与双弧流光,三张母版都走程序化材质,不采样任何图片;圆环这一张按舒适度重做了配色与环面形态。
低频曲面组织大褶皱,高频凹凸转成法线形成细纹,柔和的程序化灯箱在上面流出光泽,全程没有一张图片纹理。细纹跟着曲面变形,并按像素足迹抗混叠。银蓝垂褶、宽幅涌动、细密流银三种预设,七项参数、定格相位与 PNG/JSON 导入导出。
按舒适而不是对比度组织:有序相邻色、六到七个柔和宽环、固定宽光源,取代随机宽度、针状细线与加法发光。苔玉、暮桃、雾蓝三组各有自己的底色,相邻环按覆盖权重混色,高光不会叠成白;圈数上限十六圈,旧的高密度配方导入时自动迁移。
两片相反朝向的解析 S 形轮廓,近似法向距离同时给出内部宽光源与边缘细亮线,体积感来自受控衰减而不是发光 Pass。墨绿与紫罗兰共用同一结构,紫罗兰默认绕画布中心旋转,旋转可关闭也可反向,旋转字段出现之前保存的配方仍可导入。
此前照参考图做的多色扩散环,怎么调参都不舒适,因此重做的是配色组织、环面形态与运动节奏,而不是单纯调暗。原有网址、变体 ID 与导入导出格式保持不变。
点阵进入弯曲隧道,面新增黑白金属与连续双面薄膜,用形体和材质共同组织流动。
在三维弯曲隧道中穿行,调整结构与运动,定格相位并导出 PNG 或参数配方。
银弧、层叠、切面三种构图,薄边与遮挡保留金属层次,反射随曲面运动清楚扫过。
一张薄膜固定冷色正面与暖色反面,通过纵向扭转、波浪推进和整体翻面显露两面;旧参数文件仍可导入。
统一选择、日期、时间和数字输入的三档尺寸,修正禁用边框及图标与文字间距。
动态渐变、波浪与极光串起模板、系列、作品库和设计应用,创作导航也更直接了。
从静态渐变与四类动态母版出发,把九个构图模板扩展为 27 个系列起点,再带着参数和相位进入三套可编辑文案的设计应用。
保存、改名、复制和恢复面的作品,支持删除撤销与 JSON 备份导入;作品保留应用文案,PNG 导出纯 Shader 色场。
阶段直达设计,统一家族名称并补齐前向入口;变体与视图写入网址,刷新、分享和浏览器返回保持一致。
复用通用页头,减少重复留白和导航,操作者控件使用中文,作品内文案保留设计语言。
从核心设计到模板、系列和作品应用,点与线的创作路线连起来了;独立导航让每一步都有清楚的位置。
浏览九个动态模板,在螺旋、核心和地形工作台中各探索五种系列构图,保存参数与相位,从我的作品继续编辑。
研究等高线、光雨、空间光轨、弯折轨道和绿色光幕,调整构图与节奏,导出参数和 PNG,并在三套概念品牌首屏中比较效果与排版。
同步比较凝光、穹光和流萤,保存参数、相位及缩略图,再精调或放入设计应用;跨页面切换可继续当前会话的草稿。
从点、线、面、体进入,按阶段和具体设计逐层选择;网址、面包屑和浏览器返回保持当前位置,旧链接与已有作品继续可用,面与体明确标为待开展方向。
六种渐变构图加入呼吸、流移与交织,并结合 Continuum、Infrastructure SYS 和 FIELD 研究图层、留白与真实排版。
压低 NeuroSync 的高亮与闪点,让绿色光幕中央更密集、外围更疏朗。
新增第十九至三十一课,从图像颜色与采样走到多 Pass、Bloom、背景折射和 DOM 滤镜,串起完整的基础路线。
调节参数并对照原图、结果和中间视图,观察像素读数,完成练习,再将效果应用到卡片;第二十二课起可通过下一课顺序学习。
逐层检查真实模糊与 LDR Bloom 管线,并在可交互内容上对照 CSS、SVG、背景滤镜和 Canvas 2D 的不同作用范围。
半透明作品外框搭配动态灰阶山景,收紧内外圆角,并移除逐卡片背景模糊以减少渲染开销。
Shader 探索增加第十三至十八课,逐步理解重复、Voronoi、反馈拖尾、Raymarch 和外部输入。
在公式、诊断视图与最终画面之间切换,调节参数并完成练习,再将同一效果用作卡片材质。
逐帧推进双缓冲拖尾,归零并重放指定帧;对照球体的步数、深度和表面,再用指针、模拟强度与状态驱动发光环。
独立的 Shader 探索入口收录前十二课,从坐标与颜色走到噪声、形状、抗锯齿和发光。
每课只增加一个核心概念,配有参数调节、前后对照、练习与答案,并将同一效果应用到卡片。
观察坐标、色带曲线、噪声叠层与有符号距离;放大真实像素比较抗锯齿,暂停或定位时间复现动态结果。
无限作品墙带来全方向拖拽和三档惯性手感,同时收录新的 Shader 材质、双风格轮播与两套 Blender 办公室。
16 件作品循环铺排,鼠标和单指直接拖动,触控板与方向键也能探索;松手自然滑行,按下立即停止。支持三档手感、详情返回、刷新位置恢复与减弱动态。
浅色艺术画廊和深色镜面展厅共用环形透视轨道,提供完整的 Section 排版与平滑吸附。
保留十二席布局,新增卡通与写实两种独立示例,随项目提供可编辑源文件以及家具、设备、储物组件。
极光通道、轨道流光和 Cauldron 接入参数化工作台;新增蜂窝、液体、颗粒进度条,以及可切换四组配色的流动材质卡片。
Shader 示例增加工作台总览面板;公开首页不再引导访客进入内部实验台,尚未通过视觉验收的丝绸流场暂时隐藏。
一个维护版:自 Base UI 迁移起,所有工作台的 slider 圆钮都被切成了 4px 薄片、可点区域只剩轨道本身——这次把它修回来。
Radix 时代的部件把圆钮放在轨道旁边、用 overflow-hidden 只负责修圆 range;Base UI 把圆钮嵌进轨道里,迁移带过来的那条裁切把 12px 圆钮切到 4px,连带切掉了它的扩大命中区。裁切已去、指示条自己修圆、Control 在轨道两侧加了内边距、圆钮回到部件默认的 16px——每条 slider 的命中区从 4px 变成 32px。与 yBlocks 0.84.2 同步。
Cyclone、Glowing Light Rain 与 Traffic 接进既有的紧凑工作台壳层,示例库到二十三台;工作台头部现在能报出作品的作者与使用条款。
Cyclone 是体积积分而不是表面命中:「高度减半径」这一个标量同时决定该点转多少、步子多长、发光相位在哪,锥形不需要任何显式圆锥方程,累加乘步长而不是除步长,气旋因此是半透明的。Glowing Light Rain 用整数列哈希配胶囊距离场,五层雨零纹理零状态。Traffic 的透视只是一次除法,车道方向由余弦的正负号给出、不用任何分支,同一个标量过一次陡峭 tanh 就成了红尾灯与白前照灯的开关。
头部那枚一直写死「来源待补」的徽章,改成读作品自己的记录:已知作者就显示作者,有使用条款就把条款一起显示在舞台上,而不是埋进折叠区里。原有九台两样都没声明,显示不变。
最后四台各引入一种此前没有的动作:分度转台、伸缩桅杆堆垛机、接触器、检重秤;接触器顺带带来第四种画法——剖视。状态卡组同步扩到二十张,这个系列到此为止。
分度转台只在周期前段转过一站,剩下的时间钉死不动,活就在那段不动里干——节拍第一次有了画面;伸缩桅杆三节各走三分之一,收起来只有一节高,行程却是三倍;接触器只有两个位置,而且吸合与释放不在同一个电压上;检重秤是全族唯一一台动作出自物理响应而非目标姿态的设备,货一落台,秤台按二阶欠阻尼系统自己晃,秤台下沉与刻度指示线是同一个值。
接触器的动作全在壳子里,不切开没得看,于是按制图惯例给切到的料打剖面线,外壳 45°、铁芯反 45°。等距、正视、平面之后,这一族第一次用制图约定而不是材质层次说话。
转台的节拍由最慢那个工位定死,提速别的工位什么都不会发生;堆垛机锁掉一节桅杆不是少一层而是少两层,待办队列被一条水平线切成两半;接触器同一个读数在两个方向上是两种状态;灌装线的设定值往上调短装消失但白送产品,往下调省下克数却违规,两头都要付钱,没有正确答案。
卡片太窄放不下的说明,鼠标悬浮就补出后半句,且只对真的被截断的那几段生效——有没有被截断是量出来的,不是猜的。Label Printer 的标题句也从逐词大写改成句首大写,与其余十九张一致。
自动关闭的倒计时从底边进度条移到 tone 图标外圈,不新增计时器,按 toast 自己的暂停信号停走,环与关闭时刻不会漂移;解剖改成图标、文字、操作、关闭四列中轨,带操作按钮的错误提示由 126px 降到 82px;暗色下底色改用浮层色,阴影压平后仍与页面分得开。
四台新设备各引入一种此前没有的动作:拧紧机器人、电池模组、激光打标机、卷绕机;状态卡组同步扩到十六张,并整体改小,笔记本宽度下一行放得下四张。
机器人手臂每一节的位置由上一节的角度决定,末端要去哪里用两连杆逆解反算;电池模组的品牌色第一次不落在某个具体的东西上,而是二十四颗电芯上的一片温度分布;激光打标机的标记一段段长出来,光束落点与已画部分同源;卷绕机的两卷按面积守恒此消彼长,转速随半径变化,浮动辊把张力画出来。
机器人的刀尖会随热机漂移,修它就得停机,卡片同时摆出漂移与停机时长;电池模组温度越线后保护机械锁死,从卡片只能派人去现场;打标换格式不可逆,按钮先解锁再确认,且解锁会超时自动收回;卷绕机的飞接有时间窗,错过就只能停线手动穿料。
状态卡组在笔记本宽度下一行四张,中等宽度三张,窄屏两张。卡片按自己的宽度而不是视口来收放,内边距、区块间距与横向留白由同一个变量统一控制;窄的时候标题与说明截断显示省略号,宽的时候展开。同一行的卡片等高,动作按钮对齐。
继续按「动作」而不是按行业扩充:磁带库、液冷回路、电能表、智能快递柜,各带一种此前没有的动作;对应的四张状态卡把卡组也扩到十二张。
磁带库把磁带从格位搬进驱动器,走位、抓取、搬运、送入分五段;液冷回路的冷却液沿管路流动,冷板到散热器那段是热腿;电能表的字轮随用电滚动并逐位进位,是这一族第一次做字形动画;智能快递柜的柜门绕铰链转出,露出里面的包裹。
磁带读不出时按 5、10、21 秒退避重试,三次仍失败就跳过,终局是「带缺口的成功」;液冷回路的泵会自动加速抵消热负载,直到加不上去温差才开始涨;电能表报的是「还有多久进下一档」,一按模拟高峰当场塌掉;快递柜的包裹没人动也会变老,超期自己变成待办。
三角函数派生的数值在服务端与浏览器的最后一位不一致,会让画面报水合错误,现已统一取整;快递柜的柜门此前会开在错误的格子上;打印机框架四个角上多出的一级台阶已消除。
设备插画族按「动作」而不是按行业扩充:龙门 3D 打印机、不间断电源、旋转激光雷达、分拣线扫描门;分拣线用平面图画,是这一族的第三种投影。对应的四张状态卡把卡组扩到八张。
打印机是往复加逐层填充,整个龙门随工件升高;不间断电源是液位,同一个电量会跌也会涨,方向由市电在不在决定;激光雷达是旋转扫掠,扫过的目标按角距衰减;分拣线是传送与过闸,三件包裹各走三分之一条带,于是每个周期恰好过一件。
分拣线用俯视平面图画。加上机柜的正视图,可以看出这一族约束的是风格与驱动方式,不是画法。
四张新卡各演示一种此前没有的状态机:打印完还要等冷却的两段式终局、停电与复电改写方向的电量、每转一圈重测一遍并需要人确认的回波日志、卡纸时抢走主按钮并冻结计数的故障。
长方体与圆柱抽成同一个模块,原有四台一并改用,机身不再有两种写法;画廊相位改为按台数均分,加一台设备全体自动重新错开。
三角函数派生的坐标写进 SVG 属性前统一取整,否则服务端与浏览器的最后一位不一致会导致水合报错;退件数与喷头温度改为与主计数同属一份状态,避免在一个更新函数里调用另一个更新函数被重复执行。
首页背景说明改为直观的画面描述与通俗的原理介绍。
去掉抽象比喻,先说明你看到的光流、波纹或渐变,再简要解释它们如何生成;海报标题、布局与背景切换方式保持不变。
SVG 示例新增「设备插画」Tab:标签打印机、信号放大器、8U 机柜、计算节点共用一套几何、时钟、材质与读数语法;对应的四张状态卡组成卡组,每张各有自己的状态机。
四台设备共享等距几何模块、单 MotionValue 时钟、主题 token 混色材质和带网格的画框,每台恰好一处品牌色信号加一行等宽读数。画廊按注册表渲染并错开相位;再加一台只需一个场景文件和注册表一行。机柜用正视图证明这套语法约束的是风格与驱动方式,不是投影。
一个共享卡壳承载四张 dashboard 尺寸的卡:Label Printer 管卷余量与排队,Storage Tower 的重建进度按周期推进、满格后阵列恢复冗余,Worker Pool 的 U 位在周期末上线、Add Worker 预热下一空位并在 7 of 8 触发自动扩容,Signal Analyser 的峰值与舞台读数同源、三档限值轮换、Capture 冻住轨迹。所有派生文案由状态算出,演示入口收在「···」菜单里。
计算节点新增 bays / activeBay,机柜新增 filled / warming 两组可选属性,让卡片钉住盘位或指定预热的 U 位;画廊仍走默认值,一行没改。
新增独立的办公室数字孪生 Tab,以低切轴测地图、状态体块和联动详情呈现十二工位的运行状态;原建模版本和 GLB 导出保持不变。
五项指标、宽幅三维状态地图、工位详情与趋势分布组成监控视图;保留 A/B 两组工位、左后入口和门后衣架布局。
支持区域筛选、轴测和平面切换;悬停或聚焦工位可就近查看位置、终端状态与模拟功率,点击联动详情。状态色跨地图和图表统一,窄屏先查看详情再看统计。
演示预约、终端离线、告警确认和设备恢复;断线后冻结快照,确认告警不等于修复设备。所有数据明确标注为模拟,默认暂停,不连接真实设备。
示例库新开 SVG 分类:手写等距几何、单时钟驱动的标签打印机循环插画,顺带回答「Lottie 还是 Rive」;同一场景放进一张会动的状态卡。Three.js 示例新增可交互的办公室三维比例模型。
侧栏「示例库」多了 SVG 示例,与 Three.js / Shader / 代码视频同一套 Tab 集合页,挂在 CSS + SVG 实验之下;以后的 SVG 作品继续追加 Tab。
52 个 SVG 节点、一个 MotionValue 时钟驱动圆盘、屏幕、LED 与出纸,每帧零 React re-render;机身材质由主题 token 混出,暗浅两套外观不需要第二份资产。页面上写清了它为什么不是纯 SVG、什么时候该换 Lottie 或 Rive。
排队数与卷余量随每次出纸同步递减,状态词、标题、差额与停机位置全部由这两个数派生;卷空则机器停下、状态转红,上新卷恢复。「···」里有跳到各状态的演示入口。
按参考图建立两组对坐工位与配套设施,入口位于左墙后端;提供轴测 / 俯视切换、座位选择、按需渲染与 GLB 导出。
外观设置新增 Sticky header 开关:小屏上不想让页面标题带一直占着高度的话,关掉它。
默认开启保持原行为;关闭后每页的标题带随内容一起滚走,把纵向空间还给正文。顶部应用栏是全局导航锚点,始终钉住不受影响。
新增 Three.js Storm 程序化点云场景;应用现在打开就是矩阵的统一外观,每个实验页也会自己报出名字。
五万个主体点的等离子体质感全部在 GPU 上生成 —— 呼吸、旋转、径向配色与指针排斥都写在着色器里,初始化后每帧的 CPU 点位更新为 0;三段 Composer 负责环境泛光、主体泛光与程序化火焰合成。
推 tag 会自动跑门禁、构建并部署到 animation.catforest.dev;缺凭据时直接失败,不再绿着跳过。
未存储状态的默认值改为暗色 + orange 预设 + 限宽 + 侧栏,与矩阵其他仓库一致;动过设置抽屉的浏览器保留自己的选择。
每个实验页显示「Shader 示例 · yAnimationPlayground」,而不是二十五个标签页都写项目名。
两者接的都是 mock 数据 —— 空消息流上永久亮着红点,头像是个陌生人。占位放在头部会被读成「真功能坏掉了」。
`/` 从一句跳转变成成品首屏:十二块 shader 轮流当全屏背景,每块配自己的海报标题;站点同时上线到 animation.catforest.dev。
复刻 yLookbook 的同名 look —— 冷蓝黑底、暖纸白标题、琥珀唯一强调,指针视差与逐行升起的节奏直接沿用那套动效语言。
拖拽、方向键与底部缩略图共用一个索引,缩略图是每块 shader 自己的真实静帧;同一时刻只保留一个 WebGL 上下文。
web 工作区通过 OpenNext 适配器部署到 Cloudflare Workers,域名 animation.catforest.dev。
三个示例与 GSAP 运行时改为构建期烘焙的静态资源,不再在请求时读文件系统 —— Workers 上没有文件系统,此前线上四条路由全部 500。
Ribbons、Light Matter、Horizon、Spherical Raymarch 与 Kinetic Tessera 循环层数过高,全屏下会掉帧,首页不收;它们在 Shader 工作台里照常可用。
Gradient Flow 现在可以直接运行、调参和测量;短代码中的噪声、旋转、波形扭曲与配色层级都能逐项检查。
保留用户提供函数的核心算法与默认常量,将它适配为原生 WebGL 2,并提供六项可复位参数、确定性时间和减少动效。
收到的 Shadertoy 风格函数与可运行版本可以并排检查,统一 HUD 同时记录无纹理、无循环单 Pass 的真实帧表现。
新示例继续复用画布、检查器和按需说明层,在桌面与 390px 窄屏中保持一致的操作顺序。
The playground adopts the matrix's logo, and a capability the library sync had quietly deleted is restored.
A Solar glyph painted with a --primary gradient and a split wordmark, so the mark follows the brand colour through every theme. The collapsed sidebar now reuses the same component instead of a second circle.
AvatarFallback's deterministic hue variants came from yTemplate and were overwritten by the v0.8.15 library sync. Every added prop is optional, so nothing failed to compile — which is why syncing now includes a scan for what a wholesale copy would delete.
Three rounds did not reach the bar for a representative frame or for change over time, so the study is hidden from the examples tab and kept as a negative result with its notes.
示例导航、Shader 工作台和实验报告统一了层级与操作路径;页面数量继续增长时,仍能快速找到示例、调整参数并按需阅读原理。
Shader、Three.js 与 HyperFrames 采用 yBlocks 的共通 Tab 和横向滚动交互,支持边缘渐隐、箭头切换与选中项自动定位。
十五个高频示例统一为等高 Stage 与 Inspector;参数和性能留在主操作区,源码、原理与来源默认收起,需要时再展开。
交互与视觉实验现在复用 Stage、能力摘要、结论和边界四层结构,不再由每个页面自行组织阅读顺序。
十九个 Shader Tab 能稳定收进桌面侧栏布局和 390px 视口;移动端保持画面、参数、补充信息的真实 DOM 顺序。
The playground stops maintaining its own copy of the shared UI: yBlocks' library, kits and design laws come over wholesale, on one behavioural engine.
Both repos started from yTemplate and drifted; 49 of 50 files now come from upstream, and radix-ui, cmdk, vaul, sonner and react-day-picker are retired. Eleven parts this app never imported were deleted rather than migrated.
Eleven shader studios scroll their source panels through it, so instead of keeping one Radix component alive for one slot it was rebuilt on Base UI — call sites unchanged.
Thirteen law documents arrive with the kits they legislate — data-view, detail, form-page, settings-page, kanban, studio, loaders and the inputs family — plus useHotkeys, useTokenColors and the data pipeline. A lab with a parameter panel beside a canvas is a studio page, and the kit now owns that anatomy.
Off in production unless ?perf=1, Alt+P toggles it. In a repo this full of WebGL and GSAP, an instrument beats an opinion about jank.
Shader 示例库新增七个可运行、可调参、可测量的单 Pass 工作台;短代码背后的坐标、循环、场函数和 GPU 成本现在都能逐项检查。
用片元坐标、分辨率、时间和一个脉冲参数生成完整色场,作为理解 Shader 并行像素函数的最小基线。
Blackhole、Horizon、Hyperspace 2 与 Plasma 分别保留对数透镜、嵌套视线、倍频扰动和径向流场的独立数学结构。
新增百层球面格纹护盾和二维装饰卷曲场,并提供八组可复位参数、三级源码对照与稳定性能证据。
所有新增作品继续复用按需挂载、确定性时间、减少动效、DPR 上限和统一 Performance HUD,不让示例数量扩张成运行时负担。
三件原创作品组成的 Shader Atlas 调整到 v0.8.15,本版只发布已完成实机验证的用户提供函数研究。
Lapse、Ribbons 与 Light Matter 现在可以在相同画布和性能口径下直接运行、调参和对照源码;共享的是宿主与测量,三套视觉数学仍保持独立。
分别保留 50×9、99×6 与 80×3 的原始循环预算,提供确定性时间、八组可复位参数、减少动效和中文原理拆解。
收到的文本、规范化 Golf 与可读浏览器 GLSL 分开呈现,循环、自增、空向量参数和 Markdown 乘号的展开假设均可检查。
相同画布下直接比较 P95、GPU 时间、超预算帧、视线采样和内部场运算,明确一次 Draw Call 仍可能包含每像素数百次循环。
Shader 示例增长到十二个后仍能在桌面侧栏和 390px 窄屏内正确收缩,不再产生整页横向滚动。
三件原创作品组成的 Shader Atlas 调整到 v0.8.14,本版只发布已经完成实机验证的三个函数研究工作台。
Grace 与 Flare 2 现在都能保留原式基准直接运行、逐项调参并测量真实 GPU 成本;来源不完整或被 Markdown 损坏的文本也会留下清晰的修复与归属边界。
完整保留 30×6 原始循环和十二组常量,通过确定性时间、源码对照与中文分析检查多频空间扰动、半径步进和暖色能量累积。
恢复被 Markdown 强调语法破坏的乘号,以二十层色谱、动态余弦矩阵和反距离光束生成可调耀斑,并保留收到的原始文本。
收到的文本、规范化 Golf 与可读 GLSL 分开显示;作者和原始链接尚未确认时,页面明确保持来源待补状态。
三件原创作品组成的 Shader Atlas 调整到 v0.8.13,本版只发布已经完成实机验证的两个参数研究工作台。
Wave 原式现在可以按真实 Golf 语义直接运行和调参;统一性能 HUD 则把帧时分位数、GPU 时间、内部像素与运行时工作量放进同一套测量口径。
保留用户提供函数的全部原始常量和作者来源,同时提供可读展开、九组实时参数、确定性时间、暂停、复位与减少动效。
原生 WebGL 2 与 Three.js 现在共享 FPS、P95/P99、GPU Timer、CPU 提交、超预算帧、DPR、Draw Call、Pass、资源和工作量诊断。
参数、质量档或画布尺寸变化会清空旧窗口,暂停和手动静态帧不再混入连续统计;React 只接收每半秒一次的聚合快照。
三件作品组成的 Shader Atlas 调整到 v0.8.12,本版只声明已经完成并通过浏览器验证的能力。
两个新示例把外部参考、独立实现与用户提供源码分开管理:既能逐层理解短代码背后的数学和 GPU 成本,也不会把来源不明的代码混入自己的长期积累。
保留作者与上游链接,但不复制公开页面中的压缩源码;改用可读 GLSL 从零组合 FBM、域扭曲、波脊、距离光丝与光谱映射。
把用户提供的紧凑 Main Pass 展开成确定性 WebGL 2 示例,完整保留 100 步 Ray March、球坐标场、反距离累积与 tanh 色调映射。
两种效果都支持暂停、时间定位、减少动效和视觉参数调节,并显示循环次数、片元工作量与来源边界。
三件作品组成的 Shader Atlas 调整到 v0.8.11,确保本次发版只声明已经完成并验证的研究能力。
导航现在把研究工作台、示例库和项目记录明确分开;Three.js、Shader 与代码视频各自拥有稳定入口,新 Demo 继续在分类页面的 Tab 中增长。
交互动效、数据叙事、Three.js、Shader 和代码视频拥有统一索引,可直接查看运行时、当前作品和分类规模。
像素函数、粒子架构、状态与反馈、方言适配集中到一个示例入口,切换时只挂载当前 WebGL 工作台。
研究入口按职责收拢,示例单独成为大分组,项目记录保持独立;查找路径更短,也为后续大量 Demo 留出空间。
Shader 隐藏子路由现在能准确归属到主实验入口,模板遗留的推广卡被移除,导航获得完整垂直空间。
Shader 来源与兼容 Studio 把发现、许可和导入拆成三道门:先建立来源链,再判断权利范围,最后才让经过许可的代码进入隔离适配与真实编译。
FragCoord、Shadertoy、The Book of Shaders、LYGIA 与 glslCanvas 现在都有作者、许可、上游修订、运行契约、seek 和失败模式记录。
同一个仓库原创画面分别经过 Shadertoy mainImage、GLSL Canvas WebGL 1 与原生 WebGL 2 契约,适配后源码和运行指标均可检查。
可复用、有限许可和仅研究三种状态拥有明确门禁;未复制源码时,原始 Hash 与导入日期必须保持为空。
页面明确区分入口函数与 uniform 映射,以及多通道纹理、反馈 Buffer、音频和键盘所需的真实资源依赖图。
多 Pass Feedback Studio 把 Shader 从独立逐帧公式推进到持久 GPU 状态:粒子纹理、衰减拖尾、流场输运和简化染料平流现在可以逐层检查、确定性回放并比较真实成本。
从 RGBA32F 粒子位置和速度开始,依次进入衰减反馈、流场反向输运与简化染料平流,明确每个 Pass 读取什么、写入什么。
固定 seed、60 Hz 步长与执行顺序,拖动时间轴时从最近的 GPU readback 检查点继续重放,既保持结果一致,也把重算成本显示出来。
同步显示 draw call、估算纹理采样、持久状态显存、CPU 提交和可用时的 GPU timer,直接观察短代码背后的并行工作量。
页面明确标注染料平流是解释反馈架构的简化模型,并非包含压力投影、散度求解和边界条件的完整 Navier–Stokes 流体方案。
粒子架构 Studio 固定视觉目标,只替换底层管线;片元循环、点精灵、实例化几何和纹理状态 GPGPU 现在可以在同一组指标下直接比较。
共享画布、数量、尺寸、颜色与运动目标,避免用不同画面伪装成架构比较。
RGBA32F 纹理保存位置与速度,更新 Pass 和渲染 Pass 分离,并用固定种子与 60 Hz 固定步长支持重置和顺序重放。
同步显示 draw call、顶点调用、估算片元覆盖、状态显存、CPU 提交和可用时的 GPU 查询结果,不再只看封顶 FPS。
装饰粒子优先公式或点精灵,需要形状时用 Instancing,只有历史、外力和相互作用成为需求时才进入 GPGPU。
Shader 第一层不再只展示结果:坐标、时间、距离场、程序化粒子、核心 GLSL 与每帧成本现在可以在同一个原生 WebGL 2 Studio 中逐层检查。
在像素坐标、时间函数、SDF 和程序化粒子之间切换,暂停或拖动确定性时间,并同步阅读中文原理与核心 GLSL。
画面旁直接显示 backing pixels、DPR、draw call、距离评估量、FPS 与帧时,让代码行数和真实工作量不再混为一谈。
按更正后的 46.83 秒原视频重建 16 个视觉段落,使用原创品牌中性画面验证多场景 HyperFrames 时间线、暂停与 seek。
Shader 发光在明暗主题下都保持可见,移动端不再被画布撑宽;Web 工作区同时升级到 Next.js 16.3.3 与 React 19.2.8。
Sylva 的完整 WebGL 页面和 Character Carousel 的双变体现在进入同一个示例库;不仅能看效果,也能检查 iframe、资源、依赖体积与生命周期边界。
完整保留官方苔藓根系、花朵、蕨类、漂浮花粉、蝴蝶与液态金属控件,并把 HTML、字体、图片、Three.js runtime 和许可证全部落到本地。
可以切换 Filmstrip 与 Wave,使用中文面板调节速度、缩放、透明度、色相、饱和度和亮度,并用指针、滚轮、方向键与卡片焦点实际操作。
页面明确区分完整 WebGL 文档与 DOM + CSS srcDoc;切换示例会卸载非活动 iframe,依赖成本和独立 chunk 体积也记录进实验结论。
临界阻尼弹簧和静态 Bezier 现在运行在同一套 zoom / pan 舞台中;连续改目标时,可以直接看见位置相似背后的速度差异。
在全景、局部细节和光标跟随目标之间连续重定向,对比 Spring 继承 position + velocity 与 Bezier 重新开始时间映射的实际手感。
实时调节 ω、缩放、平移和初速度,并同时查看位置响应、瞬时速度、舞台遥测与速度模糊近似。
界面明确说明 Bezier 不消费 ω,只使用 9 / ω 匹配比较时长;减少动态效果和移动端布局也拥有完整后备。
三次产品视频实验的得失现在变成了可检查的方法说明;你也可以直接运行同一条 HTML 时间线,对照 HyperFrames 与 Remotion 的核心模型。
用可拖动的 time-to-frame 演示、生产责任分层和 30/60/90 分评价尺,说明工具能力与专业成片之间仍缺哪些人工判断。
一条 20 秒纯 HTML 动画并排解释 frame 与 time + seek 模型,支持播放、暂停、逐帧拖动、章节跳转和全屏观看。
首支 TanStarter 草案不再被误记为 v0.9 已完成作品;目标识别问题和粗糙成片继续作为下一轮重制的明确输入。
官方视频 Agent 工作流已经固定进仓库,旧模板 Demo 也完成退役;入口、导航和异常反馈现在都围绕动画研究主线服务。
完整收录 Remotion 12 个与 HyperFrames 26 个官方技能,并锁定上游来源和内容哈希,方便 Agent 稳定复现工作流。
首页直接进入实验总览,导航移除分析仪表盘、通用图表与 UI 画廊,只保留动画、代码视频、AI 制作和版本记录。
已退役地址和异常页面统一使用中文说明,并提供返回实验总览的明确操作。
Three.js 现在拥有独立实验阶段:从场景图、相机和射线交互,到帧预算、减少动效、语义后备和 GPU 资源清理,都能在同一个空间信号场中实际操作。
在信号星群、分层映射和聚焦路径之间切换,用相机、点云、光照与空间节点理解真正的三维叙事。
可比较 480、1,200 和 2,600 点,以及 1×、1.5×、2× DPR,并查看 FPS、帧时、draw calls 与 GPU geometry。
中文技术地图明确区分 DOM/SVG、Canvas 与 Three.js,只有信息依赖相机、透视、深度、模型或 GPU 管线时才升级。
射线点击始终有原生按钮等价路径,减少动效停止循环但保留最终信息,离开路由会完整释放观察器、控制器和 GPU 资源。
创意简报、结构化 AI 草案、故事板、资产、实现脚手架与 QA 现在形成可重复流程,并由同一份产物驱动 Web 审查和 Remotion 成片。
可以逐阶段查看输入、审查责任与编译产物,并用中文理解每一条生产规则。
同一份已审查输入会生成固定故事板、资产清单、实现脚手架、QA 报告与 bundle hash。
十条门禁覆盖时间线、资产引用、规格覆盖、减少动效与人工批准,并通过缺失资产样例证明错误会被阻断。
一份 12 秒生产 bundle 同时驱动 Web 工作台和 Remotion 横竖双版 Composition,运行时不携带模型 SDK 或密钥。
Motion token 与组合原语现在拥有稳定契约,并经过现有 React 交互、Remotion 视频与专用工作台的多消费者验证。
统一时间、缓动、弹簧、交错、位移、编排与减少动效策略,并为 CSS、Motion 和视频帧提供明确换算边界。
通过独立子路径提供策略、过渡、Reveal、Stagger 与 Pressable,按语义变体组合行为而不堆叠布尔参数。
可以实时切换系统、完整与减少动效策略,重播进入序列,并连续切换状态观察可中断行为。
仓库检查现在包含 token 运行时断言与公共消费者编译测试,防止数值尺度、语义引用和导出接口漂移。
Remotion 与 HyperFrames 现在共享一份 36 秒生产契约,并各自产出经过实机、运行时和媒体参数检查的横竖双版参考成片。
用 typed React Composition 建立本地 Studio、横竖响应式构图、帧驱动动画和可重复 MP4 输出。
用静态 HTML、data attributes 与可 seek GSAP 时间轴建立两个合法单根工程,并通过运行时与布局检查。
四条 36 秒成片统一为 30 FPS、H.264 与 AAC,并分别验证 1920×1080 和 1080×1920 输出。
用中文解释共享契约、完整命令、渲染模型、工程负担与默认选型结论。
修正简体中文字体回退,并解决 Lottie 时间轴推进但画面冻结的问题。
D3、Lottie、Rive 与 Canvas 现在拥有可操作的参考实验,并在 Living Data Story 中与 Motion 按职责组合,让视觉技术选型不再是一场库名混战。
分别验证数据几何、线性矢量资产、交互状态机与高密度即时绘制,并记录各自的资产、性能、可访问性和生命周期边界。
通过时间范围、用户分群和叙事重点切换,展示 D3、Motion、Canvas 与 Lottie 如何在同一作品中分层协作。
用状态所有权、资产流程、语义需求和图元密度定位 CSS、Motion、GSAP、D3、Lottie、Rive、Canvas 与视频工程。
实验控制、功能说明、参数含义、原理解析和结论统一使用简体中文,动画内部叙事仍可保留英文。
原生 CSS + SVG、Motion 和 GSAP 现在共用同一个完整参考作品与测试协议,让运行时选择从主观偏好变成有实验依据的工程决策。
在三套隔离实现中,对同一个 7.2 秒叙事进行重播、暂停、反向、定位、视口切换和减弱动态效果测试。
通过 Motion 验证由组件状态驱动的手势反馈、共享布局、弹簧和可中断进入/退出行为。
通过按路由懒加载的运行时,以 Collect、Resolve、Decide 三个命名阶段协调 DOM 与 SVG 的交错提示。
通过实际对比矩阵判断何时原生动效已经足够、何时 React 交互需要 Motion,以及何时复杂编排值得引入 GSAP。
yAnimationPlayground is now a focused monorepo: browser techniques stay easy to compare, while video renderers and reusable motion foundations get clean boundaries of their own.
Seven focused browser labs map out CSS + SVG, GSAP, Motion, D3, Lottie, Rive, and Canvas without loading every runtime up front.
Remotion and HyperFrames have isolated application boundaries, alongside shared packages for tokens, motion primitives, and source assets.
The product name, wordmark, package metadata, repository details, and persisted settings namespace now consistently use yAnimationPlayground.
Development and production preview servers now use port 4394 by default.
A housekeeping release — the framework moves to Next.js 16.3, local servers get a port of their own, and design decisions get a ratification checklist.
The framework is upgraded to 16.3.0 — dev sessions use up to 90% less memory, repeat production builds reuse unchanged artifacts from cache, and server rendering handles up to ~22% more load.
Local dev and production servers now start on port 3005 out of the box, clear of other apps parked on port 3000.
A section-by-section checklist for reviewing, ratifying, and demoing every design decision before it becomes a house rule.
The header icon row, page headers, and settings drawer are brought in line with the sibling y-series apps — plus a feature ledger that keeps the roadmap honest.
One icon family at one weight across the system header — theming, language, and GitHub / X links — legible on both the light header and the dark nav panel.
Every page band now runs on a slotted PageHeader with icon, toolbar, and tab slots, and stays pinned under the app header as you scroll.
Rebuilt with one selected treatment across every picker, options that preview themselves, and a Reset footer that counts what differs from the defaults.
A machine-readable roadmap file tracks every shipped and planned capability right alongside the code.
The dashboard grid gains a Customize toolbar and cleaner, unified chrome — powered by a reusable grid board under the hood.
Show or hide each dashboard widget and reset the board back to its default arrangement.
A themeable corner resize grip, standard card surfaces on grid widgets, and no more drag icon cluttering the top-right corner.
All grid behavior now runs through one reusable board component, so every grid page shares the same look and feel.
A groundwork release — validated configuration, a CI gate on every change, and polished error states across the app.
Consistent 404 pages inside and outside the shell, an error screen with one-click retry, and a loading skeleton while pages stream in.
Environment variables are checked against a zod schema at startup, so a bad config fails the build instead of surfacing at runtime.
Every push and pull request now runs lint, type checks, and a production build on GitHub Actions.
The first cut of the template — a themeable Next.js dashboard shell with a live settings drawer, ready to build on.
An app shell with vertical, mini-rail, and horizontal nav layouts, Priority+ overflow for the top bar, and a small-screen drawer.
Live theme controls — light/dark/system, contrast, compact density, nav layout and color, color presets plus a custom brand color, radius steps, a font picker (Outfit by default), and a max-width toggle — persisted across reloads.
Card and overlay elevation, chart series, and borders all run on design tokens, so presets and contrast re-skin the whole app consistently.
An analytics dashboard, line and bar chart pages, a drag-and-resize gridstack board, avatar fallbacks, and a display-card gallery.
Iconify-compiled Solar duotone glyphs across nav, settings, and headers.
Curated release notes on a timeline, rendered from a typed changelog module.