Grand Diomande Research · Full HTML Reader

N'Ko Sigil Components

// With options <Sigil type="stabilization" size={64} color="#8b5cf6" animated showLabel interactive onClick={(type) => console.log(type)} /> ```

Language as Infrastructure research note experiment writeup candidate score 28 .md

Full Public Reader

N'Ko Sigil Components

React components for rendering and interacting with N'Ko inscription sigils.

Installation

These components require React 18+ and assume you have a bundler configured for TypeScript.

bash
# Copy components to your project
cp -r components/ your-project/src/sigils/

Font Requirements

For proper N'Ko rendering, include one of these fonts:

css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+NKo&display=swap');

Or use system fonts that support N'Ko (Ebrima on Windows, Harmattan).

Components

`<Sigil />`

Renders a single sigil with optional animation.

tsx
import { Sigil } from './components';

// Basic usage
<Sigil type="stabilization" />

// With options
<Sigil
  type="stabilization"
  size={64}
  color="#8b5cf6"
  animated
  showLabel
  interactive
  onClick={(type) => console.log(type)}
/>

Props

PropTypeDefaultDescription
`type``SigilType`requiredThe sigil to render
`size``number``48`Size in pixels
`color``string``#8b5cf6`Sigil color
`animated``boolean``true`Enable animation
`animation``string`type-specificAnimation name
`interactive``boolean``false`Enable click/hover
`showLabel``boolean``false`Show name below sigil
`onClick``function`-Click handler
`onHover``function`-Hover handler

`<SigilPicker />`

Selection interface for choosing sigils.

tsx
import { SigilPicker } from './components';

const [selected, setSelected] = useState<SigilType | null>(null);

<SigilPicker
  value={selected}
  onChange={setSelected}
  layout="grid"
  showLabels
/>

Variants

  • `<SigilPicker />` — Full grid/row/wheel picker
  • `<CompactSigilPicker />` — Dropdown-style picker
  • `<WheelSigilPicker />` — Circular arrangement for gestural interfaces

Props

PropTypeDefaultDescription
`value``SigilType \| SigilType[]`-Selected sigil(s)
`onChange``function`-Selection change handler
`multiple``boolean``false`Allow multi-select
`layout``'grid' \| 'row' \| 'wheel'``'grid'`Layout style
`size``'sm' \| 'md' \| 'lg'``'md'`Size preset
`showLabels``boolean``true`Show sigil names
`showTooltip``boolean``true`Show hover tooltip
`filter``SigilType[]`-Only show these sigils
`disabled``SigilType[]`-Disable these sigils

`<SigilMeaning />`

Displays sigil meaning on hover (or inline).

tsx
import { SigilMeaning } from './components';

// Hover tooltip
<SigilMeaning type="transition" detailLevel="full" />

// Inline display
<SigilMeaning type="transition" inline detailLevel="full" />

Variants

  • `<SigilMeaning />` — Hover tooltip or inline display
  • `<SigilCard />` — Card layout for lists
  • `<AllSigilMeanings />` — Display all 10 sigils

Props

PropTypeDefaultDescription
`type``SigilType`requiredThe sigil to explain
`detailLevel``'minimal' \| 'standard' \| 'full'``'standard'`How much detail
`position``'top' \| 'bottom' \| 'left' \| 'right' \| 'auto'``'auto'`Tooltip position
`inline``boolean``false`Display inline instead of tooltip
`pinnable``boolean``true`Allow clicking to pin tooltip
`showDelay``number``200`Ms before showing
`hideDelay``number``100`Ms before hiding

Data Access

tsx
import {
  SIGILS,
  getSigilTypes,
  getSigilData,
  getSigilChar,
  getSigilTypeByChar
} from './components';

// Get all sigil types
const types = getSigilTypes();
// ['stabilization', 'dispersion', ...]

// Get data for a sigil
const data = getSigilData('stabilization');
// { char: 'ߛ', name: 'Stabilization', detects: '...', ... }

// Get character only
const char = getSigilChar('stabilization');
// 'ߛ'

// Find type by character
const type = getSigilTypeByChar('ߛ');
// 'stabilization'

Sigil Types

typescript
type SigilType =
  | 'stabilization'   // ߛ - Dispersion decreased
  | 'dispersion'      // ߜ - Spread increased
  | 'transition'      // ߕ - Change point
  | 'return'          // ߙ - Re-entry to basin
  | 'dwell'           // ߡ - Sustained stay
  | 'oscillation'     // ߚ - Rapid alternation
  | 'recovery'        // ߞ - Return latency
  | 'novelty'         // ߣ - New basin
  | 'placeShift'      // ߠ - Location change
  | 'echo';           // ߥ - Pattern recurrence

Customization

Colors

All components accept a `color` prop. The default purple (`#8b5cf6`) matches the N'Ko Sigils app aesthetic.

Animations

Each sigil has a characteristic animation:
- `stabilization` — Pulse (settling)
- `dispersion` — Breathe (expanding)
- `transition` — Bounce (crossing)
- `return` — Rotate (cycling back)
- `dwell` — Glow (presence)
- `oscillation` — Oscillate (side-to-side)
- `recovery` — Bounce (springing back)
- `novelty` — Glow (discovery)
- `placeShift` — Bounce (movement)
- `echo` — Pulse (repetition)

Override with the `animation` prop on `<Sigil />`.

Accessibility

  • All sigils have appropriate `aria-label` attributes
  • Interactive sigils are keyboard navigable
  • Tooltips respect reduced-motion preferences (coming soon)

---

Part of the N'Ko Digital Ecosystem — Comp-Core

Promotion Decision

Attach run IDs, datasets, metrics, and reproduction commands.

Source Anchor

Comp-Core/docs/nko-ecosystem/components/README.md

Detected Structure

Evaluation · References · Figures · Code Anchors · Architecture