Loading…

Aspect Morph

beta

A picture that smoothly reshapes between aspect ratios, picked from a segmented control with a sliding thumb.

Display
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add aspect-morph

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { AspectMorph } from "@/components/ui/aspect-morph";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Custom Ratios
Controlled
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<AspectMorph>

Prop	Type	Default
`alt` Names the picture (role="img"). Without it the picture is decorative.	`string`	—
`corner` Corner radius of the picture in px.	`number`	`18`
`defaultValue` Initial value when uncontrolled. Defaults to the first ratio.	`string`	—
`disabled` Disables the ratio picker.	`boolean`	`false`
`label` Accessible name of the radiogroup.	`string`	`"Aspect ratio"`
`morph` Speed, 0–100: 0 morphs over 832ms, 50 over 520ms, 100 over 208ms.	`number`	`50`
`onValueChange` Called with the newly selected ratio value.	`(value: string) => void`	—
`ratios` The shapes to choose between.	`AspectMorphRatio[]`	`defaultAspectMorphRatios`
`size` Side of the square box the picture is fitted into, in px.	`number`	`276`
`src` Picture URL, drawn as a cover-cropped background.	`string`	—
`value` Controlled selected ratio value.	`string`	—
`children` Custom picture content (an <img>, <video>, canvas…); cropped to the frame.	`ReactNode`	—

Plus every attribute of <div> except defaultValue, onChange.

Accessibility

The picker is a role="radiogroup" (named "Aspect ratio" unless `label` is given) of buttons with role="radio", aria-checked and a spoken name per shape; the outline icons and sliding thumb are aria-hidden. Roving tabindex: Tab reaches the checked option, arrow keys move focus and select with wrap-around (Left/Right follow the reading direction in RTL), Home/End jump to the ends. A `src` picture is role="img" named by `alt`, or hidden when no `alt` is given. The reshape and thumb are CSS transitions and snap to the final state under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

alt

Names the picture (role="img"). Without it the picture is decorative.

string

—

corner

Corner radius of the picture in px.

number

18

defaultValue

Initial value when uncontrolled. Defaults to the first ratio.

string

—

disabled

Disables the ratio picker.

boolean

false

label

Accessible name of the radiogroup.

string

"Aspect ratio"

morph

Speed, 0–100: 0 morphs over 832ms, 50 over 520ms, 100 over 208ms.

number

50

onValueChange

Called with the newly selected ratio value.

(value: string) => void

—

ratios

The shapes to choose between.

AspectMorphRatio[]

defaultAspectMorphRatios

size

Side of the square box the picture is fitted into, in px.

number

276

src

Picture URL, drawn as a cover-cropped background.

string

—

value

Controlled selected ratio value.

string

—

children

Custom picture content (an <img>, <video>, canvas…); cropped to the frame.

ReactNode

—