Usage notes
`useTimelineKeyframes` is the main keyframe-domain hook. It reads geometry
from the engine so custom overlays share the same clip, track, scroll, and
zoom math as the canvas renderer. Mutation commands return
TimelineCommandResult values and respect locked tracks.
Signature
useTimelineKeyframes(options: UseTimelineKeyframesOptions = {}): UseTimelineKeyframesResult<TrackKind>Type parameters
| Name | Constraint | Default | Description |
|---|---|---|---|
TrackKind | None | string | App-defined track kind values carried by returned track entries. |
Parameters
| Name | Type | Description |
|---|---|---|
| options | UseTimelineKeyframesOptions | Optional clip/property filters and renderer-aligned geometry settings. |
Returns
UseTimelineKeyframesResult<TrackKind>
Keyframe lists, viewport geometry, visible geometry, property evaluation, and mutation commands.
Examples
import { fromSeconds } from '@techsquidtv/canvas-timeline-utils';import { useTimelineKeyframes } from '#react/hooks';
export function OpacityKeyframeButton({ clipId }: { clipId: string }) { const keyframes = useTimelineKeyframes({ clipId, property: 'opacity' });
return ( <button type="button" onClick={() => keyframes.setKeyframe({ clipId, property: 'opacity', time: fromSeconds(1), value: 0.5, }) } > Add opacity keyframe </button> );}import { useTimelineKeyframes } from '#react/hooks';
export function SelectedKeyframeOverlay() { const { keyframeRects } = useTimelineKeyframes({ selectedClipOnly: true });
return keyframeRects.map((entry) => ( <span key={entry.keyframe.id} style={{ left: entry.x, top: entry.y, width: entry.width, height: entry.height }} /> ));}