Folder Float

Folder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a floating cloud to pick from, then sink back when the folder closes.

Default

Every prop is wired to the controls underneath. Once the notes land they float, collide and can be dragged and thrown inside the cloud.

Customize

Trigger

LabelSublabel

Folder

Front

Paper

Item

Item Text

Label Color

Width200px

Height148px

Radius14px

Spread180px

Lift26px

Tilt8°

Flap Angle34°

Rest Angle16°

Open520ms

Stagger45ms

Bounce0.3

Close On SelectPhysics

Drift0.5

API Reference

FolderFloat

Prop	Type	Default	Description
`items`	`Array<string \| { label, value }>`	`DEFAULT_ITEMS`	The pills that float out. A string is its own value.
`label`	`string`	`"Design feedback"`	The line on the flap.
`sublabel`	`string`	`""`	The dimmer line under it. Empty counts the notes.
`trigger`	`'hover' \| 'click'`	`"hover"`	Open on hover, or toggle on press.
`defaultOpen`	`boolean`	`false`	Start open.
`closeOnSelect`	`boolean`	`true`	Picking a pill closes the folder.
`physics`	`boolean`	`true`	Once the pills land, a zero-gravity world takes over: they float, collide, and can be dragged and thrown inside the cloud.
`drift`	`number`	`0.5`	Strength of the floating currents in the world. 0 holds still.
`folderColor`	`string`	`"#3f3f46"`	The back panel and its tab.
`frontColor`	`string`	`"#52525b"`	The flap.
`paperColor`	`string`	`"#f5f5f5"`	The paper edge that rises as it opens.
`itemColor`	`string`	`"#f5f5f5"`	The pills.
`itemTextColor`	`string`	`"#18181b"`	The pill text.
`labelColor`	`string`	`"#f5f5f5"`	The flap text.
`width`	`number`	`200`	Folder width in px.
`height`	`number`	`148`	Folder height in px, below the tab.
`radius`	`number`	`14`	Corner radius in px.
`spread`	`number`	`180`	Half the widest the cloud may be, in px. Pills pack into rows within it.
`lift`	`number`	`26`	Gap between the folder and the lowest row, in px.
`tilt`	`number`	`8`	Most a pill leans, in degrees.
`flapAngle`	`number`	`34`	How far the flap tilts toward you when open, in degrees.
`restAngle`	`number`	`16`	The flap tilt when closed, in degrees.
`openDuration`	`number`	`520`	A pill's rise, in ms. The close is 60% of it.
`stagger`	`number`	`45`	Delay between pills, in ms. The close reverses the order.
`bounce`	`number`	`0.3`	Overshoot of the rise. 0 lands dead.
`@select`	`(value, index) => void`	-	A pill was picked.
`@open-change`	`(open) => void`	-	The folder opened or closed.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Enter` + `Space`	Toggle the folder from the flap button, or pick the focused note.
`Tab`	Move through the notes while the folder is open.
`Escape`	Close the folder.

Notes are real buttons and are hidden from assistive tech and removed from the tab order while the folder is closed.
With prefers-reduced-motion the notes fade in without the floating physics.

Flip Card Fuse Button