Presence
Things entering or leaving in place blur in from 96% scale and blur out the same way; one that comes back mid-exit revives from where it is.
Arrives and stops
Toggle twice fast: it revives from where it is.
Features
- Enters from 4 px of blur at 96% scale, leaves the same way.
- Revives mid-exit from where it is.
Use it for
- Cards and panels that appear in place.
- Swapping content.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy this file into your project, keeping their folders.
- Install what it uses.
pnpm add motion
Usage
import { blurReplace } from 'runets'
<AnimatePresence>{open && <motion.div key="card" {...blurReplace} />}</AnimatePresence>Accessibility
- Reduced motion keeps only the fade.
Source
The code is in src/motion.ts in runets, MIT licensed.