Card Scanner

Animated card stream with scanner reveal effect — ASCII art overlay and particle glow

How to add this to your site

Use with Claude Code, Codex, Cursor, etc.

Copy URL or Code

Paste to your AI coding assistant and say:

“Add this card scanner to my features section”

Customize with:

“Make it scroll faster”

“Use my own card images”

“Change the scanner color”

Done. Your AI handles the rest.

Make it yours. Adjust scroll speed, card images, scanner glow color, and particle effects. Drag cards to interact.

// CardScanner Component
// Animated card stream with scanner reveal effect

"use client";

import React, { useEffect, useRef, useState } from "react";

export interface CardScannerProps {
  width?: number;
  height?: number;
  cardImages?: string[];
  showControls?: boolean;
  autoPlay?: boolean;
  speed?: number;
  className?: string;
}

// Full implementation available at component URL
// Features:
// - Horizontal scrolling card stream
// - Center scanner with particle glow effect
// - ASCII art reveal on scan
// - Drag to interact
// - Customizable speed and images

import dynamic from "next/dynamic";

const CardScanner = dynamic(() => import("@/components/CardScanner"), {
  ssr: false,
  loading: () => <div className="h-[400px] bg-[#F5F5F7]" />,
});

// Basic usage
export default function Features() {
  return (
    <div className="w-full h-[400px]">
      <CardScanner />
    </div>
  );
}

// With custom images
export function CustomCards() {
  const myCards = [
    "/card1.png",
    "/card2.png",
    "/card3.png",
  ];

  return (
    <CardScanner
      height={500}
      speed={150}
      cardImages={myCards}
      showControls={true}
    />
  );
}