CSSアニメーションで作った自主制作のモーションをポートフォリオサイトにまとめてみました🐈
https://yui540.com/

以前有一个类似的尝试用 three.js 实现了这个跨窗口的粒子动画有用到这个类似的场景，我猜应该是和这个一个原理，GitHub 仓库

https://x.com/jh3yy/status/1999131244345405664
jhey ʕ•ᴥ•ʔ(@jh3yy)：今年的版本页面真是太棒了——有太多精彩的细节了 👨‍🍳

很荣幸能参与其中，团队表现出色 👏

除了令人惊叹的 WebGL 技术之外，还巧妙地运用了 CSS 容器查询、计数器、过渡/动画和 SVG！

Shopify

Shopify Editions | Winter '26

The commerce renaissance is here. Explore 150+ product updates across AI, retail, and more.

AI 摘要：这篇文章详细记录了制作 WebGL 个人作品集的全过程。文章展现了一个从最初构想到最终实现的探索旅程。文中涉及诸多技术，包括 Next.js、Three.js、React Three Fiber 以及 GSAP（含 MorphSVG 插件），并分享了多个实现细节，如 Fold 效果、MeshPortal 场景嵌入系统、基于滚动速度的 Shader 动效，以及 SVG 到 Canvas 的性能优化。最终，作品以戏剧化的视觉语言融合作者在戏剧、电影与编程三重背景下的美学追求。

1. 起点：Fold 效果与创意萌芽
• 以 Vector Projection 实现自由方向的折叠效果
• Shader 中的假阴影计算增加立体感
• 从最初“主特效”到成为创意起点的自我修正

2. 构建中：角色与 MeshPortal 系统
• 创建带角色的屏幕，利用 Mixamo 动作资源
• 引入 MeshPortal 技术，将独立 3D 场景限制在屏幕范围内
• 建立系统实现 WebGL 与 DOM 布局同步（mask 区域）
• 采用 hash-based 导航配合 GSAP 动画实现平滑过渡

3. 节奏延伸：让角色起舞与滚动动效
• 通过基于速度的 Stretch Shader 让文字响应滚动加速度
• 利用 depth-aware 动线制造空间层次
• 前端 JS 调控 Shader uniform 实现自然的运动衰减与模糊

4. 创意突破：不再拘泥于“屏幕”
• 从平面屏幕过渡到文字形态（Morphing Plane to Text）
• 借助 GSAP MorphSVG 插件实现路径平滑过渡
• 优化性能：通过 Canvas 渲染替代 SVG DOM 调用，保持 60fps
• 将“WHO” 文字转化为剧场式的舞台： Cinema、Theater、Code 三部分，用视频投影营造剪影效果

5. 闭环：Contact 页与「MEET ME」交互收尾
• 通过算得精确的 DOM 与 WebGL 匹配 mask 完成动态过渡
• 使用 GSAP 的 back.out 缓动创造富表现力的弹性动画
• 利用镜头视角（FOV）和空间深度营造收尾的视觉叙事
• 以贴纸元素作为呼应起点的个人符号，为项目画上圆满句号

6. 总结与思考
• 作品的发展不是强行设计，而是对“创意呼吸”的倾听
• 通过“让过程塑形”，实现技术与自我表达的统一
• 最终成果是一种情感与视觉共鸣的体验，而非单纯代码演示

AI 摘要：这篇交互式教学页面《Visual Types》以图形化的方式介绍了 TypeScript 的类型系统原理，将抽象的类型关系转为集合论直观类比。作者通过对基础类型、联合类型、交叉类型、泛型(Type Alias/Generic)、条件类型(Conditional Types)等模块的分解说明，让开发者从“类型是值的集合”这一基本理念出发，逐步理解 TypeScript 在编译期的推导与约束机制。整个内容通俗但专业，适合掌握 TS 类型系统结构性理解的人阅读学习。

1. 类型基础 (Foundation)
• 类型被定义为一组可能的运行时值集合，例如 boolean 表示 {true, false}
• 字面量类型 (Literal Type) 代表唯一具体值，如 42 只包含 42
• 联合类型 (Union Type) 使用 | 结合多个集合，如 "red"|"blue"
• 子类型 (Subtype) 是集合的子集关系，A extends B 表示 A 的值皆存在于 B 中
• 元组类型 (Tuple Type) 表示固定长度数组，每个位置具特定类型
• 对象类型 (Object Type) 以属性定义集合，可超集匹配，如 {id: number}
• 交叉类型 (Intersection Type) 用 & 表示需同时满足两侧类型，若互斥则结果为 never

