M5: prototyping: custom bezier and spring easings, device frames in the presenter (#10)

- Easing gains `customBezier {x1, y1, x2, y2}` (CSS cubic-bezier) and `customSpring {mass,
  stiffness, damping}` (a damped spring's step response over its settling time, played over the
  interaction's duration); presets keep their string form, so files stay compatible.
- Interaction editor: Custom bezier / Custom spring in the easing menu with value fields (typed or
  scrubbed, one undo step), the curve preview follows.
- Presenter: the page's prototype device now frames the presented screen with a body drawn in
  code (phones with rounded screens, side buttons and a camera pill; tablets; a laptop with its
  base; a desktop monitor on a stand).

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
BFlat
2026-10-10 03:08:13 +07:00
committed by GitHub
co-authored by Claude Opus 5.5
parent ef97225e07
commit c6df8302b1
6 changed files with 268 additions and 9 deletions
+1 -1
View File
@@ -13,7 +13,7 @@ pub fn specs() -> Vec<CommandSpec> {
spec!(
"proto.interaction.add",
"Add interaction",
"{id?, trigger? {type: onClick|onHover|onPress|onDrag|mouseEnter|mouseLeave|mouseDown|mouseUp|afterDelay {ms}|keyPress {key}}, action {type: navigate|back|scrollTo|openOverlay {position?, close_on_outside?, background?}|swapOverlay|closeOverlay|openUrl {url}|changeTo|setVariable {variable, value}, dest?}, actions? [..], transition? {type: instant|dissolve|smartAnimate|moveIn|moveOut|push|slideIn|slideOut, direction?: left|right|top|bottom}, durationMs?, easing? linear|easeIn|easeOut|easeInOut|easeInBack|easeOutBack|easeInOutBack|gentle|quick|bouncy|slow} — or {id, dest} for a click-navigate. Returns {index}",
"{id?, trigger? {type: onClick|onHover|onPress|onDrag|mouseEnter|mouseLeave|mouseDown|mouseUp|afterDelay {ms}|keyPress {key}}, action {type: navigate|back|scrollTo|openOverlay {position?, close_on_outside?, background?}|swapOverlay|closeOverlay|openUrl {url}|changeTo|setVariable {variable, value}, dest?}, actions? [..], transition? {type: instant|dissolve|smartAnimate|moveIn|moveOut|push|slideIn|slideOut, direction?: left|right|top|bottom}, durationMs?, easing? linear|easeIn|easeOut|easeInOut|easeInBack|easeOutBack|easeInOutBack|gentle|quick|bouncy|slow|{customBezier {x1, y1, x2, y2}}|{customSpring {mass, stiffness, damping}}} — or {id, dest} for a click-navigate. Returns {index}",
true,
add
),