Cover Art · PaneUI

Installation

pnpm dlx shadcn@latest add @paneui/cover-art

Usage

import { CoverArt } from "@/components/ui/cover-art"

<CoverArt seed={post.slug} aria-label={post.title} className="aspect-video rounded-xl" />
<CoverArt image={post.image} className="aspect-video" />

Examples

From a Seed

Palette

Use when the cover should match your brand colours.

Image

Use when the post already has its own artwork.

RTL

Shader

Without image the cover renders Shader Background, which pauses offscreen and under reduced motion. A seed picks a random palette from a stable hash, so the same slug gets the same colours on every visit and in OgCoverArt. palette="random" without a seed picks new colours after mount; with neither, the shader uses the theme colours.

Accessibility

The art is role="img", named by the locale’s coverArt label (“Abstract cover illustration” in English) through a hidden element. Pass aria-label with the post title, or aria-hidden when a caption next to it already names the post.

This art is WebGL for the page. For an opengraph-image route use OgCoverArt from OG Image: the same image, palette and seed, with the shader drawn as a still frame of the same colours. Clip the cover with a wrapper (overflow-hidden rounded-xl) to round its corners.

API Reference

CoverArt

Also accepts every prop of div.

image: string; Image URL drawn edge to edge. Wins over the shader.
palette: string[] | "random"; Shader colours, or a random set. Defaults to random with seed, else the theme.
shader= "mesh-gradient": ShaderVariant; Which shader to draw.
seed: string; Keeps the random palette stable, from a hash of the string.

Prop	Type	Default	Description
image	string	—	Image URL drawn edge to edge. Wins over the shader.
palette	string[] \| "random"	—	Shader colours, or a random set. Defaults to random with `seed`, else the theme.
shader	ShaderVariant	"mesh-gradient"	Which shader to draw.
seed	string	—	Keeps the random palette stable, from a hash of the string.

data-variant: image or shader.

Data attribute	Description
data-variant	`image` or `shader`.