Media Focal Point Picker
A free image media focal point picker for responsive crop positioning in React and Next.js.
Keep the subject in a responsive crop
Choose one image-relative point. The component requests coordinates; this example accepts them in local state.
Accepted focal point: 31%, 43%
Image loading. Focal point editing is unavailable.
The caller owns the accepted focal point.
Customise
Code
import { useState } from "react";
const source = { key: "proof-v1", src: "/images/proof.png", alt: "Print proof with crop marks", width: 800, height: 600 };
const [value, setValue] = useState({ sourceKey: source.key, x: 0.3, y: 0.45 });
<MediaFocalPointPicker
source={source}
value={value}
onValueChange={setValue}
label="Print proof"
/>Media Focal Point Picker lets a user choose one source-relative point to guide a crop owned by the calling application. It returns normalized coordinates and leaves image bytes, crop policy and accepted state with the caller.
The picker supports pointer placement, keyboard movement and exact percentage sliders. It checks source generations and dimensions, keeps meaningful image and point text in server-rendered output, and does not require motion or JavaScript for its static fallback.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/media-focal-point-pickerUsage
"use client";
import { useState } from "react";
import { MediaFocalPointPicker, type MediaFocalPoint } from "@/components/media-focal-point-picker";
const source = { key: "proof-v1", src: "/images/proof.png", alt: "Print proof with crop marks", width: 800, height: 600 };
export function CropFocus() {
const [value, setValue] = useState<MediaFocalPoint | null>({ sourceKey: source.key, x: 0.3, y: 0.45 });
return <MediaFocalPointPicker source={source} value={value} onValueChange={setValue} label="Print proof" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| source | MediaFocalPointPickerSource | required | Stable source key, safe image URL, meaningful alt text and positive oriented dimensions. |
| value | MediaFocalPoint | null | required | Caller-accepted normalized source-relative coordinates, or null for the centre. |
| onValueChange | (request: MediaFocalPoint) => void | required | Receives a bounded candidate; the caller decides whether to accept it. |
| label | string | required | Visible context and accessible figure name. |
| className | string | undefined | Additional classes merged onto the picker root. |
Customisation
The picker uses semantic foreground, background, border, primary and focus tokens with built-in fallbacks. Supply your own source key whenever image content or oriented dimensions change:
<MediaFocalPointPicker source={source} value={value} onValueChange={setValue} label="Print proof" className="max-w-3xl" />Frequently asked questions
- Is Media Focal Point Picker free for commercial use?
- Yes. The component is MIT licensed and may be used in personal and commercial projects.
- Does it crop or edit the image?
- No. It returns normalized coordinates for the caller to apply to its own crop policy. It does not transform or persist image bytes.
- What happens when the source changes?
- A point whose sourceKey does not match the current source is not presented as accepted. Provide a new stable key for each changed image generation.