Motionexperimental

Louvre

Sticky blinds whose slats rotate away to reveal the section behind them.

scrolls inside this frame

Scaled down to fit the frame, so one full turn of the blinds is visible here. On a page the pane is the viewport and it reads page scroll.

Customize

Blindsslat geometry and reveal wave

Slats8slats

Orientationorientation

Phase0.70phase

Perspective900 pxperspective

Gap2 pxgap

Shade0.60shade

Scroll length340 cqhscrollLength

TSX

<Louvre />

Generated from the controls above. Only props that differ from their defaults are shown.

9 documented props on Louvre
Property	Type	Default	Description
`slats`	`number`	`8`	Slats. Range 3 to 24.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Orientation.
`phase`	`number`	`0.7`	Phase. Range 0 to 1.5.
`perspective`	`number`	`900`	Perspective. Range 500 to 2600 px.
`gap`	`number`	`2`	Gap. Range 0 to 12 px.
`shade`	`number`	`0.6`	Shade. Range 0 to 1.
`scrollLength`	`number`	`340`	Scroll length. Range 150 to 500 cqh.
`front`	`ReactNode`	`—`	What the closed blinds show.
`back`	`ReactNode`	`—`	What is revealed once the slats open.

0 external runtime dependencies

Ships with nothing but React.

Experimental: still under evaluation and not part of the published package yet.