Relight spherePro

Place the light for a relighting model on a shaded sphere: drag the light over it, past the rim to put it behind the subject, set intensity, softness and an optional color temperature, and preview it on the picture before you render.

Markdown

On this page

ProDrag a warm key light around the sphere, past the rim for a rim light, and preview it on the portrait before relighting.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/relight-sphere

Usage

tsx

import { RelightPreview, RelightSphere } from "@/components/ui/chatcn/pro/relight-sphere"

<RelightPreview src={image.url} alt={image.alt} value={light} />
<RelightSphere
  value={light}
  onValueChange={setLight}
  onValueCommit={(light) => relight(image, light)}
/>

The value is plain numbers: azimuth around the subject (0 front, negative from its left, ±180 behind), elevation above the horizon, intensity and softness from 0 to 1, and an optional temperature in kelvin. The sphere shades itself per pixel the way that light falls, with the gray ramp of the theme, so the direction reads at a glance. onValueChange fires every frame of a drag; onValueCommit fires once a drag, preset, key press or slider change ends. RelightPreview is a quick blend over the image, labeled as a preview, not a render.

Examples

States

ProA rim light from behind, hard light from above, soft daylight, compact, applying and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`	`{ azimuth, elevation, intensity, softness, temperature? }`	Default from the front left, 40° around and 25° up
`onValueChange`	`(value) => void`	Every change, each frame of a drag
`onValueCommit`	`(value) => void`	When a gesture ends: request the render here
`size`	`number`	Sphere diameter in px. Default 176
`presets`, `controls`	`boolean`	The preset row and the sliders. Default true
`temperature`	`boolean`	Show the color slider, 2700 to 6500 K. Default on when the value has one
`applying`, `applyingLabel`	`boolean`, `string`	Locks the controls with a "Relighting" chip
`disabled`	`boolean`	Locks and dims
`RelightPreview`	`src`, `alt`, `value`, `width`, `height`, `label`, `pending`	The approximate light on a picture, labeled "Preview"

Keyboard

Key	Action
`Tab`	Focuses the light direction, then its height
`←` `→`	Move the light around the subject by 5°; with `Shift`, 15°
`↑` `↓`	Raise or lower the light
`Home`, `End`	Light from the front, or from behind
`←` `→` on a preset or slider	Move between presets, or change the value

Accessibility

The sphere is driven by two range inputs, "Light direction" and "Light height", that read their value in words ("Left 40°, up 25°"). The sphere shows a focus ring while either has focus.
Assistive tech can adjust both inputs without keys; every change commits.
The canvas and the handle are hidden from screen readers. Under forced colors the shading hides and the outline and handle use system colors.
Light color is shown as a swatch and a number in kelvin, never color alone.

Motion

Dragging moves the light exactly with the pointer and reshades on the next frame. Nothing eases.
A preset picked with the pointer glides the light there in 220 ms on the kit ease. Keys and reduced motion jump straight there.