Scan Document

Click Scan and a page unfolds, flips, and a glowing bar reads it. Done holds, then it resets.

Installation

terminal

pnpm dlx layro-cli add @iurvish/scan-document

npx layro-cli add @iurvish/scan-document

npx layro-cli add @iurvish/scan-document

bunx layro-cli add @iurvish/scan-document

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import type { TargetAndTransition, Transition } from "motion/react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";

export type Status = "idle" | "scanning" | "done";

type ScanBarProps = {
  transition: Transition;
  z: number;
};

const SCAN_DURATION_MS = 5000;