2. 类型别名与推导 (Basics II)
• 类型别名 (Type Alias) 允许为类型定义命名，如 UserId = string
• 泛型类型别名 (Generic Type Alias) 像函数一般接收类型参数生成类型
• typeof 操作符可在编译期提取变量的类型，而非 JS 的运行时类型
• as const 防止类型被自动扩大，使值保持字面量类型并只读
• any 和 unknown 都能接收任意值，但 unknown 必须先缩小类型后使用

3. 对象与键操作 (Object Patterns)
• keyof 提取对象全部属性键，生成字符串字面量联合类型
• 索引访问类型 (Indexed Access Type) 可用 T["key"] 获取属性类型
• 映射类型 (Mapped Types) 用 [K in ...] 遍历键创建新类型，是构建工具类型的基础

4. 条件类型与分发机制 (Conditional Types)
• 条件类型使用 T extends U ? X : Y 表示类型层面的三元判断
• 所有类型都自反 (Reflexivity)，即 T extends T 恒为 true
• 联合类型的条件判断是“分发的”(Distributive)，会逐个成员计算后再合并
• 使用元组包裹 [T] extends [U] 可阻止分发行为
• never 用于排除不匹配分支
• infer 关键字可在条件匹配中捕获部分类型形状实现复用

5. 工具类型 (Utility Types)
• Pick<T, K> 提取对象的部分属性组成新类型
• ReturnType<T> 获取函数返回值类型
• Parameters<T> 获取函数参数类型元组
• 展示了如何用之前的条件、映射机制构建常用工具类型

Visual Types

Interactive visualizations of TypeScript concepts. Behold pretty colors.

AI 摘要：“Messenger” 是一款以小行星递送员为主题的互动网页，于 2025 年 11 月 10 日获得 Awwwards 的 Site of the Day (SOTD)。作品通过精巧的角色系统与动态 NPC 设置，打造沉浸式探索体验。色彩仅用两种主色，极简又具叙事性；技术实现上兼顾动画流畅度、响应式设计和可访问性。整体评分 7.92/10，在美术、交互与动画实现方面表现突出，是网页叙事和视觉创作的优秀范例。

1. 网站概览
• 获得 Awwwards「Site of the Day (SOTD)」称号，评分 7.92/10。
• 评价构成比例：Design 40%、Usability 30%、Creativity 20%、Content 10%。
• 主题为“小行星上的送信任务”，强调小而完整的世界观。

2. 元素与视觉设计
• 核心互动模块包括 Character Navigation、Character Configuration、NPCs。
• 配色仅使用 2 种主色，突出极简与未来感。
• 动画与过渡效果平滑，提升沉浸感与叙事节奏。

3. 交互与体验（UX / UI）
• 页面通过可操作角色带来探索感，NPC 触发微交互反馈。
• 移动端适配良好，响应式体验优异。
• 「Mobile Messenger」部分显示延展性强的界面布局。

4. 技术表现与评审评分
• DEV AWARD 技术得分 8.21/10，动画 (Animations / Transitions) 子项高达 9.0。
• 响应式 (Responsive Design) 与性能优化 (WPO) 均在高分区间。
• 评审团平均分约 8 分，艺术指导与前端开发评分尤为突出。

5. 团队与评审
• 主要创作者包括 Clement Pavageau，独立艺术总监；
Artem Markovsky，艺术指导等。
• 用户社区评分最高，综合 9.56/10，显示大众认可度极高。

AI 摘要：本文讲述了如何仅使用 CSS（不依赖 WebGL 或 Canvas）创建三维等距地形，通过层叠网格（stacked grids）与 3D 变换（3D transforms）构建出一个像素风的生成式世界。作者介绍了从镜头视角（perspective）设置，到多层网格架构、地形单元（flat、ramp、wedge、spike）的几何定义，再到噪声生成高度图和性能优化等完整技术路径。

