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 { 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 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 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
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/uiimport { Button, Card, Hero, Section } from '@n3wth/ui'
import '@n3wth/ui/styles'Components and hooks
- AnimatedText
- Avatar
- Badge
- Character
- CodeBlock
- HamburgerIcon
- Icon
- Input
- Label
- NoiseOverlay
- Progress
- ScrollIndicator
- Separator
- Shape
- Skeleton
- SpeechBubble
- Switch
- Textarea
- Tooltip
- Accordion
- Card
- CommandBox
- CompositeShape
- Dropdown
- ErrorBoundary
- MobileDrawer
- Modal
- Tabs
- ThemeToggle
- Toast
- Hero
- Section
- useCountUp
- useKeyboardShortcuts
- useMediaQuery
- usePageTransition
- useReducedMotion
- useScrollReveal
- useStaggerList
- useTextReveal
- useTheme
- useToast
This list follows the package exports. The documentation covers a smaller selection.
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
- books67
- references56
- to-read42
- career31
- health28
- learning27
- development18
- productivity18
- wellness18
- strategy16
- knowledge-management15
- read15
- skills9
- product9
- gardening9
- planning8
- organization8
- interviews7
- communication7
- fiction7
- job-search6
- leadership6
- writing6
- fitness6
- index6
- travel5
- technology5
- engineering5
- design5
- synthesis5
- growth5
- flights4
- hr4
- note-taking4
- professional-development4
- goals4
- cooking4
- habits4
- plants4
- preparation4
- tools3
- research3
- points3
- hobbies3
- personal-development3
- frameworks3
- tracking3
- content3
- food3
- analysis3
- prioritization3
- nature3
- skincare3
- prevention3
- sleep3
- exercise3
- moc3
- navigation3
- personal-growth3
- digital-garden3
- literary-fiction3
- currently-reading3
- psychological-thriller3
- reading3
- thriller3
- hub2
- education2
- memory2
- recruitment2
- award-travel2
- entertainment2
- reviews2
- journaling2
- business2
- achievements2
- management2
- techniques2
- networking2
- psychology2
- performance2
- problem-solving2
- mental-models2
- metrics2
- user-research2
- outdoors2
- projects2
- sustainability2
- mental-health2
- personal2
- culture2
- loyalty2
- guide2
- product-management2
- reflection2
- people2
- finance2
- money2
- relationships2
- mindset2
- creativity2
- meta2
- media2
- software-engineering2
- recipes2
- articles2
- remote-work2
- about1
- deals1
- spaced-repetition1
- zettelkasten1
- sweet-spots1
- compensation1
- games1
- social1
- reading-list1
- milestones1
- career-transition1
- career-change1
- career-planning1
- transitions1
- consulting1
- industry1
- organizations1
- marketing1
- digital-gardening1
- energy1
- self-care1
- community1
- focus1
- preservation1
- time-management1
- thinking1
- experimentation1
- coaching1
- task-management1
- user-experience1
- engagement1
- behavior1
- presentation1
- interview1
- tasks1
- tips1
- indie1
- long-term1
- aging1
- check-up1
- beauty1
- behavior-change1
- vaccines1
- emotional-health1
- mobility1
- cosmetics1
- nutrition1
- training1
- stress-management1
- self-reflection1
- typography1
- aesthetics1
- interests1
- lifestyle1
- hotels1
- hyatt1
- openclaw1
- artificial-intelligence1
- memory-consolidation1
- soft-skills1
- journal1
- authors1
- architecture1
- visualization1
- knowledge-graph1
- maps1
- influence1
- impact1
- progress1
- best-practices1
- map-of-content1
- maps-of-content1
- dystopian1
- now1
- accessibility1
- frontend1
- design-systems1
- testing1
- mentors1
- influences1
- personal-brand1
- growing1
- soil1
- indoor-plants1
- podcasts1
- audio1
- publishing1
- sharing1
- yagni1
- simplicity1
- systems1
- efficiency1
- documentation1
- work1
- building1
- questions1
- curiosity1
- exploration1
- raised-beds1
- infrastructure1
- literature1
- resources1
- distributed-teams1
- resume1
- instapot1
- basics1
- agents1
- ai-tools1
- automation1
- short-haul1
- hacks1
- avios1
- storytelling1
- assessment1
- study-techniques1
- budgeting1
- nextjs1
- cloudflare1
- seo1
- technical-skills1
- roadmap1
- career-development1
- trends1
- innovation1
- tomatoes1
- pollination1
- software1
- monorepo1
- changesets1
- n3wth1
- dependency-management1
- obsidian1
Site search includes garden notes, essays, and the resources on this page.
Related projects
Digital garden
Working notes, connected by topic and links.
@n3wth/ui
React components and theme tokens.