Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ter-9001/WannaCut/llms.txt

Use this file to discover all available pages before exploring further.

Keyframes let any supported clip property change over time instead of staying at a fixed value. You place control points — keyframe dots — directly on a clip in the timeline, and WannaCut draws a smooth interpolation curve between them. The result is painted as a white curve overlay on the clip so you can see the animation shape at a glance. Every keyframable property has its own curve track, and you can run multiple tracks simultaneously on the same clip.

Keyframable Properties

Volume

Drives the clip’s audio gain from −30 dB to +30 dB. The 0–1 internal slider value maps linearly: dB = (value × 60) − 30. Default is 0 dB (unity gain).

Opacity

Controls clip transparency from 0.0 (fully transparent) to 1.0 (fully opaque). Works together with the fade-in/fade-out handles — both are multiplied at render time.

Speed

Remaps playback speed from 0.1× to 10×. The slider value 0.5 equals 1× (normal speed). Speed keyframes automatically remap the clip’s timeline duration and reanchor all other keyframes to their original media positions using compositionToMediaTime.

Zoom

Scales the clip on the canvas from 0.01× to 20×. Slider values map piecewise: 0–0.5 → 0.01×–1.0×, and 0.5–1.0 → 1.0×–20×. Default is 1.0× (100%).

Position

X/Y pixel coordinates on the canvas. Keyframes are set by dragging the clip in Transform mode on the preview canvas, or by entering values in the Properties panel.

3D Rotation

Stores two sub-values: rot (2D in-plane rotation in degrees) and rot3d (3D perspective tilt). Both are animated together on a single rotation3d keyframe track.

Enabling Keyframe View

Before you can add keyframes for a property, you need to open its curve track on the clip:
  1. Right-click the clip in the timeline to open the context menu.
  2. Hover over Keyframable to expand the sub-menu.
  3. Click the property you want to animate (e.g. Opacity).
The clip now shows a white curve overlay and a small property-name badge in the top-left corner. Only one property curve is displayed at a time; switching to another property hides the previous one, but its keyframes are preserved.

Adding Keyframes

There are two ways to drop a new keyframe onto a clip:
1

Double-click on the clip body

With the keyframe track open, double-click anywhere on the clip in the timeline. The X position of your click sets the keyframe time (relative to the clip’s start), and the Y position sets the value — clicking near the top of the clip yields a high value, near the bottom a low value. The new dot appears immediately on the curve.
2

Use the Properties panel at the playhead

Move the playhead to the desired moment, then adjust the property slider or input in the Properties panel on the right side. WannaCut checks whether a keyframe already exists within 50 ms of the current playhead position:
  • If one exists, it updates that keyframe’s value in place.
  • If none exists, it creates a new keyframe at the current time, seeded with the already-interpolated value at that moment so the curve stays smooth.
Using the Properties panel sliders is the most precise way to add keyframes — you set the exact numeric value without guessing the Y position of a click. Move the playhead to a frame, dial in the value, and WannaCut records it automatically.

Editing Keyframes

Once keyframes exist on a clip you can fine-tune them directly in the timeline:
  • Drag left/right — changes the keyframe’s time position. Movement is constrained so a keyframe cannot be dragged past its neighbors.
  • Drag up/down — changes the keyframe’s value. The full height of the clip represents the full range of the property (0–1 slider space).
  • Right-click a keyframe dot — opens a small context menu with a Delete option that removes that single keyframe.

Speed Keyframes & Time Remapping

Speed is the most powerful — and complex — keyframable property. When you place speed keyframes, WannaCut treats them as a variable-rate time-remap curve: the clip’s playback rate changes continuously from one keyframe to the next, and the clip’s visible duration on the timeline expands or contracts accordingly. Internally, WannaCut uses two utility functions to translate between the timeline (“composition”) clock and the source-footage (“media”) clock:
// Where in the original source footage is a given composition time?
compositionToMediaTime(compositionTime: number, speedKfs: SpeedKf[]): number

// Where on the timeline does a given source-footage position land?
mediaToCompositionTime(mediaTime: number, speedKfs: SpeedKf[]): number
Speed interpolation between keyframes is linear — you get piecewise-linear speed ramps. For smooth S-curve ramps, add more keyframe control points. Every non-speed keyframe stores an originalTime field that anchors it to a media-clock position. When you modify speed keyframes, WannaCut calls remapKeyframesToSpeed to recompute the composition-time position of every other keyframe so opacity fades, volume swells, and position moves all stay locked to the correct frame of footage.

Fade In / Fade Out Interaction

Each clip has separate fadein / fadeout handle values (dragged from the clip edges in the timeline) that operate on top of opacity and volume keyframes:
  • Video opacity: the fade multiplier uses a linear ramp.
  • Audio volume: the fade multiplier uses a logarithmic curve that matches the perceived loudness of a smooth dB ramp.
Both multipliers are applied after keyframe interpolation, so an opacity keyframe of 0.8 at a point where the fade-in is 50% complete results in a final opacity of 0.4.

Clearing Keyframes

To remove all keyframes for the currently visible property:
  • Click the broom (🧹) icon on the keyframe bar that appears above the clip when a property track is active. This deletes the entire array for that property.
  • Click the × button on the same bar to exit keyframe view and return the clip to its normal appearance without deleting any keyframes.

Build docs developers (and LLMs) love