Oliver Newth

Library

The essay kit

Components used in the Thinking essays, with props, source links, and four live demos. The 3D material demo is 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.

  • 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)

@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
  • NavLink
  • Tabs
  • ThemeToggle
  • Toast
Organisms4
  • Footer
  • 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