File Drop Zone Active
The dashed outline energizes and the target lifts off the page while a file is held over it.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useRef, useState, type DragEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · File Drop Zone Active
*
* While something is held over it, the target lifts off the page, an
* accent wash comes up inside it, and its dashed outline shifts by oneAbout this pattern
The whole job of this state is to say "yes, here" before the pointer is released. The target rises a few pixels with a shadow underneath it, an accent wash comes up inside, and the dashed outline shifts by exactly one dash period — one deliberate movement rather than a marching loop, because a loop keeps demanding attention after the decision has already been made. The zone translates and never scales, since the invitation is written in text. Enters and leaves are counted rather than trusted, so dragging across the icon inside does not make the target flicker, and the keyboard path is a real browse button rather than a rectangle that ignores Enter.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- File browser
A target that answers before the pointer is released.
Related patterns
- OTP Paste FillA pasted block of digits lands in the boxes as a quick left-to-right cascade instead of appearing all at once.
- Quantity AdjustThe count rolls in the direction it moved and the order total takes a brief tint.
- Slider Drag ValueThe handle stays under the finger while held, with a value bubble that rises on grab.