+
+ );
+}
diff --git a/app/src/composition/Component.tsx b/app/src/composition/Component.tsx
new file mode 100644
index 00000000..87111b11
--- /dev/null
+++ b/app/src/composition/Component.tsx
@@ -0,0 +1,62 @@
+import { Sequence, useVideoConfig } from "remotion";
+import { ReactNode } from "react";
+import { components } from "./components";
+import { Wrappers } from "./wrappers";
+import { useComponent, useCompositionStore } from ".";
+
+export const Component = ({ id }: { id: string }) => {
+ return (
+
+ {order.map((i) => {
+ const item = items[i];
+ return (
+
+
+ onClick(i)}
+ className={`flex flex-col w-full justify-center h-14 space-y-1 items-center hover:scale-105 duration-150 p-2 cursor-pointer ${
+ selected === i ? "bg-primary text-primary-content" : "hover:bg-base-300"
+ }`}
+ >
+
+ );
+ })}
+
+
+ {typeof item.title === "string" ? item.title :
+
+
+ {
+ e.stopPropagation();
+ setSelected(id);
+ }}
+ style={{
+ overflow: "hidden",
+ width: comp.width,
+ height: comp.height,
+ transform: `translate(${comp.x}px, ${comp.y}px) rotate(${comp.rotation}deg)`,
+ opacity: comp.opacity,
+ position: "absolute",
+ }}
+ >
+ <>{children}
+
+
+ Invalid props
+
+ );
+};
diff --git a/app/src/composition/Composition.tsx b/app/src/composition/Composition.tsx
new file mode 100644
index 00000000..e6fac38d
--- /dev/null
+++ b/app/src/composition/Composition.tsx
@@ -0,0 +1,24 @@
+import { AbsoluteFill } from "remotion";
+import { Component } from "./Component";
+import { CompositionProvider, Template, useCompositionStore } from "./types";
+
+export const Composition = ({ setComponent, template }: { setComponent: (c?: string) => void; template: Template }) => {
+ return (
+ {error}
+
+ {bars.map((v, i) => {
+ return (
+
+ );
+ })}
+
+ );
+ },
+};
diff --git a/app/src/composition/components/components/Confetti/index.tsx b/app/src/composition/components/components/Confetti/index.tsx
new file mode 100644
index 00000000..0e77c0ce
--- /dev/null
+++ b/app/src/composition/components/components/Confetti/index.tsx
@@ -0,0 +1,46 @@
+import { Color } from "../../../../inputs";
+import { z } from "zod";
+import { Component } from "../..";
+import Confetti from "./src";
+import { TbConfetti } from "react-icons/tb";
+
+export const ConfettiProps = z.object({
+ colors: z.array(Color).optional(),
+ count: z.number().optional(),
+ angle: z.number().optional(),
+ spread: z.number().optional(),
+ startVelocity: z.number().optional(),
+ scalar: z.number().optional(),
+ ticks: z.number().optional(),
+ x: z.number().optional(),
+ y: z.number().optional(),
+});
+export type ConfettiProps = z.infer
+ {src.map((v, i) => {
+ const anim =
+ animationDuration && animationStart !== undefined
+ ? spring({
+ frame: frame - animationStart * fps - ((animationDuration * fps) / src.length) * i,
+ fps,
+ })
+ : 1;
+ return (
+
+ );
+ })}
+
+ );
+ else if (type === "line") {
+ const anim =
+ animationDuration && animationStart !== undefined
+ ? spring({
+ frame: frame - animationStart * fps,
+ fps,
+ durationInFrames: animationDuration * fps,
+ config: {
+ damping: 100,
+ },
+ })
+ : 1;
+ return (
+
+ );
+ }
+ return null;
+ },
+};
diff --git a/app/src/composition/components/components/Image.tsx b/app/src/composition/components/components/Image.tsx
new file mode 100644
index 00000000..3e296ff5
--- /dev/null
+++ b/app/src/composition/components/components/Image.tsx
@@ -0,0 +1,35 @@
+import { Img } from "remotion";
+import { getSrc } from "../../helpers/getSrc";
+import { Component } from "..";
+import { z } from "zod";
+import { ObjectFit } from "../../../inputs";
+import { FaImage } from "react-icons/fa";
+
+const ImageProps = z.object({
+ src: z.string().url(),
+ objectFit: ObjectFit.optional(),
+});
+type ImageProps = z.infer
+
+ {type === "iphone" &&
+ );
+ },
+};
diff --git a/packages/components/src/components/Mockup/ipad.tsx b/app/src/composition/components/components/Mockup/ipad.tsx
similarity index 100%
rename from packages/components/src/components/Mockup/ipad.tsx
rename to app/src/composition/components/components/Mockup/ipad.tsx
diff --git a/packages/components/src/components/Mockup/iphone14.tsx b/app/src/composition/components/components/Mockup/iphone14.tsx
similarity index 100%
rename from packages/components/src/components/Mockup/iphone14.tsx
rename to app/src/composition/components/components/Mockup/iphone14.tsx
diff --git a/packages/components/src/components/Mockup/macbook.tsx b/app/src/composition/components/components/Mockup/macbook.tsx
similarity index 100%
rename from packages/components/src/components/Mockup/macbook.tsx
rename to app/src/composition/components/components/Mockup/macbook.tsx
diff --git a/packages/components/src/components/Mockup/macbook2.tsx b/app/src/composition/components/components/Mockup/macbook2.tsx
similarity index 100%
rename from packages/components/src/components/Mockup/macbook2.tsx
rename to app/src/composition/components/components/Mockup/macbook2.tsx
diff --git a/packages/components/src/components/Mockup/monitor.tsx b/app/src/composition/components/components/Mockup/monitor.tsx
similarity index 100%
rename from packages/components/src/components/Mockup/monitor.tsx
rename to app/src/composition/components/components/Mockup/monitor.tsx
diff --git a/packages/components/src/components/Mockup/samsung.tsx b/app/src/composition/components/components/Mockup/samsung.tsx
similarity index 100%
rename from packages/components/src/components/Mockup/samsung.tsx
rename to app/src/composition/components/components/Mockup/samsung.tsx
diff --git a/packages/components/src/components/Mockup/watch.tsx b/app/src/composition/components/components/Mockup/watch.tsx
similarity index 100%
rename from packages/components/src/components/Mockup/watch.tsx
rename to app/src/composition/components/components/Mockup/watch.tsx
diff --git a/app/src/composition/components/components/Path.tsx b/app/src/composition/components/components/Path.tsx
new file mode 100644
index 00000000..a654576b
--- /dev/null
+++ b/app/src/composition/components/components/Path.tsx
@@ -0,0 +1,51 @@
+import { evolvePath } from "@remotion/paths";
+import { z } from "zod";
+import { Color } from "../../../inputs";
+import { Component } from "..";
+import { IoIosBrush } from "react-icons/io";
+
+export const PathProps = z.object({
+ path: z.string(),
+ stroke: Color.optional(),
+ strokeWidth: z.number().min(0).optional(),
+ viewBoxX: z.number().optional(),
+ viewBoxY: z.number().optional(),
+ viewBoxHeight: z.number().min(0).optional(),
+ viewBoxWidth: z.number().min(0).optional(),
+ fill: Color.optional(),
+ isRound: z.boolean().optional(),
+});
+
+export type PathProps = z.infer
+
+
+ );
+
+ if (type === "spotify")
+ return (
+
+
+ );
+ if (type === "circle") {
+ const size = Math.min(width, height);
+ const radius = (size - (barWidth || 1)) / 2;
+ const circumference = 2 * Math.PI * radius;
+ const dash = circumference * (progress / 100);
+ return (
+
+ );
+ }
+ if (type === "square")
+ return (
+
+
+
+
+
+
+
+ {[1, 2, 3, 4].map((n) => {
+ const horizontal = n % 2 === 0;
+ const left = topRight ? n < 3 : n > 2;
+ const top = n < 3;
+ return (
+
+ );
+ })}
+
+ );
+ return null;
+ },
+};
diff --git a/app/src/composition/components/components/QRCode.tsx b/app/src/composition/components/components/QRCode.tsx
new file mode 100644
index 00000000..02006af4
--- /dev/null
+++ b/app/src/composition/components/components/QRCode.tsx
@@ -0,0 +1,32 @@
+import ReactQRCode from "react-qr-code";
+import { z } from "zod";
+import { Color } from "../../../inputs";
+import { Component } from "..";
+import { IoQrCodeOutline } from "react-icons/io5";
+
+export const QRCodeProps = z.object({
+ text: z.string().optional(),
+ color: Color.optional(),
+ bg: Color.optional(),
+});
+export type QRCodeProps = z.infer
+
+ );
+ },
+};
diff --git a/app/src/composition/components/components/Transcription/index.tsx b/app/src/composition/components/components/Transcription/index.tsx
new file mode 100644
index 00000000..0e20ac09
--- /dev/null
+++ b/app/src/composition/components/components/Transcription/index.tsx
@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState } from "react";
+import { continueRender, delayRender, useCurrentFrame, useVideoConfig } from "remotion";
+import { useTextStyles } from "../../../helpers/useTextStyles";
+import z from "zod";
+import { TextStyle, TranscriptionAnimationTypes } from "../../../../inputs";
+import { Component } from "../..";
+import { MdSubtitles } from "react-icons/md";
+import { useComponent } from "../../../types";
+
+export const TranscriptionWord = z.object({
+ text: z.string(),
+ start: z.number(),
+ end: z.number(),
+});
+export type TranscriptionWord = z.infer+ {text} +
+
+
+ );
+ },
+};
diff --git a/app/src/composition/components/components/Video.tsx b/app/src/composition/components/components/Video.tsx
new file mode 100644
index 00000000..da9ada48
--- /dev/null
+++ b/app/src/composition/components/components/Video.tsx
@@ -0,0 +1,54 @@
+import { ObjectFit } from "../../../inputs";
+import { OffthreadVideo, useVideoConfig, Video as RemotionVideo } from "remotion";
+import { z } from "zod";
+import { Component } from "..";
+import { getSrc } from "../../helpers/getSrc";
+import { MdVideoLibrary } from "react-icons/md";
+
+export const VideoProps = z.object({
+ src: z.string().url().optional(),
+ objectFit: ObjectFit.optional(),
+ startFrom: z.number().min(0).optional(),
+ muted: z.boolean().optional(),
+ volume: z.number().min(0).max(1).optional(),
+ offthread: z.boolean().optional(),
+});
+export type VideoProps = z.infer+ + {playedSubs.map((item, i) => { + let isHighlighted = false; + if (animationType === "previous-text") isHighlighted = true; + else if (animationType === "current-word" && i === playedSubs.length - 1) isHighlighted = true; + return ( + + {item.text} + + ); + })} + + {unPlayedSubs.map((item, i) => ( + {item.text} + ))} +
+ +
+ <>{children}
+
+ );
+ },
+};
diff --git a/app/src/composition/wrappers/Freeze.tsx b/app/src/composition/wrappers/Freeze.tsx
new file mode 100644
index 00000000..759e4bdb
--- /dev/null
+++ b/app/src/composition/wrappers/Freeze.tsx
@@ -0,0 +1,21 @@
+import { Freeze as RemotionFreeze } from "remotion";
+import { z } from "zod";
+import { WrapperType } from ".";
+
+const Freeze = z.object({
+ frame: z.number().optional(),
+});
+type Freeze = z.infer
+
+ onChange(e.target.checked)}
+ />
+
+ );
+ },
+};
diff --git a/app/src/inputs/Color.tsx b/app/src/inputs/Color.tsx
new file mode 100644
index 00000000..486dd9b0
--- /dev/null
+++ b/app/src/inputs/Color.tsx
@@ -0,0 +1,52 @@
+import { z } from "zod";
+import { Input } from ".";
+
+const percentToHex = (p: number) => {
+ const intValue = Math.round((p / 100) * 255); // map percent to nearest integer (0 - 255)
+ const hexValue = intValue.toString(16); // get hexadecimal representation
+ return hexValue.padStart(2, "0").toUpperCase(); // format with leading 0 and upper case characters
+};
+
+const normalize = (val: number, max: number, min: number) => {
+ return (val - min) / (max - min);
+};
+const hexToPercent = (alpha: string) => {
+ return Math.round(normalize(parseInt(alpha, 16), 255, 0) * 100);
+};
+
+export const Color = z.string().startsWith("#").max(9);
+
+export const color: Input
+
+
+ );
+ },
+};
diff --git a/app/src/inputs/Gif.tsx b/app/src/inputs/Gif.tsx
new file mode 100644
index 00000000..0b812481
--- /dev/null
+++ b/app/src/inputs/Gif.tsx
@@ -0,0 +1,20 @@
+import { z } from "zod";
+import { Input } from ".";
+
+export const gif: Input
+ onChange(e.target.value + alpha)} />
+ onChange(e.target.value + alpha)}
+ disabled={disabled}
+ style={{ margin: "0 10px" }}
+ />
+
+
+ onChange(color + (e.target.value ? percentToHex(Number(e.target.value)) : ""))}
+ />
+ %
+
+
+
+ onChange(e.target.value)}
+ />
+
+ );
+ },
+};
diff --git a/app/src/inputs/Image.tsx b/app/src/inputs/Image.tsx
new file mode 100644
index 00000000..bec2878c
--- /dev/null
+++ b/app/src/inputs/Image.tsx
@@ -0,0 +1,19 @@
+import { z } from "zod";
+import { Input } from ".";
+
+export const image: Input
+
+ onChange(e.target.value)}
+ />
+
+ );
+ },
+};
diff --git a/app/src/inputs/Json.tsx b/app/src/inputs/Json.tsx
new file mode 100644
index 00000000..273edab6
--- /dev/null
+++ b/app/src/inputs/Json.tsx
@@ -0,0 +1,19 @@
+import { z } from "zod";
+import { Input } from ".";
+
+export const json: Input
+
+