Grid Scan

Animated grid room 3D scan effect and cool interactions.

Default

Move the pointer over the room to shift the perspective. Every property is wired to the controls underneath. Turn on the webcam to steer the view with your face; face-api.js and its models are only downloaded at that point, and the camera stays off until you allow it.

Demo Content

FeaturesAbout Sign up

New Creative Components

Hold on, scanning for Angular users.

Get started Learn more

Customize

Lines Color

Scan Color

Line Thickness1

Grid Scale0.1

Line Jitter0.1

Scan Glow0.5

Scan Softness2

Enable Post

Chromatic Aberration0.002

Noise Intensity0.01

Enable WebcamShow Preview HUD

API Reference

GridScan

Prop	Type	Default	Description
`enableWebcam`	`boolean`	`false`	Enable face tracking via webcam.
`showPreview`	`boolean`	`false`	Show webcam preview/debug HUD. Face tracking needs it, because the preview holds the video element.
`modelsPath`	`string`	`CDN URL`	Path/URL to face-api.js models.
`sensitivity`	`number`	`0.55`	Overall responsiveness to input.
`lineThickness`	`number`	`1`	Grid line thickness.
`linesColor`	`string`	`'#2F293A'`	Color of the grid lines.
`gridScale`	`number`	`0.1`	Grid spacing scale (smaller = denser).
`lineStyle`	`'solid' \| 'dashed' \| 'dotted'`	`'solid'`	Grid line style.
`lineJitter`	`number`	`0.1`	Animated jitter along the grid lines.
`enablePost`	`boolean`	`true`	Enable post-processing effects.
`bloomIntensity`	`number`	`0`	Bloom strength.
`bloomThreshold`	`number`	`0`	Bloom luminance threshold.
`bloomSmoothing`	`number`	`0`	Bloom threshold smoothing.
`chromaticAberration`	`number`	`0.002`	Chromatic aberration offset (post).
`noiseIntensity`	`number`	`0.01`	Additive film grain intensity.
`scanColor`	`string`	`'#FF9FFC'`	Color of the scan beam/aura.
`scanOpacity`	`number`	`0.4`	Opacity of the scan effect.
`scanDirection`	`'forward' \| 'backward' \| 'pingpong'`	`'pingpong'`	Scan motion.
`scanSoftness`	`number`	`2`	Softness of scan band edges.
`scanGlow`	`number`	`0.5`	Relative width/intensity of glow.
`scanPhaseTaper`	`number`	`0.9`	Fade-in/out window for the phase.
`scanDuration`	`number`	`2.0`	Duration of a scan cycle (seconds).
`scanDelay`	`number`	`2.0`	Delay between scan cycles (seconds).
`enableGyro`	`boolean`	`false`	Use device orientation for input.
`scanOnClick`	`boolean`	`false`	Trigger a scan when clicking.
`snapBackDelay`	`number`	`250`	Delay (ms) before input recenters.
`lightMode`	`boolean`	`false`	Remaps the output so the grid reads on a light background.

Accessibility

Keyboard shortcuts and ARIA behavior.

The effect is decorative and pointer driven. Keep anything that matters in the content layered above it.
The webcam is only requested when enableWebcam is on, and the browser asks for permission first. If it is denied or no camera exists, the pointer keeps working.

Grid Motion Hyperspeed