AI 摘要：本文是一篇关于使用 Three.js、WebGPU 和 Three Shader Language (TSL) 实现互动文字破坏效果的详细教程。作者通过一步步的代码示例和讲解，展示了如何在 Web 上创建动态的 3D 文字效果，利用指针位置和弹簧物理原理实现文字的变形与破坏动画，同时结合后处理技术增强视觉效果。文章不仅提供了技术实现细节，还分享了作者对 Web 互动体验发展的感悟，强调了 Three.js 等工具如何让 Web 重新焕发创意活力。

1. 文字几何体 (TextGeometry)：
• 内容：使用 TextGeometry 创建 3D 文字，配置字体、大小、深度、斜角等参数，并应用 MeshStandardMaterial 材质。通过计算 BoundingBox 将文字居中对齐。
• 总结：实现了 3D 文字的创建与居中，为后续的互动效果做好准备。

2. Three Shader Language (TSL)：
• 内容：详细介绍了使用 TSL 实现文字破坏效果的核心逻辑。包括存储顶点原始位置和法线、创建模拟数据的存储缓冲区、在 GPU 上运行初始化和更新计算函数、使用 uniforms 传递指针位置等数据、通过弹簧物理和摩擦力实现动态变形效果、添加噪声和旋转以增强动画的混乱感。
• 总结：通过 TSL 实现了基于指针位置的顶点变形和动态动画效果，展示了 GPU 计算在互动设计中的应用。

3. 材质与后处理：
• 内容：调整材质的发光颜色 (emissive color)，通过速度缓冲区偏移色调以产生多样化效果，并添加雾效和背景颜色。引入后处理技术，包括环境光遮蔽 (AO)、泛光 (bloom) 和噪声效果，提升画面质感。
• 总结：通过材质调整和后处理技术，增强了视觉表现力，使破坏效果更具冲击力。

jhey ʕ•ᴥ•ʔ(@jh3yy): number range slider using 3D CSS transforms
sometimes a shift in perspective unlocks a new solution
check the reveal👇
使用 3D CSS 转换的数字范围滑块
有时，视角的转变会解锁新的解决方案
检查显示 👇

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

Bring static visuals to life with rotating textures, 3D geometry, and smooth motion powered by React Three Fiber.
使用旋转纹理、3D 几何图形和由 React Three Fiber 驱动的平滑运动，将静态视觉效果赋予生命力。

jhey ʕ•ᴥ•ʔ (@jh3yy)：keypad w/ CSS + <img> layers 🧑‍🍳
.key { mask: url(keycap.png); }
.key:active img { translate: 0 20%; }
use keycap images as a mask for the container that they translate in ✨
bonus: clip-path to clip the hit area + filter to style the keys 🤙

AI 摘要：本文详细介绍了如何使用 Framer Motion 和 React 创建一个带有 Gooey 效果的搜索交互组件。作者受到动态岛动画的启发，将 Gooey 效果应用于搜索栏，打造了一个小型但有趣的交互体验。教程涵盖了 Gooey 效果的实现、SVG 滤镜的应用、Framer Motion 的集成、搜索状态管理、动画效果的优化以及针对 Safari 浏览器的兼容性处理，旨在激发开发者创意并提供实用指导。

1. Gooey 效果的创建：
• 介绍了 Gooey 效果的起源，基于 Lucas Bebber 的文章 The Gooey Effect。
• 通过调整 SVG 滤镜中颜色矩阵的 alpha 通道值，实现自定义的 Gooey 效果。
• 提供了具体的代码示例，展示了如何使用 feGaussianBlur 和 feColorMatrix 创建滤镜效果。

2. 应用 Gooey 效果：
• 在主组件中通过 CSS 将 SVG 滤镜应用到父元素上。
• 提供了简单的代码结构，展示滤镜如何与 DOM 元素结合。

3. Framer Motion 集成：
• 使用 Framer Motion 为搜索栏添加动态动画效果，定义了四种状态（初始状态、搜索激活、搜索结果、加载中）来管理交互逻辑。
• 使用 AnimatePresence 组件实现搜索结果的集体展示和个体动画效果。
• 详细解释了 getResultItemVariants 和 getResultItemTransition 函数，用于控制搜索结果项的动画效果（如缩放、位移、模糊效果）。
• 动画设计注重细节，例如通过索引计算延迟实现顺序动画，并使用弹簧动画（spring）增加流畅性。

