Frame that bleeds a product screenshot off one edge of its ground, with six placements, a padded gutter and an optional ring. ScreenshotImage keeps the natural ratio and inherits the corner.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/screenshot-framenpx shadcn add @01orbital/screenshot-frameyarn shadcn add @01orbital/screenshot-framebunx --bun shadcn add @01orbital/screenshot-framePart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/media/screenshot-frame.tsx, as source you own and edit.
The example also uses color-wash. Install it too:
pnpm dlx shadcn add @01orbital/color-washnpx shadcn add @01orbital/color-washyarn shadcn add @01orbital/color-washbunx --bun shadcn add @01orbital/color-washimport { ColorWash } from "@/components/graphics/color-wash"
import {
ScreenshotFrame,
ScreenshotImage,
} from "@/components/media/screenshot-frame"
export default function ScreenshotDemo() {
return (
<ColorWash color="delft" className="rounded-2xl">
<ScreenshotFrame placement="bottom-right">
<ScreenshotImage
src="/screenshots/dashboard-light.webp"
alt="App dashboard"
width={2880}
height={1666}
className="w-full dark:hidden"
/>
<ScreenshotImage
src="/screenshots/dashboard-dark.webp"
alt="App dashboard"
width={2880}
height={1666}
className="hidden w-full dark:block"
/>
</ScreenshotFrame>
</ColorWash>
)
}Screenshot Frame is built from 2 parts. In the example they nest like this:
ScreenshotFrame
└─ ScreenshotImageScreenshotFrame: Places a product screenshot so it runs off one edge or corner of the card or section it sits in, with a gutter on the other sides. Put a ScreenshotImage inside.ScreenshotImage: The screenshot inside ScreenshotFrame: a plain img that keeps its natural aspect ratio, with corners that follow the frame's rounding. Size it by width: w-full to fit the frame, or a wider value such as w-[130%] to run past the edge.Places a product screenshot so it runs off one edge or corner of the card or section it sits in, with a gutter on the other sides. Put a ScreenshotImage inside.
It does not clip: give the parent overflow-hidden to cut off the part that runs past the edge. The gutter is 10% of the parent's width, at most 4rem. With a top placement the frame fills its parent's height and the screenshot sits on the bottom gutter, so a tall one runs off the top.
Prop
Type
It also accepts the HTML attributes of the element it renders.
The screenshot inside ScreenshotFrame: a plain img that keeps its natural aspect ratio, with corners that follow the frame's rounding. Size it by width: w-full to fit the frame, or a wider value such as w-[130%] to run past the edge.
It accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Media
Media frame for images and scenes, built on Base UI useRender: default, outline hairline, muted mat and placeholder variants with four corner radii. A direct img fills the frame and crops.
Screenshot Plate
Screenshot mounted on a painted mat: a delft ColorWash ground with a ScreenshotFrame bleeding the shot off the bottom. Pass a light and dark ScreenshotImage pair as children.