2025-04-18 19:27:27
本期封面来自 WebTUI，把终端 UI 移植到 web 上。
hi 好久不见，距离上一期已经过去快两个月了，前段时间一直忙着几个项目，实在没有时间，现在终于有时间更新了。
互联网发展太快，仅仅两个月就出现了大量新东西，限于篇幅原因不能全部展开讨论了，大部分内容我都都放到 Others 里面了。
本周推荐一下 Oxide 公司的一个小项目，一个 ASCII 在线可视化工具，免费开源。这是一个典型的设计与工程完美结合的作品，作者 Ben Leonard 根据公司网站的品牌设计风格，专门为了做一些复古风格的设计图才开发了这个工具。
可以看到他们的 blog 配图已经大量使用这个工具生成了。
一款专为程序员设计的 Mono 字体，旨在提高编码时的体验流畅度，具有变压字体支持、优雅的圆角设计、丰富的连词符、优先支持 Nerd-Font 以及中英文混合显示等特点。
一个 CSS 动画缓动函数的在线编辑和生成器，提供预设、自定义、预览和代码功能，帮助用户创建和分享复杂的cubic-bezier缓动曲线。
专为 Tailwind CSS 设计的一个插件，它提供了丰富的组件类名，使开发者能够更快速地开发界面，同时减少了 HTML 文件大小。最近发布了 5.0 版，用 Tailwind 的开发者必须试一试这个，太好用了。
这个效果太强了，使用 WebGPU 和 Three.js 实现的扫描效果 demo，该效果结合了图像和深度图的使用，以及自定义 Shader 和动态渲染技术，创造出视觉上的深度效果。
We’re not just designing visuals, we’re designing how empathy feels 🤍. Visual explorations for conversations, powered by Corti’s AI.
@heartbeatua
— daniella (@dana_daniellaa)
10:11 AM • Apr 14, 2025
为对话流程设计的一套动态效果图，据说是用 AE 制作的。
LeanRada 提供了一种 CSS 技术，用于生成只使用 CSS 的模糊图像占位符，通过定个的自定义属性实现，且不需要额外的 JavaScript 或者 HTML 包装。
在技术和产品日益同质化的时代，简单地开发一个能用的产品已经不再是竞争优势。真正能让产品脱颖而出的是品味——包括品牌、设计、直观性和整体体验。品味不仅仅是个人喜好，而是一种经过训练的直觉，能够识别和欣赏卓越之处。这正是国内独立开发者最欠缺的。
利用 clip path 制作一个 holding 删除按钮。
一款为 Web 开发者提供的高级交互式面板（Sheet）组件库，专为 React 设计，致力于提供更流畅、更自然的用户体验。它通过无缝的交互和完全定制的动画效果，实现了在不同设备和输入方式中的高效性能和可访问性。
很期待这个框架，一个完整的工具包，包括组件、UI blocks、UI Kits、样板代码、模板和设计系统，旨在加速基于 AI 的工作流程，并提供了一系列工业标准的工具，使设计师能够快速构建下一代 UI。
一款为现代开发者设计的 API 客户端，支持 HTTP、GraphQL、WebSockets、SSE 和 gRPC 等多种协议。
Shadcn Registry: 更好管理 UI 组件的方法。
Snappy UI: 一个现代化的 React 组件和动画库，收费的。
blocks.so: 一个开源的 Web 组件库，专注于提供现代化且简洁的 React 构建模块。
edithspaceUI: 另一个开源 React 组件库。
KL UI: React 动画 UI 组件库，目前内容很少。
Kibo UI: 一个为 shadcn/ui 定制的可组合、无障碍且开源的组件库。
Tailark: 和上面那个差不多。
prompt-kit: 同样是基于 shadcn/ui 专注于 AI 提示词相关的 UI 库。
simple-ai: 另一个 AI 相关的开发组件库。
agent-ui: agno 旗下的 AI 聊天界面框架。
Better Auth UI: 再来一个基于 shadcn/ui 和 Better Auth 的注册登录组件库。
Matsu-theme: 吉卜力风格 shadcn/ui的主题包。
Matsu DaisyUI: 另一个吉卜力风格 UI 主题，但是基于 DaisyUI。
Cursify: 基于 React 的光标动画库。
Supabase 也发布了他们官方的数据库 UI 组件库，包括注册、实时和数据存储方面的组件。
tweakcn: shadcn/ui 主题编辑器。
Frimousse: liveblocks 发布的表情选择器组件库，也可以用 shadcn/ui 安装。
Ferruccio 表情选择器: 另一个表情符号组件库。
Metal Buttons: 金属风格按钮设计库。
Prime UI: 快速构建易管理的网站工具，还未上线。
SVG UI: 一套 SVG 动画组件库。
Rosen Charts: 数据图表可视化组件库。
Tailwind CSS v4.1: 新增文字阴影和蒙版等功能。
Gemini Code Assist: Google 发布的代码辅助 VS Code 插件。
UI 动画时长表: 各类 UI 动画持续时间参考。
NextBunny: Next.js 免费拖拽式构建工具。
Lynx: 字节推出的跨平台前端框架。
ShaderGPT: 着色器代码AI生成工具。
Fuma Comment: 一个简约的评论系统，可以植入博客和文档等地方。
circle: 模仿 Linear UI 做的前端界面。
 |
 |
