Skip to Content
Get full access

Rothko Scene

Color field painting background: an orange field over an ink-blue field with torn, scumbled edges. Arrange the fields apart, meeting, solo or seamed behind a headline, with optional gritty grain. A painterly hero backdrop for landing pages.

pnpm dlx shadcn add @01orbital/rothko-scene

Usage

import { RothkoScene } from "@/components/scene/rothko-scene"

export default function Example() {
  return <RothkoScene />
}

Examples

New

rothko-scene-confident

rothko-scene-confident

Confident

Rothko painting background example: the Rothko Scene under gritty grain, with its orange and blue fields meeting at a seam. A bold abstract art backdrop for hero and section headers.

pnpm dlx shadcn add @01orbital/rothko-scene-confident

New

rothko-scene-copy-space

rothko-scene-copy-space

Copy Space

Rothko painting background example: the Rothko Scene under gritty grain with only the upper field showing, so the lower half stays clear for headline and copy. An abstract art backdrop for hero sections.

pnpm dlx shadcn add @01orbital/rothko-scene-copy-space

New

rothko-scene-highlight

rothko-scene-highlight

Highlight

Rothko painting background example: the Rothko Scene under gritty grain, with a soft scrim that darkens everything except a highlight at the lower right. An abstract art backdrop for dramatic hero sections.

pnpm dlx shadcn add @01orbital/rothko-scene-highlight

New

rothko-scene-mat

rothko-scene-mat

Mat

Rothko painting framed example: the Rothko Scene set in a pale mat on paper, with gritty grain running over both the mat and the painting. A gallery-style art panel for editorial sections.

pnpm dlx shadcn add @01orbital/rothko-scene-mat

New

rothko-scene-screen

rothko-scene-screen

Screen

Rothko painting background example: the Rothko Scene under gritty grain with a fine screen of noise laid over everything. A textured abstract art backdrop for hero and section backgrounds.

pnpm dlx shadcn add @01orbital/rothko-scene-screen

New

rothko-scene-wash

rothko-scene-wash

Wash

Rothko painting background example: the Rothko Scene under gritty grain with a pale wash softening the whole frame. A muted abstract art backdrop for light hero and section backgrounds.

pnpm dlx shadcn add @01orbital/rothko-scene-wash

API reference

A color-field painting: an orange field over an ink-blue one, edges torn by SVG displacement, filling its parent. composition arranges the fields, with an optional vignette and gritty grain. Hidden from assistive tech. It is a container (@container/rothko-scene): the seam composition sizes itself in cqw, a share of the scene's own width.

Prop

Type

It also accepts the HTML attributes of the element it renders.

Dependencies

npm: cn. The CLI installs them for you.

Registry pieces it installs with it:

  • gritty-grain

Backlit Blocks Scene

bone-slabs

cobalt-slabs

Color Wash

copper-slabs

Gestural Zip Scene