Hologram Raster Scan: A Scan Line Builds Your Logo

What it looks like

1. A bright horizontal light bar moves from the top of the canvas to the bottom over one cycle.
2. Particles above the bar jump to their spots on your logo and are drawn at almost full brightness.
3. Particles below the bar wait near their random starting points, dimmed to about 15% opacity, with a small sideways jitter.
4. The logo appears row by row, and the light bar disappears once it passes the bottom edge.

Good for

• Tech, security or AI products that suit a scanning look
• Wide or text-based logos where a top-to-bottom reveal reads well
• Loading states that should show visible progress

Default settings

Use it on your site

1. Open the workbench with Hologram Raster Scan selected.
2. Upload your logo (PNG, SVG, JPG or WebP). You can also drag it onto the page or paste it with Ctrl+V / ⌘+V.
3. Adjust particle size, shape and speed, then choose Export Code.
4. Pick a format. The HTML file is free; the Vue and React components need Pro.

In the exported code, this effect is selected with:

<!-- Vue 3 (PixelLogoLoader.vue) -->
<PixelLogoLoader variant="scan" />

// React (PixelLogoLoader.tsx)
<PixelLogoLoader variant="scan" />

// HTML (index.html)
const variant = 'scan';

Step-by-step guides: HTML · Vue 3 · React