GridMotion

grid-motion

Moves alternating rows of a tilted grid in opposite pointer-responsive directions.

Usage

Basic usage

Default is 4×7 grid, odd and even rows move horizontally with the mouse in reverse parallax translation; if insufficient, use placeholder text to make up for it.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

tsx

<div className="relative h-72 overflow-hidden rounded-xl bg-neutral-950">
  <GridMotion className="absolute inset-0" />
</div>

Custom text + halo color

items passes the content array (strings are used as text, the beginning of http is used as pictures), gradientColor changes the center halo.

Hulian

Component Library

Enterprise level

High quality

Native adaptation

Token

Animation

Hulian

Component Library

Enterprise level

High quality

Native adaptation

Token

Animation

Hulian

Component Library

Enterprise level

High quality

Native adaptation

Token

Animation

Hulian

Component Library

Enterprise level

High quality

Native adaptation

Token

Animation

tsx

<GridMotion
  className="absolute inset-0"
  gradientColor="var(--color-chart-1)"
  items={["Hulian", "Component Library", "Enterprise Level", "High Quality", "Native Adaptation", "Token", "Animation"]}
/>

Compact grid + small parallax

rows/columns refines the grid, and maxMoveAmount controls the maximum translation amplitude of each row.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Item 31

Item 32

Item 33

Item 34

Item 35

Item 36

Item 37

Item 38

Item 39

Item 40

Item 41

Item 42

Item 43

Item 44

Item 45

Item 46

Item 47

Item 48

Item 49

Item 50

Item 51

Item 52

Item 53

Item 54

tsx

<GridMotion
  className="absolute inset-0"
  rows={6}
  columns={9}
  maxMoveAmount={160}
  gradientColor="var(--color-chart-4)"
/>

Strong perspective (large rotation + large parallax)

rotate Adjust the perspective oblique angle. The larger the maxMoveAmount, the more exaggerated the parallax.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

tsx

<GridMotion className="absolute inset-0" rotate={-25} maxMoveAmount={420} />

When to Use

Use it when you need to lay out pictures/texts/icons into a tilted grid and create a hero background with odd and even rows of reverse parallax as the pointer moves horizontally. For a purely geometric grid pattern (no content, no parallax) use GridPattern; for a retro perspective grid with vanishing points use RetroGrid.

Import

import { GridMotion } from "@hulianui/ui"

Props

Name	Type	Default	Description
items	`ReactNode[]`	Placeholder text "Item N"	Grid cell content. Strings starting with `http` are treated as image URLs; other strings are rendered as text, and React nodes render directly. Items beyond rows × columns are truncated, while missing cells use placeholders.
rows	`number`	`4`	Number of grid rows, each row is an independent parallax translation unit (odd and even rows are reversed)
columns	`number`	`7`	Number of grid columns
gradientColor	`string`	`var(--color-primary)`	Center radial halo color, fading outward from the center of the canvas
maxMoveAmount	`number`	`300`	The maximum translation amplitude (px) of each line when the pointer moves horizontally. The larger the parallax, the more exaggerated it is
rotate	`number`	`-15`	The overall rotation angle (deg) of the grid to create a perspective bevel
className	`string`	—	Root container className
style	`CSSProperties`	—	Forward the root container inline style

Usage Guidelines

The parent needs relative, overflow-hidden, and an explicit height. Fill it with absolute inset-0; without a height, the grid is not visible.
Parallax and the halo use useSpring on the client, so the first SSR frame is static. Reduced-motion preferences disable the parallax.
CSS-variable values for gradientColor need the --color- prefix, such as var(--color-chart-1). Bare var(--primary) cannot be resolved; see [[hulian-token-color-var-needs-color-prefix]].

DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple

Playground

Number of linesNumber of columnsMaximum parallax pxRotation angle deg

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

<div className="relative h-72 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.14 0.02 255)" }}>
  <GridMotion
    className="absolute inset-0"
    rows={4}
    columns={7}
    maxMoveAmount={300}
    rotate={-15}
  />
