Shader Void

PreviousNext

Example showing a simple shader void.

Docs
aliimamexample

Preview

Loading preview…
registry/default/example/backgrounds/shader-void/shader-void-default.tsx
import { ShaderVoid } from "@/registry/default/components/shader-void";

export default function DemoOne() {
  return (
    <div className="relative flex h-[600px] w-5xl flex-col items-center justify-center overflow-hidden rounded-xl border">
      <ShaderVoid
        voidBallsAmount={0}
        voidBallsColor="#fff200"
        plasmaBallsColor="#fff200"
        plasmaBallsStroke="#fff200"
        gooeyCircleSize={30}
        blendMode="overlay"
        className="mx-auto"
      />
    </div>
  );
}

Installation

npx shadcn@latest add @aliimam/shader-void-default

Usage

import { ShaderVoidDefault } from "@/components/shader-void-default"
<ShaderVoidDefault />