Surface

Full-bleed container for rendering engines — canvas, WebGL, video or any visual content.

Install

npx shadcn@latest add https://substrate.georgedrury.co.uk/r/surface

import { Surface, SurfaceControls, SurfaceGrid } from "@/components/substrate/surface"

export default function SurfaceDemo() {

Variable	Tailwind class	Fallback	Description
`--canvas`	`bg-canvas`	`--background`	Surface background
`--canvas-foreground`	`text-canvas-foreground`	`--foreground-muted`	Surface foreground/grid

Component	Description
`Surface`	Absolute-positioned container with `bg-canvas` and overflow hidden
`SurfaceControls`	Overlay layer with pointer-events pass-through except on children
`SurfaceGrid`	CSS radial-gradient dot pattern sized via the `size` prop

Extends React.ComponentProps<"div">.

Prop	Type	Default	Description
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"bottom-right"`	Which corner to anchor controls to

Prop	Type	Default	Description
`size`	`number`	`20`	Grid dot spacing in pixels