#365
Sheet spring
A bottom sheet that springs up over its page, follows your finger when dragged down and either dismisses or springs back depending on distance and speed.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Sheet spring" pattern (@codeatlasdev/ui demo #365, motion/transitions) in my app.
Call get_demo({ ids: ["#365"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Mobile pickers, filters, share menus and any secondary task that should feel attached to the screen instead of popping in.
Keep these library parts, with the props and tokens the demo uses:
- Button, MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` with `label="Sheet spring: a bottom sheet springs up and drags down to dismiss"` and `loop={2600}`
- `new Spring(SHEET, { stiffness: 0.2, damping: 0.75 })` with `const SHEET = 256`: offset 0 is open, `SHEET` is hidden
- The sheet reads `transform: translateY(var(--y))`; the scrim opacity follows `calc(var(--o) * 0.5)`
- Drag down follows the pointer 1:1 with `{ instant: true }`; dragging up divides by `4` (rubber band)
- Release dismisses past `SHEET * 0.3` or faster than `0.5` px/ms, otherwise the spring returns to 0; Escape also closes it
- Under reduced motion the sheet is open and moves with `{ instant: true }`
Exact motion (do not approximate):
- transform: translateY of the sheet: stiffness: 0.2, damping: 0.75, spring { stiffness: 0.2, damping: 0.75 }
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Button
@codeatlasdev/ui - MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` with `label="Sheet spring: a bottom sheet springs up and drags down to dismiss"` and `loop={2600}`
- `new Spring(SHEET, { stiffness: 0.2, damping: 0.75 })` with `const SHEET = 256`: offset 0 is open, `SHEET` is hidden
- The sheet reads `transform: translateY(var(--y))`; the scrim opacity follows `calc(var(--o) * 0.5)`
- Drag down follows the pointer 1:1 with `{ instant: true }`; dragging up divides by `4` (rubber band)
- Release dismisses past `SHEET * 0.3` or faster than `0.5` px/ms, otherwise the spring returns to 0; Escape also closes it
- Under reduced motion the sheet is open and moves with `{ instant: true }`
Related
Loading source.