Library

Notes and reusable components.

The essay kit

Eight components used in the Thinking essays, with props, source links, and four live demos. The two 3D demos are in What the night field broke.

  • Beat

    A prose column, an optional margin note, and a full-width area for diagrams or demos. Supports numbered stages.

    src/components/thinking/kit/Beat.tsx

    Seen in Compound engineering applied to a personal site

    {
      stage?: { n: string; label: string }
      prose: ReactNode
      margin?: ReactNode
      children?: ReactNode
    }

    Live

    01 Layout

    The main column holds the text. A related note sits alongside it on wider screens and below it on phones.

    Resize the window to see the note move below the text.
  • MarginNote

    A margin link to a garden note, with a title and optional description.

    src/components/thinking/kit/MarginNote.tsx

    Seen in Automation is arbitration plumbing

    interface MarginNoteProps {
      href: string
      title: string
      description?: string
    }
  • ToggleCompare

    Switches between two views using keyboard-accessible buttons. Supports labels and an optional caption.

    src/components/thinking/kit/ToggleCompare.tsx

    Seen in AI should be present without being summoned

    interface ToggleCompareProps {
      beforeLabel: string
      afterLabel: string
      before: ReactNode
      after: ReactNode
      caption?: ReactNode
    }

    Live

    • Beat

      layout

    • MarginNote

      related note

    • ToggleCompare

      two views

    Switch between two layouts of the same three components.

  • FlowDiagram

    A diagram of labelled nodes and curved edges. Edges animate in sequence; reduced motion shows the completed diagram.

    src/components/thinking/kit/FlowDiagram.tsx

    Seen in Agents are an org design problem

    interface FlowNode {
      id: string
      label: string
      x: number
      y: number
      active?: boolean
    }
    
    interface FlowEdge {
      from: string
      to: string
    }
    
    interface FlowDiagramProps {
      nodes: FlowNode[]
      edges: FlowEdge[]
      width?: number
      height?: number
      className?: string
    }

    Live

    Markdown notesbuild scriptgarden-index.json/library
    The build script reads local notes, saves it as JSON, and supplies the topic counts below.
  • AssembleField

    Animates a grid of dots into supplied clusters, with a configurable seed, grid size, and transition range.

    packages/ui/src/visuals/AssembleField.tsx

    Seen in Working notes: 2026

    interface AssembleFieldProps {
      seed?: number
      cols?: number
      rows?: number
      width?: number
      height?: number
      clusters: [number, number][]
      envelopeStart?: number
      envelopeEnd?: number
      travelerCount?: number
      className?: string
    }

    Live

    A grid transitions into two clusters. The seed keeps the arrangement consistent between visits.
  • LiveConstellationDemo

    The homepage telescope model in a standalone canvas with cursor tilt.

    src/components/thinking/kit/LiveConstellationDemo.tsx

    Seen in What the night field broke

    // no props (reads /models/telescope.glb and the cursor directly)
  • LiveMaterialDemo

    Compares two materials on the homepage rock mesh under the same light: metalness 1 and the corrected setting.

    src/components/thinking/kit/LiveMaterialDemo.tsx

    Seen in What the night field broke

    // no props (reads /models/rocks.glb and toggles its own state)
  • ThinkingIndex

    Lists registered essays by date, title, and summary, grouped into positions and build logs.

    src/components/thinking/kit/ThinkingIndex.tsx

    { pieces: RegisteredPiece[] }

@n3wth/ui

An MIT-licensed React component library with theme tokens and a Tailwind preset. Peer dependencies: React 18 or 19, React DOM, and GSAP 3.12.

npm install @n3wth/ui
import { Button, Card, Hero, Section } from '@n3wth/ui'
import '@n3wth/ui/styles'

Components and hooks

Atoms20
  • AnimatedText
  • Avatar
  • Badge
  • Button
  • Character
  • CodeBlock
  • HamburgerIcon
  • Icon
  • Input
  • Label
  • NoiseOverlay
  • Progress
  • ScrollIndicator
  • Separator
  • Shape
  • Skeleton
  • SpeechBubble
  • Switch
  • Textarea
  • Tooltip
Molecules12
  • Accordion
  • Card
  • CommandBox
  • CompositeShape
  • Dropdown
  • ErrorBoundary
  • MobileDrawer
  • Modal
  • Tabs
  • ThemeToggle
  • Toast
Organisms4
  • Hero
  • Nav
  • Section
Hooks11
  • useButtonPulse
  • useCountUp
  • useKeyboardShortcuts
  • useMediaQuery
  • usePageTransition
  • useReducedMotion
  • useScrollReveal
  • useStaggerList
  • useTextReveal
  • useTheme
  • useToast

This list follows the package exports. The documentation covers a smaller selection.

Project pageSource (opens in new tab)

Digital garden

262 working notes, grouped by topic and connected by links. Notes are marked seedling, budding, or evergreen to indicate how developed they are.

Groves, largest first

Site search includes garden notes, essays, and the resources on this page.

Browse notesRSSllms.txt

Related projects