Grain Cube

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Usage

import { GrainCube } from "@/components/grain-cube";

<div className="w-64">
  <GrainCube theme="green" />
</div>

It fills the width of its parent as a square. Drag it to spin.

For your own palette, pass 2 to 8 colors.

<GrainCube colors={["#52c4dc", "#f2f6ea", "#25e15f", "#0b5a2b"]} />

It pauses when off screen and shows a still gradient if WebGL is not available.

Props