Shader Atlas
한국어
▚ Stylize & media textures

Object Tracker

오브젝트 트래커

Partitions the content below into detection regions and draws bounding boxes with optional labels.

Also known as: ObjectTrackerdetection overlaybounding boxes

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, ObjectTracker } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <ObjectTracker />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, ImageTexture, ObjectTracker } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/still.jpg"/>
    <ObjectTracker/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, ImageTexture, ObjectTracker } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/still.jpg" />
  <ObjectTracker />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, ObjectTracker } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/still.jpg" />
      <ObjectTracker />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/still.jpg',
      },
    },
    {
      type: 'ObjectTracker',
    }
  ]
}, { disableTelemetry: true })

Props · ObjectTracker

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
detectionModeDetectbrightalpha · bright · dark · red · green · blueWhat counts as a detectable object.
thresholdThreshold0.250 – 1 (step 0.01)Detection cut-off.
layoutLayoutmosaicgrid · quadtree · mosaicHow the canvas is partitioned into detection cells.
cellSizeBase Cell Size40024 – 800 (step 1)Base cell size in pixels
maxDepthSubdivision21 – 5 (step 1)Maximum subdivision levels for Quadtree/Mosaic layouts (each level can quarter a cell).
boxStyleBox Stylecornersfull · cornersBounding box outline style
lineWidthLine Width1.50.5 – 12 (step 0.5)Thickness of the box outline in pixels.
cornerRadiusCorner Radius00 – 40 (step 1)Corner radius of the box outline in pixels
strokeColorStroke#ffffff—Bounding box outline color.
fillColorFill#5a79911a—Bounding box fill color.
labelColorLabel#000000—Label text color.
labelBackgroundColorLabel Background#ffffff—Label pill background color.
labelModeLabelnonenone · dimensions · percentageWhat each label shows.
labelPositionLabel Positionbottom-rightbottom-left · bottom-right · top-left · top-rightWhich corner of the box the label anchors to.
labelRadiusBorder Radius00 – 30 (step 1)Corner radius of the label pill in pixels.
labelInsetLabel Insettrue—Place the label inside or outside the box.
fontFamilyFontSet in codeInter—Google Fonts family used for label text.
fontWeightWeightSet in code500—Font weight for label text.
fontSizeSize0.0150.01 – 0.5 (step 0.005)Label text size as a fraction of canvas height.
letterSpacingLetter Spacing0-0.1 – 0.5 (step 0.005)Letter spacing for label text, in em units.

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Key Frames키프레임 트래커

Overlays moving feature markers and keyframe trails for a motion-tracking interface look.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Contour Lines등고선

Draws topographic contour lines from the input's luminance or alpha.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Particle Field파티클 필드

Turns the source into a breathing 3D particle field whose depth follows its brightness.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Cursor Trail커서 트레일

A colored stroke briefly lingers along the pointer’s path.

Bounding boxes divide the image into detected regions, like an analysis-tool overlay. They appear over grid cells or subdivisions to expose the scene structure; labels can be enabled separately.

The default `detectionMode` is `bright`; it selects brightness, darkness, transparency, or an RGB channel as the detection criterion. `threshold` defaults to 0.25 and ranges from 0 to 1. The default `layout` is `mosaic`, with `grid`, `quadtree`, and `mosaic` options for partitioning the canvas. `cellSize` defaults to 400 and ranges from 24 to 800, while `maxDepth` defaults to 2 and ranges from 1 to 5 to set cell size and subdivision depth.

Place an image or video input underneath so boxes have content to inspect. Pair it with `KeyFrames` to show tracker paths alongside regions. Use it as a visual explanation rather than assuming semantic analysis, and avoid excessive subdivisions that crowd the frame with boxes and enabled labels.

When to use

Use it for analytics-dashboard mockups, computer-vision explanations, and demos that show image segmentation. Avoid it as a replacement for a product feature that needs actual person or object recognition.

Open as page ↗