Presence
Enter and exit: an element stays mounted until its exit animation ends. Pro · 3D and motion › Motion for any component
Enter and exit for content that comes and goes — a notice, a panel, a step of a form, a card that is removed: it stays mounted while its exit plays, inert so nothing inside can be clicked or focused on the way out, then unmounts. Turned back on mid-exit, it turns around from where it is. Opacity and translate / scale only, on Web Animations at the theme's tempo. Reduced motion: it simply appears and disappears.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add presencenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { Presence } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
present * | boolean | Whether the content is there. Turning it off plays the exit first, then unmounts the content. | |
preset | 'fade' | 'up' | 'down' | 'start' | 'end' | 'scale' | 'pop' | 'flip' | 'fade' | How the content enters and leaves. |
appear | boolean | false | Also play the entrance when the content is there from the first render. |
duration | number | Length of the entrance, ms. Default: the theme's --ui-motion-enter. | |
exitDuration | number | Length of the exit, ms. Default: the theme's --ui-motion-exit. | |
spring | SpringName | The spring of the entrance. Default: the theme's --ui-motion-spring. | |
onExitComplete | () => void | Called after the exit, once the content is gone. | |
asChild | boolean | false | Animates the only child (an Alert, a Card, a panel) instead of wrapping it in a div. |
Related components
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
- Scroll Scene — Scroll scene: a pinned screen changes step by step, with a progress rail
- Parallax Layers — Depth layers that shift with scroll and cursor
- Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
Previous: Layout Group · Next: Scene Backdrop · All 3D and motion