#2 Flickering Grid

Author

Yi Ding
January 09, 2025 • Estimated Reading Time: 5 minutes

INTRO

上周的那个背景动效不知道大家学习了吗？又看到一位设计师的个人网站也用了类似的效果，不过他是用 Cursor AI 做的，然后嵌入了 Framer 里面，看代码是单独做了一个 gradientMask.js 的模块，比用纯 CSS 更复杂些。

LEARN SOMETHING

你肯定见过 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 上面加了文字蒙版，效果也不错。

所以你看，老外们也是拿来主义，只是人家不是照搬，而是学以致用。

RESOURCES

平滑元素过渡工具，一个与框架无关的 JavaScript 库，专注于实现元素之间的流畅过渡。

Blendy, a framework-agnostic tool that smoothly transitions one element into another with just a few lines of code.

Blendy, a framework-agnostic tool that smoothly transitions one element into another with just a few lines of code.

又一个开源的动效组件库，旨在帮助开发者快速构建精美的应用界面。支持 React、Tailwind CSS 和 Motion 技术。

Luxe

Copy & Paste components. Illuminate your apps. Fast and Easy.

shadcn UI 组件库，收费 79 刀，提供了 350 个专业设计的、完全响应式的块和组件，专门为 shadcn/ui、Tailwind 和 React 开发。

Shadcnblocks shadcn/ui blocks & components

Hundreds of new shadcn/ui blocks and Shadcn components. A premium UI library built with Shadcn UI, React & Tailwind.

CASE STUDY

这位 Framer 玩家的作品真不错，网站用了很多高级动效，应该是 code overrides 自己用代码整合的，那个 Glitch 文字效果也很棒。

分享一下 Yiyang 同学最近更新的个人网站，如果你也想成为 design engineer，他就是一个很好的学习榜样。

DELIGHTFUL MOTION

最喜欢的设计工程师之一 Dan Hollick 自从离开 Raycast 跳槽到 Tailwind 一直在 cooking 新产品，非常期待。

Atilla 做了一个夜光风格的包豪斯时钟，并强调在 XDR 显示器上看起来非常出色。

ARTICLES

Resend 官方写的教程，他们团队在开发广播编辑器的 𝕏 帖子嵌入功能时，面临了将动态社交媒体内容转换为静态电子邮件的技术挑战。他们通过巧妙运用 Vercel 的三个工具——React Tweet、Next.js ImageResponse 和 Satori 库，成功地将𝕏帖子动态转换为电子邮件友好的图像。

写前端的人肯定知道这位作者吧，这位日本老哥的分享都很实用，我跟他学了太多东西。

去年的 JS 统计数据出炉了，语言和框架方面没啥好说的，整体变化不大，有趣的是薪水统计的部分，可以看到非美国和美国本土的工程师的薪资水平差距真是大啊，难怪大家都拼了命的要去美国。

OTHERS

Love this newsletter?

Reply

or to participate.