Grid Distortion (React / Next / Vue)

一个基于 Three.js 的网格扭曲（Grid Distortion）组件。

• 支持 React / Next.js / Vue 3
• 需要浏览器环境（依赖 WebGL）
• 基于 IntersectionObserver + requestIdleCallback 延迟初始化，尽量降低首屏开销

重要说明（请务必阅读）

• 本组件依赖 three，使用前必须安装 three。
• 该组件在 Node/SSR 环境无法运行。
  • Next.js App Router 请使用 grid-distortion/next 子入口（包含 "use client"）。
  • Vue 3 App Router 请使用 grid-distortion/vue 子入口。

安装

npm i grid-distortion three
# 或
pnpm add grid-distortion three
# 或
yarn add grid-distortion three

React / Vue 需要你项目自身已安装对应框架依赖。

使用

React

import React from "react";
import GridDistortion from "grid-distortion";

export default function App() {
  return (
    <div style={{ width: 800, height: 240 }}>
      <GridDistortion
        grid={22}
        text="XXX"
        backgroundColor="#733FF1"
        textColor="#250041"
      />
    </div>
  );
}

Next.js (App Router)

在 Client Component 中使用：

"use client";

import GridDistortion from "grid-distortion/next";

export default function Footer() {
  return (
    <div style={{ width: "100%", height: 240 }}>
      <GridDistortion grid={22} text="XXX" />
    </div>
  );
}

Vue 3

<script setup lang="ts">
import GridDistortion from "grid-distortion/vue";
</script>

<template>
  <div style="width: 800px; height: 240px">
    <GridDistortion :grid="22" text="XXX" backgroundColor="#733FF1" />
  </div>
</template>

API

React / Next: GridDistortion

Props：

• grid: number
• mouse?: number
• strength?: number
• relaxation?: number
• text: string
• backgroundColor?: string
• textColor?: string
• fontFamily?: string
• fontWeight?: number | string
• boldness?: number
• letterSpacingRatio?: number
• paddingRatio?: number
• className?: string

Vue 3: GridDistortion

Vue 版本 props 与 React 基本一致（写法按 Vue 语法）。

开发

npm install
npm run build

License

MIT