Start with one interaction

Hold and release the button, then press again during recovery. The default press scale is 0.92, vertical offset is 2 px and duration-based spring timing is 420 ms.

Change one parameter at a time

Keep the default preview as your reference. Adjust scale first, then timing or bounce, so that a visible difference has an identifiable cause.

Observation speed helps you inspect the transition. It is not part of the saved configuration and does not change the exported timing.

Take the prompt to your own tools

Copy Prompt describes the current interaction and configuration. Give it to your chosen coding assistant, or continue from the standalone reproduction project. TuneShape itself does not make AI generation requests.

Review generated code in your real layout. Check content sizes, repeated input, interruption, keyboard operation and reduced motion. A copied prompt does not guarantee correct integration.

Choose an export for its purpose

A standalone export is not the full TuneShape website or editor source. The public GitHub repository separately contains three React/Motion examples and a Canvas ASCII shoal.

ExportUse
JSON configurationKeep an adjustment and import it back into the editor.
Motion specification and parametersExplain states, triggers, timing and parameter values.
Offline HTMLOpen and try the interaction independently.
Standalone project ZIPRun and modify the selected reproduction in a separate project.
Implementation promptBring configuration and implementation context to your coding assistant.

Inspect the complete default configuration

This JSON comes directly from the current button configuration snapshot. For your own changes, export the JSON from the editor.

Default button configuration · schemaVersion 1
{
  "schemaVersion": 1,
  "component": "button",
  "mode": "beginner",
  "animation": "spring",
  "durationMs": 420,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "bounce": 0.25,
  "x": 0,
  "y": 2,
  "scale": 0.92,
  "stiffness": 260,
  "damping": 24,
  "mass": 1,
  "interruption": "retarget",
  "reducedMotion": "instant"
}