Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Rounded-corner media grid v1.0.0

Use this resource to show several images or screenshots in an animated grid

New

  • 384 downloads
  • 170 likes
  • 231 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install rounded-media-grid

First time: connect the CLI with

npx --yes palatekit@latest login

The agent shows a grid of rounded cells in five layouts (2-up, 3-up, 4-up, 3 x 2, or one large cell plus two small ones). Cells arrive one after another, then each image settles slowly. With no image, numbered color wells stand in. You get a product or screenshot board ready for a video.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames
Licence
Apache-2.0

Similar resources

View all

What you get

  • mk-placeholder-grid.html: the block (8 s, 1920 x 1080) with its CONFIG settings object
  • registry-item.json: block metadata
  • README.md: usage guide

Good fit for

  • Showing several products or variants in an e-commerce video
  • Displaying app screenshots side by side
  • Illustrating a portfolio or a before and after

Not for

  • A single full-frame image
  • More than six images at once
  • A free layout outside the five grids

Tags

  • grid
  • media
  • products
  • rounded corners
  • layout

About

You say

"Show three product photos in the large-left, two-right layout, 40 px corner radius, over 8 seconds."

Three rounded cells: a large pink one on the left and two stacked on the right, teal and purple, numbered 1, 2, 3.

Template published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
The images or screenshots to show (2 to 6) and The layout choice
Dependencies
HyperFrames

How to use it

  1. Copy the file into your HyperFrames project's compositions folder.
  2. In CONFIG, pick the layout and set src for each cell.
  3. Overlay the block on your background, then render.

Content preview

Files

  • LICENSE10.5 KB
  • mk-placeholder-grid.html7.8 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md1.3 KB
  • registry-item.json0.6 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/blocks/mk-placeholder-grid
Licence
Apache-2.0

Notice

Version modifiée de « Rounded Media Grid » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

How do I add my images?

In the cells array of CONFIG, put the image path in src for each cell. With null, a numbered color well is shown.

Can I change the colors?

Yes, through the block's --mk-* CSS variables (backgrounds, accents, empty-well colors).