#优质博文 #CSS #CodePen #前端 #demo
Playing With CodePen slideVars | CSS-Tricks：介绍 CodePen 官方推出的 slideVars 工具，它可以自动检测 CSS 变量并生成交互式控制面板，现在在 codepen 里写交互式 Demo 更方便了。

GitHub: https://github.com/codepen/slideVars

AI 摘要：这篇文章介绍了 CodePen 新推出的原生工具 slideVars，帮助开发者快速为演示项目添加交互式调节面板。相比以往需要引入第三方库（如 TweakPane 或 Knobs）或编写复杂的 JavaScript，slideVars 能够自动识别 CSS 变量并生成 UI 控件。作者详细展示了从快速起步到手动配置参数、自定义单位、处理作用域（Scope）以及调整面板布局的高级用法，是提升前端 Demo 交互体验的利器。

#趣站 #demo #前端
非常可爱的网站！看了看首页还有很多有趣的东西

https://www.gachago.net/MarbleRace

一个基于物理模拟的弹珠台式抽奖工具，灵感来源于游戏内的抽奖玩法，通过模拟物理碰撞（例如红色柱子增加弹力）来决定结果，使得抽奖过程更具趣味性和不可预测性。

https://x.com/Mant0uStudio/status/2009279695276089512

作者是 @Mant0uStudio

#demo #codepen #前端 #CSS #SVG
文本框边框动画旋转 [CSS & SVG] V2

在 Fernando Cohen 制作的这个流畅的 CSS 和 SVG 动画中，文字栅栏围绕着一张照片的边缘。看看悬停照片时会发生什么

看了一下原理，这是一个使用 SVG 和 CSS 创建的文字沿着有机形状边框旋转动画效果。
首先使用 SVG Blob 形状生成，创造有机的 blob 形状

<path d="M43.1,-68.5C56.2,-58.6,67.5,-47.3..." />

这个路径数据可能来自 Blob Generator 等工具

然后是使用 clip-path 进行图片裁剪，将矩形图片裁剪成 blob 形状，同时通过 preserveAspectRatio="xMidYMid slice" 确保图片填充满整个区域。

<clipPath id="blobClip">
  <path d="..." transform="translate(100 100)"/>
</clipPath>
<image clip-path="url(#blobClip)" />

然后使用 pathLength 进行文字路径动画，定义文字路径

<path id="text" d="..." fill="none" stroke="none" pathLength="100" />

• pathLength="100" 标准化路径长度，便于动画计算
• fill="none" stroke="none" 路径本身不可见，仅作为文字轨迹

将文字沿路径排列：

<text class="text-content">
  <textPath href="#text" startOffset="0%">
    ❤️ MADE WITH LOVE ❤️ MADE WITH LOVE...
    <animate attributeName="startOffset" 
             from="0%" to="100%" 
             dur="15s" 
             repeatCount="indefinite" />
  </textPath>
</text>

• <textPath> 让文字沿着指定路径排列
• startOffset 控制文字在路径上的起始位置
• <animate> 元素实现 SMIL 动画（SVG 原生动画）

那无缝循环是怎么做的呢？他用了两段文字，当第一段文字从 0% 移动到 100% 时，尾部会消失，第二段文字从 -100% 移动到 0%，正好填补空白。两段文字首尾相连，形成无缝循环。

<textPath href="#text" startOffset="0%">
  <animate from="0%" to="100%" />
</textPath>

<textPath href="#text" startOffset="100%">
  <animate from="-100%" to="0%" />
</textPath>

最后是这个交互式缩放效果，是通过悬停时放大裁剪区域（而非整个 SVG）来做的。

#codepen #demo #前端 #canvas
果冻压扁按钮

好可爱的按钮！看了一下原理。

这不是真正的 3D 果冻，而是通过快速切换预渲染的图片序列来模拟果冻挤压效果，类似电影胶片的原理。预加载了 215 张连续的果冻形变图片，这些图片记录了果冻从静止到被挤压到回弹的完整动画过程，通过切换不同帧号的图片来做的。

你需要预留一点时间来压扁这个东西。无论是垂直拖动光标，还是单击 "跟随鼠标 "复选框，都可以将这个由 Voicu Apostol 制作的内含果冻的按钮的压扁效果与鼠标移动联系起来。

