Nyx UI

Card Scanner

An infinite card stream that flows through a central light beam — cards crossing it are clipped away and revealed as glitching binary digits, with Three.js ambient particles and a scanner burst that intensifies during a scan. The beam and particles glow green.

An infinite, draggable stream of cards drifts across a black stage. A vertical light beam sits at the center: as each card crosses it, the normal card clips away and a binary (0s and 1s) version takes over with a glitch flicker and a skewed scan flash. Two particle systems run underneath, a Three.js starfield and a 2D scanner burst that intensifies while a card is actively being scanned. The beam and particles glow green. Drag, scroll, or just watch.

Installation

Install dependencies.

Copy and paste the following code into your project.

Unlock the full library

Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.

Get All Access

Update the import paths to match your project setup.

Usage

import { CardScanner } from "@/components/pro/blocks/card-scanner";
 
export default function Page() {
  return <CardScanner />;
}

Custom card images

Pass your own card front images; they cycle in order. Any image that fails to load falls back to a purple gradient rendered on a canvas.

<CardScanner
  images={["/cards/gold.png", "/cards/platinum.png", "/cards/black.png"]}
/>

Notes

  • The block renders its own black stage with overflow: hidden — drop it into a full-width section for the best effect.
  • The card stream is draggable (mouse and touch) and responds to wheel scroll over it.
  • The scanner beam, particle burst, and ASCII reveal are all self-contained; there are no other registry dependencies.