"use client"; import * as React from "react"; import { motion, AnimatePresence } from "motion/react"; /* ── sound ─────────────────────────────────────────────── */ let _a: AudioContext, _b: AudioBuffer; const tick = () => { if (typeof window === "undefined") return; if (!_a) { _a = new AudioContext(); _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate); const d = _b.getChannelData(0); for (let i = 0; i < d.length; i++) d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4; } const s = _a.createBufferSource(); s.buffer = _b; const g = _a.createGain(); g.gain.value = 0.08; s.connect(g).connect(_a.destination); s.start(); }; /* ── theme ─────────────────────────────────────────────── */ /* Light: frosted-white panels, soft outer shadows */ /* Dark : white-tint glass, inner glow */ const IMG_CSS = ` .gi{ --gi-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62)); --gi-border:rgba(0,0,0,0.06); --gi-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8); --gi-dim:rgba(0,0,0,0.35); --gi-mid:rgba(0,0,0,0.5); --gi-hi:rgba(0,0,0,0.88); --gi-bar:rgba(255,255,255,0.85); --gi-bar-border:rgba(0,0,0,0.08); --gi-bar-shadow:0 2px 12px rgba(0,0,0,0.06); --gi-active:rgba(0,0,0,0.06); --gi-canvas:rgba(0,0,0,0.03) } .dark .gi,[data-theme="dark"] .gi{ --gi-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); --gi-border:rgba(255,255,255,0.07); --gi-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04); --gi-dim:rgba(255,255,255,0.28); --gi-mid:rgba(255,255,255,0.5); --gi-hi:rgba(255,255,255,0.88); --gi-bar:rgba(255,255,255,0.08); --gi-bar-border:rgba(255,255,255,0.06); --gi-bar-shadow:0 2px 12px rgba(0,0,0,0.15); --gi-active:rgba(255,255,255,0.08); --gi-canvas:rgba(0,0,0,0.2) }`; const I = { glass: "var(--gi-glass)", border: "var(--gi-border)", shadow: "var(--gi-shadow)", dim: "var(--gi-dim)", mid: "var(--gi-mid)", hi: "var(--gi-hi)", bar: "var(--gi-bar)", barBorder: "var(--gi-bar-border)", barShadow: "var(--gi-bar-shadow)", active: "var(--gi-active)", canvas: "var(--gi-canvas)", }; /* ── context ───────────────────────────────────────────── */ interface State { images: string[]; active: number; zoom: number; rotation: number; pan: { x: number; y: number }; } interface Ctx extends State { add: (files: FileList | File[]) => void; remove: (i: number) => void; select: (i: number) => void; setZoom: (z: number) => void; rotate: () => void; setPan: (p: { x: number; y: number }) => void; sound: boolean; } const RESET = { zoom: 1, rotation: 0, pan: { x: 0, y: 0 } }; const Cx = React.createContext(null!); /* ═══════════════════════════════════════════════════════════ ImageEditor — wrapper + state provider ═══════════════════════════════════════════════════════════ */ interface ImageEditorProps { children: React.ReactNode; sound?: boolean; style?: React.CSSProperties; onChange?: (images: string[]) => void; } function ImageEditor({ children, sound = true, style, onChange, }: ImageEditorProps) { const [s, set] = React.useState({ images: [], active: 0, ...RESET, }); const add = React.useCallback( (files: FileList | File[]) => { const valid = Array.from(files).filter((f) => f.type.startsWith("image/"), ); if (!valid.length) return; Promise.all( valid.map( (f) => new Promise((res) => { const r = new FileReader(); r.onload = () => res(r.result as string); r.readAsDataURL(f); }), ), ).then((urls) => { set((p) => { const next = [...p.images, ...urls]; onChange?.(next); return { images: next, active: p.images.length === 0 ? 0 : p.active, ...RESET, }; }); if (sound) tick(); }); }, [sound, onChange], ); const remove = React.useCallback( (i: number) => { set((p) => { const next = p.images.filter((_, idx) => idx !== i); onChange?.(next); return { images: next, active: Math.min(p.active, Math.max(0, next.length - 1)), ...RESET, }; }); if (sound) tick(); }, [sound, onChange], ); const select = React.useCallback( (i: number) => { set((p) => ({ ...p, active: i, ...RESET })); if (sound) tick(); }, [sound], ); const setZoom = React.useCallback((z: number) => { set((p) => { const clamped = Math.max(1, Math.min(5, z)); return { ...p, zoom: clamped, pan: clamped <= 1 ? { x: 0, y: 0 } : p.pan, }; }); }, []); const rotate = React.useCallback(() => { set((p) => ({ ...p, rotation: p.rotation + 90 })); if (sound) tick(); }, [sound]); const setPan = React.useCallback((pan: { x: number; y: number }) => { set((p) => ({ ...p, pan })); }, []); return ( {children} ); } /* ═══════════════════════════════════════════════════════════ ImageDropZone — glass upload area ═══════════════════════════════════════════════════════════ */ interface ImageDropZoneProps { accept?: string; multiple?: boolean; } function ImageDropZone({ accept = "image/*", multiple = true, }: ImageDropZoneProps) { const { add, images } = React.useContext(Cx); const ref = React.useRef(null); const [over, setOver] = React.useState(false); if (images.length > 0) return null; return ( { e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)} onDrop={(e) => { e.preventDefault(); setOver(false); if (e.dataTransfer.files.length) add(e.dataTransfer.files); }} onClick={() => ref.current?.click()} whileTap={{ scale: 0.985 }} style={{ borderRadius: 14, background: I.glass, border: `1px solid ${over ? I.mid : I.border}`, boxShadow: I.shadow, backdropFilter: "blur(24px)", WebkitBackdropFilter: "blur(24px)", padding: "52px 24px", display: "flex", flexDirection: "column", alignItems: "center", gap: 8, cursor: "pointer", transition: "border-color 150ms", }} > { if (e.target.files?.length) add(e.target.files); e.target.value = ""; }} style={{ display: "none" }} />

