数字世界的造梦者https://zevth.work/zh_CNhttps://zevth.work/posts/shader-art-with-webgl/https://zevth.work/posts/shader-art-with-webgl/着色器（Shader）是 GPU 上运行的小程序，能在毫秒内为数百万像素计算颜色。本文带你从最简单的 fragment shader 开始，逐步创造出流动的渐变、有机的噪声纹理和赛博朋克风格的视觉特效。Mon, 15 Dec 2025 00:00:00 GMT<h2>为什么学 Shader？</h2> <p>在这个 AI 生成一切的时代，手写 Shader 似乎是最后的「手工活」。但正是这种精确到像素的控制力，让你能创造出任何 AI 都无法预测的视觉效果。</p> <h2>你的第一个 Shader</h2> <pre><code>void mainImage(out vec4 fragCoord, in vec2 uv) { vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0, 2, 4)); fragCoord = vec4(col, 1.0); } </code></pre> <p>仅仅五行代码，就能在屏幕上渲染出流动的彩虹渐变。这就是 Shader 的魔力——用数学表达美。</p> <h2>噪声：有机感的秘密</h2> <p>Perlin 噪声和 Simplex 噪声是创造自然纹理的基石。云朵、大理石、火焰——这些都可以用噪声函数组合出来。</p> <pre><code>float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f); float a = hash(i); float b = hash(i + vec2(1.0, 0.0)); float c = hash(i + vec2(0.0, 1.0)); float d = hash(i + vec2(1.0, 1.0)); return mix(mix(a, b, f.x), mix(c, d, f.x), f.y); } </code></pre> <h2>实战：赛博朋克城市天际线</h2> <p>结合噪声、SDF（有符号距离场）和后期处理，我们可以创造出一个迷幻的赛博朋克城市轮廓...</p> <blockquote> <p>「在像素的海洋里，每个数学公式都是一首诗。」</p> </blockquote> <h2>总结</h2> <p>Shader 编程的学习曲线陡峭，但回报巨大。建议从 Shadertoy 开始练习，每天写一个小 shader，三个月后你会发现自己看待视觉世界的方式完全不同了。</p> https://zevth.work/posts/design-system-philosophy/https://zevth.work/posts/design-system-philosophy/很多团队把 Design System 等同于一套 UI 组件库。但真正的设计系统是一套关于「如何做决策」的语言——从颜色间距到动效节奏，从组件 API 到文档规范，它是团队共识的代码化表达。Fri, 28 Nov 2025 00:00:00 GMT<h2>误解：Design System = 组件库</h2> <p>打开很多团队的「设计系统」仓库，你会看到一堆 Button、Input、Modal 组件。这些当然重要，但它们只是设计系统的冰山一角。</p> <h2>设计系统的三层结构</h2> <h3>1. 设计令牌（Design Tokens）</h3> <p>最底层是设计决策的原子化表达：</p> <pre><code>:root { --color-primary: oklch(65% 0.25 250); --space-md: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); --duration-fast: 150ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } </code></pre> <p>这些 token 不属于任何组件，但所有组件都依赖它们。</p> <h3>2. 模式语言（Pattern Language）</h3> <p>如何处理表单验证的错误状态？什么时候用 Toast 而不是 Modal？分页和无限滚动怎么选？这些模式是团队的「默契」。</p> <h3>3. 组件实现（Components）</h3> <p>最后才是具体的组件代码。它应该是前两层的自然产物。</p> <h2>好的设计系统像方言</h2> <p>一个好的设计系统让团队成员能用简短的术语精确表达复杂的设计意图：</p> <blockquote> <p>「这个表单的错误反馈用 inline-validate 模式，token 用 --color-danger-500，动效用 --ease-spring。」</p> </blockquote> <p>三句话，零歧义。</p> <h2>总结</h2> <p>不要急于写组件。先把设计决策梳理清楚，用 token 固化下来，用模式语言建立共识。组件只是这些决策的最终表达。</p> https://zevth.work/posts/digital-nomad-reflections/https://zevth.work/posts/digital-nomad-reflections/社交媒体上的数字游民生活：海景咖啡厅、椰子树下的 MacBook、日落时分的冲浪。真实的数字游民生活：WiFi 不稳定、时区会议、孤独感、以及在异国他乡寻找归属感的漫长旅程。Sun, 05 Oct 2025 00:00:00 GMT<h2>Day 1: 天堂</h2> <p>抵达 Canggu 的第一天，一切都是滤镜里的样子。稻田边的 co-working space，手冲咖啡，来自世界各地的开发者。我在 Instagram 发了一张照片，配文「办公室」。</p> <h2>Day 30: 裂缝</h2> <p>新鲜感褪去后，现实开始露出真面目。WiFi 在暴雨天频繁断线，和国内团队的会议要在凌晨两点开。最要命的是——你开始想念楼下那家沙县小吃。</p> <h2>Day 60: 适应</h2> <p>我开始建立自己的节奏。早上六点起床，在最安静的时段写最需要专注的代码。下午去健身房，晚上参加 co-working space 的社区活动。学会了用 Grab 点外卖，学会了用印尼语砍价。</p> <h2>Day 100: 清醒</h2> <p>数字游民不是一种「更好的生活方式」，它只是一种「不同的生活方式」。它有自己的 trade-off：</p> <p><strong>你获得了：</strong></p> <ul> <li>时间自由</li> <li>地理自由</li> <li>新鲜的文化体验</li> </ul> <p><strong>你失去了：</strong></p> <ul> <li>稳定的社交圈</li> <li>熟悉的环境带来的安全感</li> <li>和家人朋友的物理距离</li> </ul> <h2>给想尝试的人</h2> <ol> <li>先试一个月，不要一上来就买半年的公寓</li> <li>选有成熟 co-working space 的城市</li> <li>保持和国内团队的沟通频率</li> <li>学会独处，但不要孤立自己</li> <li>记住：你随时可以回去，这不是一条不归路</li> </ol> <blockquote> <p>「自由的代价是不确定性。接受这一点，你就自由了。」</p> </blockquote>