The Hexdrop motion recipe
Hexdrop turns a file card into an ingredient for a native potion. This recipe preserves the complete useIngredientDrag.ts from commit ebdc02a2652051c982779ea43ba3d76cf99bb538, using NativeScript-Vue 3 and Jolt 0.1.0-rc.11.
A drag with a destination
Jolt drag() tracks the card and snap: [0] springs it home after a rejected drop. The app scales it to 0.86, tilts it with horizontal travel, and compares its transformed bounding rectangle with the vial in window coordinates. An accepted drop pauses the gesture controller and absorbs the card over 200 ms before calling onDrop.
Call useIngredientDrag during component setup. Connect its loaded and tap handlers to the native card. Supply disabled, a target() returning window-space bounds, and the onStart, onHover and onDrop callbacks. Copy transformedRect, intersects and the Rect type from the pinned geometry module; read the panel for the complete integration. Jolt supplies the drag mechanics; the app supplies the drop rule.
Keep the gesture controller separate from the animation scope: resetting visual feedback must not remove input. Preserve the generation guard around absorption, the final-release hit test, the tap suppression after dragging, and the background/unmount cleanup. A canceled or disposed drop must not start a later brew. The tap and labeled Brew potion button provide alternatives to dragging; keep them when adapting the pattern.
The copied hook does not render the potion or upload a file. The full native scene lives in potion-view.ts: a 540 ms ignition, an 8.4 second fill driven by a motion value, liquid path morphs, particles and a spider transferred to the stopper pivot. Its lifecycle and reduced-motion handling belong to that scene. Run the full project for this artwork. The recording verifies iOS simulator playback only; Android and Web are not demonstrated.
An entrance with a shared clock
A little opening spell. · GitHub
The 1550 ms timeline overlaps the floating mark, radial glows, a drawn hexagonal stroke, particles and staggered title/caption. After reveal mounts the real content, a 320 ms fade removes the overlay. With Reduce Motion, it skips the effects and uses a brief hold and fade. Copy the complete source with the component structure and asset linked below.
NativeScript-Vue 3 and Jolt RC.11. Supply the measured, mounted native GridLayout and child IDs from LaunchScreen.vue, its styles and hexdrop-mark.png. Keep drawing surfaces at fixed bounds and transform their containers. The reveal callback mounts app content and awaits nextTick before the overlay fades. Own the returned handle, await finished and call dispose on permanent unload; preserve the reduced-motion branch and failure fallback. The system launch screen is static; this timeline starts after NativeScript is ready. iOS simulator playback only.
LaunchScreen.vue · App.vue · hexdrop-mark.png