Heart like animation: click, unlike and download
Click the canvas to fill the outlined heart and enlarge it to 108%. Click again to return to the outline. Three named layers keep the headline, heart path and hint separate. The Unliked and Liked states use two explicit timelines, with a 280 ms transition to liked and a 220 ms return. This demo stores no account data or like count.
Not liked. Click the canvas or press Enter or Space.
Download editable Chorono project · 20 KB JSONUse the chorono skill in a new connected editor scene. Create a 1200 × 675 cream #F7F1ED canvas at 60 fps. Add the centered bold Arial headline “A little love.” in dark brown #211612, an editable rust #B55233 heart path below it, and the hint “Tap to like. Tap again to undo.” Keep three named layers. Create separate non-looping 300 ms timelines named unliked and liked, each holding a constant pose. Unliked has an outlined heart at scale 1; Liked fills the heart and scales it to 1.08 around its center. Add a state machine starting Unliked. The toggle event blends to Liked over 280 ms and back over 220 ms. Make the heart tappable and save a click trigger that emits toggle. Preserve unrelated work. Inspect both actual rendered states, test two clicks, validate, save and reopen the portable project, and export runtime JSON. Report the saved paths and any warnings.Read the saved heart-like project. Keep the three layers, layout, colors, click trigger and reversible states. Remove the scale change so the heart stays at scale 1 in both states. Retain the fill change and shorten both state blends to 180 ms. Test like and unlike, inspect both previews and save a separately named portable revision.Open the projects and connect them to your interface
- Download the JSON underneath the example you want. Each is an independent editable project.
- Open a separate Chorono editor tab, choose Open Scene JSON and select the download. Enter Preview or runtime test mode to exercise its click trigger.
- Edit the named layers, states and transitions, or connect Codex or Claude through MCP and use the revision prompt.
- Export runtime JSON for a website. Supply a native HTML button with aria-pressed for a like or aria-expanded and aria-controls for a menu. Keep navigation links in HTML.
These previews have no autoplay. Enter and Space activate their native buttons. The menu also closes with Escape and returns focus to its button. With reduced motion enabled, state changes happen without the animated blend. Inputs during the brief transition are ignored to avoid overlapping blends. Each example uses native shapes and Arial, with no external media. Downloaded projects preserve the icon interactions; browser accessibility, links and reduced-motion handling belong to the host page.
