Loading…

Folding Frame

beta

A photo folded shut like a book in 3D — drag across it (or use the keys) to open the cover until it lies flat.

Effects & motion
1 file
2 npm packages
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 folding-frame

npm packages installed: class-variance-authority, radix-ui.

Usage

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

app/page.tsxTSX

import { FoldingFrame } from "@/components/ui/folding-frame";

Examples

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

Default
Gallery
Controlled
Snap On Release
Right To Left
Disabled

API

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

<FoldingFrame>

Prop	Type	Default
`alt` (required) Describes the photo. It names the frame's role="img".	`string`	—
`src` (required) Image URL of the photo.	`string`	—
`corner` Corner radius in px, 0–24.	`number`	`14`
`defaultValue` Uncontrolled starting openness. Defaults to 0: shut.	`number`	`0`
`depth` Perspective, tilt and shadow strength, 0–100.	`number`	`55`
`disabled`	`boolean`	`false`
`fill`	`"light" \| "dark"`	`"light"`
`label` Accessible name of the slider.	`string`	`"Unfold"`
`liquid` Strength of the liquid hinge refraction (blur and warp), 0–100.	`number`	`60`
`onValueChange` Called on every change: while dragging, per key press and on a release snap.	`(value: number) => void`	—
`onValueCommit` Called when an interaction ends: pointer released or key press.	`(value: number) => void`	—
`snap` Settle fully open or shut when the pointer is released.	`boolean`	`false`
`thickness` Spine width and panel separation in px, 0–18.	`number`	`9`
`value` How open the frame is, 0 (shut) to 100 (flat open).	`number`	—

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

Accessibility

The photo is exposed once, as role="img" named by `alt`; halves, spine, shading and the hinge band are presentational inside it. A focusable role="slider" overlay (default name "Unfold", 0–100) carries the openness with aria-valuetext "Closed", "40% open" or "Open". Arrows step by 5 (left/right follow the reading direction), Page Up/Down by 25, Home shuts and End opens. The drag follows pointer position rather than momentum and mirrors in right-to-left layouts. Key steps and the optional release snap ease with a CSS transition that is instant under reduced motion. The liquid refraction is Chromium-only; other engines get the blur alone (data-liquid="fallback").

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

Describes the photo. It names the frame's role="img".

string

—

src

Image URL of the photo.

string

—

corner

Corner radius in px, 0–24.

number

14

defaultValue

Uncontrolled starting openness. Defaults to 0: shut.

number

0

depth

Perspective, tilt and shadow strength, 0–100.

number

55

disabled

boolean

false

fill

"light" | "dark"

"light"

label

Accessible name of the slider.

string

"Unfold"

liquid

Strength of the liquid hinge refraction (blur and warp), 0–100.

number

60

onValueChange

Called on every change: while dragging, per key press and on a release snap.

(value: number) => void

—

onValueCommit

Called when an interaction ends: pointer released or key press.

(value: number) => void

—

snap

Settle fully open or shut when the pointer is released.

boolean

false

thickness

Spine width and panel separation in px, 0–18.

number

9

value

How open the frame is, 0 (shut) to 100 (flat open).

number

—