@motius-invi/invi-remotion-templates 0.0.3

package/dist/Root.d.ts

@@ -0,0 +1 @@
+export declare const RemotionRoot: () => import("react/jsx-runtime").JSX.Element;

package/dist/Root.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Composition } from "remotion";
+import { TEMPLATE_REGISTRY } from "./registry";
+export const RemotionRoot = () => {
+    return (_jsx(_Fragment, { children: TEMPLATE_REGISTRY.map((template) => (_jsx(Composition, { id: template.id, component: template.component, durationInFrames: template.durationInFrames, fps: template.fps, width: template.width, height: template.height, defaultProps: template.defaultProps }, template.id))) }));
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import "@/shared/styles/global.css";
+export { RemotionRoot } from "./Root";
+export { TEMPLATE_REGISTRY } from "./registry";
+export { TestTemplate } from "./templates/test-template";
+export { MovingPoster001 } from "./templates/moving-poster-001";

package/dist/index.js

@@ -0,0 +1,5 @@
+import "@/shared/styles/global.css";
+export { RemotionRoot } from "./Root";
+export { TEMPLATE_REGISTRY } from "./registry";
+export { TestTemplate } from "./templates/test-template";
+export { MovingPoster001 } from "./templates/moving-poster-001";

package/dist/registry.d.ts

@@ -0,0 +1,37 @@
+import type { FC } from "react";
+export declare const testTemplateDefinition: {
+    id: string;
+    component: ({ message }: import("./templates/test-template/types").TestTemplateProps) => import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        message: string;
+    };
+    durationInFrames: number;
+    fps: number;
+    width: number;
+    height: number;
+};
+export declare const movingPoster001Definition: {
+    id: string;
+    component: ({ groomName, brideName, weddingDate, venue, tagline, }: import("./templates/moving-poster-001/types").MovingPoster001Props) => import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        groomName: string;
+        brideName: string;
+        weddingDate: string;
+        venue: string;
+        tagline: string;
+    };
+    durationInFrames: number;
+    fps: number;
+    width: number;
+    height: number;
+};
+export type AnyTemplateDefinition = {
+    id: string;
+    component: FC<Record<string, unknown>>;
+    defaultProps: Record<string, unknown>;
+    durationInFrames: number;
+    fps: number;
+    width: number;
+    height: number;
+};
+export declare const TEMPLATE_REGISTRY: AnyTemplateDefinition[];

package/dist/registry.js

@@ -0,0 +1,26 @@
+import { TestTemplate } from "@/templates/test-template";
+import { defaultProps as testTemplateDefaultProps } from "@/templates/test-template/defaultProps";
+import { MovingPoster001 } from "@/templates/moving-poster-001";
+import { defaultProps as movingPoster001DefaultProps } from "@/templates/moving-poster-001/defaultProps";
+export const testTemplateDefinition = {
+    id: "test-template",
+    component: TestTemplate,
+    defaultProps: testTemplateDefaultProps,
+    durationInFrames: 90,
+    fps: 30,
+    width: 1280,
+    height: 720,
+};
+export const movingPoster001Definition = {
+    id: "moving-poster-001",
+    component: MovingPoster001,
+    defaultProps: movingPoster001DefaultProps,
+    durationInFrames: 150,
+    fps: 30,
+    width: 1080,
+    height: 1920,
+};
+export const TEMPLATE_REGISTRY = [
+    testTemplateDefinition,
+    movingPoster001Definition,
+];

package/dist/shared/constants/template.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+export type TemplateDefinition<TProps extends Record<string, unknown>> = {
+    id: string;
+    component: FC<TProps>;
+    defaultProps: TProps;
+    durationInFrames: number;
+    fps: number;
+    width: number;
+    height: number;
+};

package/dist/shared/constants/template.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/shared/utils/clamp.js

@@ -0,0 +1,3 @@
+export const clamp = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};

package/dist/shared/utils/fadeIn.d.ts

@@ -0,0 +1,7 @@
+type FadeInOptions = {
+    frame: number;
+    start?: number;
+    duration?: number;
+};
+export declare const fadeIn: ({ frame, start, duration, }: FadeInOptions) => number;
+export {};

package/dist/shared/utils/fadeIn.js

@@ -0,0 +1,7 @@
+import { interpolate } from "remotion";
+export const fadeIn = ({ frame, start = 0, duration = 20, }) => {
+    return interpolate(frame, [start, start + duration], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+};

package/dist/shared/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { clamp } from "./clamp";
+export { fadeIn } from "./fadeIn";

package/dist/shared/utils/index.js

@@ -0,0 +1,2 @@
+export { clamp } from "./clamp";
+export { fadeIn } from "./fadeIn";

package/dist/templates/moving-poster-001/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import type { MovingPoster001Props } from "./types";
+export declare const defaultProps: MovingPoster001Props;

package/dist/templates/moving-poster-001/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+    groomName: "민수",
+    brideName: "지연",
+    weddingDate: "2026. 05. 30 SAT 14:00",
+    venue: "그랜드 웨딩홀 3F 그랜드볼룸",
+    tagline: "Together Forever",
+};

package/dist/templates/moving-poster-001/index.d.ts

@@ -0,0 +1,2 @@
+import type { MovingPoster001Props } from "./types";
+export declare const MovingPoster001: ({ groomName, brideName, weddingDate, venue, tagline, }: MovingPoster001Props) => import("react/jsx-runtime").JSX.Element;

