Fieldbook
Sign in

Original components, rendered live

Componentsthatalreadymove.

A library of interface components written for this site. Every one runs right here in React and answers your pointer, ships with Vue, Svelte, Astro and HTML versions, and is checked against thirty tells of machine-made design.

Browse componentsConnect your agent

386 components · 15 categories · 1,544 tested ports

Every plate is running. Swipe or use the arrows to browse, touch to pause.

1524Pulse buttonButtons
1525Area chart liteCharts
1526Aurora veilBackgrounds
1527Command paletteOverlays
1528Dock menuNavigation
1529Floating label inputInputs
1532Masonry flowLayout
1533Morph menu iconIcons
1538Progress ringFeedback
1539Scramble textText effects
1544Spotlight cardCards
1669Blur revealAnimation
1764Bracket lock cursorCursor
1843Blur fade revealScroll

Buttons

102

Presses, toggles and calls to action that answer the pointer.

See all
1629Arrow wipe call to actionButtons
1842Blob cap buttonButtons
1673Button setButtons
1847Carved Pill ButtonButtons

Icons

82

Animated glyphs and loaders drawn by hand.

See all
1585Accessibility iconIcons
1612Activity iconIcons
1586Airplay iconIcons
1613Alarm clock iconIcons

Backgrounds

62

Full-bleed canvases, fields and washes that sit behind content.

See all
1665Assistant Ripple GlowBackgrounds
1666Aurora curtainBackgrounds
1526Aurora veilBackgrounds
1667Backlight HaloBackgrounds

Animation

40

Motion primitives and choreographed sequences.

See all
1669Blur revealAnimation
1763Bobble tile gridAnimation
1672Burst particle emitterAnimation
1674Celebration burstAnimation

Cards

35

Bounded surfaces that hold one thing and react to attention.

See all
1762Anchored site previewCards
1841Bevel Edge Panel CardCards
1844Bouncing Photo FanCards
1845Brushed Metal PassCards

Charts

22

Lines, areas, bars and rings drawn in SVG, no chart library.

See all
1840Activity cell heatmapCharts
1525Area chart liteCharts
1853Edge Faded Plot GridCharts
1856Fanning event markersCharts
Open the full index

How components are checked

Thirty tells

Every component and every page of this site is scored against the habits that make a design read as machine-made. The numbers match the rules in the guidance and the scanner.

  1. 01Harsh gradients
  2. 02Lucide icons
  3. 03Pure white backgrounds
  4. 04Rainbow colouring
  5. 05Heavy drop shadows
  6. 06Three feature cards in a row
  7. 07Emojis as UI
  8. 08Liquid glass and glassmorphism
  9. 09Em dashes everywhere
  10. 10Inter, Geist or Space Grotesk
  11. 11Coloured section stripes
  12. 12Fake testimonialsHard fail
  13. 13Bento grids
  14. 14Terminal window mockups
  15. 15"It's not X, it's Y" copy
  16. 16Checkmark bullet points
  17. 17Three pricing tiers
  18. 18No real product demoHard fail
  19. 19One soft corner radius on everything
  20. 20Purple and black
  21. 21Skeleton loaders
  22. 22Radial orbs
  23. 23Dot grid backgrounds
  24. 24Sparkle icons next to AI
  25. 25Animated arrows
  26. 26Missing terms or privacy policyHard fail
  27. 27Hover animations on everything
  28. 28Neon colours
  29. 29Basic pastel palettes
  30. 30Pill badge above the headline

For coding agents

Call it from your agent

The same library and guidance are exposed over a remote MCP server. Add it once and your agent can search, read and install components, in any of the five frameworks. Setup lives in the MCP docs.

Terminal · one line

claude mcp add --transport http fieldbook https://fieldbook.lizardi.mx/api/mcp --header "Authorization: Bearer <your-key>"