Drop image here

or click to browse

); } /* ═══════════════════════════════════════════════════════════ ImageCanvas — main image view (zoom · pan · rotate) ═══════════════════════════════════════════════════════════ */ function ImageCanvas() { const { images, active, zoom, rotation, pan, setZoom, setPan } = React.useContext(Cx); const boxRef = React.useRef(null); const dragging = React.useRef(false); const origin = React.useRef({ x: 0, y: 0 }); const panOrigin = React.useRef({ x: 0, y: 0 }); const zoomRef = React.useRef(zoom); zoomRef.current = zoom; /* wheel → zoom (non-passive so we can preventDefault) */ React.useEffect(() => { const el = boxRef.current; if (!el) return; const h = (e: WheelEvent) => { e.preventDefault(); const next = zoomRef.current + -e.deltaY * 0.003; setZoom(next); }; el.addEventListener("wheel", h, { passive: false }); return () => el.removeEventListener("wheel", h); }, [setZoom]); const src = images[active]; if (!src) return null; return (

{ if (zoom <= 1) return; dragging.current = true; origin.current = { x: e.clientX, y: e.clientY }; panOrigin.current = { ...pan }; (e.target as HTMLElement).setPointerCapture(e.pointerId); }} onPointerMove={(e) => { if (!dragging.current) return; setPan({ x: panOrigin.current.x + (e.clientX - origin.current.x), y: panOrigin.current.y + (e.clientY - origin.current.y), }); }} onPointerUp={() => { dragging.current = false; }} style={{ borderRadius: 14, background: I.canvas, border: `1px solid ${I.border}`, boxShadow: I.shadow, overflow: "hidden", position: "relative", height: 280, cursor: zoom > 1 ? "grab" : "default", userSelect: "none", touchAction: "none", }} > {/* zoom badge */} {zoom > 1 && ( {Math.round(zoom * 100)}% )}

); } /* ═══════════════════════════════════════════════════════════ ImageStrip — thumbnail row ═══════════════════════════════════════════════════════════ */ interface ImageStripProps { showAdd?: boolean; accept?: string; } function ImageStrip({ showAdd = true, accept = "image/*" }: ImageStripProps) { const { images, active, select, add } = React.useContext(Cx); const ref = React.useRef(null); if (!images.length) return null; return (

{images.map((src, i) => ( select(i)} whileTap={{ scale: 0.92 }} style={{ width: 48, height: 48, borderRadius: 10, overflow: "hidden", border: i === active ? `2px solid ${I.hi}` : `1px solid ${I.border}`, opacity: i === active ? 1 : 0.55, cursor: "pointer", padding: 0, background: I.canvas, flexShrink: 0, transition: "opacity 150ms, border-color 150ms", }} >

))} {showAdd && ( <> ref.current?.click()} whileTap={{ scale: 0.92 }} style={{ width: 48, height: 48, borderRadius: 10, border: `1px dashed ${I.border}`, background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, color: I.dim, }} > { if (e.target.files?.length) add(e.target.files); e.target.value = ""; }} style={{ display: "none" }} /> )}

); } /* ═══════════════════════════════════════════════════════════ ImageBar — glass toolbar ═══════════════════════════════════════════════════════════ */ function ImageBar() { const ctx = React.useContext(Cx); if (!ctx.images.length) return null; const btns: { label: string; icon: React.ReactNode; fn: () => void; off?: boolean; }[] = [ { label: "Rotate", icon: ( ), fn: ctx.rotate, }, { label: "Zoom out", icon: ( ), fn: () => ctx.setZoom(ctx.zoom - 0.25), off: ctx.zoom <= 1, }, { label: "Zoom in", icon: ( ), fn: () => ctx.setZoom(ctx.zoom + 0.25), off: ctx.zoom >= 5, }, { label: "Remove", icon: ( ), fn: () => ctx.remove(ctx.active), }, ]; return (

{btns.map((b) => ( ))}

); } /* ── toolbar button ───────────────────────────────────── */ function Btn({ label, icon, fn, off, }: { label: string; icon: React.ReactNode; fn: () => void; off?: boolean; }) { const [h, setH] = React.useState(false); return ( setH(true)} onMouseLeave={() => setH(false)} style={{ width: 36, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 8, border: "none", background: h && !off ? I.active : "transparent", color: off ? I.dim : I.hi, cursor: off ? "default" : "pointer", opacity: off ? 0.4 : 1, transition: "background 120ms, opacity 120ms", padding: 0, }} > {icon} ); } /* ── exports ─────────────────────────────────────────── */ export { ImageEditor, ImageDropZone, ImageCanvas, ImageStrip, ImageBar }; export type { ImageEditorProps, ImageDropZoneProps, ImageStripProps };

Glass Image Editor

Installation

Build stunning UIs in minutes