@remotion/shapes 4.0.478 → 4.0.481

package/dist/components/arrow.js

@@ -58,8 +58,9 @@ const ArrowInner = ({ length, headWidth, headLength, shaftWidth, direction, corn
             cornerRadius,
         }), ...props }));
 };
-exports.Arrow = remotion_1.Internals.wrapInSchema({
+exports.Arrow = remotion_1.Interactive.withSchema({
     Component: ArrowInner,
+    componentName: '<Arrow>',
     componentIdentity: 'dev.remotion.shapes.Arrow',
     schema: arrowSchema,
     supportsEffects: true,

package/dist/components/callout.js

@@ -69,8 +69,9 @@ const CalloutInner = ({ width, height, pointerLength, pointerBaseWidth, pointerP
             cornerRadius,
         }), ...props }));
 };
-exports.Callout = remotion_1.Internals.wrapInSchema({
+exports.Callout = remotion_1.Interactive.withSchema({
     Component: CalloutInner,
+    componentName: '<Callout>',
     componentIdentity: 'dev.remotion.shapes.Callout',
     schema: calloutSchema,
     supportsEffects: true,

package/dist/components/circle.js

@@ -21,8 +21,9 @@ const circleSchema = (0, schema_1.makeShapeSchema)({
 const CircleInner = ({ radius, ...props }) => {
     return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Circle>", documentationLink: "https://www.remotion.dev/docs/shapes/circle", ...(0, make_circle_1.makeCircle)({ radius }), ...props }));
 };
-exports.Circle = remotion_1.Internals.wrapInSchema({
+exports.Circle = remotion_1.Interactive.withSchema({
     Component: CircleInner,
+    componentName: '<Circle>',
     componentIdentity: 'dev.remotion.shapes.Circle',
     schema: circleSchema,
     supportsEffects: true,

package/dist/components/ellipse.js

@@ -27,8 +27,9 @@ const ellipseSchema = (0, schema_1.makeShapeSchema)({
 const EllipseInner = ({ rx, ry, ...props }) => {
     return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Ellipse>", documentationLink: "https://www.remotion.dev/docs/shapes/ellipse", ...(0, make_ellipse_1.makeEllipse)({ rx, ry }), ...props }));
 };
-exports.Ellipse = remotion_1.Internals.wrapInSchema({
+exports.Ellipse = remotion_1.Interactive.withSchema({
     Component: EllipseInner,
+    componentName: '<Ellipse>',
     componentIdentity: 'dev.remotion.shapes.Ellipse',
     schema: ellipseSchema,
     supportsEffects: true,

package/dist/components/heart.js

@@ -42,8 +42,9 @@ const HeartInner = ({ aspectRatio, height, bottomRoundnessAdjustment = 0, depthA
             depthAdjustment,
         }), ...props }));
 };
-exports.Heart = remotion_1.Internals.wrapInSchema({
+exports.Heart = remotion_1.Interactive.withSchema({
     Component: HeartInner,
+    componentName: '<Heart>',
     componentIdentity: 'dev.remotion.shapes.Heart',
     schema: heartSchema,
     supportsEffects: true,

package/dist/components/pie.js

@@ -45,8 +45,9 @@ const pieSchema = (0, schema_1.makeShapeSchema)({
 const PieInner = ({ radius, progress, closePath, counterClockwise, rotation, ...props }) => {
     return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Pie>", documentationLink: "https://www.remotion.dev/docs/shapes/pie", ...(0, make_pie_1.makePie)({ radius, progress, closePath, counterClockwise, rotation }), ...props }));
 };
-exports.Pie = remotion_1.Internals.wrapInSchema({
+exports.Pie = remotion_1.Interactive.withSchema({
     Component: PieInner,
+    componentName: '<Pie>',
     componentIdentity: 'dev.remotion.shapes.Pie',
     schema: pieSchema,
     supportsEffects: true,

package/dist/components/polygon.js

@@ -32,8 +32,9 @@ const PolygonInner = ({ points, radius, cornerRadius, edgeRoundness, ...props })
             radius,
         }), ...props }));
 };
-exports.Polygon = remotion_1.Internals.wrapInSchema({
+exports.Polygon = remotion_1.Interactive.withSchema({
     Component: PolygonInner,
+    componentName: '<Polygon>',
     componentIdentity: 'dev.remotion.shapes.Polygon',
     schema: polygonSchema,
     supportsEffects: true,

package/dist/components/rect.js

@@ -34,8 +34,9 @@ const rectSchema = (0, schema_1.makeShapeSchema)({
 const RectInner = ({ width, edgeRoundness, height, cornerRadius, ...props }) => {
     return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Rect>", documentationLink: "https://www.remotion.dev/docs/shapes/rect", ...(0, make_rect_1.makeRect)({ height, width, edgeRoundness, cornerRadius }), ...props }));
 };
-exports.Rect = remotion_1.Internals.wrapInSchema({
+exports.Rect = remotion_1.Interactive.withSchema({
     Component: RectInner,
+    componentName: '<Rect>',
     componentIdentity: 'dev.remotion.shapes.Rect',
     schema: rectSchema,
     supportsEffects: true,

package/dist/components/render-svg.d.ts

@@ -1,8 +1,8 @@
 import type { Instruction } from '@remotion/paths';
 import React from 'react';
-import { type EffectsProp, type HtmlInCanvasPixelDensity, type SequenceControls, type SequenceProps } from 'remotion';
-type ShapeSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'> & {
-    readonly _experimentalControls?: SequenceControls;
+import { type EffectsProp, type HtmlInCanvasPixelDensity, type InteractiveBaseProps, type SequenceControls } from 'remotion';
+type ShapeSequenceProps = InteractiveBaseProps & {
+    readonly controls?: SequenceControls;
 };
 export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd' | 'hidden' | 'name'> & ShapeSequenceProps & {
     readonly debug?: boolean;
@@ -14,7 +14,7 @@ export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'hei
      */
     readonly stack?: string;
 };
-export declare const RenderSvg: ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects, instructions, pixelDensity, durationInFrames, from, freeze, hidden, name, showInTimeline, _experimentalControls: controls, stack, ...props }: {
+export declare const RenderSvg: ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects, instructions, pixelDensity, durationInFrames, from, freeze, hidden, name, showInTimeline, controls, stack, ...props }: {
     readonly defaultName: string;
     readonly documentationLink: string;
     readonly width: number;
@@ -22,8 +22,8 @@ export declare const RenderSvg: ({ defaultName, documentationLink, width, height
     readonly path: string;
     readonly instructions: Instruction[];
     readonly transformOrigin: string;
-} & Omit<React.SVGProps<SVGPathElement>, "d" | "height" | "hidden" | "name" | "width"> & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline"> & {
-    readonly _experimentalControls?: SequenceControls | undefined;
+} & Omit<React.SVGProps<SVGPathElement>, "d" | "height" | "hidden" | "name" | "width"> & InteractiveBaseProps & {
+    readonly controls?: SequenceControls | undefined;
 } & {
     readonly debug?: boolean | undefined;
     readonly effects?: EffectsProp | undefined;

package/dist/components/render-svg.js

@@ -39,7 +39,8 @@ const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const does_react_support_canary_1 = require("../utils/does-react-support-canary");
-const RenderSvg = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, freeze, hidden, name, showInTimeline, _experimentalControls: controls, stack, ...props }) => {
+const HtmlInCanvasWithPrivateProps = remotion_1.HtmlInCanvas;
+const RenderSvg = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, freeze, hidden, name, showInTimeline, controls, stack, ...props }) => {
     const actualStyle = (0, react_1.useMemo)(() => {
         return {
             overflow: 'visible',
@@ -102,11 +103,11 @@ const RenderSvg = ({ defaultName, documentationLink, width, height, path, style,
                     return null;
                 })
                 : null] }));
-    const content = effects.length === 0 ? (svg) : (jsx_runtime_1.jsx(remotion_1.HtmlInCanvas, { ref: setCanvasRef, width: Math.ceil(width), height: Math.ceil(height), effects: effects, pixelDensity: pixelDensity, showInTimeline: false, style: actualStyle, _experimentalControls: controls, children: svg }));
+    const content = effects.length === 0 ? (svg) : (jsx_runtime_1.jsx(HtmlInCanvasWithPrivateProps, { ref: setCanvasRef, width: Math.ceil(width), height: Math.ceil(height), effects: effects, pixelDensity: pixelDensity, showInTimeline: false, style: actualStyle, controls: controls, children: svg }));
     const stackProps = stack === undefined ? null : { stack };
     if (!videoConfig) {
         return svg;
     }
-    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : defaultName, _remotionInternalRefForOutline: outlineRef, _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined, ...stackProps, children: content }));
+    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : defaultName, outlineRef: outlineRef, _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined, ...stackProps, children: content }));
 };
 exports.RenderSvg = RenderSvg;

package/dist/components/schema.d.ts

@@ -1,4 +1,4 @@
-import { type SequenceFieldSchema, type SequenceSchema } from 'remotion';
+import { type InteractivitySchemaField, type InteractivitySchema } from 'remotion';
 export declare const numberField: ({ defaultValue, description, hiddenFromList, max, min, step, }: {
     readonly defaultValue: number | undefined;
     readonly description: string;
@@ -6,18 +6,18 @@ export declare const numberField: ({ defaultValue, description, hiddenFromList,
     readonly max?: number | undefined;
     readonly min?: number | undefined;
     readonly step?: number | undefined;
-}) => SequenceFieldSchema;
+}) => InteractivitySchemaField;
 export declare const booleanField: ({ defaultValue, description, }: {
     readonly defaultValue: boolean;
     readonly description: string;
-}) => SequenceFieldSchema;
+}) => InteractivitySchemaField;
 export declare const colorField: ({ defaultValue, description, }: {
     readonly defaultValue: string | undefined;
     readonly description: string;
-}) => SequenceFieldSchema;
+}) => InteractivitySchemaField;
 export declare const enumField: <T extends string>({ defaultValue, description, variants, }: {
     readonly defaultValue: T;
     readonly description: string;
     readonly variants: readonly T[];
-}) => SequenceFieldSchema;
-export declare const makeShapeSchema: (shapeFields: SequenceSchema) => SequenceSchema;
+}) => InteractivitySchemaField;
+export declare const makeShapeSchema: (shapeFields: InteractivitySchema) => InteractivitySchema;

package/dist/components/schema.js

@@ -41,16 +41,13 @@ const enumField = ({ defaultValue, description, variants, }) => {
 exports.enumField = enumField;
 const makeShapeSchema = (shapeFields) => {
     return {
-        from: remotion_1.Internals.sequenceSchema.from,
-        freeze: remotion_1.Internals.sequenceSchema.freeze,
-        durationInFrames: remotion_1.Internals.sequenceSchema.durationInFrames,
+        ...remotion_1.Internals.baseSchema,
         ...shapeFields,
         fill: (0, exports.colorField)({
             defaultValue: '#0b84ff',
             description: 'Fill',
         }),
-        ...remotion_1.Internals.sequenceVisualStyleSchema,
-        hidden: remotion_1.Internals.sequenceSchema.hidden,
+        ...remotion_1.Internals.transformSchema,
     };
 };
 exports.makeShapeSchema = makeShapeSchema;

package/dist/components/spark.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MakeSparkProps } from '../utils/make-spark';
+import type { AllShapesProps } from './render-svg';
+export type SparkProps = MakeSparkProps & AllShapesProps;
+export declare const Spark: React.FC<SparkProps>;

package/dist/components/spark.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spark = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const make_spark_1 = require("../utils/make-spark");
+const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const sparkSchema = (0, schema_1.makeShapeSchema)({
+    width: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Width',
+        min: 0,
+    }),
+    height: (0, schema_1.numberField)({
+        defaultValue: 140,
+        description: 'Height',
+        min: 0,
+    }),
+    edgeRoundness: (0, schema_1.numberField)({
+        defaultValue: 1,
+        description: 'Edge Roundness',
+        min: 0,
+        step: 0.01,
+    }),
+    cornerRadius: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Corner Radius',
+        min: 0,
+    }),
+});
+/**
+ * @description Renders an SVG element containing a spark.
+ * @param {Number} width The width of the spark.
+ * @param {Number} height The height of the spark.
+ * @param {Number} edgeRoundness Controls the inward curvature between the points. Default 1.
+ * @param {Number} cornerRadius Rounds the four points. Default 0.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/spark)
+ */
+const SparkInner = ({ width, height, edgeRoundness, cornerRadius, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Spark>", documentationLink: "https://www.remotion.dev/docs/shapes/spark", ...(0, make_spark_1.makeSpark)({ width, height, edgeRoundness, cornerRadius }), ...props }));
+};
+exports.Spark = remotion_1.Interactive.withSchema({
+    Component: SparkInner,
+    componentName: '<Spark>',
+    componentIdentity: 'dev.remotion.shapes.Spark',
+    schema: sparkSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Spark);

package/dist/components/star.js

@@ -47,8 +47,9 @@ const StarInner = ({ innerRadius, outerRadius, points, cornerRadius, edgeRoundne
             edgeRoundness,
         }), ...props }));
 };
-exports.Star = remotion_1.Internals.wrapInSchema({
+exports.Star = remotion_1.Interactive.withSchema({
     Component: StarInner,
+    componentName: '<Star>',
     componentIdentity: 'dev.remotion.shapes.Star',
     schema: starSchema,
     supportsEffects: true,

package/dist/components/triangle.js

@@ -34,8 +34,9 @@ const triangleSchema = (0, schema_1.makeShapeSchema)({
 const TriangleInner = ({ length, direction, edgeRoundness, cornerRadius, ...props }) => {
     return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Triangle>", documentationLink: "https://www.remotion.dev/docs/shapes/triangle", ...(0, make_triangle_1.makeTriangle)({ length, direction, edgeRoundness, cornerRadius }), ...props }));
 };
-exports.Triangle = remotion_1.Internals.wrapInSchema({
+exports.Triangle = remotion_1.Interactive.withSchema({
     Component: TriangleInner,
+    componentName: '<Triangle>',
     componentIdentity: 'dev.remotion.shapes.Triangle',
     schema: triangleSchema,
     supportsEffects: true,

package/dist/esm/index.mjs

@@ -1,5 +1,5 @@
 // src/components/arrow.tsx
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals3, Interactive } from "remotion";
 
 // src/utils/make-arrow.ts
 import { serializeInstructions } from "@remotion/paths";
@@ -160,6 +160,7 @@ var doesReactSupportTransformOriginProperty = (version) => {
 
 // src/components/render-svg.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var HtmlInCanvasWithPrivateProps = HtmlInCanvas;
 var RenderSvg = ({
   defaultName,
   documentationLink,
@@ -179,7 +180,7 @@ var RenderSvg = ({
   hidden,
   name,
   showInTimeline,
-  _experimentalControls: controls,
+  controls,
   stack,
   ...props
 }) => {
@@ -266,7 +267,7 @@ var RenderSvg = ({
       }) : null
     ]
   });
-  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx(HtmlInCanvas, {
+  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx(HtmlInCanvasWithPrivateProps, {
     ref: setCanvasRef,
     width: Math.ceil(width),
     height: Math.ceil(height),
@@ -274,7 +275,7 @@ var RenderSvg = ({
     pixelDensity,
     showInTimeline: false,
     style: actualStyle,
-    _experimentalControls: controls,
+    controls,
     children: svg
   });
   const stackProps = stack === undefined ? null : { stack };
@@ -287,11 +288,11 @@ var RenderSvg = ({
     freeze,
     hidden,
     showInTimeline,
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? defaultName,
-    _remotionInternalRefForOutline: outlineRef,
+    outlineRef,
     _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined,
     ...stackProps,
     children: content
@@ -354,16 +355,13 @@ var enumField = ({
 };
 var makeShapeSchema = (shapeFields) => {
   return {
-    from: Internals2.sequenceSchema.from,
-    freeze: Internals2.sequenceSchema.freeze,
-    durationInFrames: Internals2.sequenceSchema.durationInFrames,
+    ...Internals2.baseSchema,
     ...shapeFields,
     fill: colorField({
       defaultValue: "#0b84ff",
       description: "Fill"
     }),
-    ...Internals2.sequenceVisualStyleSchema,
-    hidden: Internals2.sequenceSchema.hidden
+    ...Internals2.transformSchema
   };
 };
 
@@ -424,15 +422,16 @@ var ArrowInner = ({
     ...props
   });
 };
-var Arrow = Internals3.wrapInSchema({
+var Arrow = Interactive.withSchema({
   Component: ArrowInner,
+  componentName: "<Arrow>",
   componentIdentity: "dev.remotion.shapes.Arrow",
   schema: arrowSchema,
   supportsEffects: true
 });
 Internals3.addSequenceStackTraces(Arrow);
 // src/components/callout.tsx
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals4, Interactive as Interactive2 } from "remotion";
 
 // src/utils/make-callout.ts
 import { serializeInstructions as serializeInstructions2 } from "@remotion/paths";
@@ -860,15 +859,16 @@ var CalloutInner = ({
     ...props
   });
 };
-var Callout = Internals4.wrapInSchema({
+var Callout = Interactive2.withSchema({
   Component: CalloutInner,
+  componentName: "<Callout>",
   componentIdentity: "dev.remotion.shapes.Callout",
   schema: calloutSchema,
   supportsEffects: true
 });
 Internals4.addSequenceStackTraces(Callout);
 // src/components/circle.tsx
-import { Internals as Internals5 } from "remotion";
+import { Internals as Internals5, Interactive as Interactive3 } from "remotion";
 
 // src/utils/make-circle.ts
 import { serializeInstructions as serializeInstructions3 } from "@remotion/paths";
@@ -930,15 +930,16 @@ var CircleInner = ({ radius, ...props }) => {
     ...props
   });
 };
-var Circle = Internals5.wrapInSchema({
+var Circle = Interactive3.withSchema({
   Component: CircleInner,
+  componentName: "<Circle>",
   componentIdentity: "dev.remotion.shapes.Circle",
   schema: circleSchema,
   supportsEffects: true
 });
 Internals5.addSequenceStackTraces(Circle);
 // src/components/ellipse.tsx
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals6, Interactive as Interactive4 } from "remotion";
 
 // src/utils/make-ellipse.ts
 import { serializeInstructions as serializeInstructions4 } from "@remotion/paths";
@@ -995,15 +996,16 @@ var EllipseInner = ({ rx, ry, ...props }) => {
     ...props
   });
 };
-var Ellipse = Internals6.wrapInSchema({
+var Ellipse = Interactive4.withSchema({
   Component: EllipseInner,
+  componentName: "<Ellipse>",
   componentIdentity: "dev.remotion.shapes.Ellipse",
   schema: ellipseSchema,
   supportsEffects: true
 });
 Internals6.addSequenceStackTraces(Ellipse);
 // src/components/heart.tsx
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals7, Interactive as Interactive5 } from "remotion";
 
 // src/utils/make-heart.ts
 import { serializeInstructions as serializeInstructions5 } from "@remotion/paths";
@@ -1141,15 +1143,16 @@ var HeartInner = ({
     ...props
   });
 };
-var Heart = Internals7.wrapInSchema({
+var Heart = Interactive5.withSchema({
   Component: HeartInner,
+  componentName: "<Heart>",
   componentIdentity: "dev.remotion.shapes.Heart",
   schema: heartSchema,
   supportsEffects: true
 });
 Internals7.addSequenceStackTraces(Heart);
 // src/components/pie.tsx
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals8, Interactive as Interactive6 } from "remotion";
 
 // src/utils/make-pie.ts
 import { serializeInstructions as serializeInstructions6 } from "@remotion/paths";
@@ -1303,15 +1306,16 @@ var PieInner = ({
     ...props
   });
 };
-var Pie = Internals8.wrapInSchema({
+var Pie = Interactive6.withSchema({
   Component: PieInner,
+  componentName: "<Pie>",
   componentIdentity: "dev.remotion.shapes.Pie",
   schema: pieSchema,
   supportsEffects: true
 });
 Internals8.addSequenceStackTraces(Pie);
 // src/components/polygon.tsx
-import { Internals as Internals9 } from "remotion";
+import { Internals as Internals9, Interactive as Interactive7 } from "remotion";
 
 // src/utils/make-polygon.ts
 import {
@@ -1415,15 +1419,16 @@ var PolygonInner = ({
     ...props
   });
 };
-var Polygon = Internals9.wrapInSchema({
+var Polygon = Interactive7.withSchema({
   Component: PolygonInner,
+  componentName: "<Polygon>",
   componentIdentity: "dev.remotion.shapes.Polygon",
   schema: polygonSchema,
   supportsEffects: true
 });
 Internals9.addSequenceStackTraces(Polygon);
 // src/components/rect.tsx
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals10, Interactive as Interactive8 } from "remotion";
 
 // src/utils/make-rect.ts
 import { serializeInstructions as serializeInstructions8 } from "@remotion/paths";
@@ -1489,22 +1494,243 @@ var RectInner = ({
     ...props
   });
 };
-var Rect = Internals10.wrapInSchema({
+var Rect = Interactive8.withSchema({
   Component: RectInner,
+  componentName: "<Rect>",
   componentIdentity: "dev.remotion.shapes.Rect",
   schema: rectSchema,
   supportsEffects: true
 });
 Internals10.addSequenceStackTraces(Rect);
+// src/components/spark.tsx
+import { Internals as Internals11, Interactive as Interactive9 } from "remotion";
+
+// src/utils/make-spark.ts
+import { serializeInstructions as serializeInstructions9 } from "@remotion/paths";
+var KAPPA = 0.5522847498307936;
+var CAP_HANDLE = 4 / 3;
+var curve = ({
+  to,
+  cp1,
+  cp2
+}) => {
+  return {
+    type: "C",
+    cp1x: cp1[0],
+    cp1y: cp1[1],
+    cp2x: cp2[0],
+    cp2y: cp2[1],
+    x: to[0],
+    y: to[1]
+  };
+};
+var cap = ({
+  from,
+  to,
+  radius,
+  direction
+}) => {
+  if (direction === "top") {
+    return curve({
+      to,
+      cp1: [from[0], from[1] - radius * CAP_HANDLE],
+      cp2: [to[0], to[1] - radius * CAP_HANDLE]
+    });
+  }
+  if (direction === "right") {
+    return curve({
+      to,
+      cp1: [from[0] + radius * CAP_HANDLE, from[1]],
+      cp2: [to[0] + radius * CAP_HANDLE, to[1]]
+    });
+  }
+  if (direction === "bottom") {
+    return curve({
+      to,
+      cp1: [from[0], from[1] + radius * CAP_HANDLE],
+      cp2: [to[0], to[1] + radius * CAP_HANDLE]
+    });
+  }
+  return curve({
+    to,
+    cp1: [from[0] - radius * CAP_HANDLE, from[1]],
+    cp2: [to[0] - radius * CAP_HANDLE, to[1]]
+  });
+};
+var edge = ({
+  from,
+  to,
+  edgeRoundness,
+  direction
+}) => {
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const handleX = Math.abs(dx) * KAPPA * edgeRoundness;
+  const handleY = Math.abs(dy) * KAPPA * edgeRoundness;
+  if (direction === "top-right") {
+    return curve({
+      to,
+      cp1: [from[0], from[1] + handleY],
+      cp2: [to[0] - handleX, to[1]]
+    });
+  }
+  if (direction === "right-bottom") {
+    return curve({
+      to,
+      cp1: [from[0] - handleX, from[1]],
+      cp2: [to[0], to[1] - handleY]
+    });
+  }
+  if (direction === "bottom-left") {
+    return curve({
+      to,
+      cp1: [from[0], from[1] - handleY],
+      cp2: [to[0] + handleX, to[1]]
+    });
+  }
+  return curve({
+    to,
+    cp1: [from[0] + handleX, from[1]],
+    cp2: [to[0], to[1] + handleY]
+  });
+};
+var clampCornerRadius = ({
+  cornerRadius,
+  width,
+  height
+}) => {
+  return Math.min(Math.max(cornerRadius, 0), width / 2, height / 2);
+};
+var makeSpark = ({
+  width,
+  height,
+  edgeRoundness = 1,
+  cornerRadius = 0
+}) => {
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const radius = clampCornerRadius({ cornerRadius, width, height });
+  const top = [centerX, 0];
+  const right = [width, centerY];
+  const bottom = [centerX, height];
+  const left = [0, centerY];
+  const topRight = radius === 0 ? top : [centerX + radius, radius];
+  const rightTop = radius === 0 ? right : [width - radius, centerY - radius];
+  const rightBottom = radius === 0 ? right : [width - radius, centerY + radius];
+  const bottomRight = radius === 0 ? bottom : [centerX + radius, height - radius];
+  const bottomLeft = radius === 0 ? bottom : [centerX - radius, height - radius];
+  const leftBottom = radius === 0 ? left : [radius, centerY + radius];
+  const leftTop = radius === 0 ? left : [radius, centerY - radius];
+  const topLeft = radius === 0 ? top : [centerX - radius, radius];
+  const instructions = [
+    {
+      type: "M",
+      x: topRight[0],
+      y: topRight[1]
+    },
+    edge({
+      from: topRight,
+      to: rightTop,
+      edgeRoundness,
+      direction: "top-right"
+    })
+  ];
+  if (radius > 0) {
+    instructions.push(cap({ from: rightTop, to: rightBottom, radius, direction: "right" }));
+  }
+  instructions.push(edge({
+    from: rightBottom,
+    to: bottomRight,
+    edgeRoundness,
+    direction: "right-bottom"
+  }));
+  if (radius > 0) {
+    instructions.push(cap({ from: bottomRight, to: bottomLeft, radius, direction: "bottom" }));
+  }
+  instructions.push(edge({
+    from: bottomLeft,
+    to: leftBottom,
+    edgeRoundness,
+    direction: "bottom-left"
+  }));
+  if (radius > 0) {
+    instructions.push(cap({ from: leftBottom, to: leftTop, radius, direction: "left" }));
+  }
+  instructions.push(edge({
+    from: leftTop,
+    to: topLeft,
+    edgeRoundness,
+    direction: "left-top"
+  }));
+  if (radius > 0) {
+    instructions.push(cap({ from: topLeft, to: topRight, radius, direction: "top" }));
+  }
+  instructions.push({ type: "Z" });
+  return {
+    path: serializeInstructions9(instructions),
+    width,
+    height,
+    transformOrigin: `${centerX} ${centerY}`,
+    instructions
+  };
+};
+
+// src/components/spark.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var sparkSchema = makeShapeSchema({
+  width: numberField({
+    defaultValue: 100,
+    description: "Width",
+    min: 0
+  }),
+  height: numberField({
+    defaultValue: 140,
+    description: "Height",
+    min: 0
+  }),
+  edgeRoundness: numberField({
+    defaultValue: 1,
+    description: "Edge Roundness",
+    min: 0,
+    step: 0.01
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var SparkInner = ({
+  width,
+  height,
+  edgeRoundness,
+  cornerRadius,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx10(RenderSvg, {
+    defaultName: "<Spark>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/spark",
+    ...makeSpark({ width, height, edgeRoundness, cornerRadius }),
+    ...props
+  });
+};
+var Spark = Interactive9.withSchema({
+  Component: SparkInner,
+  componentName: "<Spark>",
+  componentIdentity: "dev.remotion.shapes.Spark",
+  schema: sparkSchema,
+  supportsEffects: true
+});
+Internals11.addSequenceStackTraces(Spark);
 // src/components/star.tsx
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals12, Interactive as Interactive10 } from "remotion";
 
 // src/utils/make-star.ts
 import {
   PathInternals as PathInternals2,
   reduceInstructions as reduceInstructions2,
   resetPath as resetPath2,
-  serializeInstructions as serializeInstructions9
+  serializeInstructions as serializeInstructions10
 } from "@remotion/paths";
 var star = ({
   centerX,
@@ -1555,7 +1781,7 @@ var makeStar = ({
     edgeRoundness
   });
   const reduced = reduceInstructions2(starPathInstructions);
-  const path = resetPath2(serializeInstructions9(reduced));
+  const path = resetPath2(serializeInstructions10(reduced));
   const boundingBox = PathInternals2.getBoundingBoxFromInstructions(reduced);
   return {
     path,
@@ -1567,7 +1793,7 @@ var makeStar = ({
 };
 
 // src/components/star.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var starSchema = makeShapeSchema({
   points: numberField({
     defaultValue: 5,
@@ -1599,7 +1825,7 @@ var StarInner = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx10(RenderSvg, {
+  return /* @__PURE__ */ jsx11(RenderSvg, {
     defaultName: "<Star>",
     documentationLink: "https://www.remotion.dev/docs/shapes/star",
     ...makeStar({
@@ -1612,18 +1838,19 @@ var StarInner = ({
     ...props
   });
 };
-var Star = Internals11.wrapInSchema({
+var Star = Interactive10.withSchema({
   Component: StarInner,
+  componentName: "<Star>",
   componentIdentity: "dev.remotion.shapes.Star",
   schema: starSchema,
   supportsEffects: true
 });
-Internals11.addSequenceStackTraces(Star);
+Internals12.addSequenceStackTraces(Star);
 // src/components/triangle.tsx
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals13, Interactive as Interactive11 } from "remotion";
 
 // src/utils/make-triangle.ts
-import { serializeInstructions as serializeInstructions10 } from "@remotion/paths";
+import { serializeInstructions as serializeInstructions11 } from "@remotion/paths";
 var makeTriangle = ({
   length,
   direction = "right",
@@ -1683,7 +1910,7 @@ var makeTriangle = ({
       type: "Z"
     }
   ];
-  const path = serializeInstructions10(instructions);
+  const path = serializeInstructions11(instructions);
   return {
     path,
     instructions,
@@ -1694,7 +1921,7 @@ var makeTriangle = ({
 };
 
 // src/components/triangle.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var triangleSchema = makeShapeSchema({
   length: numberField({
     defaultValue: 100,
@@ -1719,23 +1946,25 @@ var TriangleInner = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx11(RenderSvg, {
+  return /* @__PURE__ */ jsx12(RenderSvg, {
     defaultName: "<Triangle>",
     documentationLink: "https://www.remotion.dev/docs/shapes/triangle",
     ...makeTriangle({ length, direction, edgeRoundness, cornerRadius }),
     ...props
   });
 };
-var Triangle = Internals12.wrapInSchema({
+var Triangle = Interactive11.withSchema({
   Component: TriangleInner,
+  componentName: "<Triangle>",
   componentIdentity: "dev.remotion.shapes.Triangle",
   schema: triangleSchema,
   supportsEffects: true
 });
-Internals12.addSequenceStackTraces(Triangle);
+Internals13.addSequenceStackTraces(Triangle);
 export {
   makeTriangle,
   makeStar,
+  makeSpark,
   makeRect,
   makePolygon,
   makePie,
@@ -1746,6 +1975,7 @@ export {
   makeArrow,
   Triangle,
   Star,
+  Spark,
   Rect,
   Polygon,
   Pie,

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { Heart, HeartProps } from './components/heart';
 export { Pie, PieProps } from './components/pie';
 export { Polygon, PolygonProps } from './components/polygon';
 export { Rect, RectProps } from './components/rect';
+export { Spark, SparkProps } from './components/spark';
 export { Star, StarProps } from './components/star';
 export { Triangle, TriangleProps } from './components/triangle';
 export { MakeArrowProps, makeArrow } from './utils/make-arrow';
@@ -17,5 +18,6 @@ export { MakeHeartProps, makeHeart } from './utils/make-heart';
 export { MakePieProps, makePie } from './utils/make-pie';
 export { MakePolygonProps, makePolygon } from './utils/make-polygon';
 export { MakeRectOptions, makeRect } from './utils/make-rect';
+export { MakeSparkProps, makeSpark } from './utils/make-spark';
 export { MakeStarProps, makeStar } from './utils/make-star';
 export { MakeTriangleProps, makeTriangle } from './utils/make-triangle';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makePolygon = exports.makePie = exports.makeHeart = exports.makeEllipse = exports.makeCircle = exports.makeCallout = exports.makeArrow = exports.Triangle = exports.Star = exports.Rect = exports.Polygon = exports.Pie = exports.Heart = exports.Ellipse = exports.Circle = exports.Callout = exports.Arrow = void 0;
+exports.makeTriangle = exports.makeStar = exports.makeSpark = exports.makeRect = exports.makePolygon = exports.makePie = exports.makeHeart = exports.makeEllipse = exports.makeCircle = exports.makeCallout = exports.makeArrow = exports.Triangle = exports.Star = exports.Spark = exports.Rect = exports.Polygon = exports.Pie = exports.Heart = exports.Ellipse = exports.Circle = exports.Callout = exports.Arrow = void 0;
 const arrow_1 = require("./components/arrow");
 Object.defineProperty(exports, "Arrow", { enumerable: true, get: function () { return arrow_1.Arrow; } });
 const callout_1 = require("./components/callout");
@@ -17,6 +17,8 @@ const polygon_1 = require("./components/polygon");
 Object.defineProperty(exports, "Polygon", { enumerable: true, get: function () { return polygon_1.Polygon; } });
 const rect_1 = require("./components/rect");
 Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return rect_1.Rect; } });
+const spark_1 = require("./components/spark");
+Object.defineProperty(exports, "Spark", { enumerable: true, get: function () { return spark_1.Spark; } });
 const star_1 = require("./components/star");
 Object.defineProperty(exports, "Star", { enumerable: true, get: function () { return star_1.Star; } });
 const triangle_1 = require("./components/triangle");
@@ -37,6 +39,8 @@ const make_polygon_1 = require("./utils/make-polygon");
 Object.defineProperty(exports, "makePolygon", { enumerable: true, get: function () { return make_polygon_1.makePolygon; } });
 const make_rect_1 = require("./utils/make-rect");
 Object.defineProperty(exports, "makeRect", { enumerable: true, get: function () { return make_rect_1.makeRect; } });
+const make_spark_1 = require("./utils/make-spark");
+Object.defineProperty(exports, "makeSpark", { enumerable: true, get: function () { return make_spark_1.makeSpark; } });
 const make_star_1 = require("./utils/make-star");
 Object.defineProperty(exports, "makeStar", { enumerable: true, get: function () { return make_star_1.makeStar; } });
 const make_triangle_1 = require("./utils/make-triangle");

package/dist/utils/make-spark.d.ts

@@ -0,0 +1,16 @@
+import type { ShapeInfo } from './shape-info';
+export type MakeSparkProps = {
+    width: number;
+    height: number;
+    edgeRoundness?: number;
+    cornerRadius?: number;
+};
+/**
+ * @description Generates a spark SVG path.
+ * @param {Number} width The width of the spark.
+ * @param {Number} height The height of the spark.
+ * @param {Number} edgeRoundness Controls the inward curvature between the points. Default 1.
+ * @param {Number} cornerRadius Rounds the four points. Default 0.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-spark)
+ */
+export declare const makeSpark: ({ width, height, edgeRoundness, cornerRadius, }: MakeSparkProps) => ShapeInfo;

package/dist/utils/make-spark.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeSpark = void 0;
+const paths_1 = require("@remotion/paths");
+const KAPPA = 0.5522847498307936;
+const CAP_HANDLE = 4 / 3;
+const curve = ({ to, cp1, cp2, }) => {
+    return {
+        type: 'C',
+        cp1x: cp1[0],
+        cp1y: cp1[1],
+        cp2x: cp2[0],
+        cp2y: cp2[1],
+        x: to[0],
+        y: to[1],
+    };
+};
+const cap = ({ from, to, radius, direction, }) => {
+    if (direction === 'top') {
+        return curve({
+            to,
+            cp1: [from[0], from[1] - radius * CAP_HANDLE],
+            cp2: [to[0], to[1] - radius * CAP_HANDLE],
+        });
+    }
+    if (direction === 'right') {
+        return curve({
+            to,
+            cp1: [from[0] + radius * CAP_HANDLE, from[1]],
+            cp2: [to[0] + radius * CAP_HANDLE, to[1]],
+        });
+    }
+    if (direction === 'bottom') {
+        return curve({
+            to,
+            cp1: [from[0], from[1] + radius * CAP_HANDLE],
+            cp2: [to[0], to[1] + radius * CAP_HANDLE],
+        });
+    }
+    return curve({
+        to,
+        cp1: [from[0] - radius * CAP_HANDLE, from[1]],
+        cp2: [to[0] - radius * CAP_HANDLE, to[1]],
+    });
+};
+const edge = ({ from, to, edgeRoundness, direction, }) => {
+    const dx = to[0] - from[0];
+    const dy = to[1] - from[1];
+    const handleX = Math.abs(dx) * KAPPA * edgeRoundness;
+    const handleY = Math.abs(dy) * KAPPA * edgeRoundness;
+    if (direction === 'top-right') {
+        return curve({
+            to,
+            cp1: [from[0], from[1] + handleY],
+            cp2: [to[0] - handleX, to[1]],
+        });
+    }
+    if (direction === 'right-bottom') {
+        return curve({
+            to,
+            cp1: [from[0] - handleX, from[1]],
+            cp2: [to[0], to[1] - handleY],
+        });
+    }
+    if (direction === 'bottom-left') {
+        return curve({
+            to,
+            cp1: [from[0], from[1] - handleY],
+            cp2: [to[0] + handleX, to[1]],
+        });
+    }
+    return curve({
+        to,
+        cp1: [from[0] + handleX, from[1]],
+        cp2: [to[0], to[1] + handleY],
+    });
+};
+const clampCornerRadius = ({ cornerRadius, width, height, }) => {
+    return Math.min(Math.max(cornerRadius, 0), width / 2, height / 2);
+};
+/**
+ * @description Generates a spark SVG path.
+ * @param {Number} width The width of the spark.
+ * @param {Number} height The height of the spark.
+ * @param {Number} edgeRoundness Controls the inward curvature between the points. Default 1.
+ * @param {Number} cornerRadius Rounds the four points. Default 0.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-spark)
+ */
+const makeSpark = ({ width, height, edgeRoundness = 1, cornerRadius = 0, }) => {
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const radius = clampCornerRadius({ cornerRadius, width, height });
+    const top = [centerX, 0];
+    const right = [width, centerY];
+    const bottom = [centerX, height];
+    const left = [0, centerY];
+    const topRight = radius === 0 ? top : [centerX + radius, radius];
+    const rightTop = radius === 0 ? right : [width - radius, centerY - radius];
+    const rightBottom = radius === 0 ? right : [width - radius, centerY + radius];
+    const bottomRight = radius === 0 ? bottom : [centerX + radius, height - radius];
+    const bottomLeft = radius === 0 ? bottom : [centerX - radius, height - radius];
+    const leftBottom = radius === 0 ? left : [radius, centerY + radius];
+    const leftTop = radius === 0 ? left : [radius, centerY - radius];
+    const topLeft = radius === 0 ? top : [centerX - radius, radius];
+    const instructions = [
+        {
+            type: 'M',
+            x: topRight[0],
+            y: topRight[1],
+        },
+        edge({
+            from: topRight,
+            to: rightTop,
+            edgeRoundness,
+            direction: 'top-right',
+        }),
+    ];
+    if (radius > 0) {
+        instructions.push(cap({ from: rightTop, to: rightBottom, radius, direction: 'right' }));
+    }
+    instructions.push(edge({
+        from: rightBottom,
+        to: bottomRight,
+        edgeRoundness,
+        direction: 'right-bottom',
+    }));
+    if (radius > 0) {
+        instructions.push(cap({ from: bottomRight, to: bottomLeft, radius, direction: 'bottom' }));
+    }
+    instructions.push(edge({
+        from: bottomLeft,
+        to: leftBottom,
+        edgeRoundness,
+        direction: 'bottom-left',
+    }));
+    if (radius > 0) {
+        instructions.push(cap({ from: leftBottom, to: leftTop, radius, direction: 'left' }));
+    }
+    instructions.push(edge({
+        from: leftTop,
+        to: topLeft,
+        edgeRoundness,
+        direction: 'left-top',
+    }));
+    if (radius > 0) {
+        instructions.push(cap({ from: topLeft, to: topRight, radius, direction: 'top' }));
+    }
+    instructions.push({ type: 'Z' });
+    return {
+        path: (0, paths_1.serializeInstructions)(instructions),
+        width,
+        height,
+        transformOrigin: `${centerX} ${centerY}`,
+        instructions,
+    };
+};
+exports.makeSpark = makeSpark;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/shapes"
 	},
 	"name": "@remotion/shapes",
-	"version": "4.0.478",
+	"version": "4.0.481",
 	"description": "Generate SVG shapes",
 	"main": "dist/index.js",
 	"scripts": {
@@ -34,7 +34,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.478",
+		"@remotion/eslint-config-internal": "4.0.481",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -51,8 +51,8 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/paths": "4.0.478",
-		"remotion": "4.0.478"
+		"@remotion/paths": "4.0.481",
+		"remotion": "4.0.481"
 	},
 	"homepage": "https://www.remotion.dev/docs/shapes"
 }