fetaUI
GitHub

Photo Straighten

Levels a tilted horizon with a degree ruler.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/photo-straighten
Playground
Coast horizonCrooked
0.0°
Already level
Coast horizon
0.0°
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/photo-straighten

Accessibility

  • The ruler is a slider with a readable angle.
  • The angle is always shown as text, and Level is announced.

Motion

  • The photo and ruler follow the drag and the thirds grid fades in.
  • Release throws, then settles on a 450 ms spring and snaps within 0.6 degrees.
  • With reduced motion, it stops where released.

Responsive behavior

  • A 300 px photo on Web and 230 px on Mobile, scaled 1.16 so corners never show.

Performance

  • Rotation and the ruler read from one Motion value, so dragging does not re-render React.
  • The degree label is written straight to the node.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import PhotoStraighten. Props: src, alt, tilt, defaultAngle, autoLevel, onChange, animated.
  • autoLevel returns the correction, and a rejection shows Auto failed. Without it Auto uses the opposite of tilt, as in the demo.
  • onChange gives the correction in degrees. Apply the rotation when you save.
/docs/components/photo-straighten/markdown
PreviousFocal Point Picker
NextRich Text Editor

Related

Focal Point PickerComponentSets the point every crop keeps.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.Aspect RatioComponentHolds an image or video at a fixed ratio, so layouts never jump while media loads.