fetaUI
GitHub

Focal Point Picker

Sets the point every crop keeps.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/focal-point-picker
Playground
Lake and peaks
Avatar 1:1
Banner 16:9
Story 9:16

Drag the point, or hover a crop68% 38%

Saved point
Lake and peaks
Avatar 1:1
Banner 16:9
Story 9:16

Drag the point, or hover a crop30% 60%

Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/focal-point-picker

Accessibility

  • The crosshair is a slider with both values in its text.
  • The point is always shown as text.
  • White overlays keep a shadow, so they read on any photo.

Motion

  • A click glides the crosshair in 280 ms and the crops pan with it.
  • Hovering a crop dims the rest to 45% in 200 ms.
  • With reduced motion, the crosshair jumps and scrims appear.

Responsive behavior

  • A 260 px photo and 110 px crops on Web. 200 px and 84 px on Mobile.

Performance

  • One ResizeObserver tracks the image box, disconnected on unmount.
  • Crops are the same image repositioned with CSS, so no extra files load.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import FocalPointPicker. Props: src, alt, defaultPoint, onChange, onSave, animated.
  • Points are percentages from 0 to 100. onSave fires when a drag ends and shows the saved chip.
  • Store the point and apply it as object-position in your own crops.
/docs/components/focal-point-picker/markdown
PreviousClip Trimmer
NextPhoto Straighten

Related

Photo StraightenComponentLevels a tilted horizon with a degree ruler.Aspect RatioComponentHolds an image or video at a fixed ratio, so layouts never jump while media loads.Clip TrimmerComponentKeep part of a clip with an ink range over a filmstrip.SliderComponentPick a value or a range by dragging. Line for forms, Bold for a headline value, Field for dense inspectors, all with one or two thumbs.