4. Safari 兼容性挑战：
• 提到 WebKit 对 SVG 滤镜的限制，作者通过 isUnsupported 布尔值对 Safari 浏览器进行了动画调整。
• 强调了兼容性问题的长期存在，并提供了针对性的解决方案。

AI 摘要：本文详细介绍如何使用 React、TypeScript 和 Motion（原 Framer Motion）库创建一个沿着自定义 SVG 路径无限滚动的跑马灯效果。作者从基础的 SVG 路径创建开始，逐步讲解如何通过 CSS 属性 offset-path 和 offset-distance 实现路径跟随动画，并利用 Motion 库增强动画控制和交互性。文章涵盖了多元素动画、悬停和滚动速度控制、Z 轴顺序管理、CSS 属性映射以及响应式设计等高级技术，旨在帮助开发者构建复杂而流畅的网页动画效果。

"它并不完美，但平台也不是。我们依然爱它。" Jhey Tompkins 用他对于 WWDC25 中最受喜爱/最厌恶的事物——液态玻璃的演绎，满足了人们的需求。

AI 摘要：本文详细介绍了如何使用 Three.js、GSAP 和 Web Audio API 构建一个科幻风格的 3D 音频可视化器，灵感来源于 Webflow & GSAP 社区挑战赛。作者通过创建一个响应音乐的“异常探测器”界面，将声音与视觉效果实时结合，打造了一个充满未来感的沉浸式体验。文章从 Three.js 场景搭建、音频分析、自定义着色器，到 GSAP 动画和交互设计，逐步讲解了实现过程，展示了创意编码如何将技术与艺术融合。

1. 项目背景与灵感
• 源于 Webflow & GSAP 社区挑战赛（主题为“Draggable & Inertia”），作者决定创建一个音乐响应的 3D 可视化器。
• 设计灵感是一个在黑暗虚空中发光的橙白渐变球体，通过 Midjourney 生成视觉原型，并结合 Photoshop 调整作为视觉基础。
• 目标是打造一个科幻“异常探测器”界面，通过音乐驱动视觉效果，融合声音与画面。

2. Three.js 场景搭建
• 使用 Three.js 创建 3D 场景，包括场景、透视相机和渲染器，设置相机位置以获得最佳视角。
• 添加 OrbitControls 实现点击拖拽旋转视角，并设置阻尼效果以提升流畅性。
• 核心对象“异常球体”由两部分组成：外部线框球体（基于 IcosahedronGeometry，使用自定义 ShaderMaterial 实现发光线框效果，随音乐变形）和内部发光球体（基于 SphereGeometry，半透明发光效果形成光晕）。
• 增加背景粒子效果和网格覆盖，结合 Midjourney 生成的背景图像，营造全息显示的科幻氛围。

3. Web Audio API 音频分析
• 使用 Web Audio API 分析音频，支持用户上传音频文件或选择预设曲目。
• 通过 AudioContext 和 AnalyserNode 实时获取音频频率数据（fftSize=2048，平滑常数为 0.8），计算音频强度（audioLevel）用于驱动视觉变化。
• 动画循环中持续更新频率数据，提取平均音量和峰值频率，显示在 UI 上作为“异常指标”。
• 将音频强度值传入着色器和动画，同步音效与视觉效果（如球体亮度、变形程度随音乐强度变化）。

4. 音频响应着色器开发
• 使用 Three.js 的 ShaderMaterial 编写自定义 GLSL 着色器，控制球体的动态外观。
• 顶点着色器：通过 Simplex 噪声函数实现顶点变形，随时间和音频强度变化，音乐强烈时球体更尖锐、混乱。
• 片段着色器：应用 Fresnel 效果增强边缘发光，随音频强度脉动，同时加入微弱的独立呼吸动画（sin 函数）。
• 内部发光球体使用 BackSide 渲染和加色混合，营造柔和光晕效果，增强能量场视觉感。

