deconstruct

Deconstruct

This skill takes an animation or interaction apart. It names every state and event, splits each transition into one track per property and puts both on a page the user can scrub and edit.

Every frame accounted for

Nothing is described by feel. Every state has a name, every transition has an event and every animated property has its from, to, delay, duration and easing. A value that could not be read is marked Not verified, never estimated.

Reading computed values and the side-by-side proof belong to match. Forcing component states open belongs to lab. Opening the result runs in verify. Whether the motion's values are right belongs to motion.

1. Capture the real motion

Open the source: the code, the live page or a recording. Read keyframes, transitions and spring configs, or step through frames at reduced playback speed. A breakdown from one viewing is deconstruct-capture-the-source.

2. Name the states and events

List the states the element can rest in and the events that move it between them, such as press, release, resolve and timeout. Write them as a table of state, entered on and left on. A sentence like "it shrinks, then spins" is deconstruct-name-the-states.

3. Split each transition into tracks

Give every animated property its own track: scale, opacity, blur, width, colour, icon and label. Each track lists from, to, delay, duration and easing. "About 300ms" is deconstruct-every-property.

Keep the curve as written. A spring stays a spring with its stiffness, damping and mass, or its bounce and duration. A spring flattened into a guessed bezier is deconstruct-keep-the-curve.

4. Drive it from one clock

Render the element as a pure function of one time value. Scrubbing, pausing and looping then show the same frame for the same time. A viewer that replays CSS and cannot stop mid-transition is deconstruct-one-clock.

5. Build the viewer

Copy viewer.html beside the rebuild as a development-only page, write timeline.js next to it in the shape its header comment shows and open it. It shows the element, the state machine and one lane per track with its live value.

The viewer ships with the skill, so write data only. A page with its own markup or styles is deconstruct-shipped-viewer. It highlights the active state, and clicking a state seeks to it. Its scrubber, play, pause and 0.25× stay in. A timeline with no scrubber is deconstruct-scrub-the-timeline.

The inspector writes from, to, delay, duration and easing, and the preview follows. Drag a segment to change its delay. Drag its right edge to change its duration. Drag an event mark to move that event on every track. A timing changed in the reply instead of on the segment is deconstruct-edit-the-segment.

Pinch or hold Cmd and scroll to zoom the timeline. Scroll sideways to pan, and Fit returns to the full duration. Drag a slider and the preview follows. Drag the bezier handles or pick a keyword from the easing menu.

Segments, layers and events snap to each other and to the playhead. Hold Alt to drag without snapping. Shift-click segments to move them together.

A spring's length follows from its curve. Change stiffness, damping and mass to change it, or drag the edge of a bounce and duration spring.

Opening a track draws its value over time under the lane, so an overshoot shows. Tracks on one element group under its selector, and dragging the group moves them all.

Cmd+Z undoes any edit. An edited field shows a dot and Revert. Original plays the timeline as it was loaded, so the edit is judged against the source.

6. Compare at slow speed

Play the original and the rebuild side by side at 0.25×. Set recording to a capture of the original, and the viewer plays it beside the preview on the same clock. Name every frame that drifts. A breakdown checked only at full speed is deconstruct-compare-slowed.

Press I and O to loop one range, such as press to release. Onion Skin ghosts the last frames over the preview. Wipe lays the recording over the preview with a divider. Crop the recording to the preview frame so the two line up.

7. Hand back the data

timeline.js is the hand-back: the state table and the tracks as one object. The rebuild imports that file rather than a copy, so the viewer and the shipped motion read the same values. A timeline that lives only in the reply is deconstruct-timeline-as-data. Copy Timeline writes the open page back into that object. Paste it over timeline.js. If the clipboard is blocked, the toast says Copy Failed. An edit left only in the open page is deconstruct-copy-the-timeline. Gate the viewer to development or delete it before release, and keep timeline.js.

The pair

Every check is a pair. The broken line sits beside the line that replaces it.

Rule	Broken	Replacement
deconstruct-capture-the-source	A breakdown from watching it once	The code read and frames stepped at 0.1×
deconstruct-name-the-states	"It shrinks, then spins"	Idle, Pressed, Copying and Copied with their events
deconstruct-every-property	"About 300ms"	Scale 1 to 0.96, 120ms, ease-out, at 400ms
deconstruct-keep-the-curve	A spring approximated as ease-out	stiffness: 400, damping: 30 as written
deconstruct-one-clock	A CSS replay button	Every frame computed from one t
deconstruct-scrub-the-timeline	A looping preview only	A scrubber, play, pause and 0.25×
deconstruct-shipped-viewer	A viewer page written from scratch	viewer.html copied, only timeline.js written
deconstruct-compare-slowed	Checked once at full speed	Original and rebuild side by side at 0.25×
deconstruct-timeline-as-data	A timeline described in the reply	timeline.js, imported by the rebuild
deconstruct-edit-the-segment	"Make the press 80ms"	Duration edited on the segment
deconstruct-copy-the-timeline	The edit left in the open page	Pasted back over timeline.js

Reporting

Severity. HIGH is a breakdown made without opening the source, or a missing state. MEDIUM is an estimated timing, a flattened curve, a viewer that cannot scrub, a hand-written viewer or an edit left only in the page. LOW is drift found and named at slow speed.

Format. One finding per root cause:

file:line - [rule-id] what is wrong

Then a Rule | Count | Severity summary. Block when any HIGH remains, Approve otherwise. Mark every value you could not read from the source as Not verified.