@remotion/motion-blur
Version:
Motion blur effect for Remotion
40 lines (39 loc) • 1.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Trail = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const remotion_1 = require("remotion");
/*
* @description The <Trail> component duplicates its children and adds a time offset to each layer in order to create a trail effect.
* @see [Documentation](https://www.remotion.dev/docs/motion-blur/trail)
*/
const Trail = ({ children, layers, lagInFrames, trailOpacity, }) => {
const frame = (0, remotion_1.useCurrentFrame)();
if (typeof layers !== 'number' ||
Number.isNaN(layers) ||
!Number.isFinite(layers)) {
throw new TypeError(`"layers" must be a number, but got ${JSON.stringify(layers)}`);
}
if (layers % 1 !== 0) {
throw new TypeError(`"layers" must be an integer, but got ${JSON.stringify(layers)}`);
}
if (layers < 0) {
throw new TypeError(`"layers" must be non-negative, but got ${JSON.stringify(layers)}`);
}
if (typeof trailOpacity !== 'number' ||
Number.isNaN(trailOpacity) ||
!Number.isFinite(trailOpacity)) {
throw new TypeError(`"trailOpacity" must be a number, but got ${JSON.stringify(trailOpacity)}`);
}
if (typeof lagInFrames !== 'number' ||
Number.isNaN(lagInFrames) ||
!Number.isFinite(lagInFrames)) {
throw new TypeError(`"lagInFrames" must be a number, but got ${JSON.stringify(lagInFrames)}`);
}
return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { children: [new Array(layers).fill(true).map((_, i) => {
return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
opacity: trailOpacity - ((layers - i) / layers) * trailOpacity,
}, children: (0, jsx_runtime_1.jsx)(remotion_1.Freeze, { frame: frame - lagInFrames * (layers - i), children: children }) }, `frame-${i.toString()}`));
}), children] }));
};
exports.Trail = Trail;