62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31t_i-sjkqwxc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/31wecb1pe5ugs.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0mf-dfabvof5m.js","/creators-assets/_next/static/immutable/chunks/28zsl3gu7sgg3.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1hrrs8zq4ee_v.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/0kwdy8yc-c0ba.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 63:T140e,

Why GridPRO Exists

Most layout systems stop at columns.

They don’t help you:

Establish vertical rhythm
Control baseline and spacing intervals
Design typographic tempo
Use the grid as a visible, intentional design element

GridPRO is built around the idea that structure is part of the design, not just a hidden scaffold.

Key Features

Columns and Rows

Define full structural grids — not just columns. Create consistent horizontal and vertical systems that scale across layouts and breakpoints.

Beats & Rhythm Control

Set visual “beats” within your layout to define rhythm, spacing intervals, baseline alignment, and emphasis rows. Perfect for editorial layouts, typographic systems, and complex interfaces.

Decorative or Invisible — Your Choice

Use the grid as a working overlay, a subtle background element, or a bold graphic feature. Toggle it on or off instantly.

Fully Responsive

Customise grid structure, spacing, and beats independently at every breakpoint — desktop, tablet, and mobile.

Built for Designers

Designed to feel more like a Swiss design tool than a technical overlay. Everything is adjustable, intentional, and visual.

Responsive by Default

GRIDPRO is fully breakpoint-aware.

You can:

Change column count per breakpoint
Adjust margins and gutters
Modify row density and rhythm
Toggle visibility per device

No hacks. No duplicated components.

Beats & Visual Rhythm

Beats are where GRIDPRO goes beyond traditional grids.

Use them to define:

Primary layout rhythm
Secondary spacing intervals
Baseline alignment
Accent or emphasis rows
Structured variation and breaks

This makes GRIDPRO especially powerful for:

Editorial layouts
Typography-led designs
Design systems
Complex marketing pages

With GridPRO active:

With GridPRO hidden.

Decorative Grids & Gradients

GridPRO doesn’t have to disappear.

You can style the grid itself:

Line colour and opacity
Stroke weight
Solid or gradient lines
Decorative emphasis rows

This lets the grid become part of the visual language — not just a hidden utility.

Properties

Display Control

Quick Mode

Choose whether the grid appears only in the Designer or on the live site

Quick Show on Load

Set whether the grid is visible or hidden by default

Hotkey Toggle

Set whether the grid is visible or hidden by default  Columns & Grids Columns

Columns

Set column count, gutters and margins

Rows

Set row height, vertical spacing and repetition

Beats & Rhythm

Beat Count

Define multiple rhythmic layers

Beat Weight

Control visual emphasis

Beat Colour

Assign individual colours or gradients

Styling

Grid Colour

Solid or gradient

Stroke Weight

Fine-tune visual density

Opacity

Subtle or bold, depending on context

Toggle Button

Show / Hide Button

Enable or disable the on-canvas toggle
Full control over position, style, and label

Responsive Controls

Independent settings per breakpoint
Show or hide grid per device
Custom layouts for desktop, tablet, and mobile

Use Cases

Design system foundations
Editorial and typography-heavy layouts
Marketing pages with strong rhythm
Visual identity exploration
Teaching layout and alignment principles
Decorative Swiss-style compositions

64:T42f,

Bring your CTAs to life with smooth liquid motion.

The Liquid Fill Button goes beyond simple hover effects. With a buttery-smooth rising fill animation and four flow directions, your call-to-action feels alive.

Choose from three Quick Styles — Default, Glass Glow, or Soft Blur — or fine-tune every detail with Framer-native controls:

• ✨ Colors & Borders: Set your size, fill, border, hover and radius.

• 🅰️ Typography: Full Framer font picker, weight, size, alignment.

• ⏱ Motion: Dial in custom fill and drain durations for the perfect rhythm.

• 💫 Effects: Toggle Blur or Glow for subtle or standout looks.

All fully responsive, link-ready, and styled with premium defaults for that Framer-native feel.

Perfect for: landing pages, hero CTAs, product launches, or anywhere you want your button to flow instead of just click.

