canvas-reveal-effect

1"use client";
2import { cn } from "@/lib/utils";
3import { Canvas, useFrame, useThree } from "@react-three/fiber";
4import React, { useMemo, useRef } from "react";
5import * as THREE from "three";
6 
7export const CanvasRevealEffect = ({
8  animationSpeed = 0.4,
9  opacities = [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1],
10  colors = [[0, 255, 255]],
11  containerClassName,
12  dotSize,
13  showGradient = true,
14}: {
15  /**
16   * 0.1 - slower
17   * 1.0 - faster
18   */
19  animationSpeed?: number;
20  opacities?: number[];
21  colors?: number[][];
22  containerClassName?: string;
23  dotSize?: number;
24  showGradient?: boolean;
25}) => {
26  return (
27    <div className={cn("h-full relative bg-white w-full", containerClassName)}>
28      <div className="h-full w-full">
29        <DotMatrix
30          colors={colors ?? [[0, 255, 255]]}
31          dotSize={dotSize ?? 3}
32          opacities={
33            opacities ?? [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1]
34          }
35          shader={`
36              float animation_speed_factor = ${animationSpeed.toFixed(1)};
37              float intro_offset = distance(u_resolution / 2.0 / u_total_size, st2) * 0.01 + (random(st2) * 0.15);
38              opacity *= step(intro_offset, u_time * animation_speed_factor);
39              opacity *= clamp((1.0 - step(intro_offset + 0.1, u_time * animation_speed_factor)) * 1.25, 1.0, 1.25);
40            `}
41          center={["x", "y"]}
42        />
43      </div>
44      {showGradient && (
45        <div className="absolute inset-0 bg-gradient-to-t from-gray-950 to-[84%]" />
46      )}
47    </div>
48  );
49};
50 
51interface DotMatrixProps {
52  colors?: number[][];
53  opacities?: number[];
54  totalSize?: number;
55  dotSize?: number;
56  shader?: string;
57  center?: ("x" | "y")[];
58}
59 
60const DotMatrix: React.FC<DotMatrixProps> = ({
61  colors = [[0, 0, 0]],
62  opacities = [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14],
63  totalSize = 4,
64  dotSize = 2,
65  shader = "",
66  center = ["x", "y"],
67}) => {
68  const uniforms = React.useMemo(() => {
69    let colorsArray = [
70      colors[0],
71      colors[0],
72      colors[0],
73      colors[0],
74      colors[0],
75      colors[0],
76    ];
77    if (colors.length === 2) {
78      colorsArray = [
79        colors[0],
80        colors[0],
81        colors[0],
82        colors[1],
83        colors[1],
84        colors[1],
85      ];
86    } else if (colors.length === 3) {
87      colorsArray = [
88        colors[0],
89        colors[0],
90        colors[1],
91        colors[1],
92        colors[2],
93        colors[2],
94      ];
95    }
96 
97// … truncated