# Playground

> [llms.txt](https://zriz.dev/llms.txt)

Change the main props on a live cropper and copy the code that matches what you see.

The page at https\://zriz.dev/docs/playground runs this cropper: a 3:2 photo, the straighten dial with rotate and flip, and open, reset and download in the corners. The controls under it change its props.

## Change the props

### `Root`

- `shape`: `rect`, `circle`
- `motion`: `auto`, `always`, `reduce`
- `dir`: `ltr`, `rtl`
- `maxZoom`: from 1× to 15×
- `recenterDelay`: from 0 ms to 2000 ms
- `disabled`: on or off

### `Viewport`

- `wheel`: `pan`, `zoom`, `none`
- `rotateGesture`: on or off

## Tilt the photo

Perspective tilts the photo as if the camera leaned. No part sets it, so pass it in `value` or `defaultValue`, or call `setValue()`. [Value](https://zriz.dev/docs/value.md) has its range.

- `vertical`: from -30° to 30°
- `horizontal`: from -30° to 30°

## Copy the code

The code builds the cropper in the demo. It lists the props you changed from their defaults, and the tilt even at 0° so the code keeps its shape while you drag:

```tsx
<Cropper.Root
  src={photo}
  defaultValue={{ perspective: { vertical: 0, horizontal: 0 } }}
>
  <Cropper.Viewport style={{ height: 380 }}>
    <Cropper.Image />
    <Cropper.Mask />
    <Cropper.Area aria-label="Crop area" />
  </Cropper.Viewport>
  <Cropper.Rotate aria-label="Rotate left" />
  <Cropper.DialValue />
  <Cropper.Dial aria-label="Straighten">
    <Cropper.DialTicks />
  </Cropper.Dial>
  <Cropper.Flip aria-label="Flip" />
</Cropper.Root>
```

The demo adds handles, a grid and reset, shows the angle to one decimal and uses the styles from the zriz site. On a phone its stage is 320 px tall, not the 380 in the code. It tilts the photo with `setValue()` and listens to `onValueChange` and `onValueCommit` for the value and the events below.

## Watch the value

The crop as you move it, the same object `onValueChange` and `onValueCommit` hand you:

```json
{
  "aspect": "free",
  "center": {
    "x": 0.5,
    "y": 0.5
  },
  "mirrored": false,
  "perspective": {
    "horizontal": 0,
    "vertical": 0
  },
  "quarterTurns": 0,
  "rotation": 0,
  "size": {
    "height": 1,
    "width": 1
  }
}
```

## Watch the events

Each row is a reason and a phase from `onValueChange`, or a commit from `onValueCommit`, as in [events](https://zriz.dev/docs/events.md), newest first:

```text
12:04:31  dial commit 4°
12:04:31  dial end
12:04:30  dial move
12:04:29  dial start
```