---
title: "Omni-Grid — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Joshua Roberts · Text. Display your content on an infinite grid"
canonical: "https://framer.elliotli.dev/component/endless-grid"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Omni-Grid

# Omni-Grid

Display your content on an infinite grid

[View on Framer](https://framer.com/marketplace/components/endless-grid/?via=elliot-li)

![Omni-Grid preview image 1](https://framer.elliotli.dev/og/component/endless-grid/69e8a10e1ee531da/1600x1200.jpg)

## Summary

Display your content on an infinite grid

## Description

_Updated: Optimizations, bug fixes, and new "Content" toggle allowing for external frames to be connected into the grid. This allows for CMS capabilities and dynamic components to be used within the grid._

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-psvpnq9c-5EbkDYE2NjxliXLTzcRc7HulwT4W3e)

**The Endless Grid is a endlessly scrolling, and infinitely draggable media grid with smooth panning and clean controls. Robust customization options are available so that you can make your grid look and feel exactly the way you need to match any site or use case.**

## Best for

Portfolios, editorial galleries, moodboards, hero grids, case studies.

## How to Use

1.  Add the component to your canvas.
    
2.  Open **Grid Content** and add items: image, video (.mp4), and/or text.
    
3.  Pick **Layout**: Square, Bento, Masonry, Editorial, or Random.
    
4.  Tune size with **Cell Size** and **Gap**.
    
5.  Style cells in **Grid Cell Properties**: fill, radius, border, padding, shadow, background blur.
    
6.  Set motion: **In-View Anim** for entrance, **Hover** for transforms.
    
7.  Control behavior: enable **Mouse Scroll**, adjust **Scroll Speed**, toggle **Momentum** and **Friction**.
    
8.  Typography: choose **Text → Font**, color, size, line height, alignment.
    
9.  Optional links per item. Choose **Open In** target.
    
10.  For stable randomness, enable **Randomize** and set a **Seed**.
     

## Highlights

-   Infinite pannable canvas with wheel, drag, optional momentum
    
-   Bento, Masonry, Editorial, Square, Random spans
    
-   Seeded assignment to avoid on-screen duplicates
    
-   Mixed media per tile + link overlay
    
-   In-view entrance animations and hover transforms
    
-   Built-in font loader for Google or custom @font-face
    

![5 different layout options](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-vxdp8vu6-Rn1rBnew3HX6Wi7Q604rvveALkZToB)5 different layout options![Clean yet robust properties](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-uvmvbs2b-TDS5HjWQLeOo9WbuQ9HlVgJpX2u3eF)Clean yet robust properties

## Rank history [How rankings work →](/terms#rankings)

-   All · #9320

## Details

- **Author**: Joshua Roberts
- **Price**: $10.00
- **Published**: 2025-10-23
- **Updated**: 2026-03-26
- **Added**: 2025-10-09
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing