Platform Grid

Everything a product offers, as one hairline grid: small tiles with an icon and a name, and a few 2×2 features that show a piece of the product on a tilting card. Tiles pack densely, so the features stay square whether the grid has eight columns or two. When the section first scrolls into view the tiles rise in as a wave from the centre; after that a soft spotlight follows the pointer across the grid, and each tile answers hover on its own — the icon lifts and takes the accent, the name darkens, a feature's card straightens and tilts with the cursor.

PlatformGrid is built on Tilted Card, which installs alongside and gives the featured cards their tilt and glare; the example's platform marks come from the library's icons item (G2Icon, RedditIcon, CapterraIcon, AppStoreIcon…). Every cell is a named part — Tile, Feature — with Mock and Pill for what goes on a feature's card.

Fifty-six cells, four features

Eight columns at desktop, six, four, three and two as the window narrows; the features stay 2×2 throughout. Move the pointer across the grid and hover a feature.

Tile: is an icon and a label, square, with hairlines on its right and bottom edge. Give it an href and it renders as a link; linkComponent swaps in your router's Link.
Feature: spans two columns and two rows. Its children sit on a TiltedCard that leans 4° at rest and straightens under the pointer; the icon and label sit beneath.
Mock: is the small white card the example puts on every feature — a frame with a little padding — and Pill (ink, accent, soft) is the vocabulary inside it. Put anything you like there instead.
fadeEdges: masks the outer columns from lg up, so the grid reads as a window onto something larger. Turn it off for a plain grid.
reveal"in-view": (the default) plays the wave the first time the section enters the viewport; the docs pass "immediate". Under prefers-reduced-motion the tiles simply appear and the spotlight is off.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Platform Grid

npx shadcn@latest add @algorize-ui/platform-grid

components/custom/blocks/PlatformGridBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Platform Grid to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

icons and tilted-card are components, not packages — the shadcn CLI installs them as source files.

npx shadcn@latest add @algorize-ui/icons @algorize-ui/tilted-card

How the grid packs

The grid is grid-auto-flow: dense: cells are placed in source order into the first slot they fit, and a 2×2 feature that will not fit on the current row is held until it does while smaller tiles fill in behind it. At eight columns the example's features land in the middle because they are listed after the second tile of the second row; at four columns they simply pack where they fit. Order your children for the widest layout and let the narrower ones sort themselves out.

Every tile is aspect-square, so a feature spanning two columns is exactly two tiles tall and the rows stay even. Hairlines are drawn as each tile's right and bottom border, with the grid supplying the top and left edge, so there is one line between any two cells and never a double.

Features

Built from the library

Tilted Card gives the featured cards their tilt and glare and installs with this item; the platform marks are Icons. Everything else is Tailwind.

One reveal, then the pointer

A single wave from the centre when the section appears, then nothing moves unless you do: a spotlight tracks the pointer, tiles answer hover, features tilt. Reduced motion skips the wave and the spotlight.

Cheap to move over

The spotlight is two CSS variables written straight to the grid element, so moving the mouse never re-renders fifty tiles.

Links, keyboard, dark mode

Tiles with an href are real links with a visible focus state; hover and focus share the same treatment. Hairlines, tints and the feature gradient all have dark counterparts.

Props Reference

PlatformGrid

Prop	Type	Default	Description
`heading`	`ReactNode`	—	The headline; use `<br />` for a deliberate break.
`eyebrow`	`ReactNode`	—	Small tracked line above the headline.
`intro`	`ReactNode`	—	Paragraph under the headline.
`accent`	`string`	theme primary	Colour of hovered icons, accent pills and the spotlight.
`reveal`	`"in-view" \| "immediate"`	`"in-view"`	When the wave plays.
`fadeEdges`	`boolean`	`true`	Mask the outer columns from `lg` up.
`children`	`ReactNode`	—	Any number of `Tile` and `Feature` parts, in the order you want at the widest layout.

PlatformGrid.Tile and PlatformGrid.Feature

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Any icon; sized to 18px in a tile, 20px in a feature.
`label`	`string`	—	The name.
`href`	`string`	—	Render as a link.
`linkComponent`	`ElementType`	`"a"`	Your router's Link, used when `href` is set.
`children`	`ReactNode`	—	Feature only: what sits on the tilting card.

PlatformGrid.Mock and PlatformGrid.Pill

Mock is a small white card with a little padding and a vertical gap between its children. Pill takes a tone — "ink" (default, solid black), "accent" (the primary colour) or "soft" (a grey chip) — and both accept className.