Gestural Zip Scene
Barnett Newman style abstract painting background: a cream canvas on a four-column grid with a black mass, a warm glow band and a thick painted black zip with a ghost line. Optional ink splatter and entrance respect reduced motion.
pnpm dlx shadcn add @01orbital/gestural-zip-sceneThe source comes with full access.
One payment of $149 opens the source right here and lets the CLI install every paid component, with lifetime updates.
The example also uses button, eyebrow and subheading. Install them too:
pnpm dlx shadcn add @01orbital/button @01orbital/eyebrow @01orbital/subheadingnpx shadcn add @01orbital/button @01orbital/eyebrow @01orbital/subheadingyarn shadcn add @01orbital/button @01orbital/eyebrow @01orbital/subheadingbunx --bun shadcn add @01orbital/button @01orbital/eyebrow @01orbital/subheadingUsage
import { cn } from "cn"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { GesturalZipScene } from "@/components/scene/gestural-zip-scene"
import { Subheading } from "@/components/subheading/subheading"
import { buttonVariants } from "@/components/ui/button"
const COPY = {
eyebrow: "Field notes",
title: "Rooms for living",
body: "A hillside home shaped by the landscape around it.",
action: "Read the essay",
href: "#",
} as const
export default function GesturalZipSceneDemo() {
return (
<section className="relative isolate flex min-h-[32rem] w-full flex-1 items-center overflow-hidden py-12 text-scene">
<GesturalZipScene />
<div className="relative ml-[29%] w-[50%] md:ml-[40%] md:w-[40%]">
<Eyebrow className="mb-2 text-scene">{COPY.eyebrow}</Eyebrow>
<Subheading>{COPY.title}</Subheading>
<p className="mt-6 text-base/7 text-pretty">{COPY.body}</p>
<a
href={COPY.href}
className={cn(
buttonVariants(),
"mt-8 bg-scene text-scene-foreground hover:bg-scene/90"
)}
>
{COPY.action}
</a>
</div>
</section>
)
}Examples
New
gestural-zip-scene-ivory
New
gestural-zip-scene-chalk
New
gestural-zip-scene-rose
New
gestural-zip-scene-violet
New
gestural-zip-scene-glacier
New
gestural-zip-scene-aqua
New
gestural-zip-scene-midnight
New
gestural-zip-scene-plum
New
gestural-zip-scene-slim-mass
New
gestural-zip-scene-broad-mass
New
gestural-zip-scene-fine-stroke
New
gestural-zip-scene-bold-stroke
New
gestural-zip-scene-mirrored
New
gestural-zip-scene-horizontal-band
New
gestural-zip-scene-smooth
New
gestural-zip-scene-splatter-flecks
New
gestural-zip-scene-editorial-hero
New
gestural-zip-scene-side-cta
New
gestural-zip-scene-feature-rows
New
gestural-zip-scene-art-poster
New
gestural-zip-scene-newsletter
New
gestural-zip-scene-manifesto
New
gestural-zip-scene-routes
New
gestural-zip-scene-paired-cards
New
gestural-zip-scene-palette-picker
New
gestural-zip-scene-proportion-picker
New
gestural-zip-scene-orientation-turns
New
gestural-zip-scene-finish-toggles
API reference
A full-bleed gestural painting: a black mass, a glow and a zip stroke on warm paper, with optional splatters. The bands narrow on screens under 768px and the splatters show from the md breakpoint.
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.