Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

ObjectTracker

Computer-vision style object detection overlay — draws bounding boxes and labels around detected regions of the content below, with grid, quadtree and mosaic layouts.

Props

detectionMode"alpha" | "bright" | "dark" | "red" | "green" | "blue"
Default:bright
What counts as a detectable object.
thresholdnumber
Default:0.25
Detection cut-off.
layout"grid" | "quadtree" | "mosaic"
Default:mosaic
How the canvas is partitioned into detection cells.
cellSizenumber
Default:400
Base cell size in pixels
maxDepthnumber
Default:2
Maximum subdivision levels for Quadtree/Mosaic layouts (each level can quarter a cell).
boxStyle"full" | "corners"
Default:corners
Bounding box outline style
lineWidthnumber
Default:1.5
Thickness of the box outline in pixels.
cornerRadiusnumber
Default:0
Corner radius of the box outline in pixels
strokeColorstring
Default:#ffffff
Bounding box outline colour.
fillColorstring
Default:#5a79911a
Bounding box fill color.
labelColorstring
Default:#000000
Label text color.
labelBackgroundColorstring
Default:#ffffff
Label pill background color.
labelMode"none" | "dimensions" | "percentage"
Default:none
What each label shows.
labelPosition"bottom-left" | "bottom-right" | "top-left" | "top-right"
Default:bottom-right
Which corner of the box the label anchors to.
labelRadiusnumber
Default:0
Corner radius of the label pill in pixels.
labelInsetboolean
Default:true
Place the label inside or outside the box.
fontFamilystring
Default:Inter
Google Fonts family used for label text.
fontWeightnumber
Default:500
Font weight for label text.
fontSizenumber
Default:0.015
Label text size as a fraction of canvas height.
letterSpacingnumber
Default:0
Letter spacing for label text, in em units.

Usage

<Shader>
  <ObjectTracker>
    <Circle />
  </ObjectTracker>
</Shader>
Previous
Neon
Next
PagePeel