</div>

Usage

Basic usage

Default is 4×7 grid, odd and even rows move horizontally with the mouse in reverse parallax translation; if insufficient, use placeholder text to make up for it.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

tsx

<div className="relative h-72 overflow-hidden rounded-xl bg-neutral-950">
  <GridMotion className="absolute inset-0" />
</div>

Custom text + halo color

items passes the content array (strings are used as text, the beginning of http is used as pictures), gradientColor changes the center halo.

Hulian

Component Library

Enterprise level

High quality

Native adaptation

Token

Animation

Hulian

Component Library

Enterprise level

High quality

Native adaptation

Token

Animation

Hulian

Component Library

Enterprise level

High quality

Native adaptation

Token

Animation

Hulian

Component Library

Enterprise level

High quality

Native adaptation

Token

Animation

tsx

<GridMotion
  className="absolute inset-0"
  gradientColor="var(--color-chart-1)"
  items={["Hulian", "Component Library", "Enterprise Level", "High Quality", "Native Adaptation", "Token", "Animation"]}
/>

Compact grid + small parallax

rows/columns refines the grid, and maxMoveAmount controls the maximum translation amplitude of each row.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Item 31

Item 32

Item 33

Item 34

Item 35

Item 36

Item 37

Item 38

Item 39

Item 40

Item 41

Item 42

Item 43

Item 44

Item 45

Item 46

Item 47

Item 48

Item 49

Item 50

Item 51

Item 52

Item 53

Item 54

tsx

<GridMotion
  className="absolute inset-0"
  rows={6}
  columns={9}
  maxMoveAmount={160}
  gradientColor="var(--color-chart-4)"
/>

Strong perspective (large rotation + large parallax)

rotate Adjust the perspective oblique angle. The larger the maxMoveAmount, the more exaggerated the parallax.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

tsx

<GridMotion className="absolute inset-0" rotate={-25} maxMoveAmount={420} />

When to Use

Props

Name	Type	Default	Description
items	`ReactNode[]`	Placeholder text "Item N"	Grid cell content. Strings starting with `http` are treated as image URLs; other strings are rendered as text, and React nodes render directly. Items beyond rows × columns are truncated, while missing cells use placeholders.
rows	`number`	`4`	Number of grid rows, each row is an independent parallax translation unit (odd and even rows are reversed)
columns	`number`	`7`	Number of grid columns
gradientColor	`string`	`var(--color-primary)`	Center radial halo color, fading outward from the center of the canvas
maxMoveAmount	`number`	`300`	The maximum translation amplitude (px) of each line when the pointer moves horizontally. The larger the parallax, the more exaggerated it is
rotate	`number`	`-15`	The overall rotation angle (deg) of the grid to create a perspective bevel
className	`string`	—	Root container className
style	`CSSProperties`	—	Forward the root container inline style

Usage Guidelines

The parent needs relative, overflow-hidden, and an explicit height. Fill it with absolute inset-0; without a height, the grid is not visible.

Parallax and the halo use useSpring on the client, so the first SSR frame is static. Reduced-motion preferences disable the parallax.

CSS-variable values for gradientColor need the --color- prefix, such as var(--color-chart-1). Bare var(--primary) cannot be resolved; see [[hulian-token-color-var-needs-color-prefix]].

Playground

Number of linesNumber of columnsMaximum parallax pxRotation angle deg

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

<div className="relative h-72 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.14 0.02 255)" }}>
  <GridMotion
    className="absolute inset-0"
    rows={4}
    columns={7}
    maxMoveAmount={300}
    rotate={-15}
  />
</div>

GridMotion

Usage

Basic usage

Custom text + halo color

Compact grid + small parallax

Strong perspective (large rotation + large parallax)

When to Use

Import

Props

Usage Guidelines

Related

Playground

GridMotion

Usage

Basic usage

Custom text + halo color

Compact grid + small parallax

Strong perspective (large rotation + large parallax)

When to Use

Import

Props

Usage Guidelines

Related

Playground