Skip to Content
Get full access

Backlit Blocks Scene

Rothko-style abstract painting background: two stacked color fields, a glowing coral upper block over a dark indigo lower one, with brush strokes, a seam, grain and a vignette. Hue, chroma and lightness knobs recolor each block.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene

Usage

import { BacklitBlocksScene } from "@/components/scene/backlit-blocks-scene"

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

Examples

New

backlit-blocks-scene-coral-over-indigo

backlit-blocks-scene-coral-over-indigo

Coral Over Indigo

Backlit Blocks Scene default example: two glowing color blocks, coral over indigo, with paper grain and a soft vignette. The abstract Rothko-style painting background with its built-in colors.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-coral-over-indigo

New

backlit-blocks-scene-moss-over-plum

backlit-blocks-scene-moss-over-plum

Moss Over Plum

Backlit Blocks Scene example with a mossy green field above a plum one, showing how the two hues are set independently. An earthy abstract color field background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-moss-over-plum

New

backlit-blocks-scene-cobalt-over-rust

backlit-blocks-scene-cobalt-over-rust

Cobalt Over Rust

Backlit Blocks Scene example: a cobalt block glowing over a rusty orange one, a cool and warm pairing made by changing the two hues. Shows the abstract two-tone painting in a contrasting palette.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-cobalt-over-rust

New

backlit-blocks-scene-violet-over-teal

backlit-blocks-scene-violet-over-teal

Violet Over Teal

Backlit Blocks Scene example with violet light above a teal block, one cool pairing among the scene's hue choices. An abstract two-tone color field background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-violet-over-teal

New

backlit-blocks-scene-ochre-over-ocean

backlit-blocks-scene-ochre-over-ocean

Ochre Over Ocean

Backlit Blocks Scene example with a warm ochre block above a deep ocean blue, for a sunlit and watery pairing. An abstract two-tone color field background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-ochre-over-ocean

New

backlit-blocks-scene-rose-over-midnight

backlit-blocks-scene-rose-over-midnight

Rose Over Midnight

Backlit Blocks Scene example with a rose upper block over a much stronger lower block, showing how lower color strength changes the balance. An abstract two-tone background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-rose-over-midnight

New

backlit-blocks-scene-quiet-pigments

backlit-blocks-scene-quiet-pigments

Quiet Pigments

Backlit Blocks Scene example with both blocks muted to soft, chalky pigment on a light ground, for a restrained background that sits behind text.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-quiet-pigments

New

backlit-blocks-scene-saturated-pigments

backlit-blocks-scene-saturated-pigments

Saturated Pigments

Backlit Blocks Scene example with both blocks pushed to very saturated color, for a loud, vivid backdrop that fills the whole frame. A bold abstract color field background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-saturated-pigments

New

backlit-blocks-scene-pale-blocks

backlit-blocks-scene-pale-blocks

Pale Blocks

Backlit Blocks Scene example with two bright, washed-out blocks over a pale warm ground and a light vignette, for a soft, airy backdrop. A light abstract color field background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-pale-blocks

New

backlit-blocks-scene-low-light

backlit-blocks-scene-low-light

Low Light

Backlit Blocks Scene example with both blocks dimmed over a nearly black blue ground, so the colors glow faintly like a room after dark. A moody abstract dark background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-low-light

New

backlit-blocks-scene-no-brush-strokes

backlit-blocks-scene-no-brush-strokes

No Brush Strokes

Backlit Blocks Scene example without painted brush strokes, leaving smooth color fields with only a light layer of paper grain. Shows the brush stroke setting of the abstract painting background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-no-brush-strokes

New

backlit-blocks-scene-heavy-paper-grain

backlit-blocks-scene-heavy-paper-grain

Heavy Paper Grain

Backlit Blocks Scene example with coarse paper grain and a stronger vignette for a rough, printed look. Shows the texture settings of the abstract color field background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-heavy-paper-grain

New

backlit-blocks-scene-open-edges

backlit-blocks-scene-open-edges

Open Edges

Backlit Blocks Scene example with the vignette switched off, so color runs all the way to the edges of the frame. Shows the abstract painting background without darkened corners.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-open-edges

New

backlit-blocks-scene-deep-vignette

backlit-blocks-scene-deep-vignette

Deep Vignette

Backlit Blocks Scene example with a heavy vignette that darkens the corners and pulls the eye toward the glowing center. Shows the vignette strength setting on the abstract color field background.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-deep-vignette

New

backlit-blocks-scene-grain-free

backlit-blocks-scene-grain-free

Grain Free

Backlit Blocks Scene example with neither grain nor brush strokes, a completely clean version for smooth digital color fields. Shows the abstract painting background without texture.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-grain-free

New

backlit-blocks-scene-exhibition-cover

backlit-blocks-scene-exhibition-cover

Exhibition Cover

Exhibition cover example: warm Backlit Blocks behind a dark title panel naming a show, its artist and its dates. Shows the abstract painting scene as an art gallery or event poster backdrop.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-exhibition-cover

New

backlit-blocks-scene-landscape-diptych

backlit-blocks-scene-landscape-diptych

Landscape Diptych

Diptych example: two Backlit Blocks scenes side by side on a light ground, one green and one violet, shown as a matched pair. Shows the abstract painting background as paired gallery art.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-landscape-diptych

New

backlit-blocks-scene-tall-print

backlit-blocks-scene-tall-print

Tall Print

Tall print example: a narrow arched poster of blue light over green, showing the Backlit Blocks scene cropped into a portrait shape. An abstract painting as framed wall art.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-tall-print

New

backlit-blocks-scene-neon-over-pigment

backlit-blocks-scene-neon-over-pigment

Neon Over Pigment

Neon sign over painting example: a dim, saturated Backlit Blocks scene with a glowing OPEN LATE neon sign centered on top. Shows the abstract background layered with Neon Orb style signage.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-neon-over-pigment

New

backlit-blocks-scene-art-behind-membership

backlit-blocks-scene-art-behind-membership

Art Behind Membership

Membership panel example: golden backlit blocks as the artwork behind a dark card that lists what members receive. Shows the abstract color field scene as a backdrop for a perks or benefits section.

pnpm dlx shadcn add @01orbital/backlit-blocks-scene-art-behind-membership

API reference

Prop

Type

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

Dependencies

npm: cn. The CLI installs them for you.

No other registry pieces.

bone-slabs

cobalt-slabs

Color Wash

copper-slabs

Gestural Zip Scene

Limb Scene