Carregando…

Canvas Reveal Effect

Backgrounds

GLSL dot-grid that reveals itself over time (noise + time-based intro), colors configurable per prop, on a React Three Fiber canvas — adapted from Aceternity UI.

Canvas Reveal Effect — grade de dots revelada por shader GLSL

Kikito CN

Instalação via CLI

$ npx kikitocn add canvas-reveal-effect

Interno:

@/lib/utilsthree@react-three/fiber

Exemplo de uso

Canvas Reveal EffectExample.tsx

import { CanvasRevealEffect } from "@/components/ui/cn/canvas-reveal-effect/CanvasRevealEffect";

export function CanvasRevealEffectExample() {
  return (
    <CanvasRevealEffect />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`animationSpeed`	`number`	`0.4`	Velocidade da revelação (0.1 = lento, 1.0 = rápido)
`colors`	`number[][]`	`[[0, 255, 255]]`	Cores dos dots em RGB 0–255 (1, 2 ou 3 triplas); sem token (shader lê número cru)
`opacities`	`number[]`	—	Faixa de opacidades sorteadas por dot (10 valores)
`dotSize`	`number`	`3`	Tamanho do dot em px de shader
`showGradient`	`boolean`	`true`	Scrim em gradiente (from-canvas) cobrindo a base
`containerClassName`	`string`	—	Classes CSS extras no container

Voltar para Backgrounds

Carregando…