5. GSAP 动画与交互设计
• 使用 GSAP 实现流畅动画，如音频播放时的相机缩放（靠近球体）和暂停时的恢复，增强戏剧效果。
• 借助 GSAP 的 Draggable 和 InertiaPlugin 插件，制作可拖动的 UI 面板，支持动量效果，用户可“抛掷”面板，增加交互趣味性。
• 实验性地实现 3D 球体拖拽，通过自定义逻辑和惯性衰减模拟物理效果，用户可旋转和抛掷球体。
• GSAP 时间线用于编排多个动画序列（如文本淡出），确保交互和过渡自然流畅。

6. UI 设计与氛围营造
• 设计灵感来源于科幻控制面板，UI 使用简约风格（半透明深色面板、浅色文字），包括控制球体旋转速度、分辨率、变形程度和音频灵敏度的滑块。
• 增加音频频谱分析面板（基于 canvas 绘制频率条形图）和终端日志窗口，模拟高科技系统运行状态。
• 通过 CSS 实现屏幕网格覆盖，添加漂浮粒子效果，结合自制背景音乐，强化沉浸式科幻体验。

7. 总结与成果
• 最终作品是一个互动艺术品，用户加载音乐后，系统“启动”并同步音频与视觉，球体随音乐脉动变形，用户可通过控件调整效果或拖动面板/球体互动。
• 项目展示了 Three.js（渲染与着色器）、Web Audio API（音频分析）和 GSAP（交互动画）如何结合，创造多感官体验，体现了创意编码的潜力。

Josh Dillon continues an electrifying exploration of glitch animation in UI with this set of radio buttons. Make sure to visit Josh's collections for more.

AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、平滑融合、噪声纹理添加以及鼠标互动的实现，适合对 WebGL 和着色器编程感兴趣的开发者学习和实践。

概览：介绍了演示的整体结构和构建步骤，包括全屏平面的设置、光线步进渲染球体、从球体到 metaball 的平滑过渡、添加噪声以获得液滴外观，以及通过鼠标移动模拟拉伸效果。

1. 全屏平面设置：创建覆盖整个视口的全屏平面，通过 Three.js 设置几何体和材质，并传递画布大小的 uniform 变量到着色器。
2. 光线步进渲染球体：在片段着色器中使用光线步进技术渲染球体，详细解释了光线步进的步骤、SDF（有符号距离函数）的概念，以及如何通过代码实现两个重叠球体的渲染。
3. 从球体到 Metaball：通过 smoothMin 函数平滑融合多个球体的距离值，避免硬边缘，创造出有机融合的 metaball 效果，并通过参数控制融合平滑度。
4. 添加噪声以获得液滴外观：利用 3D 值噪声技术对表面进行扰动，结合反射向量和时间变量生成液滴纹理，并通过后处理增强玻璃般的半透明效果。
5. 通过鼠标移动模拟拉伸液滴：通过记录鼠标轨迹并沿轨迹放置多个球体，实现液滴的拉伸和弹性运动效果，增强互动性。

使用 RAFA3L 的这款互动笔，体验“立方体照片库实验”。待在房间里，照片会慢慢铺满整个房间，然后点击任意一张图片即可全屏观看。

pjkarlik 分享了一个能根据一天中的时间改变颜色的奇妙 WebGL 时钟。“我脑子里一直在想这个，想做一个时钟着色器。数学运算有点乱，而且为了让表盘正常工作，在时间上还需要一些技巧性的逻辑"。

Ana Tudor 🐯🖤🌻 (@anatudor)：Made a little thing on
@CodePen: pure #CSS scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe is always clockwise, regardless of scroll direction and how the text fades in after the swipe.

Inspiration https://x.com/avanderpotte/status/1923382432784412771 (via @codrops)

AI 摘要：本文由 Amit Sheen 撰写，详细介绍了如何使用 CSS 和少量 JavaScript 创建一个交互式的聚光灯效果（Spotlight Effect）。该效果通过鼠标位置驱动 CSS 自定义属性，结合背景渐变、滤镜和混合模式等技术，实现动态、流畅的视觉交互。文章从基础设置开始，逐步深入到复杂的“粘性”效果、图案设计、移动端适配以及主题切换等内容，旨在启发开发者探索 CSS 的创意潜力，同时注重用户体验和无障碍访问。

Filip Zrnzevic 精心重现了 Braun 玻璃钟的外观和功能。在预览模式下按下 H 键，即可打开设置面板，调整时钟的内部运作。