#优质博文 #前端 #WebGL #demo #course
Demo 这个也很酷。
How to Create a Pixel-to-Voxel Video Drop Effect with Three.js and Rapier

AI 摘要：本教程详细介绍了如何利用 Three.js、着色器 (shaders) 和 Rapier 物理引擎，将 2D 视频流转化为动态的 3D 体素 (voxel) 下落效果。文章从核心概念——像素和重力——出发，逐步讲解了如何构建一个由 InstancedMesh 和刚体 (rigid bodies) 组成的平面，通过着色器实现平铺像素到 3D 体素的涟漪 (ripple) 变形效果，并最终通过 JavaScript 模拟涟漪进程来激活物理引擎，使体素在逼真的物理作用下散射和恢复。作者还分享了实现过程中的技术细节、优化考量以及未来扩展的可能性。

author Junichi Kasahara

#优质博文 #前端 #趣站 #demo #WebGL
很有创意的一个滚动驱动的 portfolio 页面：Mr. Panda's Psychologically Safe Portfolio

• 开源在：GitHub - andrewwoan/mr-pandas-psychologically-safe-portfolio
• 技术解析视频：How I created a Hand-drawn Papercraft Portfolio with Three.js, Blender, React, and Krita

author Andrew Woan

#优质博文 #前端 #WebGL #Shaders #demo
很 NB 的 ASCII 艺术生成网站 https://efecto.app/ 之前发过，这篇是作者的详细技术解析。
Efecto: Building Real-Time ASCII and Dithering Effects with WebGL Shaders | Codrops

AI 摘要：本文作者 Pablo Stanley 分享了他如何开发 Efecto 应用，在网络上实时实现图像抖动（dithering）和 ASCII 艺术效果，并结合 WebGL 着色器（shaders）模拟 CRT 显示器视觉效果的经验。文章详细介绍了抖动算法（如 Floyd-Steinberg、Atkinson 等）的原理与代码实现，多色调色板的应用，以及如何通过数学函数在着色器中绘制 ASCII 字符。此外，还探讨了扫描线（scanlines）、屏幕曲率（screen curvature）、色差（chromatic aberration）等 CRT 特效的实现，并讨论了 CPU 和 GPU 在这些效果实现中的分工，最后总结了从历史算法到现代 Web 开发的宝贵经验。

author Pablo Stanley

Efecto

Efecto - Free ASCII Art & Dithering Effects Tool

Transform 3D models, videos, and images with ASCII art, dithering, and halftone effects in real-time.

#前端 #demo #动画
https://fixupx.com/sujen_p/status/2004467491284910554
https://fixupx.com/sujen_p/status/2005536330579927481

Sujen Phea (@sujen_p): Unfurling paper
Demo 👉 https://paper-scroll.sujen.co/
#webgl #threejs
Spinning disco vibes
Demo 👉 https://disco.sujen.co
#webgl #threejs

FixupX

Sujen Phea (@sujen_p)

Unfurling paper

Demo 👉 https://paper-scroll.sujen.co/

#webgl #threejs

#前端 #demo #three #WebGL
https://particles.sujen.co/
很丝滑的粒子爆炸效果，可更换其他模型文件。

使用自定义模型实现粒子爆炸，精确地限定在圆柱体内。
演示 particles.sujen.co

https://fixupx.com/i/status/2002999796341297514

FixupX - Video 1 / 2

Sujen Phea (@sujen_p)

Particle explosion with custom models, precisely bounded within a cylinder.

Demo 👉 http://particles.sujen.co

#threejs #webgl

#demo #WebGL #WebGPU #three
https://planpoint-webgpu.vercel.app

Three Example WebGPU Occlusion

Anderson Mancini(@Andersonmancini): 🎵 太阳出来了 ☀️
我终于完成了将我的“终极镜头光晕”移植到 #threejs WebGPU 的工作。性能简直令人难以置信，因为现在 threejs 已经将遮挡查询直接集成到了渲染管线中。如果你需要知道某个物体是否被遮挡，只需直接向 threejs 查询即可。文档中有示例。
这样一来，我就不再需要光线投射器来检测遮挡了，这就是性能大幅提升的原因。
如果您想查看结果： https://planpoint-webgpu.vercel.app

https://fixupx.com/Andersonmancini/status/2000589287515959496

