# @vidova packages

Custom elements import @vidova/2d for nodes and JSX, @vidova/core for signals and tweens, and @vidova/components for built-in scene nodes.

Custom element source imports three packages. JSX is compiled with `@vidova/2d` as the JSX source. Do not import React.

## `@vidova/2d`

Nodes, JSX, and property decorators.

| Export | Use |
| --- | --- |
| `Node`, `NodeProps` | Base class and props for a custom element |
| `Rect`, `Circle`, `Txt`, `Layout` | Shapes, text, flex containers |
| `Code` | Syntax-highlighted code. Set `letterSpacing` to `0` and `fontFamily` to `Fira Code Variable` |
| `Line`, `Path`, `QuadBezier` | Vector drawing |
| `Img`, `Video` | Bitmap and video. Call `videoRef().play()` directly. Do not `spawn(videoRef().play())` |
| `Gradient` | Fills |
| `@signal`, `@initial`, `@colorSignal` | Class property decorators |

```tsx
import { Node, NodeProps, Txt, Rect, signal, initial } from '@vidova/2d';
```

## `@vidova/core`

Signals, generator types, flow helpers, and easing.

| Export | Use |
| --- | --- |
| `SignalValue`, `SimpleSignal`, `ColorSignal`, `PossibleColor` | Prop and field types |
| `ThreadGenerator` | Return type of `animate()` and `animateIn()` |
| `waitFor`, `tween`, `all` | Timing and parallel tweens |
| `createRef` | Hold a child node for later animation |
| `easeOutCubic`, `easeInOutCubic` | Timing functions |
| `withCommonShader` | Prepend the standard SkSL prelude to a fragment body |

```tsx
import {
  SignalValue,
  SimpleSignal,
  all,
  easeOutCubic,
  withCommonShader,
  type ThreadGenerator,
} from '@vidova/core';
```

`createSignal` exists for local values inside a method. Do not use it for class props. Declare those with `@initial` and `@signal`. See [Signals](/docs/custom-elements/signals).

## `@vidova/components`

Built-in scene nodes. Use these when an element needs recording footage, the camera overlay, or the same cursor and caption chrome as the editor.

| Export | Use |
| --- | --- |
| `ScreenRecording` | Screen-recording surface |
| `FaceCamera` | Camera overlay |
| `AnimatedCursor` | Cursor overlay |
| `AnimatedCaptions` | Caption renderer |
| `AnimatedKeybindings` | Keystroke overlay |
| `ClickEffect` | Click burst |
| `MouseIndicator` | Mouse highlight |
| `BackgroundImage` | Still background |
| `ThreeViewport` | 3D viewport |
| `VidovaClipData` | Type for a `vidova` asset input |

```tsx
import { ScreenRecording, FaceCamera } from '@vidova/components';
```

Asset inputs of type `vidova` resolve to a `VidovaClipData` object (screen, camera, cursor, click, keyboard). Image, video, audio, and model3d asset inputs resolve to playback URLs. The clip still stores asset IDs. Use `@initial('')` on URL signals. Details: [Inputs](/docs/custom-elements/inputs). SkSL on a cached node: [Shaders](/docs/custom-elements/shaders).

Most catalog templates import only `@vidova/2d` and `@vidova/core`. Reach for `@vidova/components` when the element wraps editor footage, not when it is a title or chip.