Changelog
What changed in each release of retake-dev.
0.5.5
Springs- Motion springs. A note on a spring gives its stiffness, damping, how far it overshoots and when it settles, with the numbers to change for "less bouncy", "slower" or "faster". A point or range on a spring is converted to keyframes for an exact edit.
- Picking an element again while writing a note keeps what you typed.
0.5.4
Fixes- Enter opens an animation at its start even when the playhead is in its delay, so the arrows and Shift+arrows work straight away.
- A click on a row of the ⌘ layer list picks that layer and never reaches the page.
- The note keeps focus when a rebuild replays a click.
0.5.3
Keyboard- Everything by keyboard. After ⌘-click, Enter or ↓ opens the element's animation, ↑/↓ moves between its animations, Shift+←/→ makes a range, G turns on Whole group. Every item on the animation row is also a real button for screen readers.
- Hover, press and focus. A note says what started an animation ("started by :hover") and groups all the effects one hover started. When nothing is moving at the note's moment, it lists the element's recent animations, presses included.
- Thin animated shapes. An animated SVG stroke under the pointer is listed and picked.
- Video. A note on a background video gives its time, length, loop and speed.
- ⌥P pauses even when the app has a text field focused.
0.5.2
Groups and code- One note for a group. Pick a container whose children each animate (an equalizer's bars) and choose Whole group: one note carries every child's animation, its point or range on its own clock and its own exact edit.
- The animation that moves. 0ms clips no longer become a note's subject, and an animation started again on scroll is one entry with its run times.
- Clearer exact edits. They say they change only the note's point or range; “faster”, “hold longer” and the like get an
Intent:line instead. Loops get exact edits too. - Picking under overlays. The ⌘ list shows everything stacked at the pointer (strokes under an image, inline words) and marks what animates; click any row.
- Ranges from the keyboard. On an open animation, Shift+←/→ grows a range from the point; ⌥+←/→ moves between keyframes.
- Timelines keep their own code. Each timeline rebuilds with the code it had, in every mode. The first code change with two timelines asks Separate code or Share code; the newest code goes back on disk when Retake stops. More
- Safe with git. HEAD, the index and refs are never touched, a branch switch pauses swapping, and hot updates are held while files switch.
- Code from a terminal and for agents.
retake code status | list | checkout | restore | export;acknowledgeputs the note's timeline's code on disk, and agents getcheckout_timelineandget_code_diff. - Source lines on Next 15 with Turbopack for elements a bundled library rendered.
- Front server: a kept page is served again whenever the code it was rendered with is back on disk.
0.5.1
Animations- Next.js on its own dev URL. One line in
proxy.ts(middleware.tson Next 15) and the timeline shows onnext dev's own address. Install - The right element. ⌘-click picks what's under the pointer, SVG paths and overlays included, with a selector that matches exactly one element.
- Each element's animations on their own clock. Open one from the element's row: its keyframes, what it moves, and x, y and size at the playhead, with its path drawn on the app.
- Notes at a frame or over a range. Click a point on the animation, or drag across it (200–400 ms). Your agent gets the animation, where it's defined, the local times and values, and an exact edit for that part only.
- Agents can read the recording. MCP
get_moment,get_timeline_eventsandget_animation; sources resolve through source maps to your files.
0.5.0
Dock- Collapse to an icon. Drag the divider to the bottom edge, or press ⌥T: the dock folds into a round button in the corner, keeps recording, and shows the phase as a dot. Remembered across reloads. More
- Notes only when paused. Note pins show while the app is paused or in the past. While it's live or playing they're hidden, and the count still shows how many notes the take has.
- Leaving the page keeps the last seconds. Typing a new address or reloading the dock while recording no longer loses what came after the last save.
- Phones. 40px controls, a divider you can drag with a finger to resize or fold the dock, Start fresh as an icon on narrow screens, and the dock and its corner button clear of the home indicator.
- Room for the dock. In the app's frame,
window.__retakeDockHeightis the height the dock covers (0 when folded), and aretake:dockevent says when it changes. shellHtml({ server: false })for a dock with no Retake server behind it (a static deploy): it never asks/__retake/and keeps the session in memory.- Timeline names. Timelines are named Timeline 1, Timeline 2 (they were Main, Take 2). Old sessions show the new names; names you gave them stay.
0.4.0
First releaseGoing back
- A timeline docked at the bottom of your app that records from page load. Drag back and the app is at that moment.
- A virtual clock for timers,
requestAnimationFrame,Date, idle callbacks, CSS and Web Animations; seededMath.randomandcrypto. - Server replies answered from the recording:
fetch(streams chunk by chunk), XHR,EventSource, WebSockets; observers and worker messages too. Storage, cookies and IndexedDB restored. - Going back shows a live preview at once, builds the real moment behind it and swaps it in.
Takes and notes
- Takes: + or Ctrl-click starts a new timeline from any moment, paused.
- Notes on elements and their animation layers, with Copy for agent: element, React component, source file and line, CSS and the moment.
- An MCP server (
retake mcp) with seven tools, so your coding agent can read, acknowledge, reply to and resolve notes. --code-branches: each take keeps its own version of the code (Vite apps).
Any dev server
- The Vite plugin,
retake(), and the CLI,npx retake-dev ., which leaves your files alone. - The front server for frameworks that render their own HTML: Next.js 15 and 16, React Router 7, Remix 2, Astro, SvelteKit, Nuxt;
retake -- <command>andretake http://…for anything else. - Types for the plugin and for
window.__retake(retake-dev/client). - Licensed under PolyForm Shield 1.0.0.