Public API reference
Every class, method, and type linked to an example.
All public core and adapter classes are listed below. Each link opens a short lesson with an example. Import from @gamedevland/cyber-ui; import ToolkitComponent, PanelReveal, and UiViewport from @gamedevland/cyber-ui-sdk.
Classes and methods
| API | Methods and fields | Purpose |
|---|---|---|
TerminalUi | plate, icon, traces, etch, clippedRect | Plates, icons, decoration, and paths |
TerminalGlass | draw, focus | Glass and accents |
PanelSurface | draw | Information panel |
ButtonSurface | draw, segmentTrack, toggle | 10 button variants and group backgrounds |
ButtonPrice | layout | Measured label and price row |
CyberPreset | palette, triangle, trianglePalette, textEcho, glitch | Frozen defaults |
BinaryField | draw | Pattern from seed and integer frame |
TriangleLoader | update, draw, outerRadius | Outlines and particles |
SignalBrackets | draw | Brackets around an emblem |
TerminalSweep | draw | Scan down/right |
TextEcho | update, draw, offset | Offset for main text and copy |
SurfaceGlitch | show, update, hide | Slices of a live Graphics |
FaultGlyph | draw | Warning symbol |
SignalLost | draw | Fault overlay and label position |
PanelTransition | origin | Opening and closing geometry |
AnimatedEffect | elapsedSeconds, update, setActive, setReducedMotion, dispose | Clock and lifecycle base |
ToolkitComponent | ownEffect, setUiReducedMotion, uiViewport | SDK adapter component |
PanelReveal | runAction | SDK adapter action |
TriangleLoader, TextEcho, and SurfaceGlitch also expose elapsedSeconds, setActive(), setReducedMotion(), and dispose(). They inherit the shared lifecycle from AnimatedEffect.
Types and fields
| Type | Fields / values |
|---|---|
UiBounds | x, y, w, h |
PanelPalette | surface, edge, accent |
ButtonVariant | primary, module, danger, icon, nav, segment, tab, switch, utility, line |
ButtonSurfaceOptions | width, height, variant, enabled, selected, explicitAccent?, ready? |
ButtonPalette | background, panel, inset, panelEdge, signal, focus, accent, steel, sapphire, text, muted, danger |
TerminalIcon | 27 names |
TriangleOptions | cycleMs, spinDelayMs, spinDurationMs, layers, layerGap, layerLift, strokeWidth, haloWidth, haloAlpha, echoAlpha, particles, particleSize, particleSpread, particleAlpha, seed |
TrianglePalette | accent, secondary, highlight, text |
TriangleLayout | x, y, radius, scale |
TextEchoOptions | frameMs, cycleMs, shift |
GlitchOptions | durationMs, minDelayMs, spreadMs, seed |
GlitchTarget | surface, x, y, w, h |
BracketOptions | cycleMs, travel, scale, jitter, distanceRatio, maxDistance, halfHeight, bevel, strokeWidth, alpha, peakAlpha, markerSize, markerAlpha |
SignalPalette | background, danger, accent, highlight |
PanelTransitionInput | offset, axis?, pivotX?, pivotY?, closing? |
UiEffect | update, setActive, setReducedMotion, dispose |
UiViewport | width, height, cssWidth, cssHeight, scale |
Shared rules
- Position and dimensions use local logical PixiJS units. Surfaces use the top-left corner; icons use the center.
update()takes seconds;*Msfields andSignalBracketstime use milliseconds.TerminalSweepprogress is[0, 1);SignalLostprogress is[0, 1].- Drawing appends geometry. Clear a layer before rebuilding it;
TriangleLoader.draw()clears its two dedicated surfaces itself. - Colors are numeric RGB. Decode external JSON through the application before calling typed APIs.
- The application owns text, layout, input, fonts, audio, pause, and reduced motion. Dispose effects before destroying their borrowed objects.