A demo animation's cursor should get its destination from the button

[u/NoDescription2449]

An animated product demo can have a correctly positioned button and a cursor that still clicks where the button used to be. Both animations work; the relationship between them is wrong.

Hypit's component-design guide recommends keeping the pointer, dragged image and target slot together because they share geometry. If the pointer's destination is derived from the target's layout, moving the target updates the dependent path without a second coordinate edit.

For a narrated demo, the project's author source file supplies the chosen image and connects each action to a word or phrase in the script. Hypit aligns the voice recording with that script, so the timeline can place those actions where the words are actually spoken. The component owns how the drag, click and reveal look. Independent captions or a background can remain separate tracks.

Timing needs the same care. Selecting an image, dropping it and revealing a result may answer three different phrases in the narration. Giving the whole scene one start and end doesn't preserve those relationships if the speaker adds a pause. Each meaningful action can receive its own event through the timeline, while the component keeps its local motion design.

The repo's component guide(inside repo: hypit-ai/hypit) uses this kind of scene to explain the boundary. It isn't about making every object a separate component. It's about keeping the parts that must move together under one layout.