Grid Scale

Overview

Grid Scale makes a product grid choose its emphasis. The most important card grows at the moment it should be noticed.

Use Grid Scale when a feature grid needs one item to gain weight at the right scroll moment. SaaS feature grids and product callout sections are the right fit because the effect can guide priority without replacing the grid. The page job is emphasis: the differentiating capability becomes harder to miss.

The main risk is transform overflow. Scale values must not create layout-affecting overflow, clipped focus outlines, or cumulative layout shift during scroll.

Install Command

Usage Code

Component Code

Example Production Use Case

A SaaS team building a pricing page with a feature comparison grid: Grid Scale anchors each row with a scale event so the most important capability arrives with weight rather than sitting flat in a table. The outcome is emphasis: the differentiating feature is harder to scroll past.

Best Used For

• Pricing or feature grids where one card deserves emphasis without breaking the table structure.
• Pricing or product grids where one featured item deserves a beat of prominence.
• Turns feature-grid scanning into emphasis, making the differentiating card harder to miss.

Not For

• Not for dense matrices where every row and column needs equal scanning weight.
• Not for grids where emphasis would misrepresent feature priority or pricing logic.

Performance Budget

Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes.

Accessibility and Mobile

The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards.

Common Mistakes

• Scaling with width or height instead of transform.
• Letting enlarged cards clip focus outlines or overlap neighbors.
• Emphasizing a card that is not actually the priority.