JPG Card Holder

Leather card holder shaped like a JPG file, with cards you can pull out.

Installation

terminal

pnpm dlx layro-cli add @ncdai/jpg-card-holder

npx layro-cli add @ncdai/jpg-card-holder

npx layro-cli add @ncdai/jpg-card-holder

bunx layro-cli add @ncdai/jpg-card-holder

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

Code

Demo

"use client"

import { useId, useRef, useState } from "react"
import type { ComponentProps, PointerEvent } from "react"
import { animate, motion, useMotionValue, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

// 320x424 pocket with a 120px dog-ear cut from the top-right corner.
const POCKET_PATH =
  "M12 0H196.69A8 8 0 0 1 202.34 2.34L317.66 117.66A8 8 0 0 1 320 123.31V408A16 16 0 0 1 304 424H16A16 16 0 0 1 0 408V12A12 12 0 0 1 12 0Z"

// The dog-ear folded down onto the pocket, mirroring the cut.
const FLAP_PATH =