oren-hollander/remotion-spline

Overview

This skill provides standalone spline utilities for Remotion compositions to create smooth path animations and SVG path output. It supports both piecewise-linear and centripetal Catmull-Rom splines and exposes functions to evaluate positions and generate SVG path strings. Use it to animate objects along routes or render static guide paths with minimal setup.

How this skill works

You supply an array of 2D control points (Point2D) and either evaluate the spline at a normalized parameter t or convert the full spline to an SVG path string. evaluateLinearSpline and evaluateCatmullRom return the [x,y] coordinates for a given t (clamped to [0,1]). linearSplineToSVGPath and catmullRomToSVGPath return an SVG-compatible path (M/L for linear, M/C for Catmull-Rom) for static rendering.

When to use it

• Animate an element along a predefined route in a Remotion composition.
• Render static guides, racing lines, or motion trails as SVG paths.
• Prefer smooth curves that pass through control points without manual Bezier handles.
• Quickly prototype motion when you only have a few key points.
• Switch to linear spline when you need straight-segment motion between points.

Best practices

• Always provide at least two Point2D items; functions require >=2 points.
• Normalize t as frame / (durationInFrames - 1) to map frame range to [0,1].
• Use Catmull-Rom for organic, smooth motion and linear spline for sharp, segmented motion.
• Render the SVG path separately for debugging or to draw motion trails.
• Clamp control-point coordinates to your composition viewBox to avoid off-canvas artifacts.

Example use cases

• Animate a car or camera along a road represented by control points using evaluateCatmullRom.
• Draw a racing line overlay with catmullRomToSVGPath and stroke styling.
• Move a pointer between UI hotspots using evaluateLinearSpline for snap-like motion.
• Create particle trails by sampling a spline at multiple t values and rendering a polyline.
• Bake animation keyframes from evaluate* outputs for non-Remotion playback.