👉 Make your buttons liquid smooth

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-57e1f305-b890-4445-b717-20cf154cfbb0-all:/unified/creator/57e1f305-b890-4445-b717-20cf154cfbb0/activity/":[{"data":[{"id":"019f3330-c0ae-75f8-b81a-82d4d8117603","type":"creator.followed","target":{"type":"creator","id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","preview":"Framer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/107446/xpZr8yYS_400x400-2-MqZMjb2zlessnXickTqkyAzkfqz6le.jpg","slug":"framer","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"57e1f305-b890-4445-b717-20cf154cfbb0","name":"Mat Ford","avatar":"https://framerusercontent.com/avatars/users/57e1f305-b890-4445-b717-20cf154cfbb0/AMA8Oc_E5","slug":"mat-ford","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-05T16:51:00.888Z","latestAt":"2026-07-05T16:51:00.888Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:57e1f305-b890-4445-b717-20cf154cfbb0:/unified/posts/?creator=57e1f305-b890-4445-b717-20cf154cfbb0&with=reposts":[{"data":[{"id":"019c79b8-9e8e-7d45-9dc8-e9efbe34e496","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"57e1f305-b890-4445-b717-20cf154cfbb0","name":"Mat Ford","slug":"mat-ford","avatar":"https://framerusercontent.com/avatars/users/57e1f305-b890-4445-b717-20cf154cfbb0/AMA8Oc_E5","followed":false,"followsYou":false},"media":[],"resources":[{"id":"zeQmflEXosBM8D9f4POb","resolved":true,"title":"GridPRO","body":"$63","bodyJson":null,"introduction":"A precision grid system for designers","slug":"gridpro","author":{"framerUserId":"57e1f305-b890-4445-b717-20cf154cfbb0","name":"Mat Ford","slug":"mat-ford","avatar":"https://framerusercontent.com/avatars/users/57e1f305-b890-4445-b717-20cf154cfbb0/AMA8Oc_E5","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/zeQmflEXosBM8D9f4POb/gridpro-mZiYUHZQTenxEzqjz7ATKMIUkvy4eE","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-03T15:22:28.110Z","updatedAt":"2026-02-21T01:49:00.923Z","publishedAt":"2026-02-20T06:24:28.302Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://pretty-journey-067892.framer.app","price":"6","paymentUrl":"https://immensityofthesea.lemonsqueezy.com/checkout/buy/0a03120d-d432-4e52-bb5a-9222250f0771","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"CsOHBDjTdGYGoocGACaw","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-20T06:24:28.302Z","updatedAt":"2026-02-20T06:24:28.302Z"},{"id":"01996c41-ef70-7046-b2df-1741383bd045","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"57e1f305-b890-4445-b717-20cf154cfbb0","name":"Mat Ford","slug":"mat-ford","avatar":"https://framerusercontent.com/avatars/users/57e1f305-b890-4445-b717-20cf154cfbb0/AMA8Oc_E5","followed":false,"followsYou":false},"media":[],"resources":[{"id":"kq7dW73yxVMQku0FpUKS","resolved":true,"title":"Liquid Fill Button","body":"$64","bodyJson":null,"introduction":"Give your buttons a liquid fill effect","slug":"liquid-fill-button","author":{"framerUserId":"57e1f305-b890-4445-b717-20cf154cfbb0","name":"Mat Ford","slug":"mat-ford","avatar":"https://framerusercontent.com/avatars/users/57e1f305-b890-4445-b717-20cf154cfbb0/AMA8Oc_E5","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/kq7dW73yxVMQku0FpUKS/liquid-fill-button-bzbneitj6xvlFMOoPgTz3lcHq1yqVJ","metadata":{"tint":{"h":264,"s":67,"l":27},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-05T02:46:25.826Z","updatedAt":"2026-01-19T05:26:04.142Z","publishedAt":"2025-09-21T12:31:24.528Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sensible-habits-964199.framer.app","price":"5","paymentUrl":"https://immensityofthesea.lemonsqueezy.com/buy/fae0671e-c0ed-465b-bca7-92232f57dce3","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"8XEoO20ZOrs66DGtj0LY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-21T12:31:24.528Z","updatedAt":"2025-09-21T12:31:24.528Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L65"}]