#优质博文 #WebGL #GSAP #three #r3f #前端 #动画 #趣站
太有创意了。
网站：https://www.romanjeanelie.com/
文章：Letting the Creative Process Shape a WebGL Portfolio

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

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

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

author Roman Jean-Elie

#优质博文 #typescript #前端 #course #趣站
这太酷了！
Visual Types

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

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

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.

#前端 #JavaScript #优质博文 #趣站 #考古
好名字
JavaScript Engines Zoo：汇总 100 多个 JS 引擎的数据、性能与发展史，附带 Dockerfiles 可直接实验。

#优质博文 #趣站 #前端 #网页设计 #CSS #交互设计
网站：Messenger
来源：Messenger - Awwwards SOTD

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

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

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，显示大众认可度极高。

#优质博文 #CSS #3D #动画 #前端 #创意 #趣站
网站：CSS Terrain Generator
介绍博客：Crafting Generative CSS Worlds | Codrops

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

author Agustin Capeletto

Codrops

Crafting Generative CSS Worlds | Codrops

Learn how stacked grids and 3D transforms can bring heightmaps to life using nothing but the power of CSS.

#趣站 #设计
太美了！

诗人 David Whyte 的官网，以 WebGL 呈现水彩画般的互动质感，创造独特的艺术体验。介绍

网站地址：https://davidwhyte.com/experience/

#趣站 #前端 #CSS
CSS-Questions
Sunkanmi Fafowora 推出 CSS-Questions 网站，提供 100 多道题与综合或 20 题速测，帮助你检验 CSS 知识，从基本选择器到伪类、级联层和容器查询等高级主题。

Css-Questions

Test your CSS skills with 200+ challenging questions on CSS tricky selectors, cascade layers, container queries, advanced pseudo-classes, and more!

#优质博文 #node #JavaScript #TypeScript #Docker #Tools

Node Weekly #586 - July 15, 2025

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 功能。

#前端 #趣站 #tools #webgl #three #demo #动画

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

好可爱好有创意！
https://tools.dverso.io/bgremove/

0:21

Media is too big

VIEW IN TELEGRAM

#趣站 #像素风 #设计 #前端
这个网站超有趣
https://www.nicchan.me/blog/youre-not-a-front-end-developer-until-youve/

昨天其实看到了没发，今天发一下w

0:14

Media is too big

VIEW IN TELEGRAM

#趣站 #前端 #css
https://benjaminaster.com/css-minecraft/
前些天看到了没发，补一下，这个有点离谱的。
纯 CSS 实现 Minecraft 风格的构建体验 - 完全不需要 JavaScript！

#趣站 #交互设计 #设计 #webgl #动画
好看的站点！
https://jordan-delcros.com/

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

via Jordan Delcros Portfolio - Awwwards SOTD

#javascript #前端 #趣站
一个 JavaScript 猜输出测验网站🤣
https://douiri.org/quizzes/javascript-guess-the-output/

#优质博文 #前端 #WebGL #趣站
酷～
デジタルやインターネットの文化をテーマにしたバーチャル博物館 The Museum of Digital Influence - WebGL 総本山

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

WebGL 総本山

デジタルやインターネットの文化をテーマにしたバーチャル博物館 The Museum of Digital Influence - WebGL 総本山

3D の作例というより資料的価値が高い
今回ご紹介するのは The Museum of Digital Influence というデジタルミュージアム系のコンテンツです。
いわゆるインターネットやデジタル創作、プラットフォームなどをテーマにした博物館の体裁をしたコンテンツで、WebGL で仮想空間を構築している感じですね。
3D の作例として優れているというよりは、どちらかというとコンテンツの内容や資料としてのおもしろさみたいな部分が見どころかもしれません。
リンク：
The Museum of Digital…

#碎碎念 #前端 #趣站 #动画 #demo
感觉在手机上加个陀螺仪的效果会更美妙更好玩儿，点子源源不断的冒出来了！（为什么我想到了陀螺仪因为之前做过类似的需求，ios 上陀螺仪权限得请求，加了陀螺仪就是那种很好玩儿的游戏了hhh）
₍˄·͈༝·͈˄*₎◞ ̑̑

katon (@hellokaton)：😎 听说你很懂 Web 渲染？
试试这个用 Three.js 和 Ammo.js 搞的 3D 物理引擎个人主页，
让你在浏览器里体验真实世界的碰撞和互动！
➤ 实时碰撞、互动，物理效果炸裂
➤ 光线投射，点哪打哪
➤ 移动端也能流畅运行
在线体验：https://0xfloyd.com
源码仓库：https://github.com/0xFloyd/Portfolio_2020

https://fixupx.com/hellokaton/status/1910125154929357277

0Xfloyd

Portfolio 2020

#优质博文 #tools #工具推荐
1. Canva 如何建立图像搜索（英文） #搜索 #图像
本文介绍 Canva 公司如何使用向量嵌入，建立相似图片搜索。
下面是另外一篇类似的文章《基于 pgvector 和 Next.js 构建语义电影搜索》，也是使用向量嵌入。

2. 同一个 GitHub 用户如何用不同身份 SSH 登录（英文） #github #ssh
有时，同一个 GitHub 用户使用不同的 SSH 密钥，去登录不同的仓库。本文教你这时怎么写 SSH 配置文件。

3. Lightpanda #无头浏览器 #tools
轻量级的无头浏览器，可以接入 Playwright / Puppeteer，占用资源和执行速度号称是 Chrome 的十分之一。

4. changedetection.io
一个开源的服务，用来检测指定网页的某个部分是否发生变化。比如，网页上面的商品价格发生变化，它就会通知你。 【好多这种服务了 但是mark一下】

5. Voice-Pro #AI #语音
AI 语音工具，具有多种功能（语音识别、翻译、语音克隆、文本转语音），属于 Whisper 模型的 Web UI。

6. Hacker News Wrapped #趣站
该网站可以输入一个 Hacker News 论坛的用户名，它会用 DeepSeek 模型总结该用户的特点，描述非常准确而且传神。

7. GenSFX #AI #音效
免费的 AI 音效生成网站。

8. Beej 的 Git 指南（Beej's Guide to Git）
著名教程作者 Beej 的最新 Git 教程，基于他向大学学生的课堂讲义。

via #阮一峰的科技周刊 336

canva.dev

Image replacement in Canva designs using reverse image search - Canva Engineering Blog

Qualitative comparison of image embedding models to power a scalable similar-image replacement system for Canva designs.