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 自带的这个就非常好用。
|
|
