Grid Pulse Scan turns any image or video into an interactive tactical scanner. Hover over the media and detection points automatically appear, analyzing faces, details, or textures depending on the mode. Each point connects to a zoom box that magnifies the area underneath, with animated scan lines, corner brackets, and a running label chip.

Features

• Real-time feature detection: Auto mode finds faces and detail areas; Person mode favors skin regions; Detail mode finds high-contrast edges and textures

• Animated grid overlay with dashed lines and configurable opacity

• Connection lines with tick marks between detection points

• Scan sweep animation that runs across each hover box

• Crosshair with live coordinate readout (latitude/longitude style)

• Label chips with template tokens: {score} {id} {coords} {time}

• Click to re-scan. Click anywhere on the media to refresh detection around that point

• Always-on mode available for continuous scanning without hover

• Four visual effects. Bitmap (threshold dither with Bayer matrix), Pixelated (block mosaic), Code (glyph overlay from brightness values), X-Ray (inverted luminance with color tint) — applied to boxes or full footage

• Supports images and video, mixed media via Framer's responsive image and video inputs

• Aspect ratio lock (free, 16:9, 3:2, 4:3, 1:1, 4:5, 9:16, 21:8) or free-form

• Mirror mode flips the media horizontally

Perfect for

• Portfolio and creative showcase pages

• Product detail scans and tech demos

• Editorial and documentary-style layouts

• Experimental hero sections with interactive hover states

• Music, gaming, and sci-fi themed sites

How to use

1. Drop the component onto any frame and resize it.

2. Set your image or video in the Media section. The scanner activates on hover.

3. Adjust Detection points, box size, and zoom to taste.

4. Pick an Effect style (or leave it as None for the clean scanner look).

5. Toggle grid, crosshair, connections, and labels on or off.