Motionstable
Aperture
A full-bleed panel that closes into a framed card as you scroll, or opens.
clip-path, not width
The frame opens
Scaled down to fit the frame, and set to open so the panel starts as a card and grows to full bleed. On a page the pane is the viewport and it reads page scroll.
Customize
Framehow far the edges come in
300cqh
height17.00 %
inset26 px
radiusdirectionMotioncontent and shading
0.080
scale0.000
dimdimColoreasingdisabledUsage
import { Aperture } from "zerogravity"
<Aperture>
<div>Panel content</div>
</Aperture>Generated from the controls above. Only props that differ from their defaults are shown.
Props
| Property | Type | Default | Description |
|---|---|---|---|
height | string | "300cqh" | Scroll length. Range 150 to 500 cqh. |
inset | number | 17 | Inset. Range 0 to 40 %. |
radius | number | 26 | Corner radius. Range 0 to 80 px. |
direction | "close" | "open" | "both" | "open" | Direction. |
scale | number | 0.08 | Content pull-back. Range 0 to 0.3. |
dim | number | 0 | Dim overlay. Range 0 to 1. |
dimColor | string | "#05050a" | Dim colour. |
easing | "smooth" | "linear" | "smooth" | Easing. |
disabled | boolean | false | Disable motion. |
children | ReactNode | — | The panel content. It never rescales — only the window changes. |
onProgress | (progress: number) => void | — | Scroll progress from 0 to 1. |
Dependencies
0 external runtime dependencies
Ships with nothing but React.