AI 摘要：本期 Node Weekly 聚焦 Node.js 最新版本更新、社区讨论以及相关技术进展。Node.js v24.4.0 发布，带来了新的功能和安全更新提示；社区正在讨论是否将 Node.js 改为年度大版本发布并缩短 LTS 周期；TypeScript 5.9 Beta 引入了新功能如 import defer；此外，还涵盖了 Docker 部署最佳实践、性能差距分析、JavaScript 现代模式问题，以及一系列实用工具和库的更新，旨在帮助开发者提升效率和代码质量。

1. Node.js 更新与公告：
• Node v24.4.0 (Current) 发布：新增 --watch-kill-signal 功能，允许指定重启进程时的信号；spawn 和 spawnSync 支持权限模型标志传播；包含常规 V8 和依赖项更新。Node 团队还预告即将发布 v24.x、22.x 和 20.x 版本以解决安全问题。
• Node.js 年度大版本发布提案：社区讨论是否将 Node.js 改为每年一次大版本发布，并将偶数版本 LTS 周期从 30 个月缩短至 24 个月，欢迎社区反馈。
• Node.js v18 支持延长：尽管 v18 已于 2025 年 4 月停止支持，但 Canonical 宣布 Ubuntu Pro 用户将获得支持至 2032 年。

2. 社区与安全动态：
• Node-API 支持 React Native：Callstack 宣布为 React Native 引入 Node-API 支持，扩展跨平台原生代码编写和共享的可能性。
• TypeScript 5.9 Beta 发布：引入 import defer 支持，以及新的 node20 模式（类似 nodenext，但目标为 ES2023）；透露 Go 驱动的 TypeScript 原生端口将在 TypeScript 7 中可用。
• TC39 全会总结：Igalia 团队分享了最新 TC39 全体会议的详细摘要，其中包含有关 ECMAScript 发展的有趣花絮。。
• 安全威胁：朝鲜“威胁行为者”部署了 67 个恶意 npm 包，Kirill Boychenko 详细解释了这些包的运作机制。
• Node 版本管理器性能差距：Pavel Romanov 指出不同 Node 版本管理器可能导致 shell 启动速度相差 500 倍，但对大多数用户影响不大。
• JavaScript 作用域提升问题：Parcel 创建者 Devon Govett 认为作用域提升与现代 JS 模式冲突。
• 使用 Array.fromAsync() 的现代异步迭代：Matt Smith 介绍 Array.fromAsync() 的用法。
• 类型化查询构建器对比：Guillaume Billey 比较了 Kysely 和 Drizzle 两种工具。

3. 工具与库推荐：
• Necord：基于 Nest 和 Discord.js 的 Discord 机器人开发框架，易于部署机器人功能。
• Upyo：跨运行时邮件发送库，支持 SMTP 和 HTTP（如 SendGrid、Amazon SES）提供统一类型安全的 API。
• Rewire 9.0：专注于 CommonJS 的单元测试猴子补丁工具，方便注入 mock 和检查私有变量。
• Envalid 8.1：环境变量验证工具，确保程序运行时依赖项齐全。
• cRonstrue 3.0：将 Cron 表达式转换为自然语言，支持约 30 种语言环境。
• 其他更新：包括 ESLint v9.31.0、Serverless Express 4.17、NATS.js 3.1、OpenAI Node 5.9 等工具和库的最新版本信息。

4. 生态系统动态：
• JavaScript Date 类测试：通过趣味测验了解 Date 类的解析机制。 #趣站
• ANSI.tools：在线工具，用于分析 ANSI 转义码和常用代码查询。
• 10 亿行挑战：Tae Kim 分享如何在 Bun 中处理 10 亿行文件，耗时不到 10 秒。
• Nginx 的 njs 模块升级：从仅支持 ES5 升级至使用 QuickJS，支持完整的 ES2023 功能。

洗衣机酱是一个 3D 洗衣店，在这里图像会被清洗。一个使用 Three.js 构建的本地、无广告的背景移除器——快速、私密、有趣。

Jordan Delcros 重建了个人作品集，展示其 WebGL、动画和交互式开发方面的最佳项目和技能，标志着其作为自由职业开发者的全新旅程。

AI 摘要：介绍了一个名为 The Museum of Digital Influence 的虚拟博物馆，该博物馆通过 WebGL 技术构建，旨在展示数字媒体和互联网文化的演变。博物馆内容丰富，具有较高的资料价值，采用 AI 生成的缩略图和人工撰写的详细说明，用户可以通过滚动和点击进行浏览。