OG Banner

Social / OG promo frame (1400×735 design canvas, scales to 1200×630). Mesh-gradient, image, or solid background; three coordinate-positioned product screenshots; a glass center card with a cyan→violet gradient stroke; and a bottom fade. Pass `editable` with `onImagePan` / `onImageDrop` to drop an image straight onto a frame and drag to pan it within (frames stay fixed; each screenshot carries a pan/zoom `transform`). All content is prop-driven, so the demo doubles as an OG-image generator — drop a screenshot onto any frame (or via the sidebar), drag to position it, zoom, tune the gradient and frames, then Copy JSON or export PNG/JPG at OG size. Browser/React only, no next/og ImageResponse.