2025-02-20 18:42:02
Hi 好久不见，拖更了几周终于有时间继续维护这个周刊了。
上期那个 Text Reveal 效果你还记得吗？这里有一个 Framer 版本的，无需写代码即插即用。
最近有一个叫 React Bits 的 UI 组件库横空出世，作者在里面写了不少更高级的动效，而且大部分都是用 WebGL 写的，效果比大部分同类框架都要酷炫，果然会 WebGL 的人做这个就是降维打击啊。
比如这个 Splash Cursor 很多年前就在一些创意开发者的作品里见过，如今做成了开源框架造福大家，有人把它植入了 Framer 模板，有很多新项目也采用了这个，21st.dev 也收录了这个效果，直接拿来安装使用就行了。代码就不展开了，都是 WebGL 读起来太晦涩了……
推荐一下朋友 Viggo 最新推出的 AI 教程，这个指南不教你写代码，会用工具和方法才是最重要的。用AI(完全不需要写代码)快速开发网站并通过产品盈利。这也是作者去年上线了十几个独立开发的产品总结的一些经验。课程包含从前期准备，AI 工具使用，项目部署营销增长的全流程。工具包括 Cursor 的高级使用，甚至还有 Figma 设计教程。
现在预售 $99，我给读者和群友申请 20% 的折扣，购买时输入 DINGYI 即可，数量有限先到先得！
开源的 UI 组件库，也包含一些动效组件，但看起来设计得很奇怪。
一个基于 Tailwind 和 Framer Motion 的开源 React 组件库，提供美观且高度可定制的企业级组件，帮助开发者更快地构建和发布应用程序。
另一个基于 Tailwind CSS 和 React 构建的美观 UI 组件库，还支持在 v0 上查看。
一个小而美的 toast for React 组件。
致敬 Vercel 的开源项目，一个艺术化文本展示。整个页面呈现出一个由 ASCII 字符组成的流体三角形图案，主要使用了字母、符号和标点符号来创造出流动的视觉效果。
一位全栈设计工程师的网站，风格也是采用了流行的复古科技风，最上面的个人画像一看就是用了 Unicorn Studio 做的。
is it yours AI orb?
Runs everywhere, interactive, 7kb,
@rive_app
— Bartek Radziejewski (@radbar_1)
8:36 AM • Feb 12, 2025
Bartek Radziejewski 用 Rive 做的 AI 思考动画，Rive 确实很厉害，能做出这种细节的作品，还能在任何平台运行。
作者分享了他如何通过使用 Ghostty 终端模拟器和 Fish Shell 来优化他的命令行环境，以及他的配置设置和迁移过程。如果你也是 fish 的忠实用户，必看。
来自 Linear 的设计师分享了自己个人网站的创作心得。作品集是设计师展示自己能力和项目的传统方式，但不应该是个人网站的唯一形式。作者提出个人网站可以通过不同的页面布局，展示个人的多个工作维度，例如正在进行的工作 (/now)、动态更新 (/feed)、变更日志 (/changelog)。如何通过展示作者的写作 (/writing)、灵感板 (/moodboard) 和成就记录 (/track-record)，来构建更丰富的个人品牌和叙事。另外他这个网站完全是用 Framer 制作的，所以如果你不会代码，也可以做一个像他这样的个人网站。
一个专注于 AI 搜索引擎优化的企业级平台，帮助品牌在AI对话和搜索结果中提升可见度和影响力。可以看一下 Enterprise 页面的 Bento 设计和动画，包括首页的动画，都很精彩。
corner-smoothing: Apple-like smooth corners for Tailwind CSS.
input-otp: 一次性密码的小组件，实用。
v0 上线了 Community，可以预见这东西发展几年后，谁还用 Figma？
之前很有名的 NextUI 拿到投资后改名叫 HeroUI 了。
Nim: 免费开源的个人主页模板。
RAG Component: 一个小巧的基于 Next 的 AI Chat 组件。
Theme toggle: 利用浏览器的原生 view transition api 做明暗主题切换动效。
Terminal Directory: 想不到有这么多终端应用。
JStack: Full-Stack Next.js & TypeScript Toolkit，别再花冤枉钱买那些收费的了，免费的都多到用不完了。
404 | ERYC: 有趣的 404 页面设计。
|
|
2025-01-24 18:00:15
Tailwind CSS 4.0 终于发布了，可以不需要 config 配置文件了，还有几点更新是比较满意的：
简化安装和配置：只需三个步骤即可完成，且不需要额外的配置和插件。
内置导入支持：不再需要额外的插件来处理 @import 规则，Tailwind CSS v4.0 内置了这一功能。
现代化的 P3 颜色调色板：默认颜色调色板从 rgb 升级到 oklch，提供了更鲜艳的颜色。
扩展的渐变 API：提供了更多的渐变特性，包括线性渐变角度、渐变插值模式、圆锥和径向渐变等。
starting-style 支持：引入了 starting 变体，支持 CSS @starting-style 特性，允许在元素首次显示时进行过渡动画。
上周得了流感停刊一次，年前最后一期，大家年后见！
最近经常看到这种或类似的效果，滚动时文本逐个单词显示出来，利用 Motion 几行代码就可以实现，如果使用 Framer 自带的文本工具可能更容易，不过还没有尝试。
'use client';
import { useScroll, useTransform, motion } from 'motion/react';
import { useRef } from 'react';
export function Text2() {
//useScroll hook 用于监控元素的滚动进度，offset 配置定义了动画的触发范围：从元素顶部到视口底部开始，到元素底部到视口顶部结束
const ref = useRef(null);
const { scrollYProgress } = useScroll({
target: ref,
offset: ['start end', 'end start'],
});
//创建一个函数来转换滚动进度为不透明度, 每个词都会从 0.3 的不透明度渐变到 1
const createWordOpacity = (start: number, end: number) =>
useTransform(scrollYProgress, [start, end], [0.3, 1]);
return (
<div className='relative h-[300vh]'>
<div className='flex flex-col items-center space-y-8' ref={ref}>
{[
'Effortless Creation: Transform ideas into stunning visuals with just a few words. Our AI understands context and nuance, bringing your imagination to life. Generate professional-quality visuals without complex software or design experience.',
'Limitless Imagination: Explore infinite creative possibilities with cutting-edge AI. Our platform adapts to your needs, offering an ever-expanding universe of visual concepts. Push boundaries with genre-blending compositions and futuristic concepts.',
].map((text, index) => (
<motion.div
key={index}
className='text-xl font-medium text-black dark:text-white'
>
//核心动画效果，将每段文本分割成单词，为每个单词计算独特的动画时间范围，使用 motion.span 为每个单词添加动画效果
{text.split(' ').map((word, wordIndex, array) => {
const start = index * 0.3 + (wordIndex / array.length) * 0.3;
const end = start + (1 / array.length) * 0.3;
return (
<motion.span
key={wordIndex}
style={{ opacity: createWordOpacity(start, end) }}
className='mr-1 inline-block'
>
{word}
</motion.span>
);
})}
</motion.div>
))}
</div>
</div>
);
}最近很火的前端项目，它其实就是把各家开源的动效组件库聚合在一起了，从口号 The NPM for Design Engineers 也可以看出来，创新的点在于可以把代码一键拷贝到 V0 等 AI 编程平台。如果说 Craftwork 是给设计师用的素材平台，那么以后会有越来越多类似的 21st 这样的设计工程师素材平台出现的。
另一个基于 React 的动效组件库，很多效果也很不错。
和上面那个差不多，不过效果差点，内容也没那么多。
免费且开源的 web 背景素材平台，提供多种现代化和科技感的背景图案，每种模式都可以通过预览和复制 CSS 代码快速应用。
很喜欢这位设计工程师的个人网站，充满了各种有趣的细节。
另一位大神的网站，ertdfgcvb 是一个专注于设计和编程的工作室，主要专长包括程序化图形和动画、研究与开发、硬件原型设计、交互式装置以及实时可视化。
So I made a $100 bill that resizes with your screen. Think adaptive design meets digital currency meets inflation—all in one package. anatolyzenkov.com/resizabill
— Anatoly Zenkov (@anatolyzenkov)
9:18 AM • Jan 8, 2025
有人把美元纸币做成了响应式设计，不知道有没有人挑战一下 rmb？
本文主要介绍了在 next.js 中三种主要方法自定义元数据。
CSS 中文本换行平衡的新特性，主要介绍了 text-wrap: balance 和 text-wrap: pretty 两个属性。这些属性可以帮助开发者更好地控制文本换行，使文本看起来更加美观和易读。text-wrap: balance 会尝试平衡文本行的长度，而 text-wrap: pretty 则更加温和，主要处理孤立的单词。
除了那些开源的前端动效可以直接拿来用，如果你想学习更有创意更高级的动效，现在有一些平台基于 GSAP 也推出了类似的项目，不过并不免费。
另一个刚刚上线的，以会员订阅制来教你做高级动画，目前 499 € 买断永久版。
一个简单的 API 服务，可以为任何网站获取（OG）元数据。用户只需在 URL 前加上 og.metadata.vision 前缀，就能快速获取网站的标题、描述、图片、图标等关键信息。
inline: 之前那个企业聊天工具代码全开源了。
Motion Vue: Framer Motion + Vue 的实现。
Motion 发布了新的 View animations，不过现在需要付费会员才能提前看到代码了。
Family Components: 人们好像都很喜欢复刻 Family app 的交互动画。
The Startup Stack: 一个全面的 SaaS 解决方案，该堆栈基于包括React Router、SST、OpenAuth、Hono、Postgres 和 Stripe 等工具，不是 Next 而是基于 Remix 的。
Figma to shadcn/ui 的插件，把设计稿直接变成 shadcn 组件。
|
|
2025-01-09 16:03:04
上周的那个背景动效不知道大家学习了吗？又看到一位设计师的个人网站也用了类似的效果，不过他是用 Cursor AI 做的，然后嵌入了 Framer 里面，看代码是单独做了一个 gradientMask.js 的模块，比用纯 CSS 更复杂些。
你肯定见过 Flickering Grid 是什么，最早应该是来源于 Github 的代码提交的可视化图片，后来越来越多的网站都拿来用了。目前网上开源的版本大概都是从开源动效库 MagicUI 里面的 Flickering Grid 衍生的，比如 Svelte 版的，Vue 版的，另一个 Vue 版等等。
核心代码有点复杂，因为需要用到算法和 Canvas，太长了我只节选部分代码：
const FlickeringGrid: React.FC<FlickeringGridProps> = ({
squareSize = 4,
gridGap = 6,
flickerChance = 0.3,
color = "rgb(0, 0, 0)",
width,
height,
className,
maxOpacity = 0.3,
}) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [isInView, setIsInView] = useState(false);
const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
const memoizedColor = useMemo(() => {
const toRGBA = (color: string) => {
if (typeof window === "undefined") {
return `rgba(0, 0, 0,`;
}
const canvas = document.createElement("canvas");
canvas.width = canvas.height = 1;
const ctx = canvas.getContext("2d");
if (!ctx) return "rgba(255, 0, 0,";
ctx.fillStyle = color;
ctx.fillRect(0, 0, 1, 1);
const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);
return `rgba(${r}, ${g}, ${b},`;
};
return toRGBA(color);
}, [color]);
const setupCanvas = useCallback(
(canvas: HTMLCanvasElement, width: number, height: number) => {
const dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const cols = Math.floor(width / (squareSize + gridGap));
const rows = Math.floor(height / (squareSize + gridGap));
const squares = new Float32Array(cols * rows);
for (let i = 0; i < squares.length; i++) {
squares[i] = Math.random() * maxOpacity;
}
return { cols, rows, squares, dpr };
},
[squareSize, gridGap, maxOpacity],
);
};别人的代码直接拿过来用也没什么，不然也不会有这么多衍生版。但如果是做产品，可以看看真实案例是怎么运用的：
比如 LiveKit 在 Flickering Grid 上面加了一个语言录入的交互。
比如 Voiceflow 在 Flickering Grid 上面加了文字蒙版，效果也不错。
所以你看，老外们也是拿来主义，只是人家不是照搬，而是学以致用。
平滑元素过渡工具，一个与框架无关的 JavaScript 库，专注于实现元素之间的流畅过渡。
又一个开源的动效组件库，旨在帮助开发者快速构建精美的应用界面。支持 React、Tailwind CSS 和 Motion 技术。
shadcn UI 组件库，收费 79 刀，提供了 350 个专业设计的、完全响应式的块和组件，专门为 shadcn/ui、Tailwind 和 React 开发。
这位 Framer 玩家的作品真不错，网站用了很多高级动效，应该是 code overrides 自己用代码整合的，那个 Glitch 文字效果也很棒。
分享一下 Yiyang 同学最近更新的个人网站，如果你也想成为 design engineer，他就是一个很好的学习榜样。
Surprisingly tricky layout to get right.
Getting the text to flow between columns and wrap around the disk image.
— Dan Hollick (@DanHollick)
1:53 PM • Jan 2, 2025
最喜欢的设计工程师之一 Dan Hollick 自从离开 Raycast 跳槽到 Tailwind 一直在 cooking 新产品，非常期待。
Added different Superluminova options with photoluminescent particle texture to the Bauhaus Clock.
Looks extra gorgeous on XDR displays.
— Atilla (@_atilla1)
1:38 PM • Jan 6, 2025
Atilla 做了一个夜光风格的包豪斯时钟，并强调在 XDR 显示器上看起来非常出色。
Resend 官方写的教程，他们团队在开发广播编辑器的 𝕏 帖子嵌入功能时，面临了将动态社交媒体内容转换为静态电子邮件的技术挑战。他们通过巧妙运用 Vercel 的三个工具——React Tweet、Next.js ImageResponse 和 Satori 库，成功地将𝕏帖子动态转换为电子邮件友好的图像。
写前端的人肯定知道这位作者吧，这位日本老哥的分享都很实用，我跟他学了太多东西。
去年的 JS 统计数据出炉了，语言和框架方面没啥好说的，整体变化不大，有趣的是薪水统计的部分，可以看到非美国和美国本土的工程师的薪资水平差距真是大啊，难怪大家都拼了命的要去美国。
最喜欢的 shell 工具 fish 发布了 4.0 beta 版，个人觉得比 zsh 好用多了。
Roo-Cline: AI 编程工具 Cline 的克隆版本，据说能达到和 Cursor 一样的体验。
README | GPU Glossary: Modal 这次改版真是惊喜连连啊，发现这个 readme 页面也很好看，模仿终端的感觉。
microsoft/inshellisense: 微软出了一个为命令行工具提供 IDE 风格的自动完成工具，支持 600 多个命令行工具，并兼容 Windows、Linux和 macOS 操作系统。不过还是 Warp 更好用。
Get Full Year: 每年年底都会有人提醒你的网站 footer 该更新了，本来一句 js 代码就搞定的事，还真有人做了一个服务和 API，还有人打包了 React 组件。
MiniPerplx: 开源版的 Perplexity，老哥之前公开了这个项目免费给大家用，但用的 API 每月要好几千美金，最近不得不换成了 Grok，赛博菩萨不好当啊。
What Does a UX Engineer Do, Exactly? A Little Bit of Everything: 看一篇 2019 年的文章，那时还不流行 design engineer 的概念，而是说 UX engineer，做的事情也差不多。
|
|
2025-01-02 14:51:40
Design Engineer 的概念和职位这几年在海外越来越被互联网公司重视，薪资水平也大幅提高，比如最近 Sahil Lavingia 就开出了 44 万美金的天价年薪，借用 Jordan Singer 的话，设计工程师是这样演变而来的：
设计工程师的兴起：设计师通过学习编程，开始关注如何将设计转化为实际可交互的产品，这标志着设计工程师角色的兴起。
好奇心作为起点：对于设计师来说，好奇心是开始编程和探索另一边的起点。
新视角的双刃剑：获得工程技能让设计师感到强大，但同时也意味着他们需要对实现过程中的困难保持同理心。
学习通过实践：Singer 建议设计师通过实际操作来学习，从小项目开始，逐步提升技能和信心。
设计与工程的紧密结合：未来，能够设计和工程化生产的能力将变得越来越受欢迎，两者的结合比大多数人想象的要紧密。
对控制权的追求：Drew Andersen 认为，设计师想要控制整个设计到实现的过程，这种追求可能会带来新的问题和挑战。
实践验证：Saïd Aitmbarek 通过自己的项目 Microlaunch.net 证明了设计与工程技能的结合在实际中的应用。
关于 Design Engineer 更多的理念可以看一下本周刊官网给出的几个链接。
本周刊内容架构分为（根据实际情况会随时变动）：
Case Study: design engineering 小教程，不保证每期都有。
Resources: 相关资源，如组件库、字体、动效框架等。
Motion: 每周网上看到的有创意的动效。
Articles: 相关文章分享。
Products: 相关产品分享。
Others: 其他新闻和资源。
在线预览地址，可点击 fork 并编辑。
此效果是从 Magic 官网学来的，动态光影的背景渐变效果，一开始看起来像是用 shader 做的，发现只需要用 CSS 就可以轻松实现。原理就是贴一张渐变图片，再利用 CSS 叠加一层渐变，配合 Blend mode 做出叠加效果：
.aurora-overlay {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 20vw;
min-height: 200px;
mix-blend-mode: lighten;
background: linear-gradient(280deg, #03f241, #d549dd, #03e5f2, #03f241);
background-size: 400% 400%;
animation: aurora-overlay 15s ease infinite;
}
核心代码，通过给背景设置不同定位让它动起来，再加上 backdrop-filter 滤镜效果就完成了。
@keyframes aurora-overlay {
0% {
background-position: 0 94%;
-webkit-backdrop-filter: saturate(1.5);
backdrop-filter: saturate(1.5);
}
50% {
background-position: 70% 7%;
-webkit-backdrop-filter: saturate(1.5) hue-rotate(100deg);
backdrop-filter: saturate(1.5) hue-rotate(100deg);
}
to {
background-position: 0 94%;
-webkit-backdrop-filter: saturate(1.5);
backdrop-filter: saturate(1.5);
}
}
Base UI 是一个新的 React UI 库，由 Radix UI 原班人马打造，当年他们还在做 Modulz 时开发了 Radix UI 和我最喜欢的 Stitches，后来被 WorkOS 收购其中一位作者去了 Raycast，而 Stitches 也不再维护了。Radix UI 本来也很小众但因为 shacdn/ui 的关系渐渐发扬光大了。如果这个项目正常发展，很有可能代替 Radix UI 成为 shacdn/ui 的底层架构。
又一个免费开源的炫酷 web 组件库合集，目前内容还不是很多，可以持续关注下。
最好看的编程字体之一 Berkeley Mono 发布了 2.0 版，想不到几年前团购的 1.0 还能免费升级。看官网他们今年还会再发布 3 款新字体，期待了。
some nice and simple animations for the @family support page. always good fun animating icons 😄
— Lochie (@lochieaxon)
4:26 PM • Nov 26, 2024
Lochie 为 family app 的 support 页面设计了一套动态图标。
backdrop-filter: blur() 通常用来制作毛玻璃效果，那么除了常见的导航栏毛玻璃，还可以扩展出哪些更高级的用法呢？
2024 年 CSS 有哪些改进和进步呢？你可以一键用 AI 总结一下，内容超级多我就不展开了，反正大部分新功能大家都不太关心，现在都用 Tailwind 一把梭了。
大概是目前市面上最好的终端之一 Ghostty 终于发布了 1.0 公开版。为什么这个产品得到了空前的关注？因为作者是大神 Mitchell Hashimoto，前 HashiCorp 创始人，市值百亿的公司 CTO 不干了，就为了自己亲手写代码为我们带来更好的产品，还免费使用，这是什么精神？只能感谢他和互联网了。更好的是最喜欢的图标设计师 Michael Flarup 也强强联合贡献了超可爱的图标，甚至图标样式都可以通过设置自定义。更多详细教程可以看这篇中文文章，有人还写了一个可视化的设置工具 Ghostty Config，开源社区太美好了。
Clamper: 一款 macOS 小工具，专为网页开发者设计，它能够帮助用户快速设置网页的最小和最大屏幕宽度、字体或对象大小，以及在像素和 REM 之间切换，同时提供响应式友好的 clamp 计算公式，直接复制到浏览器中使用。图标设计很好看。
Fantastic Motion: 一个很不错的 Framer Motion 课程，主要是作者 Frontend.FYI 非常厉害，自己写了很多很好的教程和视频。
Framer Motion 变成 Motion 后更新非常积极，这是新的例子页面。
Framer Wrapped 是怎么制作的，官方分享的教程，利用 Google Sheet 插件导入数据，用 Framer 的 fetch 功能抓取数据。
Shadercraft: 一个专注于着色器艺术、学习和灵感的平台，喜欢研究 shader 和 WebGL 的人肯定喜欢。
Scan Domains: 实用小工具，可以快速查询 Whois 信息、域名服务器、DNS记录等。
如果你需要好看的鼠标指针组件，Motion 自带的这个就非常好用。
|
|
