Backdrop

A faint landscape or dot pattern fixed to the bottom of the page. Gives the page ground without competing with content.

import { Backdrop } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function BackdropBasic() {
  return (
    <Preview block={true}>
      <div className="relative isolate h-64">
        <Backdrop.Root className="absolute h-full" />
      </div>
    </Preview>
  );
}

• Use one behind application and standalone pages. It covers about the lower half of the viewport, fades in from the top and stays faint in both themes.
• It draws dots by default. Pass image with avif and webp sources to draw a landscape instead. Choosing the image, such as one per palette, is up to the app; pass per-image adjustments through className.
• It is fixed behind the content, so render it inside an element that creates a stacking context: Shell.Root or Standalone.Root. Inside Shell.Root it starts after the sidebar from md up.
• It is decorative: hidden from assistive technology and ignores the pointer.

API

Parts: Root. Other props go to the native div.