Marketing

Backdrop

A quiet pattern behind a section: a hairline grid, dots or a glow in the theme's AI colors, faded toward the edges. Pure CSS, nothing moves.

npx prodular-ui add backdrop

Four patterns

grid, dots, glow and grid-glow, each fading out from the center.

grid

dots

glow

grid-glow

import { Backdrop } from "@/components/ui/backdrop"
export default function BackdropPatterns() {  const variants = ["grid", "dots", "glow", "grid-glow"] as const  return (    <div className="grid w-full gap-4 sm:grid-cols-2">      {variants.map((v) => (        <div key={v} className="relative isolate flex h-44 items-center justify-center overflow-hidden rounded-xl border bg-background">          <Backdrop variant={v} />          <code className="rounded-md bg-background/80 px-2 py-1 text-[13px]">{v}</code>        </div>      ))}    </div>  )}

Anatomy

<Section size="lg">  <Backdrop variant="grid-glow" />  <SectionHeader as="h1" size="lg" title="..." /></Section>

Guidance

Use it when

Behind a hero or a closing call to action, once or twice per page.
grid-glow for heroes, dots for quiet sections.

Avoid

Behind text-heavy sections, where it competes with reading.
Animating it. It is meant to sit still.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Put Backdrop first inside a Section; Section isolates it so it stays behind the content.
Pick fade bottom for patterns that should end where the next section starts.

API

Backdrop

Prop	Type	Default	Description
variant	"grid" \| "dots" \| "glow" \| "grid-glow"	"grid"	The pattern.
fade	"radial" \| "bottom" \| "none"	"radial"	Where it fades out.