Interactive Image Selector

Renders an interactive image selector with animation. Allows users to select, delete, and reset images. Displays buttons for actions and animates transitions when selecting or resetting.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/interactive-image-selector

npx layro-cli add @educlopez/interactive-image-selector

npx layro-cli add @educlopez/interactive-image-selector

bunx layro-cli add @educlopez/interactive-image-selector

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

Code

Demo

"use client";

import { Share2, Trash2 } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useCallback, useState } from "react";

const RESET_DELAY = 200;
const RESET_SCALE_START = 1;
const RESET_SCALE_PEAK = 1.1;
const RESET_SCALE_END = 1;
const RESET_ROTATE_START = 0;
const RESET_ROTATE_POSITIVE = 5;
const RESET_ROTATE_NEGATIVE = -5;
const SELECT_SCALE_START = 1;