Grain Cube

Customize
Theme
Size0.70
Scale1.0
Warp1.0
Grain0.05
Speed1.0

Installation

pnpm dlx shadcn@latest add @clover-ui/grain-cube

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

PropType

Your own palette of 2 to 8 colors. Overrides theme.

Cube size inside the box, from 0.2 to 1.

Default0.7

Zoom of the pattern on each face.

Default1

How much the pattern swirls.

Default1
Default0.05
Defaulttrue
Default1

Lets you drag to spin.

Defaulttrue

Render scale, from 0.5 to 1.

Default1