# Sync Grid: Render Quality

> One clip in four cards at 1/8, 1/4, 1/2 and full resolution. It decodes once and is drawn into each card, so all four always show the same frame. Drag Final onto Draft and switch to Difference: only the detail the draft lost lights up.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/sync-grid-render-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/sync-grid-render-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/keyframeui/sync-grid-render-demo-light-1ecf0629290b42ea.png
- Registry item: https://keyframeui.com/r/sync-grid-render-demo.json
- Categories: video, comparison, scrubbing, motion
- Listed: 2026-10-14, source last changed 2026-10-15

## Install

```bash
npx shadcn@latest add https://keyframeui.com/r/sync-grid-render-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/sync-grid.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/sync-grid#sync-grid-render-demo

## Files

### `registry/demos/sync-grid-render-demo.tsx`

```tsx
import { SyncGrid, SyncGridItem } from "@/components/ui/sync-grid";

// One clip, decoded once and drawn at four resolutions, so every card shows
// exactly the same frame.
const src = "https://assets.mixkit.co/videos/33957/33957-720.mp4";
const poster = "https://assets.mixkit.co/videos/33957/33957-thumb-720-0.jpg";

const passes = [
  { label: "Draft", resolution: 1 / 8, size: "160 × 90", time: "0.4s / frame" },
  { label: "Preview", resolution: 1 / 4, size: "320 × 180", time: "1.1s / frame" },
  { label: "High", resolution: 1 / 2, size: "640 × 360", time: "4.8s / frame" },
  { label: "Final", resolution: 1, size: "1280 × 720", time: "19s / frame" },
];

export function SyncGridRenderDemo() {
  return (
    <div className="w-full max-w-3xl">
      <div className="mb-4 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
          Shot 04 · Lakeside <span className="font-normal text-zinc-500">· four render passes</span>
        </p>
        <p className="text-xs text-zinc-500">Drag Final onto Draft, then switch to Difference</p>
      </div>

      <SyncGrid columns={2}>
        {passes.map((pass) => (
          <SyncGridItem key={pass.label} label={pass.label} src={src} poster={poster} resolution={pass.resolution}>
            <div className="absolute top-9 left-2.5 flex gap-1">
              <span className="rounded-full bg-black/45 px-1.5 py-0.5 font-mono text-[10px] text-white/90 tabular-nums backdrop-blur-md">
                {pass.size}
              </span>
              <span className="rounded-full bg-black/45 px-1.5 py-0.5 font-mono text-[10px] text-white/90 tabular-nums backdrop-blur-md">
                {pass.time}
              </span>
            </div>
          </SyncGridItem>
        ))}
      </SyncGrid>
    </div>
  );
}
```