UI MOTION PLANNING
Hypit UI motion references: turn a screen recording into a reviewable brief
Use Tree’s UI-motion thread to plan reference measurements, key states, animation timing and side-by-side review for your own interface prototype.
Edited by HypitAI · Reviewed
Start with a measurable motion reference
On September 21, Tree described using a Hypit-assisted workflow to analyse a short interface recording, construct a web prototype and compare both views. The useful idea is to measure states and transitions before implementation. The post’s fidelity percentages are creator claims, not our benchmark; the planning brief below is our own, not a reproduced project.
Choose the deliverable first
A product-demo animation and an interactive prototype need different acceptance checks. A recording can show timing and appearance, but cannot establish working dragging, keyboard control or application state. Hypit Studio documents video-composition preview and component editing; that does not certify a production-ready application.
Prepare a reference packet
Give the agent a local reference you may use and your own interface assets. Record the dimensions and timing actually observed; do not copy another project’s pixel values.
| File | Contents | Check |
|---|---|---|
| reference.mp4 | The complete screen recording | Dimensions, duration, rotation and source frame timing |
| states.csv | State ID, visible content, trigger and next state | Every transition has a start and end |
| assets/ | Your icons, portraits, text and fonts | Correct aspect ratio and no missing placeholders |
| motion-notes.md | Anchors, bounds, movement and unresolved observations | Separate measured values from estimates |
| review.csv | Reference moment, prototype moment, mismatch and action | Each issue can be reproduced |
An original four-state planning example
For an avatar picker, first settle the state transitions below. Fill event times from your own recording. A sparse contact sheet helps locate transitions; inspect adjacent source frames to refine a boundary rather than claiming millisecond accuracy from widely spaced samples.
| State | Visible result | Trigger | Review |
|---|---|---|---|
| Idle | Selected avatar and closed picker | Initial load or completed close | No layout jump |
| Opening | Options enter around the selected avatar | Open action | Origin, direction and easing |
| Selection | One option becomes active | Select action or scripted demo beat | Highlight and selected identity agree |
| Closing | Options leave and the new avatar remains | Confirm action | No stale highlight or sudden snap |
An editable agent brief
This is our planning example. Choose either an animation or an interactive prototype and replace the filenames before using it.
/hypit Analyse reference.mp4 for a UI-motion project.
Deliverable: [product-demo animation / interactive web prototype].
Use my assets/ directory and states.csv; list missing inputs.
First report source dimensions, duration and frame timing, then key states and uncertain transition boundaries.
Measure geometry in the reference coordinate system and describe how it scales to the target viewport.
Implement one transition first and provide a synchronized side-by-side recording.
Record observable differences in review.csv; do not report an unsupported similarity percentage.
For an interactive prototype, also check pointer, touch, keyboard, focus and repeated actions.
Deliver source files, a preview, comparison recording and unresolved issues.Review at the same scale and time
Align the start event, viewport, aspect ratio and playback rate before comparing recordings. Inspect transition boundaries, intermediate positions and settled states, then watch the whole sequence at normal speed. Record timing and position differences separately. A frame-perfect recording still does not prove interaction works.
Test the behaviour the recording cannot show
For an interactive prototype, try opening twice, cancelling mid-motion, rapid selection and resizing. Check keyboard focus and touch targets. For a video deliverable, inspect the exported file for dropped frames, clipping and an abrupt final frame. Keep remaining differences alongside the source project.