package/dist/templates/moving-poster-001/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig, } from "remotion";
+import { fadeIn } from "@/shared/utils/fadeIn";
+export const MovingPoster001 = ({ groomName, brideName, weddingDate, venue, tagline, }) => {
+    const frame = useCurrentFrame();
+    const { durationInFrames } = useVideoConfig();
+    const backgroundScale = interpolate(frame, [0, durationInFrames], [1, 1.08], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+    const taglineOpacity = fadeIn({ frame, start: 12, duration: 30 });
+    const namesOpacity = fadeIn({ frame, start: 24, duration: 36 });
+    const namesTranslateY = interpolate(frame, [24, 54], [40, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+    const detailsOpacity = fadeIn({ frame, start: 48, duration: 36 });
+    const dividerWidth = interpolate(frame, [42, 72], [0, 120], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+    return (_jsxs(AbsoluteFill, { className: "overflow-hidden bg-[#f5f0ea] text-foreground", children: [_jsxs(AbsoluteFill, { style: {
+                    transform: `scale(${backgroundScale})`,
+                }, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-[#ebe3d8] via-[#f7f2ec] to-[#d8cfc4]" }), _jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.55),transparent_55%)]" }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/20 to-transparent" })] }), _jsxs(AbsoluteFill, { className: "flex flex-col items-center justify-center px-16 text-center", children: [_jsx("p", { className: "mb-10 text-sm uppercase tracking-[0.45em] text-accent", style: {
+                            fontFamily: "var(--font-sans)",
+                            opacity: taglineOpacity,
+                        }, children: tagline }), _jsxs("div", { style: {
+                            opacity: namesOpacity,
+                            transform: `translateY(${namesTranslateY}px)`,
+                        }, children: [_jsx("p", { className: "text-[72px] leading-none text-foreground", style: { fontFamily: "var(--font-serif)" }, children: groomName }), _jsx("p", { className: "my-6 text-3xl tracking-[0.35em] text-muted", style: { fontFamily: "var(--font-serif)" }, children: "&" }), _jsx("p", { className: "text-[72px] leading-none text-foreground", style: { fontFamily: "var(--font-serif)" }, children: brideName })] }), _jsx("div", { className: "my-12 h-px bg-accent", style: { width: dividerWidth, opacity: detailsOpacity } }), _jsxs("div", { style: { opacity: detailsOpacity }, children: [_jsx("p", { className: "text-2xl tracking-[0.12em] text-foreground", style: { fontFamily: "var(--font-sans)" }, children: weddingDate }), _jsx("p", { className: "mt-5 max-w-[760px] text-xl leading-relaxed text-muted", style: { fontFamily: "var(--font-sans)" }, children: venue })] })] })] }));
+};

package/dist/templates/moving-poster-001/schema.d.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+export declare const schema: z.ZodObject<{
+    groomName: z.ZodString;
+    brideName: z.ZodString;
+    weddingDate: z.ZodString;
+    venue: z.ZodString;
+    tagline: z.ZodString;
+}, z.core.$strip>;

package/dist/templates/moving-poster-001/schema.js

@@ -0,0 +1,8 @@
+import { z } from "zod";
+export const schema = z.object({
+    groomName: z.string(),
+    brideName: z.string(),
+    weddingDate: z.string(),
+    venue: z.string(),
+    tagline: z.string(),
+});

package/dist/templates/moving-poster-001/types.d.ts

@@ -0,0 +1,3 @@
+import type { z } from "zod";
+import type { schema } from "./schema";
+export type MovingPoster001Props = z.infer<typeof schema>;

package/dist/templates/moving-poster-001/types.js

@@ -0,0 +1 @@
+export {};

package/dist/templates/test-template/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import type { TestTemplateProps } from "./types";
+export declare const defaultProps: TestTemplateProps;

package/dist/templates/test-template/defaultProps.js

@@ -0,0 +1,3 @@
+export const defaultProps = {
+    message: "Test Template — Remotion Studio 연동 확인",
+};

package/dist/templates/test-template/index.d.ts

@@ -0,0 +1,2 @@
+import type { TestTemplateProps } from "./types";
+export declare const TestTemplate: ({ message }: TestTemplateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/templates/test-template/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AbsoluteFill, useCurrentFrame } from "remotion";
+import { fadeIn } from "@/shared/utils/fadeIn";
+export const TestTemplate = ({ message }) => {
+    const frame = useCurrentFrame();
+    const opacity = fadeIn({ frame, start: 10, duration: 24 });
+    return (_jsx(AbsoluteFill, { className: "flex items-center justify-center bg-background text-foreground", children: _jsx("p", { className: "text-5xl font-bold tracking-tight", style: { opacity }, children: message }) }));
+};

package/dist/templates/test-template/schema.d.ts

@@ -0,0 +1,4 @@
+import { z } from "zod";
+export declare const schema: z.ZodObject<{
+    message: z.ZodString;
+}, z.core.$strip>;

package/dist/templates/test-template/schema.js

@@ -0,0 +1,4 @@
+import { z } from "zod";
+export const schema = z.object({
+    message: z.string(),
+});

package/dist/templates/test-template/types.d.ts

@@ -0,0 +1,3 @@
+import type { z } from "zod";
+import type { schema } from "./schema";
+export type TestTemplateProps = z.infer<typeof schema>;

package/dist/templates/test-template/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@motius-invi/invi-remotion-templates",
+  "version": "0.0.3",
+  "private": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/shared/styles"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "studio": "remotion studio src/remotion-entry.ts",
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "remotion": "^4.0.0",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@remotion/cli": "^4.0.469",
+    "@remotion/tailwind-v4": "^4.0.469",
+    "@tailwindcss/postcss": "^4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "remotion": "^4.0.469",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "zod": "4.3.6"
+  }
+}

package/src/shared/styles/global.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+:root {
+  --background: #faf9f7;
+  --foreground: #1a1a1a;
+  --muted: #6b6b6b;
+  --accent: #c9a96e;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --font-serif: "Georgia", "Times New Roman", serif;
+  --font-sans: "Helvetica Neue", Arial, sans-serif;
+}