SYSTEMlive spatial packer

Interfaces thatorganize themselves.

Modular blocks fall, stack, lock, and clear — driven by priority, available space, and user action. Open Freeform stretch or Freeform auto + height to see size="auto" fill leftover columns.

Component → Rules → SpaceFall · Stack · Lock · Clear@stack_layout/tetris-ui

Live engine

Your dashboard

Remove a block or complete a task — watch the grid reflow. Shrink the viewport to see priority decide who keeps space.

MotionFALLSTACKLOCKCLEARRE-FLOW9 blocks locked

Block pool — drop to FALL

Revenue

Last 30 days

P95

$128.4k

+12.4% vs last month

O-block · 4×2

Verify email

Complete to clear this block

P92

Completing this task clears the block — remaining UI falls into place.

L-block · 3×2

Activity

Team pulse

P70
  • Maya shipped invoice #4821
  • Jon merged layout rules
  • Ava cleared verify task
T-block · 4×3

Transactions

Live feed

P88
  • Northwind Labs+$2,4802m
  • Orbit Retail+$89014m
  • Kai Studio−$1201h
I-block · 5×2

Notifications

3 unread

P65
Priority reflow ready
New shape: J-block
Clear line unlocked
J-block · 3×2

Tasks

Today's stack

P60
  • Review funnel
  • Ship Block API
  • Tune priorities
O-block · 3×2

Analytics

Conversion funnel

P78
S-block · 6×3

Team

Online now

P55
M
J
A
R
O-block · 3×2

Weather

Context widget

P30

72°

Partly cloudy

S-block · 3×2

Declare rules

<Block priority={95} size="4×2">
  <Revenue />
</Block>

Engine places

pack(priority, min, max,
  adjacentTo, viewport)

Motion model

FALL → STACK → LOCK
→ CLEAR → RE-FLOW

Shape primitives

Each block is a literal tetromino.

Not metaphors — the UI occupies exactly the cells of I, O, T, L, S, and J. Empty slots in the bounding box stay empty so the silhouette reads true.

I Block

Banners · Timelines · Tables

A single straight run of four units — ideal for sequential steps, KPI strips, and full-width headers.

Cells[0,0][1,0][2,0][3,0]

O Block

Metrics · Profiles · Stats

A perfect 2×2 square — balanced clusters for metrics, avatars, and compact dashboards.

Cells[0,0][1,0][0,1][1,1]

T Block

Nav + Content · Features

Three across the top with a stem below — navigation crowning a focused content panel.

Cells[0,0][1,0][2,0][1,1]

L Block

Activity · Context

A tall column with a foot at the base — activity stacks that open into contextual detail.

Cells[0,0][0,1][0,2][1,2]

S Block

Charts · Media · Asymmetric

Two staggered pairs — offset layouts for charts beside media, never a boring rectangle.

Cells[1,0][2,0][0,1][1,1]

J Block

Sidebar · Nested panel

Mirror of L — a vertical rail with a leftward base for nested sidebars and drawers.

Cells[1,0][1,1][1,2][0,2]

Z Block

Alert · Status · Warning

The staggered mirror of S — status strips and alert clusters that break the rectangle.

Cells[0,0][1,0][1,1][2,1]

Design philosophy

Rules assemble the interface.

You are no longer designing fixed screens. You are designing how components compete for space, attach to each other, and reorganize when context changes.

01

Everything is a Block

Buttons, cards, sidebars, and tables share one primitive: size, priority, state, and relationships.

02

Blocks find their place

When space opens, the layout falls into place — no empty holes left behind.

03

Priority claims space

Revenue outranks weather. On smaller screens, low-priority blocks yield first.

04

Shapes are grammar

I, O, T, L, S, J — a visual language for banners, metrics, charts, and panels.

05

Clear completes the line

Finish a task and its block clears. The interface itself reflects progress.