Avatar Crop Square

Features

• File upload, drag-and-drop, and paste-from-clipboard image input feeding a square crop viewport
• Local editorial woman-model portrait loaded on start, with an initials fallback when the image cannot load
• Focal wheel/trackpad zoom that zooms toward the cursor position instead of the viewport center
• Live zoom readout beside the slider rendered as a tabular Chakra Petch counter (1.0x to 3.0x)
• Corner registration marks framing the square crop plate that recede while the rule-of-thirds grid is engaged
• Labeled preview rail with three square avatar sizes (Large 64px, Medium 48px, Small 36px) that updates live during drag and zoom, not only after Apply
• Rule-of-thirds grid overlay that appears while dragging or zooming and fades out when idle
• Rotate 90° clockwise and flip-horizontal controls that feed both the live transform and the canvas export
• Double-click or Reset button to re-center the image and reset zoom, rotation, and flip
• Zoom slider with magnifying-glass icons ranging from 1x to 3x magnification
• Drag-to-pan with pointer capture and smooth offset clamping so the image can never show gaps at any zoom or rotation
• Arrow key panning plus +/- keyboard zoom for fine-grained keyboard control
• Canvas-based crop that exports a 496px square JPEG at 90% quality
• Fully respects prefers-reduced-motion

Accessibility

File input

Hidden <input type="file"> with aria-label, triggered from the empty viewport

Viewport role

role="application" with aria-label describing drag, scroll-zoom, and double-click reset

Keyboard panning

Arrow keys move the image; +/- zoom when the viewport is focused

Zoom control

Native <input type="range"> with aria-label for zoom level

Zoom readout

Native <output> bound to the slider via for, aria-live="off" so it stays quiet during drags

Tool buttons

Native <button> elements with aria-label for rotate, flip, and reset

Preview rail

<aside> landmark with aria-label; decorative initials marked aria-hidden

Grid overlay

Decorative grid and corner marks marked aria-hidden="true"

Keyboard activation

All actions use native buttons activated by Enter and Space

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Avatar Crop Square in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the avatar is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.