🧵 Thread • FixupX

1:16

Anderson Mancini (@Andersonmancini)

🎵Here comes the sun ☀️

I finally finished porting my "Ultimate Lens Flare" to the #threejs WebGPU. The performance is incredible because now, threejs has occlusion queries directly integrated into the render pipeline. If you need to know if something is…

#codepen #demo #CSS #动画 #前端
写……写轮眼（x）
花瓣

Riley Shaw 分享了一朵梦幻般的 CSS 和 JS 花朵，花瓣如万花筒般旋转 🪷

#codepen #demo #WebGL #shader #动画 #前端
美丽，有点想改改色放博客头图。
霓虹正弦波效果 GLSL

Fabio E Zola 的这段 GLSL 动画中，闪烁的正弦波脉动着。您可以暂停动画、截屏，或从顶部的控制面板切换像素比例。

#前端 #demo #CSS #SVG
帅

jhey ʕ•ᴥ•ʔ (@jh3yy): toggle 🌛
brought to life with CSS && SVG

https://fixupx.com/jh3yy/status/1864776491139039423

🧵 Thread • FixupX

jhey ʕ•ᴥ•ʔ (@jh3yy)

toggle 🌛

brought to life with CSS && SVG

Quoting Viewport UI (@viewportui)

Dark mode toggle by @cerpow

There’s no such thing as over-the-top. I wonder if @frrrnd can implement a similar version on our site? 👀

Just kidding, Fer.

#前端 #demo #codepen #CSS
CSS 之神在上，这太酷了。
Animated Hover Disclosures

jhey ʕ•ᴥ•ʔ(@jh3yy): transitioning CSS grid-template-columns on :focus/:hover means the parent container won't change size 🏅

https://fixupx.com/jh3yy/status/1940066323658158198

#前端 #CSS #demo
这太酷了~

jhey ʕ•ᴥ•ʔ (@jh3yy): This CSS trick is fascinating ⭐️
By setting: [type=range] { overflow: hidden; }
You can create a view timeline on the handle:
::-webkit-slider-thumb { view-timeline: --thumb inline; }
And then you can use that to build all sorts of custom range sliders 🚀

https://fixupx.com/jh3yy/status/1816290576087515620

#demo #codepen #WebGL #前端
好萌 🎄

https://codepen.io/creativeocean/pen/zxqEWYd

Tom Miller 用这段精美的 JavaScript 圣诞树点亮视频拉开了节日季的序幕。将鼠标悬停在树上，即可让它闪耀夺目！

#demo #codepen #WebGL #前端
Cinematic Ocean Scroll Scene

在这个由 Filip Zrnzevic 创作的交互式 Three.js/GSAP Pen 中，您可以漫步于 JavaScript 海洋，欣赏日落美景，感受宁静祥和的氛围。别忘了尝试各种控件，打造属于您自己的独特体验。

#codepen #demo #CSS #前端 #新特性
Can You Build A Swipe UI With Only CSS?

这个 Codepen 例子使用了现代 CSS 的 Scroll Snap (滚动捕捉) 和 Container Queries (容器查询) 特性，来实现类似原生应用的滑动操作（如左滑删除、右滑收藏）

虽然 CSS 处理了滑动交互，但浏览器默认的滚动位置通常是 0（最左边）。因为左边有一个按钮，所以默认会显示左边的红色按钮。这段 JS 代码在页面加载时，自动将滚动条位置设置到中间元素的位置，确保用户一开始看到的是正常内容，而不是操作按钮。（注：视频中是说在 Safari 上的位置）

视频讲解在这里

这种方式比传统的监听 touchmove 事件来计算位移要流畅得多，因为滚动是在合成线程上处理的。

Refs:
1. Practical CSS Scroll Snapping
2. CSS scroll snap
3. https://web.dev/articles/rendering-performance#3_js_css_style_composite

codepen.io

Swiper

...

#demo #动画 #CSS #SVG #codepen
Hopping Marbles：循环的纯 CSS + SVG 的跳跃弹珠动画，很有创意！

“一段以弹珠为主角的伪 3D 循环动画，设计成类似预加载器的效果。此外，孔洞底部还使用了特殊的 SVG clip paths 以及一些秘密交替的路径。”——Jon Kantner