Blocks

Pax Blocks is an MIT-licensed registry of 128 hand-built assets:

• 56 animated components (text, backgrounds, shaders, cursor, animations, UI)
• 66 page blocks across 21 categories
• 6 full-page templates

Every asset is a dedicated implementation with its own layout, motion, reduced-motion fallback, and keyboard access. There is no generated filler: if an id exists, someone built it and stands behind it.

Browse live previews in the workspace.

Collections#

Curated collections group assets that share a visual language:

Browse them live at /blocks/collection/acid and /blocks/collection/editorial, or from the CLI:

paxfx blocks collections
paxfx blocks list --collection acid
paxfx blocks search hero --collection editorial

The acid collection pairs with the pax-acid and pax-drift motion personalities and the chroma token family (--pax-chroma, --pax-prism-1/2/3, --pax-glow-chroma).

Install#

paxfx add blocks/component-text-split-reveal
paxfx add blocks/block-hero-editorial-01

Assets copy into components/pax/<id>/ as plain React source plus pax-components.css.

CLI#

paxfx blocks list
paxfx blocks list --category text --kind component
paxfx blocks list --collection acid
paxfx blocks search split --category text
paxfx blocks collections
paxfx blocks inspect component-text-split-reveal
paxfx blocks doctor

--collection filters by curated collection (for example acid or editorial).

Component categories#

| text | 12 | Per-word and per-glyph motion, canvas for fuzzy | | backgrounds | 14 | Layered CSS fields and seeded canvas textures | | shaders | 10 | Effect engines over live HTML plus 2D canvas | | cursor | 6 | Pointer-driven surfaces, inert on touch | | animations | 8 | Canvas physics and SVG filter play | | ui | 6 | Interactive widgets with full keyboard support |

Dependencies#

Installed assets depend on react, react-dom, and @pax-sh/blocks for shared plumbing (hooks, effect engines, styles). Nothing else. Run paxfx blocks doctor to check your project.

Templates#

paxfx init --template saas-launch
paxfx init --template shader-forward

Generates a starter layout under app/pax-template/. Six templates ship today: saas-launch, minimal-devtool, creative-agency, shader-forward, retro-pixel, and security-editorial.

Quality#

Every asset includes:

• Performance tier metadata (low, medium, high)
• Reduced-motion fallback behavior
• Brand token bindings via CSS variables

MCP#

Agents can call blocks_list, blocks_search, blocks_collections, blocks_inspect, blocks_add, and motion_personalities through the Pax MCP server. blocks_list and blocks_search accept an optional collection filter, and every asset summary carries its collections membership.