upload

.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+videos/
+jobs/
+*.log
+.env
+.env.local

Dockerfile

@@ -0,0 +1,54 @@
+FROM node:20-slim
+
+# Install FFmpeg and Chromium dependencies
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    chromium \
+    fonts-liberation \
+    libasound2 \
+    libatk-bridge2.0-0 \
+    libatk1.0-0 \
+    libatspi2.0-0 \
+    libcups2 \
+    libdbus-1-3 \
+    libdrm2 \
+    libgbm1 \
+    libgtk-3-0 \
+    libnspr4 \
+    libnss3 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxfixes3 \
+    libxrandr2 \
+    xdg-utils \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set Chromium path for Puppeteer
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install --production
+
+# Copy source files
+COPY . .
+
+# Build TypeScript
+RUN npm run build
+
+# Create directories for videos and jobs
+RUN mkdir -p videos jobs
+
+# Expose port 7860 (Hugging Face default)
+EXPOSE 7860
+
+# Set environment variables
+ENV PORT=7860
+ENV NODE_ENV=production
+
+# Start the server
+CMD ["npm", "start"]

README.md

@@ -1,10 +1,63 @@
----
-title: Veditor Render Server
-emoji: ⚡
-colorFrom: blue
-colorTo: red
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# VEditor Render Server
+
+Standalone render server for video generation using Remotion.
+
+## Deploy to Hugging Face Spaces
+
+1. Create a new Space with "Docker" SDK
+2. Push this folder to the Space
+3. Wait for build to complete
+
+## API Endpoints
+
+### POST /render
+Start a new render job.
+
+**Request:**
+```json
+{
+  "design": { ... },
+  "options": {
+    "fps": 30,
+    "width": 1920,
+    "height": 1080,
+    "format": "mp4"
+  }
+}
+```
+
+**Response:**
+```json
+{
+  "jobId": "abc123",
+  "status": "pending"
+}
+```
+
+### GET /render/:jobId
+Check render status.
+
+**Response:**
+```json
+{
+  "jobId": "abc123",
+  "status": "completed",
+  "progress": 100,
+  "outputUrl": "/videos/abc123.mp4"
+}
+```
+
+### GET /videos/:filename
+Download rendered video.
+
+## Local Development
+
+```bash
+npm install
+npm run dev
+```
+
+## Environment Variables
+
+- `PORT`: Server port (default: 7860)
+- `CONCURRENCY`: Render threads (default: 4)

package.json

@@ -0,0 +1,38 @@
+{
+    "name": "veditor-render-server",
+    "version": "1.0.0",
+    "description": "Standalone render server for VEditor using Remotion",
+    "main": "dist/server.js",
+    "scripts": {
+        "dev": "tsx watch src/server.ts",
+        "build": "tsc",
+        "start": "node dist/server.js",
+        "render": "tsx src/render.ts"
+    },
+    "dependencies": {
+        "@designcombo/events": "^0.0.1",
+        "@designcombo/state": "^0.0.1",
+        "@designcombo/transitions": "^0.0.1",
+        "@designcombo/types": "^0.0.1",
+        "@remotion/bundler": "4.0.407",
+        "@remotion/renderer": "4.0.407",
+        "cors": "^2.8.5",
+        "express": "^4.18.2",
+        "lodash": "^4.17.21",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "remotion": "4.0.407",
+        "uuid": "^9.0.0",
+        "zustand": "^4.4.7"
+    },
+    "devDependencies": {
+        "@types/cors": "^2.8.17",
+        "@types/express": "^4.17.21",
+        "@types/lodash": "^4.14.202",
+        "@types/node": "^20.10.0",
+        "@types/react": "^18.2.43",
+        "@types/uuid": "^9.0.7",
+        "tsx": "^4.7.0",
+        "typescript": "^5.3.2"
+    }
+}

remotion/Root.tsx

@@ -0,0 +1,96 @@
+/**
+ * Remotion Root - Entry point for Render Server
+ * 
+ * Uses SSRComposition from the copied player folder.
+ */
+
+import React from "react";
+import { Composition } from "remotion";
+import { SSRComposition } from "../../../src/player/ssr-composition";
+
+// Default design types
+interface IDesign {
+    id?: string;
+    size?: { width: number; height: number };
+    fps?: number;
+    trackItemIds?: string[];
+    trackItemsMap?: Record<string, unknown>;
+    tracks?: unknown[];
+    transitionIds?: string[];
+    transitionsMap?: Record<string, unknown>;
+    duration?: number;
+    background?: string | { value: string };
+}
+
+interface ITrackItem {
+    display?: { from: number; to: number };
+}
+
+// Default empty design
+const defaultDesign: IDesign = {
+    id: "default",
+    size: { width: 1920, height: 1080 },
+    fps: 30,
+    trackItemIds: [],
+    trackItemsMap: {},
+    tracks: [],
+    transitionIds: [],
+    transitionsMap: {},
+    duration: 5000,
+};
+
+// Calculate actual duration from track items
+const calculateDesignDuration = (design: IDesign): number => {
+    const trackItems = Object.values(design.trackItemsMap || {}) as ITrackItem[];
+
+    if (trackItems.length === 0) {
+        return design.duration || 5000;
+    }
+
+    const maxEndTime = Math.max(
+        ...trackItems.map(item => item.display?.to || 0)
+    );
+
+    return maxEndTime || design.duration || 5000;
+};
+
+export const RemotionRoot: React.FC = () => {
+    return (
+        <>
+            <Composition
+                id="VEditor"
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                component={SSRComposition as React.ComponentType<any>}
+                durationInFrames={150}
+                fps={30}
+                width={1920}
+                height={1080}
+                defaultProps={{
+                    design: defaultDesign,
+                }}
+                calculateMetadata={async ({ props }) => {
+                    const design = (props as { design: IDesign }).design;
+                    const fps = design.fps || 30;
+
+                    const durationMs = calculateDesignDuration(design);
+                    const durationInFrames = Math.max(1, Math.ceil((durationMs / 1000) * fps));
+
+                    console.log('[Remotion] Metadata:', {
+                        durationMs,
+                        durationInFrames,
+                        fps,
+                        width: design.size?.width || 1920,
+                        height: design.size?.height || 1080,
+                    });
+
+                    return {
+                        durationInFrames,
+                        fps,
+                        width: design.size?.width || 1920,
+                        height: design.size?.height || 1080,
+                    };
+                }}
+            />
+        </>
+    );
+};

remotion/index.tsx

@@ -0,0 +1,8 @@
+/**
+ * Remotion Entry Point for Render Server
+ */
+
+import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+
+registerRoot(RemotionRoot);

src/player/animated/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+
+export { presets } from "./presets";

src/player/animated/presets.ts

@@ -0,0 +1,629 @@
+import { Easing } from "remotion";
+import { Animation } from "./types";
+
+// Define preset names
+export type PresetName =
+  | "fadeIn"
+  | "fadeOut"
+  | "scaleIn"
+  | "scaleOut"
+  | "slideInRight"
+  | "slideInLeft"
+  | "slideInTop"
+  | "slideInBottom"
+  | "slideOutRight"
+  | "slideOutLeft"
+  | "slideOutTop"
+  | "slideOutBottom"
+  | "rotateIn"
+  | "flipIn"
+  | "shakeHorizontalIn"
+  | "shakeVerticalIn"
+  | "shakeHorizontalOut"
+  | "shakeVerticalOut"
+  | "typeWriterIn"
+  | "typeWriterOut"
+  | "animatedTextIn"
+  | "sunnyMorningsAnimationIn"
+  | "dominoDreamsIn"
+  // | "thursdayIn"
+  | "greatThinkersAnimationIn"
+  | "beautifulQuestionsAnimationIn"
+  | "madeWithLoveAnimationIn"
+  // | "risingStrongAnimationIn"
+  | "realityIsBrokenAnimationIn"
+  | "animatedTextOut"
+  | "sunnyMorningsAnimationOut"
+  | "dominoDreamsAnimationOut"
+  | "beautifulQuestionsAnimationOut"
+  | "madeWithLoveAnimationOut"
+  | "realityIsBrokenAnimationOut"
+  | "greatThinkersAnimationOut"
+  | "vogueAnimationLoop"
+  | "dragonFlyAnimationLoop"
+  | "billboardAnimationLoop"
+  | "descompressAnimationIn"
+  | "dropAnimationIn"
+  | "dropAnimationOut"
+  | "descompressAnimationOut"
+  | "heartbeatAnimationLoop"
+  | "spinAnimationLoop"
+  | "waveAnimationLoop"
+  | "rotate3dAnimationLoop"
+  | "shakeTextAnimationLoop"
+  | "shakyLettersTextAnimationLoop"
+  | "vintageAnimationLoop"
+  | "textFontChangeAnimationLoop"
+  | "pulseAnimationLoop"
+  | "glitchAnimationLoop"
+  | "countDownAnimationIn"
+  | "soundWaveIn"
+  | "backgroundAnimationOut"
+  | "backgroundAnimationIn";
+
+// Type-safe preset object
+export const presets: Record<PresetName, Animation> = {
+  pulseAnimationLoop: {
+    property: "pulseTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Pulse Animation Loop"
+  },
+  glitchAnimationLoop: {
+    property: "glitchTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Glitch Animation Loop"
+  },
+  countDownAnimationIn: {
+    property: "countDownTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Count Down Animation In"
+  },
+  soundWaveIn: {
+    property: "soundWaveTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Sound Wave Animation In"
+  },
+  backgroundAnimationOut: {
+    property: "backgroundTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Background Animation Out"
+  },
+  backgroundAnimationIn: {
+    property: "backgroundTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Background Animation In"
+  },
+  textFontChangeAnimationLoop: {
+    property: "textFontChangeAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Font Change Animation Loop",
+    details: {
+      fonts: [
+        {
+          fontFamily: "Bangers-Regular",
+          url: "https://fonts.gstatic.com/s/bangers/v13/FeVQS0BTqb0h60ACL5la2bxii28.ttf"
+        },
+        {
+          fontFamily: "AnonymousPro-BoldItalic",
+          url: "https://fonts.gstatic.com/s/anonymouspro/v14/rP2ap2a15UIB7Un-bOeISG3pHl4OTCzc6IG30KqB9Q.ttf"
+        },
+        {
+          fontFamily: "Frijole",
+          url: "https://fonts.gstatic.com/s/frijole/v9/uU9PCBUR8oakM2BQ7xPb3vyHmlI.ttf"
+        },
+        {
+          fontFamily: "Bangers-Regular",
+          url: "https://fonts.gstatic.com/s/bangers/v13/FeVQS0BTqb0h60ACL5la2bxii28.ttf"
+        },
+        {
+          fontFamily: "Allura-Regular",
+          url: "https://fonts.gstatic.com/s/allura/v15/9oRPNYsQpS4zjuAPjAIXPtrrGA.ttf"
+        }
+      ]
+    }
+  },
+  vintageAnimationLoop: {
+    property: "vintageTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Vintage Animation Loop"
+  },
+  shakyLettersTextAnimationLoop: {
+    property: "shakyLettersTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Shaky Letters Animation Loop"
+  },
+  shakeTextAnimationLoop: {
+    property: "shakeTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Shake Text Animation Loop"
+  },
+  rotate3dAnimationLoop: {
+    property: "rotate3dTextAnimationLoop",
+    from: 0,
+    to: 360,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Rotate 3D Animation Loop"
+  },
+  heartbeatAnimationLoop: {
+    property: "heartbeatTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Heartbeat Animation Loop"
+  },
+  spinAnimationLoop: {
+    property: "spinTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Spin Animation Loop"
+  },
+  waveAnimationLoop: {
+    property: "waveTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Wave Animation Loop"
+  },
+  descompressAnimationIn: {
+    property: "descompressTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Descompress Animation In"
+  },
+  dropAnimationIn: {
+    property: "dropTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Drop Animation In"
+  },
+  dropAnimationOut: {
+    property: "dropTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Drop Animation Out"
+  },
+  descompressAnimationOut: {
+    property: "descompressTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Descompress Animation Out"
+  },
+  vogueAnimationLoop: {
+    property: "vogueTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Vogue Animation Loop"
+  },
+  dragonFlyAnimationLoop: {
+    property: "dragonFlyTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Dragon Fly Animation Loop"
+  },
+  billboardAnimationLoop: {
+    property: "billboardTextAnimationLoop",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Billboard Animation Loop"
+  },
+  typeWriterOut: {
+    property: "typeWriterTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Type Writer"
+  },
+  greatThinkersAnimationOut: {
+    property: "greatThinkersTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/great-thinker-out.webp",
+    name: "Great Thinkers"
+  },
+  realityIsBrokenAnimationOut: {
+    property: "realityIsBrokenTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl:
+      "https://cdn.designcombo.dev/animations/realisty-is-broken-out.webp",
+    name: "Reality is Broken"
+  },
+  madeWithLoveAnimationOut: {
+    property: "madeWithLoveTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl:
+      "https://cdn.designcombo.dev/animations/made-with-love-out.webp",
+    name: "Made With Love"
+  },
+  realityIsBrokenAnimationIn: {
+    property: "realityIsBrokenTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl:
+      "https://cdn.designcombo.dev/animations/reality-is-broken-in.webp",
+    name: "Reality is Broken"
+  },
+  beautifulQuestionsAnimationOut: {
+    property: "beautifulQuestionsTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl:
+      "https://cdn.designcombo.dev/animations/beatiful-question-out.webp",
+    name: "Beautiful Questions"
+  },
+  animatedTextOut: {
+    property: "animatedTextOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/animated-text-out.webp",
+    name: "Animated Text"
+  },
+  sunnyMorningsAnimationOut: {
+    property: "sunnyMorningsTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl:
+      "https://cdn.designcombo.dev/animations/sunny-mornings-out.webp",
+    name: "Sunny Mornings"
+  },
+  dominoDreamsAnimationOut: {
+    property: "dominoDreamsTextAnimationOut",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/domino-dreams-out.webp",
+    name: "Domino Dreams"
+  },
+  madeWithLoveAnimationIn: {
+    property: "madeWithLoveTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/made-with-love-in.webp",
+    name: "Made With Love"
+  },
+  beautifulQuestionsAnimationIn: {
+    property: "beautifulQuestionsTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl:
+      "https://cdn.designcombo.dev/animations/beautiful-questions-in.webp",
+    name: "Beatiful Questions"
+  },
+  greatThinkersAnimationIn: {
+    property: "greatThinkersTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/great-thinker-in.webp",
+    name: "Great Thinkers"
+  },
+  // thursdayIn: {
+  //   property: "textThursday",
+  //   from: 0,
+  //   to: 1,
+  //   durationInFrames: 30,
+  //   ease: Easing.linear,
+  //   previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+  //   name: "TextThursday"
+  // },
+  dominoDreamsIn: {
+    property: "dominoDreamsTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/domino-dreams-in.webp",
+    name: "Domino Dreams"
+  },
+  typeWriterIn: {
+    property: "typeWriterTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Type Writer"
+  },
+  animatedTextIn: {
+    property: "animatedTextIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/animated-text-in.webp",
+    name: "Animated Text"
+  },
+  sunnyMorningsAnimationIn: {
+    property: "sunnyMorningsTextAnimationIn",
+    from: 0,
+    to: 1,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/sunny-mornings-in.webp",
+    name: "Sunny Mornings"
+  },
+  shakeHorizontalOut: {
+    property: "shakeHorizontalOut",
+    from: 0,
+    to: -0,
+    durationInFrames: 30,
+    ease: Easing.elastic(1),
+    previewUrl:
+      "https://cdn.designcombo.dev/animations/ShakeHorizontalOut.webp",
+    name: "Shake Horizontal"
+  },
+
+  shakeVerticalOut: {
+    property: "shakeVerticalOut",
+    from: 0,
+    to: -0,
+    durationInFrames: 30,
+    ease: Easing.elastic(1),
+    previewUrl: "https://cdn.designcombo.dev/animations/ShakeVerticalOut.webp",
+    name: "Shake Vertical"
+  },
+
+  shakeHorizontalIn: {
+    property: "shakeHorizontalIn",
+    from: 0,
+    to: -0,
+    durationInFrames: 30,
+    ease: Easing.elastic(1),
+    previewUrl: "https://cdn.designcombo.dev/animations/ShakeHorizontalIn.webp",
+    name: "Shake Horizontal"
+  },
+
+  shakeVerticalIn: {
+    property: "shakeVerticalIn",
+    from: 0,
+    to: -0,
+    durationInFrames: 30,
+    ease: Easing.elastic(1),
+    previewUrl: "https://cdn.designcombo.dev/animations/ShakeVerticalIn.webp",
+    name: "Shake Vertical"
+  },
+
+  rotateIn: {
+    property: "rotate",
+    from: 0,
+    to: 360,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/scaleAndRotate.webp",
+    name: "Rotate"
+  },
+
+  flipIn: {
+    property: "rotateY",
+    from: -90,
+    to: 0,
+    durationInFrames: 30,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/flipIn.webp",
+    name: "Flip"
+  },
+
+  fadeIn: {
+    property: "opacity",
+    from: 0,
+    to: 1,
+    durationInFrames: 15,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/FadeIn.webp",
+    name: "Fade"
+  },
+
+  fadeOut: {
+    property: "opacity",
+    from: 1,
+    to: 0,
+    durationInFrames: 15,
+    ease: Easing.linear,
+    previewUrl: "https://cdn.designcombo.dev/animations/FadeOut.webp",
+    name: "Fade"
+  },
+
+  scaleIn: {
+    property: "scale",
+    from: 0,
+    to: 1,
+    durationInFrames: 15,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/ScaleIn.webp",
+    name: "Scale"
+  },
+
+  scaleOut: {
+    property: "scale",
+    from: 1,
+    to: 0,
+    durationInFrames: 15,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/ScaleOut.webp",
+    name: "Scale"
+  },
+
+  slideInRight: {
+    property: "translateX",
+    from: -900,
+    to: 0,
+    durationInFrames: 15,
+    delay: 0,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/SlideInRight.webp",
+    name: "Slide Right"
+  },
+
+  slideInLeft: {
+    property: "translateX",
+    from: 900,
+    to: 0,
+    durationInFrames: 15,
+    delay: 0,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/SlideInLeft.webp",
+    name: "Slide Left"
+  },
+
+  slideInTop: {
+    property: "translateY",
+    from: 900,
+    to: 0,
+    durationInFrames: 15,
+    delay: 0,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/SlideInTop.webp",
+    name: "Slide Top"
+  },
+
+  slideInBottom: {
+    property: "translateY",
+    from: -900,
+    to: 0,
+    durationInFrames: 15,
+    delay: 0,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/SlideInBottom.webp",
+    name: "Slide Bottom"
+  },
+
+  slideOutRight: {
+    property: "translateX",
+    from: 0,
+    to: -50,
+    durationInFrames: 15,
+    delay: 0,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/SlideOutRight.webp",
+    name: "Slide Right"
+  },
+
+  slideOutLeft: {
+    property: "translateX",
+    from: 0,
+    to: 50,
+    durationInFrames: 15,
+    delay: 0,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/SlideOutLeft.webp",
+    name: "Slide Left"
+  },
+
+  slideOutTop: {
+    property: "translateY",
+    from: 0,
+    to: 50,
+    durationInFrames: 15,
+    delay: 0,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/SlideOutUp.webp",
+    name: "Slide Top"
+  },
+
+  slideOutBottom: {
+    property: "translateY",
+    from: 0,
+    to: -50,
+    durationInFrames: 15,
+    delay: 0,
+    ease: Easing.ease,
+    previewUrl: "https://cdn.designcombo.dev/animations/slideOutDown.webp",
+    name: "Slide Bottom"
+  }
+} as const;
+
+// Export type for external usage
+export type AnimationPresets = typeof presets;

src/player/animated/text-animated-full.tsx

@@ -0,0 +1,164 @@
+import { ITextDetails } from "@designcombo/types";
+import TypeWriterIn from "./text-animated-types/animations-in/type-writer-in";
+import TypeWriterOut from "./text-animated-types/animations-out/type-writer-out";
+import BackgroundIn from "./text-animated-types/animations-in/background-in";
+import BackgroundOut from "./text-animated-types/animations-out/background-out";
+import SoundWaveIn from "./text-animated-types/animations-in/sound-wave-in";
+import CountDownIn from "./text-animated-types/animations-in/count-down-in";
+import Spin from "./text-animated-types/animations-loop/spin";
+import Rotate3d from "./text-animated-types/animations-loop/rotate-3d";
+import FontChange from "./text-animated-types/animations-loop/font-change";
+import ShakeText from "./text-animated-types/animations-loop/shake-text";
+import Vintage from "./text-animated-types/animations-loop/vintage";
+import GlitchText from "./text-animated-types/animations-loop/glitch";
+import { JSX } from "react";
+
+type FullTextAnimationProps = {
+  frame: number;
+  text: string;
+  details: ITextDetails;
+  fps: number;
+  durationInFrames: number;
+  animationTextInFrames: number;
+  animationTextOutFrames: number;
+  animationTextLoopFrames: number;
+  animationFonts: { fontFamily: string; url: string }[];
+  validAnimIn: boolean;
+  validAnimOut: boolean;
+  textAnimationNameIn: string;
+  textAnimationNameOut: string;
+  textAnimationNameLoop: string;
+};
+
+export const renderFullTextAnimation = ({
+  frame,
+  text,
+  details,
+  fps,
+  durationInFrames,
+  animationTextInFrames,
+  animationTextOutFrames,
+  animationFonts,
+  validAnimIn,
+  validAnimOut,
+  textAnimationNameIn,
+  textAnimationNameOut,
+  textAnimationNameLoop
+}: FullTextAnimationProps): JSX.Element | null => {
+  // Animaciones de entrada
+  if (validAnimIn) {
+    if (textAnimationNameIn === "typeWriterIn") {
+      return (
+        <TypeWriterIn
+          frame={frame}
+          durationInFrames={animationTextInFrames}
+          text={text}
+          style={details}
+        />
+      );
+    }
+
+    if (textAnimationNameIn === "backgroundAnimationIn") {
+      return (
+        <BackgroundIn
+          text={text}
+          frame={frame}
+          details={details}
+          animationTextInFrames={animationTextInFrames}
+        />
+      );
+    }
+
+    if (textAnimationNameIn === "soundWaveIn") {
+      return (
+        <SoundWaveIn
+          text={text}
+          frame={frame}
+          animationTextInFrames={animationTextInFrames}
+          details={details}
+        />
+      );
+    }
+
+    if (textAnimationNameIn === "countDownAnimationIn") {
+      return (
+        <CountDownIn
+          text={text}
+          frame={frame}
+          animationTextInFrames={animationTextInFrames}
+          details={details}
+        />
+      );
+    }
+  }
+
+  // Animaciones de salida
+  if (validAnimOut) {
+    if (textAnimationNameOut === "typeWriterOut") {
+      return (
+        <TypeWriterOut
+          frame={frame}
+          durationInFrames={durationInFrames}
+          text={text}
+          details={details}
+          animationDuration={animationTextOutFrames}
+        />
+      );
+    }
+
+    if (textAnimationNameOut === "backgroundAnimationOut") {
+      return (
+        <BackgroundOut
+          text={text}
+          frame={frame}
+          animationTextOutFrames={animationTextOutFrames}
+          details={details}
+          durationInFrames={durationInFrames}
+          fps={fps}
+        />
+      );
+    }
+  }
+
+  // Animaciones en bucle
+  if (!validAnimIn && !validAnimOut) {
+    if (textAnimationNameLoop === "spinAnimationLoop") {
+      return <Spin text={text} frame={frame} fps={fps} />;
+    }
+
+    if (textAnimationNameLoop === "rotate3dAnimationLoop") {
+      return (
+        <Rotate3d
+          text={text}
+          frame={frame}
+          durationInFrames={durationInFrames}
+        />
+      );
+    }
+
+    if (textAnimationNameLoop === "textFontChangeAnimationLoop") {
+      return (
+        <FontChange
+          text={text}
+          frame={frame}
+          details={details}
+          animationFonts={animationFonts}
+        />
+      );
+    }
+
+    if (textAnimationNameLoop === "shakeTextAnimationLoop") {
+      return <ShakeText text={text} frame={frame} />;
+    }
+
+    if (textAnimationNameLoop === "vintageAnimationLoop") {
+      return <Vintage text={text} frame={frame} details={details} fps={fps} />;
+    }
+
+    if (textAnimationNameLoop === "glitchAnimationLoop") {
+      return <GlitchText text={text} frame={frame} />;
+    }
+  }
+
+  return null;
+};

src/player/animated/text-animated-types/animations-in/background-in.tsx

@@ -0,0 +1,71 @@
+import { ITextDetails } from "@designcombo/types";
+import { interpolate } from "remotion";
+
+const BackgroundIn = ({
+  text,
+  frame,
+  details,
+  animationTextInFrames
+}: {
+  text: string;
+  frame: number;
+  details: ITextDetails;
+  animationTextInFrames: number;
+}) => {
+  const progress = interpolate(frame, [0, animationTextInFrames], [0, 1], {
+    extrapolateRight: "clamp"
+  });
+  const fullWidth = details.width;
+  const fullHeight = details.height;
+
+  const revealWidth = interpolate(progress, [0, 1], [0, fullWidth]);
+  const textTranslateX = interpolate(progress, [0, 1], [fullWidth / 2, 0]);
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        position: "relative",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        display: "flex",
+        width: details.width,
+        height: details.height
+      }}
+    >
+      <div
+        style={{
+          width: revealWidth,
+          height: fullHeight,
+          overflow: "hidden",
+          display: "flex",
+          position: "relative",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "white"
+        }}
+      >
+        <div
+          style={{
+            fontSize: parseFloat(details.fontSize.toString()),
+            display: "flex",
+            position: "absolute",
+            justifyContent: "center",
+            alignItems: "center",
+            width: details.width,
+            height: details.height,
+            color:
+              details.color === "white" || details.color.includes("fff")
+                ? "black"
+                : details.color,
+            transform: `translateX(${textTranslateX * 2}px)`
+          }}
+        >
+          {text}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BackgroundIn;

src/player/animated/text-animated-types/animations-in/beatiful-question-in.tsx

@@ -0,0 +1,49 @@
+import { interpolate, spring } from "remotion";
+
+const BeatifulQuestionAnimationIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextInFrames: number;
+}) => {
+  const totalDuration = animationTextInFrames;
+  const delayFactor = totalDuration / textLength;
+  const delay = index * delayFactor;
+
+  const translateY = spring({
+    frame: frame - delay,
+    fps,
+    from: 1.1,
+    to: 0,
+    config: { damping: 10 }
+  });
+
+  const opacity = interpolate(frame - delay, [0, totalDuration / 2], [0, 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp"
+  });
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `translateY(${translateY}em)`,
+        opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default BeatifulQuestionAnimationIn;

src/player/animated/text-animated-types/animations-in/count-down-in.tsx

@@ -0,0 +1,78 @@
+import { ITextDetails } from "@designcombo/types";
+import { interpolate } from "remotion";
+
+const numbers = ["3", "2", "1"];
+
+const CountDownIn = ({
+  text,
+  frame,
+  animationTextInFrames,
+  details
+}: {
+  text: string;
+  frame: number;
+  animationTextInFrames: number;
+  details: ITextDetails;
+}) => {
+  const countdownFrames = (animationTextInFrames * 3) / 4;
+  const framesPerNumber = Math.floor(countdownFrames / numbers.length);
+
+  let displayText = "";
+  let localFrame = 0;
+  let duration = framesPerNumber;
+  let initialScale = 2;
+  let finalScale = 0.5;
+  let fontSize = parseFloat(details.fontSize.toString());
+
+  if (frame < countdownFrames) {
+    // Mostrar el número correspondiente
+    const idx = Math.floor(frame / framesPerNumber);
+    displayText = numbers[idx];
+    localFrame = frame - idx * framesPerNumber;
+    duration = framesPerNumber;
+    initialScale = 2;
+    finalScale = 0.5;
+    fontSize = parseFloat(details.fontSize.toString());
+  } else if (frame < animationTextInFrames) {
+    // Mostrar el texto final con animación
+    displayText = text;
+    localFrame = frame - countdownFrames;
+    duration = animationTextInFrames - countdownFrames;
+    initialScale = 2;
+    finalScale = 1;
+    fontSize = parseFloat(details.fontSize.toString());
+  } else {
+    // Después de la animación, mostrar el texto final estático
+    displayText = text;
+    localFrame = duration;
+    initialScale = 1;
+    finalScale = 1;
+    fontSize = parseFloat(details.fontSize.toString());
+  }
+
+  const progress = Math.min(localFrame / duration, 1);
+  const scale = interpolate(progress, [0, 1], [initialScale, finalScale]);
+  const opacity = interpolate(progress, [0, 1], [0.3, 1]);
+  const blur = interpolate(progress, [0, 1], [8, 0]);
+
+  return (
+    <span
+      style={{
+        opacity,
+        display: "flex",
+        width: details.width,
+        height: details.height,
+        textAlign: "center",
+        justifyContent: "center",
+        alignItems: "center",
+        transform: `scale(${scale})`,
+        filter: `blur(${blur}px)`,
+        fontSize: `${fontSize}px`
+      }}
+    >
+      {displayText}
+    </span>
+  );
+};
+
+export default CountDownIn;

src/player/animated/text-animated-types/animations-in/descompress-in.tsx

@@ -0,0 +1,36 @@
+const DescompressAnimationIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  animationTextInFrames: number;
+}) => {
+  const endTime = animationTextInFrames / fps;
+  const time = frame / fps;
+
+  const progress = Math.min(Math.max(time / endTime, 0), 1);
+
+  const scaleX = 3 - progress * 2;
+  const opacity = progress;
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `scaleX(${scaleX})`,
+        opacity: opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default DescompressAnimationIn;

src/player/animated/text-animated-types/animations-in/domino-dreams-in.tsx

@@ -0,0 +1,43 @@
+import { spring } from "remotion";
+
+const DominoDreamsIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextInFrames: number;
+}) => {
+  const totalDuration = animationTextInFrames;
+  const delayFactor = totalDuration / textLength;
+  const delay = index * delayFactor;
+
+  const rotateY = spring({
+    frame: frame - delay,
+    fps,
+    from: -90,
+    to: 0,
+    config: { mass: 1, damping: 12 }
+  });
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `rotateY(${rotateY}deg)`
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default DominoDreamsIn;

src/player/animated/text-animated-types/animations-in/drop-in.tsx

@@ -0,0 +1,36 @@
+const DropAnimationIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  animationTextInFrames: number;
+}) => {
+  const endTime = animationTextInFrames / fps;
+  const time = frame / fps;
+
+  const progress = Math.min(Math.max(time / endTime, 0), 1);
+
+  const scale = 3 - progress * 2;
+  const opacity = progress;
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `scale(${scale})`,
+        opacity: opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default DropAnimationIn;

src/player/animated/text-animated-types/animations-in/great-thinkers-in.tsx

@@ -0,0 +1,43 @@
+import { spring } from "remotion";
+
+const GetThinkersAnimationIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextInFrames: number;
+}) => {
+  const totalDuration = animationTextInFrames;
+  const delayFactor = totalDuration / textLength;
+  const delay = index * delayFactor;
+
+  const opacity = spring({
+    frame: frame - delay,
+    fps,
+    from: 0,
+    to: 1,
+    config: { stiffness: 60, damping: 10 }
+  });
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default GetThinkersAnimationIn;

src/player/animated/text-animated-types/animations-in/made-with-love-in.tsx

@@ -0,0 +1,54 @@
+import { interpolate, spring } from "remotion";
+
+const MadeWithLoveAnimationIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextInFrames: number;
+}) => {
+  const totalDuration = animationTextInFrames;
+  const delayFactor = totalDuration / textLength;
+  const delay = index * delayFactor; // Calculate delay for each letter
+
+  const translateY = spring({
+    frame: frame - delay,
+    fps,
+    from: -100,
+    to: 0,
+    config: { damping: 20, stiffness: 120 }
+  });
+
+  const opacity = interpolate(
+    frame - delay,
+    [0, totalDuration / 2], // Complete opacity ramp-up within half the duration
+    [0, 1],
+    {
+      extrapolateRight: "clamp",
+      extrapolateLeft: "clamp"
+    }
+  );
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `translateY(${translateY}px)`,
+        opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default MadeWithLoveAnimationIn;

src/player/animated/text-animated-types/animations-in/reality-is-broken-in.tsx

@@ -0,0 +1,71 @@
+import { interpolate, spring } from "remotion";
+
+const RealityIsBrokenAnimationIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextInFrames: number;
+}) => {
+  const totalDuration = animationTextInFrames;
+  const delayFactor = totalDuration / textLength;
+  const delay = index * delayFactor;
+
+  const translateY = spring({
+    frame: frame - delay,
+    fps,
+    from: 1.1,
+    to: 0,
+    config: { damping: 10 }
+  });
+
+  const translateX = spring({
+    frame: frame - delay,
+    fps,
+    from: 0.55,
+    to: 0,
+    config: { damping: 10 }
+  });
+
+  const rotateZ = spring({
+    frame: frame - delay,
+    fps,
+    from: 180,
+    to: 0,
+    config: { damping: 10 }
+  });
+
+  const opacity = interpolate(
+    frame,
+    [delay, delay + 15], // Adjust for opacity ramp-up
+    [0, 1],
+    {
+      extrapolateRight: "clamp",
+      extrapolateLeft: "clamp"
+    }
+  );
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transformOrigin: "0 100%",
+        transform: `translateY(${translateY}em) translateX(${translateX}em) rotateZ(${rotateZ}deg)`,
+        opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default RealityIsBrokenAnimationIn;

src/player/animated/text-animated-types/animations-in/rising-strong-in.tsx

@@ -0,0 +1,51 @@
+import { interpolate } from "remotion";
+
+const RisingStrongAnimationIn = ({
+  char,
+  index,
+  frame,
+  textLength,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  textLength: number;
+  animationTextInFrames: number;
+}) => {
+  const totalDuration = animationTextInFrames / 2;
+  const delayFactor = totalDuration / textLength;
+  const appearDelay = index * delayFactor;
+
+  // Adjust the disappearance to happen after the complete animation if needed
+  const disappearStart = totalDuration + appearDelay;
+
+  const opacity = interpolate(
+    frame - appearDelay,
+    [0, totalDuration / 2, disappearStart, disappearStart + totalDuration / 2],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+
+  const translateY = interpolate(
+    frame - appearDelay,
+    [0, totalDuration],
+    [100, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `translateY(${translateY}px)`,
+        opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default RisingStrongAnimationIn;

src/player/animated/text-animated-types/animations-in/sound-wave-in.tsx

@@ -0,0 +1,150 @@
+import { ITextDetails } from "@designcombo/types";
+import { interpolate } from "remotion";
+
+const SoundWaveIn = ({
+  text,
+  frame,
+  animationTextInFrames,
+  details
+}: {
+  text: string;
+  frame: number;
+  animationTextInFrames: number;
+  details: ITextDetails;
+}) => {
+  const waveDisappearStart = animationTextInFrames * 0.5;
+  const waveDisappearEnd = animationTextInFrames;
+  const trailCount = 8;
+  const baseScale = interpolate(frame, [0, waveDisappearStart], [0.5, 1], {
+    extrapolateRight: "clamp"
+  });
+  const mainScale = baseScale;
+  const mainBlur = 0;
+  const mainOpacity = 1;
+  const waveScaleX = interpolate(frame, [0, waveDisappearStart], [2, 1], {
+    extrapolateRight: "clamp"
+  });
+  const waveBlur =
+    frame < waveDisappearStart
+      ? interpolate(frame, [0, waveDisappearStart], [20, 0], {
+          extrapolateRight: "clamp"
+        })
+      : interpolate(frame, [waveDisappearStart, waveDisappearEnd], [0, 40], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+  // Opacidad: de 0.7 a 1, luego a 0
+  const waveOpacity =
+    frame < waveDisappearStart
+      ? interpolate(frame, [0, waveDisappearStart], [0.7, 1], {
+          extrapolateRight: "clamp"
+        })
+      : interpolate(frame, [waveDisappearStart, waveDisappearEnd], [1, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+
+  const trails = [];
+  for (let i = trailCount; i > 0; i--) {
+    // Cada trail está más atrás en el tiempo
+    const trailFrame = Math.max(frame - i * 2, 0);
+
+    // Escalado y estiramiento X para el efecto de eco
+    const trailScale = interpolate(
+      trailFrame,
+      [0, waveDisappearStart],
+      [0.5, 1],
+      { extrapolateRight: "clamp" }
+    );
+    // const trailScaleX = interpolate(
+    //   trailFrame,
+    //   [0, waveDisappearStart],
+    //   [2.5, 1],
+    //   { extrapolateRight: "clamp" },
+    // );
+
+    // Opacidad más baja para los trails lejanos
+    const trailOpacity = interpolate(
+      trailFrame,
+      [0, waveDisappearStart],
+      [0.15, 0],
+      { extrapolateRight: "clamp" }
+    );
+
+    trails.push(
+      <span
+        key={i}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          opacity: trailOpacity,
+          transform: `scale(${trailScale * 2})`,
+          pointerEvents: "none"
+        }}
+      >
+        {text}
+      </span>
+    );
+  }
+  return (
+    <div
+      style={{
+        display: "flex",
+        width: details.width,
+        height: details.height,
+        transform: `scale(${baseScale})`,
+        position: "relative"
+      }}
+    >
+      {/* Texto wave */}
+
+      <span
+        style={{
+          width: details.width,
+          height: details.height,
+          background: "transparent",
+          transform: `scale(${mainScale})`
+        }}
+      >
+        {text}
+      </span>
+      <span
+        style={{
+          position: "absolute",
+          opacity: waveOpacity,
+          width: details.width,
+          height: details.height,
+          transform: `scaleX(${waveScaleX})`,
+          filter: `blur(${waveBlur * 3}px)`
+        }}
+      >
+        {text}
+      </span>
+      {/* </span> */}
+      <span
+        style={{
+          opacity: mainOpacity,
+          filter: `blur(${mainBlur}px)`,
+          transform: `scale(${mainScale})`,
+          fontSize: parseFloat(details.fontSize.toString()),
+          position: "absolute",
+          width: details.width,
+          height: details.height
+        }}
+      >
+        <div
+          style={{
+            width: details.width,
+            height: details.height,
+            position: "relative"
+          }}
+        >
+          {trails}
+        </div>
+      </span>
+    </div>
+  );
+};
+
+export default SoundWaveIn;

src/player/animated/text-animated-types/animations-in/sunny-mornings-in.tsx

@@ -0,0 +1,51 @@
+import { interpolate, spring } from "remotion";
+
+const SunnyMorningsAnimationIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextInFrames: number;
+}) => {
+  const totalDuration = animationTextInFrames;
+  const delayFactor = totalDuration / (textLength + 1);
+  const delay = index * delayFactor;
+
+  const scale = spring({
+    frame: frame - delay,
+    fps,
+    from: 4,
+    to: 1,
+    config: { mass: 1, damping: 10 }
+  });
+
+  const opacity = interpolate(
+    frame - delay,
+    [0, totalDuration / 2], // Ensure opacity fades in within half the duration
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `scale(${scale})`,
+        opacity: opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default SunnyMorningsAnimationIn;

src/player/animated/text-animated-types/animations-in/text-animated-in.tsx

@@ -0,0 +1,62 @@
+import { spring } from "remotion";
+
+const AnimatedTextIn = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextInFrames: number;
+}) => {
+  // Adjust delay based on total frames available for the entire animation
+  const totalDelay = animationTextInFrames;
+  const delayFactor = totalDelay / textLength;
+  const delay = index * delayFactor;
+
+  const opacity = spring({
+    frame: frame - delay,
+    fps,
+    from: 0,
+    to: 1,
+    config: { mass: 0.5, damping: 10 }
+  });
+
+  const y = spring({
+    frame: frame - delay,
+    fps,
+    from: -50,
+    to: 0,
+    config: { mass: 0.5, damping: 10 }
+  });
+
+  const rotate = spring({
+    frame: frame - delay,
+    fps,
+    from: -180,
+    to: 0,
+    config: { mass: 0.5, damping: 12 }
+  });
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        opacity,
+        transform: `translateY(${y}px) rotate(${rotate}deg)`,
+        transition: "all 0.05s ease-out"
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default AnimatedTextIn;

src/player/animated/text-animated-types/animations-in/type-writer-in.tsx

@@ -0,0 +1,64 @@
+import { ITextDetails } from "@designcombo/types";
+import { useMemo } from "react";
+import { interpolate } from "remotion";
+
+export default function TypeWriterIn({
+  frame,
+  durationInFrames,
+  text,
+  style
+}: {
+  frame: number;
+  durationInFrames: number;
+  text: string;
+  style: ITextDetails;
+}) {
+  const visibleCharacters = Math.floor(
+    interpolate(frame, [0, durationInFrames], [0, text.length], {
+      extrapolateRight: "clamp"
+    })
+  );
+
+  const visibleText = useMemo(() => {
+    let count = 0;
+    return text
+      .split(" ")
+      .map((word) => {
+        if (count + word.length <= visibleCharacters) {
+          count += word.length + 1;
+          return word;
+        }
+        if (count < visibleCharacters) {
+          const partialWord = word.slice(0, visibleCharacters - count);
+          count = visibleCharacters;
+          return partialWord;
+        }
+        return "";
+      })
+      .join(" ");
+  }, [visibleCharacters]);
+
+  return (
+    <div
+      style={{
+        textAlign: "center"
+      }}
+    >
+      <span
+        style={{
+          fontSize: style.fontSize
+        }}
+      >
+        {visibleText}
+      </span>
+      <span
+        style={{
+          color: "#60a5fa",
+          opacity: frame % 15 < 7 ? 1 : 0
+        }}
+      >
+        |
+      </span>
+    </div>
+  );
+}

src/player/animated/text-animated-types/animations-loop/billboard.tsx

@@ -0,0 +1,24 @@
+const BillboardText = ({
+  frame,
+  fps,
+  char
+}: {
+  char: string;
+  frame: number;
+  fps: number;
+}) => {
+  const scale = 1 + 0.2 * Math.sin((2 * Math.PI * frame) / (fps * 1)); // 1 ciclo por segundo
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        transform: `scale(${scale})`
+      }}
+    >
+      {char}
+    </span>
+  );
+};
+
+export default BillboardText;

src/player/animated/text-animated-types/animations-loop/dragonfly.tsx

@@ -0,0 +1,30 @@
+const DragonflyText = ({
+  char,
+  frame,
+  fps
+}: {
+  char: string;
+  frame: number;
+  fps: number;
+}) => {
+  const t = frame / fps;
+
+  const x = 80 * Math.sin(t * 2 * Math.PI); // movimiento lateral
+  const y = 80 * Math.sin(t * 2.5 * Math.PI); // movimiento vertical
+  const rotate = 5 * Math.sin(t * 3 * Math.PI); // rotación en grados
+  const scale = 1 + 0.05 * Math.sin(t * 4 * Math.PI); // pequeño pulso
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        transform: `translate(${x}px, ${y}px) rotate(${rotate}deg) scale(${scale})`,
+        transition: "transform 0.1s linear"
+      }}
+    >
+      {char}
+    </span>
+  );
+};
+
+export default DragonflyText;

src/player/animated/text-animated-types/animations-loop/font-change.tsx

@@ -0,0 +1,41 @@
+import { ITextDetails } from "@designcombo/types";
+
+const FontChange = ({
+  frame,
+  text,
+  details,
+  animationFonts
+}: {
+  text: string;
+  frame: number;
+  details: ITextDetails;
+  animationFonts: { fontFamily: string; url: string }[];
+}) => {
+  const totalFonts = [{ fontFamily: details.fontFamily }, ...animationFonts];
+  const cycleDuration = 30; // Duración de un ciclo completo en frames
+  const framesPerFont = cycleDuration / totalFonts.length; // Frames por cada fuente
+
+  const fontIndex = Math.floor((frame % cycleDuration) / framesPerFont);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        background: "transparent",
+        perspective: 1000 // necesaria para el efecto 3D
+      }}
+    >
+      <div
+        style={{
+          fontFamily: totalFonts[fontIndex].fontFamily
+        }}
+      >
+        {text}
+      </div>
+    </div>
+  );
+};
+
+export default FontChange;

src/player/animated/text-animated-types/animations-loop/glitch.tsx

@@ -0,0 +1,40 @@
+const GlitchText = ({ text, frame }: { text: string; frame: number }) => {
+  const glitchIntensity = Math.sin(frame / 10) * 10;
+  const rgbOffset = Math.sin(frame / 5) * 10;
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        position: "relative",
+        opacity: 0.8
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          color: "cyan",
+          transform: `translate(${rgbOffset}px, ${glitchIntensity}px)`,
+          mixBlendMode: "screen"
+        }}
+      >
+        {text}
+      </div>
+      <div
+        style={{
+          position: "absolute",
+          color: "magenta",
+          transform: `translate(${-rgbOffset}px, ${-glitchIntensity}px)`,
+          mixBlendMode: "screen"
+        }}
+      >
+        {text}
+      </div>
+      <div style={{ color: "white" }}>
+        <span style={{ paddingInline: "10px" }}>{text}</span>
+      </div>
+    </span>
+  );
+};
+
+export default GlitchText;

src/player/animated/text-animated-types/animations-loop/heartbeat.tsx

@@ -0,0 +1,30 @@
+const Heartbeat = ({
+  char,
+  frame,
+  fps
+}: {
+  char: string;
+  frame: number;
+  fps: number;
+}) => {
+  const time = frame / fps;
+  const cycleDuration = 1;
+  const cycleTime = time % cycleDuration;
+
+  let scale = 1;
+  if (cycleTime < 0.2 || (cycleTime >= 0.3 && cycleTime < 0.5)) {
+    scale = 1 + Math.sin((cycleTime % 0.2) * Math.PI * 5) * 0.8;
+  }
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        transform: `scale(${scale})`
+      }}
+    >
+      {char}
+    </span>
+  );
+};
+export default Heartbeat;

src/player/animated/text-animated-types/animations-loop/pulse.tsx

@@ -0,0 +1,61 @@
+import { ITextDetails } from "@designcombo/types";
+import { interpolate } from "remotion";
+
+const PulseText = ({
+  char,
+  index,
+  frame,
+  details
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  details: ITextDetails;
+}) => {
+  const delay = index * 6;
+  const pulse = interpolate(
+    ((frame + 30 - delay) % 30) / 30,
+    [0, 0.5, 1],
+    [1, 1.2, 1],
+    {
+      extrapolateRight: "clamp"
+    }
+  );
+  const opacity = interpolate(
+    ((frame + 30 - delay) % 30) / 30,
+    [0, 0.5, 1],
+    [0.5, 1, 0.5],
+    {
+      extrapolateRight: "clamp"
+    }
+  );
+
+  return (
+    <span
+      style={{
+        opacity: opacity,
+        position: "relative",
+        fontSize: parseFloat(details.fontSize.toString()) * pulse,
+        scale: pulse
+      }}
+    >
+      {char}
+      <div
+        style={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          width: parseFloat(details.fontSize.toString()) * 1.5,
+          height: parseFloat(details.fontSize.toString()) * 1.5,
+          background: "rgba(255, 255, 255, 0.1)",
+          borderRadius: "50%",
+          filter: "blur(20px)",
+          opacity: opacity
+        }}
+      />
+    </span>
+  );
+};
+
+export default PulseText;

src/player/animated/text-animated-types/animations-loop/rotate-3d.tsx

@@ -0,0 +1,49 @@
+import { interpolate } from "remotion";
+
+const Rotate3d = ({
+  frame,
+  durationInFrames,
+  text
+}: {
+  text: string;
+  frame: number;
+  durationInFrames: number;
+}) => {
+  const rotation = interpolate(frame, [0, durationInFrames / 2], [0, 360]);
+  const rotation2 = rotation - 90;
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        background: "transparent",
+        perspective: 1000 // necesaria para el efecto 3D
+      }}
+    >
+      <div
+        style={{
+          transform: `rotateY(${rotation}deg)`,
+          transformStyle: "preserve-3d",
+          background: "transparent"
+        }}
+      >
+        {text}
+      </div>
+      <div
+        style={{
+          transform: `rotateY(${rotation2}deg)`,
+          transformStyle: "preserve-3d",
+          position: "absolute",
+          top: 0,
+          background: "transparent"
+        }}
+      >
+        {text}
+      </div>
+    </div>
+  );
+};
+
+export default Rotate3d;

src/player/animated/text-animated-types/animations-loop/shake-text.tsx

@@ -0,0 +1,23 @@
+function random(seed: number) {
+  const x = Math.sin(seed) * 10000;
+  return x - Math.floor(x);
+}
+
+const ShakeText = ({ text, frame }: { text: string; frame: number }) => {
+  const offsetX = (random(frame) - 0.5) * 8; // entre -4 y 4 px
+  const offsetY = (random(frame + 999) - 0.5) * 8;
+  const rotate = (random(frame + 500) - 0.5) * 6; // entre -3 y 3 grados
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotate}deg)`
+      }}
+    >
+      {text}
+    </span>
+  );
+};
+
+export default ShakeText;

src/player/animated/text-animated-types/animations-loop/shaky-letters-text.tsx

@@ -0,0 +1,33 @@
+function random(seed: number) {
+  const x = Math.sin(seed) * 10000;
+  return x - Math.floor(x);
+}
+
+const ShakyLettersText = ({
+  char,
+  index,
+  frame
+}: {
+  char: string;
+  index: number;
+  frame: number;
+}) => {
+  const seed = frame * 100 + index * 999;
+  const offsetX = (random(seed) - 0.5) * 8;
+  const offsetY = (random(seed + 1) - 0.5) * 8;
+  const rotate = (random(seed + 2) - 0.5) * 6;
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotate}deg)`
+      }}
+    >
+      {char}
+    </span>
+  );
+};
+
+export default ShakyLettersText;

src/player/animated/text-animated-types/animations-loop/spin.tsx

@@ -0,0 +1,24 @@
+const Spin = ({
+  text,
+  frame,
+  fps
+}: {
+  text: string;
+  frame: number;
+  fps: number;
+}) => {
+  const t = frame / fps;
+  const rotateZ = t * 360;
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        transform: `rotateZ(${rotateZ}deg)`
+      }}
+    >
+      {text}
+    </span>
+  );
+};
+export default Spin;

src/player/animated/text-animated-types/animations-loop/vintage.tsx

@@ -0,0 +1,62 @@
+import { interpolate } from "remotion";
+
+const TOTAL_LAYERS = 9;
+
+const Vintage = ({
+  text,
+  frame,
+  details,
+  fps
+}: {
+  text: string;
+  frame: number;
+  details: {
+    fontSize: number;
+    color: string;
+  };
+  fps: number;
+}) => {
+  const duration = fps;
+  const half = duration / 2;
+  const layerCount = Math.round(
+    frame % fps <= half
+      ? interpolate(frame % fps, [0, half], [1, TOTAL_LAYERS])
+      : interpolate(frame % fps, [half, duration], [TOTAL_LAYERS, 1])
+  );
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative"
+      }}
+    >
+      {Array.from({ length: layerCount }).map((_, i) => {
+        const dx = i * 4;
+        const dy = -i * 2;
+        const opacity = 1 / (layerCount - i);
+
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              transform: `translate(${dx * 4}px, ${dy * 4}px)`,
+              fontWeight: "bold",
+              fontSize: details.fontSize,
+              zIndex: i,
+              color: layerCount !== i + 1 ? "red" : details.color,
+              background: "transparent",
+              opacity
+            }}
+          >
+            {text}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Vintage;

src/player/animated/text-animated-types/animations-loop/vogue.tsx

@@ -0,0 +1,30 @@
+const VogueLetterByLetter = ({
+  char,
+  frame,
+  fps,
+  index
+}: {
+  char: string;
+  frame: number;
+  fps: number;
+  index: number;
+}) => {
+  const delay = index * 4; // desfase por letra
+  const t = (frame - delay) / fps;
+
+  // Loop suave con rotación más notoria
+  const scale = 1 + 0.25 * Math.sin(t * 2 * Math.PI);
+  const rotateY = 40 * Math.sin(t * 2 * Math.PI);
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        transform: `scale(${scale}) rotateY(${rotateY}deg)`
+      }}
+    >
+      {char}
+    </span>
+  );
+};
+export default VogueLetterByLetter;

src/player/animated/text-animated-types/animations-loop/wave.tsx

@@ -0,0 +1,26 @@
+const Wave = ({
+  char,
+  frame,
+  fps,
+  index
+}: {
+  char: string;
+  frame: number;
+  fps: number;
+  index: number;
+}) => {
+  const offset = index * 20;
+  const translateY = Math.sin((frame * 8 - offset) / fps) * 20;
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        transform: `translateY(${translateY}px)`
+      }}
+    >
+      {char}
+    </span>
+  );
+};
+export default Wave;

src/player/animated/text-animated-types/animations-out/background-out.tsx

@@ -0,0 +1,86 @@
+import { ITextDetails } from "@designcombo/types";
+import { interpolate } from "remotion";
+
+const BackgroundOut = ({
+  text,
+  frame,
+  animationTextOutFrames,
+  details,
+  durationInFrames,
+  fps
+}: {
+  text: string;
+  frame: number;
+  animationTextOutFrames: number;
+  details: ITextDetails;
+  durationInFrames: number;
+  fps: number;
+}) => {
+  const start = durationInFrames - animationTextOutFrames;
+  const duration = animationTextOutFrames;
+
+  // Progreso de la animación de salida
+  const progress = interpolate(frame, [start, start + duration], [0, 1], {
+    extrapolateRight: "clamp"
+  });
+  const fullWidth = details.width;
+  const fullHeight = details.height;
+
+  // El rectángulo se reduce de ancho completo a 0
+  const revealWidth = interpolate(
+    Math.round(progress * 100),
+    [0, 100 - fps / 10],
+    [fullWidth, 0]
+  );
+  // El texto se mueve del centro hacia la derecha
+  const textTranslateX = interpolate(progress, [0, 1], [0, fullWidth * 2]);
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        position: "relative",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        display: "flex",
+        width: details.width,
+        height: details.height
+      }}
+    >
+      {/* Máscara que oculta el texto fuera del rectángulo */}
+      <div
+        style={{
+          width: revealWidth,
+          height: fullHeight,
+          overflow: "hidden",
+          display: "flex",
+          position: "relative",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "white"
+        }}
+      >
+        <div
+          style={{
+            fontSize: parseFloat(details.fontSize.toString()),
+            display: "flex",
+            position: "absolute",
+            justifyContent: "center",
+            alignItems: "center",
+            width: details.width,
+            height: details.height,
+            color:
+              details.color === "white" || details.color.includes("fff")
+                ? "black"
+                : details.color,
+            transform: `translateX(${textTranslateX}px)`
+          }}
+        >
+          {text}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BackgroundOut;

src/player/animated/text-animated-types/animations-out/beatiful-question-out.tsx

@@ -0,0 +1,52 @@
+import { interpolate, spring } from "remotion";
+
+const BeatifulQuestionAnimationOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const exitDuration = animationTextOutFrames;
+  const delayPerChar = exitDuration / textLength;
+  const exitStart = durationInFrames - animationTextOutFrames;
+  const charExitStart = exitStart + index * delayPerChar;
+  const progress = frame - charExitStart;
+
+  const translateY = spring({
+    frame: progress,
+    fps,
+    from: 0,
+    to: 1.1,
+    config: { damping: 10 }
+  });
+
+  const opacity = interpolate(progress, [0, delayPerChar], [1, 0], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp"
+  });
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `translateY(${translateY}em)`,
+        opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default BeatifulQuestionAnimationOut;

src/player/animated/text-animated-types/animations-out/descompress-out.tsx

@@ -0,0 +1,41 @@
+const DescompressAnimationOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const startTime = (durationInFrames - animationTextOutFrames) / fps;
+  const endTime = durationInFrames / fps;
+  const time = frame / fps;
+
+  const progress = Math.min(
+    Math.max((time - startTime) / (endTime - startTime), 0),
+    1
+  );
+  const scaleX = 1 + progress;
+  const opacity = 1 - progress;
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `scaleX(${scaleX})`,
+        opacity: opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default DescompressAnimationOut;

src/player/animated/text-animated-types/animations-out/domino-dreams-out.tsx

@@ -0,0 +1,47 @@
+import { spring } from "remotion";
+
+const DominoDreamsAnimationOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const exitDuration = animationTextOutFrames;
+  const delayPerChar = exitDuration / textLength;
+  const exitStart = durationInFrames - animationTextOutFrames;
+  const charExitStart = exitStart + index * delayPerChar;
+  const progress = frame - charExitStart;
+
+  const rotateY = spring({
+    frame: progress,
+    fps,
+    from: 0,
+    to: 90,
+    config: { mass: 1, damping: 12 }
+  });
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `rotateY(${rotateY}deg)`
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default DominoDreamsAnimationOut;

src/player/animated/text-animated-types/animations-out/drop-out.tsx

@@ -0,0 +1,42 @@
+const DropAnimationOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const startTime = (durationInFrames - animationTextOutFrames) / fps;
+  const endTime = durationInFrames / fps;
+  const time = frame / fps;
+
+  const progress = Math.min(
+    Math.max((time - startTime) / (endTime - startTime), 0),
+    1
+  );
+
+  const scale = 1 + progress;
+  const opacity = 1 - progress;
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `scale(${scale})`,
+        opacity: opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default DropAnimationOut;

src/player/animated/text-animated-types/animations-out/great-thinkers-out.tsx

@@ -0,0 +1,46 @@
+import { spring } from "remotion";
+
+const GreatThinkersAnimationOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const exitStart = durationInFrames - animationTextOutFrames;
+  const delayPerChar = animationTextOutFrames / textLength;
+  const charExitStart = exitStart + index * delayPerChar;
+  const progress = frame - charExitStart;
+
+  const opacity = spring({
+    frame: progress,
+    fps,
+    from: 1,
+    to: 0,
+    config: { stiffness: 60, damping: 10 }
+  });
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default GreatThinkersAnimationOut;

src/player/animated/text-animated-types/animations-out/made-with-love-out.tsx

@@ -0,0 +1,57 @@
+import { interpolate, spring } from "remotion";
+
+const MadeWithLoveAnimationOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const exitStart = durationInFrames - animationTextOutFrames;
+  const delayPerChar = animationTextOutFrames / textLength;
+  const charExitStart = exitStart + index * delayPerChar;
+  const progress = frame - charExitStart;
+
+  const translateY = spring({
+    frame: progress,
+    fps,
+    from: 0,
+    to: 100, // Move text out of view
+    config: { damping: 20, stiffness: 120 }
+  });
+
+  const opacity = interpolate(
+    progress,
+    [0, delayPerChar], // Frames for opacity fade-out
+    [1, 0],
+    {
+      extrapolateRight: "clamp",
+      extrapolateLeft: "clamp"
+    }
+  );
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `translateY(${translateY}px)`,
+        opacity
+      }}
+    >
+      {char === " " ? "\u00A0" : char}
+    </span>
+  );
+};
+
+export default MadeWithLoveAnimationOut;

src/player/animated/text-animated-types/animations-out/reality-is-broken-out.tsx

@@ -0,0 +1,69 @@
+import { interpolate, spring } from "remotion";
+
+const RealityIsBrokenAnimationOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const exitStart = durationInFrames - animationTextOutFrames;
+  const delayPerChar = animationTextOutFrames / textLength;
+  const charExitStart = exitStart + index * delayPerChar;
+  const progress = frame - charExitStart;
+
+  const translateY = spring({
+    frame: progress,
+    fps,
+    from: 0,
+    to: 1,
+    config: { mass: 1, damping: 10 }
+  });
+
+  const translateX = spring({
+    frame: progress,
+    fps,
+    from: 0,
+    to: 0.55,
+    config: { mass: 1, damping: 10 }
+  });
+
+  const rotateZ = spring({
+    frame: progress,
+    fps,
+    from: 0,
+    to: 180,
+    config: { mass: 1, damping: 10 }
+  });
+
+  const opacity = interpolate(progress, [0, delayPerChar], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transformOrigin: "0 100%",
+        transform: `translateY(${translateY}em) translateX(${translateX}em) rotateZ(${rotateZ}deg)`,
+        opacity
+      }}
+    >
+      {char === " " ? "\u00A0" : char}
+    </span>
+  );
+};
+
+export default RealityIsBrokenAnimationOut;

src/player/animated/text-animated-types/animations-out/sunny-mornings-out.tsx

@@ -0,0 +1,52 @@
+import { interpolate, spring } from "remotion";
+
+const SunnyMorningsAnimationOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const exitStart = durationInFrames - animationTextOutFrames;
+  const delayPerChar = animationTextOutFrames / textLength;
+
+  const charExitStart = exitStart + index * delayPerChar;
+  const progress = frame - charExitStart;
+
+  const scale = spring({
+    frame: progress,
+    fps,
+    from: 1,
+    to: 0,
+    config: { mass: 1, damping: 10 }
+  });
+
+  const opacity = interpolate(progress, [0, delayPerChar], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        transform: `scale(${scale})`,
+        opacity
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+export default SunnyMorningsAnimationOut;

src/player/animated/text-animated-types/animations-out/text-animated-out.tsx

@@ -0,0 +1,60 @@
+import { spring } from "remotion";
+
+const AnimatedTextOut = ({
+  char,
+  index,
+  frame,
+  fps,
+  textLength,
+  animationTextOutFrames,
+  durationInFrames
+}: {
+  char: string;
+  index: number;
+  frame: number;
+  fps: number;
+  textLength: number;
+  animationTextOutFrames: number;
+  durationInFrames: number;
+}) => {
+  const startExitFrame = durationInFrames - animationTextOutFrames;
+  const delay = (index / textLength) * (durationInFrames - startExitFrame);
+
+  const opacity = spring({
+    frame: frame - startExitFrame - delay,
+    fps,
+    from: 1,
+    to: 0,
+    config: { mass: 0.5, damping: 10 }
+  });
+
+  const y = spring({
+    frame: frame - startExitFrame - delay,
+    fps,
+    from: 0,
+    to: 50,
+    config: { mass: 0.5, damping: 10 }
+  });
+
+  const rotate = spring({
+    frame: frame - startExitFrame - delay,
+    fps,
+    from: 0,
+    to: 180,
+    config: { mass: 0.5, damping: 12 }
+  });
+  return (
+    <span
+      key={index}
+      style={{
+        display: "inline-block",
+        opacity,
+        transform: `translateY(${y}px) rotate(${rotate}deg)`
+      }}
+    >
+      {char === " " ? " " : char}
+    </span>
+  );
+};
+
+export default AnimatedTextOut;

src/player/animated/text-animated-types/animations-out/type-writer-out.tsx

@@ -0,0 +1,71 @@
+import { ITextDetails } from "@designcombo/types";
+import { useMemo } from "react";
+import { interpolate } from "remotion";
+
+const TypeWriterOut = ({
+  animationDuration,
+  text,
+  details,
+  frame,
+  durationInFrames
+}: {
+  animationDuration: number;
+  text: string;
+  details: ITextDetails;
+  frame: number;
+  durationInFrames: number;
+}) => {
+  const visibleCharacters = Math.floor(
+    interpolate(
+      frame,
+      [durationInFrames - animationDuration, durationInFrames],
+      [text.length, 0],
+      { extrapolateRight: "clamp" }
+    )
+  );
+
+  const visibleText = useMemo(() => {
+    let count = 0;
+    return text
+      .split(" ")
+      .map((word) => {
+        if (count + word.length <= visibleCharacters) {
+          count += word.length + 1; // Contamos el espacio
+          return word;
+        }
+        if (count < visibleCharacters) {
+          const partialWord = word.slice(0, visibleCharacters - count);
+          count = visibleCharacters;
+          return partialWord;
+        }
+        return "";
+      })
+      .join(" ");
+  }, [visibleCharacters]);
+
+  return (
+    <div
+      style={{
+        textAlign: "center"
+      }}
+    >
+      <span
+        style={{
+          fontSize: details.fontSize
+        }}
+      >
+        {visibleText}
+      </span>
+      <span
+        style={{
+          color: "#60a5fa",
+          opacity: frame % 15 < 7 ? 1 : 0
+        }}
+      >
+        |
+      </span>
+    </div>
+  );
+};
+
+export default TypeWriterOut;

src/player/animated/text-animated.tsx

@@ -0,0 +1,226 @@
+import { ITextDetails } from "@designcombo/types";
+import React, { useMemo } from "react";
+import { useCurrentFrame } from "remotion";
+import AnimatedTextIn from "./text-animated-types/animations-in/text-animated-in";
+import SunnyMorningsAnimationIn from "./text-animated-types/animations-in/sunny-mornings-in";
+import DominoDreamsIn from "./text-animated-types/animations-in/domino-dreams-in";
+import GetThinkersAnimationIn from "./text-animated-types/animations-in/great-thinkers-in";
+import BeatifulQuestionAnimationIn from "./text-animated-types/animations-in/beatiful-question-in";
+import MadeWithLoveAnimationIn from "./text-animated-types/animations-in/made-with-love-in";
+import AnimatedTextOut from "./text-animated-types/animations-out/text-animated-out";
+import SunnyMorningsAnimationOut from "./text-animated-types/animations-out/sunny-mornings-out";
+import DominoDreamsAnimationOut from "./text-animated-types/animations-out/domino-dreams-out";
+import BeatifulQuestionAnimationOut from "./text-animated-types/animations-out/beatiful-question-out";
+import RealityIsBrokenAnimationIn from "./text-animated-types/animations-in/reality-is-broken-in";
+import MadeWithLoveAnimationOut from "./text-animated-types/animations-out/made-with-love-out";
+import RealityIsBrokenAnimationOut from "./text-animated-types/animations-out/reality-is-broken-out";
+import GreatThinkersAnimationOut from "./text-animated-types/animations-out/great-thinkers-out";
+import VogueLetterByLetter from "./text-animated-types/animations-loop/vogue";
+import DragonflyText from "./text-animated-types/animations-loop/dragonfly";
+import BillboardText from "./text-animated-types/animations-loop/billboard";
+import DropAnimationIn from "./text-animated-types/animations-in/drop-in";
+import DescompressAnimationIn from "./text-animated-types/animations-in/descompress-in";
+import DescompressAnimationOut from "./text-animated-types/animations-out/descompress-out";
+import DropAnimationOut from "./text-animated-types/animations-out/drop-out";
+import Heartbeat from "./text-animated-types/animations-loop/heartbeat";
+import Wave from "./text-animated-types/animations-loop/wave";
+import ShakyLettersText from "./text-animated-types/animations-loop/shaky-letters-text";
+import PulseText from "./text-animated-types/animations-loop/pulse";
+import { renderFullTextAnimation } from "./text-animated-full";
+
+const animationsIn: { [key: string]: React.FC<any> } = {
+  animatedTextIn: AnimatedTextIn,
+  sunnyMorningsAnimationIn: SunnyMorningsAnimationIn,
+  dominoDreamsIn: DominoDreamsIn,
+  greatThinkersAnimationIn: GetThinkersAnimationIn,
+  beautifulQuestionsAnimationIn: BeatifulQuestionAnimationIn,
+  madeWithLoveAnimationIn: MadeWithLoveAnimationIn,
+  realityIsBrokenAnimationIn: RealityIsBrokenAnimationIn,
+  dropAnimationIn: DropAnimationIn,
+  descompressAnimationIn: DescompressAnimationIn
+};
+
+const animationsOut: { [key: string]: React.FC<any> } = {
+  animatedTextOut: AnimatedTextOut,
+  sunnyMorningsAnimationOut: SunnyMorningsAnimationOut,
+  dominoDreamsAnimationOut: DominoDreamsAnimationOut,
+  beautifulQuestionsAnimationOut: BeatifulQuestionAnimationOut,
+  madeWithLoveAnimationOut: MadeWithLoveAnimationOut,
+  realityIsBrokenAnimationOut: RealityIsBrokenAnimationOut,
+  greatThinkersAnimationOut: GreatThinkersAnimationOut,
+  descompressAnimationOut: DescompressAnimationOut,
+  dropAnimationOut: DropAnimationOut
+};
+
+const animationsLoop: { [key: string]: React.FC<any> } = {
+  vogueAnimationLoop: VogueLetterByLetter,
+  dragonFlyAnimationLoop: DragonflyText,
+  billboardAnimationLoop: BillboardText,
+  heartbeatAnimationLoop: Heartbeat,
+  waveAnimationLoop: Wave,
+  shakyLettersTextAnimationLoop: ShakyLettersText,
+  pulseAnimationLoop: PulseText
+};
+
+const getTextLines = (
+  text: string,
+  width: number,
+  fontSize: number
+): string[] => {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+
+  if (!context) return [];
+
+  context.font = `${fontSize}px Arial`;
+  const words = text.split(" ");
+  let lines: string[] = [];
+  let currentLine = "";
+
+  words.forEach((word) => {
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+    const textWidth = context.measureText(testLine).width;
+
+    if (textWidth > width) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  });
+
+  if (currentLine) lines.push(currentLine);
+
+  return lines;
+};
+
+export const TextAnimated: React.FC<{
+  text: string;
+  fps: number;
+  textAnimationNameIn: string;
+  textAnimationNameOut: string;
+  textAnimationNameLoop: string;
+  details: ITextDetails;
+  animationTextInFrames: number;
+  animationTextOutFrames: number;
+  animationTextLoopFrames: number;
+  durationInFrames: number;
+  animationFonts: { fontFamily: string; url: string }[];
+}> = ({
+  text,
+  fps,
+  textAnimationNameIn,
+  textAnimationNameOut,
+  textAnimationNameLoop,
+  details,
+  animationTextInFrames,
+  animationTextOutFrames,
+  animationTextLoopFrames,
+  durationInFrames,
+  animationFonts
+}) => {
+  const frame = useCurrentFrame();
+  const animInFrom = animationTextInFrames;
+  const animOut = durationInFrames - animationTextOutFrames;
+  const validAnimIn = textAnimationNameIn ? animInFrom >= frame : false;
+  const validAnimOut = textAnimationNameOut ? animOut < frame : false;
+  if (!validAnimOut && !validAnimIn) {
+    return (
+      <div
+        style={{
+          whiteSpace: "pre-line",
+          maxWidth: "100%"
+        }}
+      >
+        {text}
+      </div>
+    );
+  }
+
+  const lines = getTextLines(text, details.width, details.fontSize);
+
+  const fullTextAnimation = renderFullTextAnimation({
+    frame,
+    text,
+    details,
+    fps,
+    durationInFrames,
+    animationTextInFrames,
+    animationTextOutFrames,
+    animationTextLoopFrames,
+    animationFonts,
+    validAnimIn,
+    validAnimOut,
+    textAnimationNameIn,
+    textAnimationNameOut,
+    textAnimationNameLoop
+  });
+
+  if (fullTextAnimation) {
+    return fullTextAnimation;
+  }
+
+  const maxTextLengthInLine = lines.reduce(
+    (max, line) => Math.max(max, line.length),
+    0
+  );
+
+  const AnimationComponentIn = animationsIn[textAnimationNameIn];
+  const AnimationComponentOut = animationsOut[textAnimationNameOut];
+  const AnimationComponentLoop = animationsLoop[textAnimationNameLoop];
+
+  return (
+    <>
+      {lines.map((line, rowIndex) => (
+        <div key={rowIndex}>
+          {line.split("").map((char, index) => {
+            if (validAnimIn && AnimationComponentIn) {
+              return (
+                <AnimationComponentIn
+                  key={index}
+                  char={char}
+                  index={index}
+                  frame={frame}
+                  textLength={maxTextLengthInLine}
+                  fps={fps}
+                  animationTextInFrames={animationTextInFrames}
+                  details={details}
+                />
+              );
+            }
+            if (validAnimOut && AnimationComponentOut) {
+              return (
+                <AnimationComponentOut
+                  key={index}
+                  char={char}
+                  index={index}
+                  frame={frame}
+                  textLength={maxTextLengthInLine}
+                  fps={fps}
+                  animationTextOutFrames={animationTextOutFrames}
+                  durationInFrames={durationInFrames}
+                  details={details}
+                />
+              );
+            }
+            if (textAnimationNameLoop && !validAnimIn && !validAnimOut) {
+              return (
+                <AnimationComponentLoop
+                  key={index}
+                  char={char}
+                  index={index}
+                  frame={frame}
+                  textLength={maxTextLengthInLine}
+                  fps={fps}
+                  animationTextLoopFrames={animationTextLoopFrames}
+                  details={details}
+                />
+              );
+            }
+            return <span key={index}>{char}</span>;
+          })}
+        </div>
+      ))}
+    </>
+  );
+};

src/player/animated/types.ts

@@ -0,0 +1,58 @@
+// types.ts
+
+export interface Animation {
+  property: string;
+  from: number;
+  to: number;
+  durationInFrames: number;
+  ease: (t: number) => number;
+  delay?: number;
+  previewUrl?: string;
+  name?: string;
+  details?: {
+    fonts?: {
+      fontFamily: string;
+      url: string;
+    }[];
+  };
+}
+
+export interface StaggerConfig {
+  amount: number;
+  overlap?: number; // 0-1, where 1 means full overlap
+}
+
+export interface AnimationConfig {
+  in?: Animation | Animation[];
+  out?: Animation | Animation[];
+  stagger?: StaggerConfig;
+}
+
+export interface AnimatedElementProps {
+  animationIn?: Animation | Animation[];
+  animationOut?: Animation | Animation[];
+  durationInFrames: number;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface AnimatedTextProps {
+  children: string;
+  durationInFrames: number;
+  wordAnimation?: AnimationConfig;
+  letterAnimation?: AnimationConfig;
+  className?: string;
+}
+
+// You might want to export these utility types as well
+export type CombineAnimations = (
+  ...animations: (Animation | Animation[] | undefined)[]
+) => Animation[];
+
+export type CreateStaggeredAnimations = (
+  animations: Animation | Animation[] | undefined,
+  count: number,
+  stagger: StaggerConfig,
+  durationInFrames: number,
+  isOut: boolean
+) => Animation[];

src/player/base-sequence.tsx

@@ -0,0 +1,101 @@
+import { ISize, ITrackItem } from "@designcombo/types";
+import { AbsoluteFill, Sequence } from "remotion";
+import { calculateFrames } from "../utils/frames";
+import { calculateContainerStyles } from "./styles";
+import { TransitionSeries } from "@designcombo/transitions";
+
+export interface SequenceItemOptions {
+  handleTextChange?: (id: string, text: string) => void;
+  fps: number;
+  editableTextId?: string | null;
+  currentTime?: number;
+  zIndex?: number;
+  onTextBlur?: (id: string, text: string) => void;
+  size?: ISize;
+  frame?: number;
+  isTransition?: boolean;
+}
+
+export const BaseSequence = ({
+  item,
+  options,
+  children
+}: {
+  item: ITrackItem;
+  options: SequenceItemOptions;
+  children: React.ReactNode;
+}) => {
+  const { details } = item as ITrackItem;
+  const { fps, isTransition } = options;
+  const { from, durationInFrames } = calculateFrames(
+    {
+      from: item.display.from,
+      to: item.display.to
+    },
+    fps
+  );
+  const crop = details.crop || {
+    x: 0,
+    y: 0,
+    width: item.details.width,
+    height: item.details.height
+  };
+
+  const background =
+    details?.background?.type === "color"
+      ? details?.background?.value
+      : typeof details?.background === "string"
+        ? details?.background
+        : "transparent";
+
+  if (isTransition) {
+    return (
+      <TransitionSeries.Sequence
+        key={item.id}
+        durationInFrames={durationInFrames}
+        style={{ pointerEvents: "none" }}
+      >
+        <AbsoluteFill
+          id={item.id}
+          data-track-item="transition-element"
+          className={`designcombo-scene-item id-${item.id} designcombo-scene-item-type-${item.type}`}
+          style={calculateContainerStyles(details, crop, { background })}
+        >
+          {children}
+        </AbsoluteFill>
+      </TransitionSeries.Sequence>
+    );
+  }
+
+  return (
+    <Sequence
+      key={item.id}
+      from={from}
+      durationInFrames={durationInFrames || 1 / fps}
+      style={{
+        pointerEvents: "none"
+      }}
+    >
+      <AbsoluteFill
+        id={item.id}
+        data-track-item="transition-element"
+        className={`designcombo-scene-item id-${item.id} designcombo-scene-item-type-${item.type}`}
+        style={calculateContainerStyles(
+          details,
+          crop,
+          {
+            background,
+            pointerEvents: item.type === "audio" ? "none" : "auto",
+            overflow:
+              item.type !== "caption" && item.type !== "text"
+                ? "hidden"
+                : "visible"
+          },
+          item.type
+        )}
+      >
+        {children}
+      </AbsoluteFill>
+    </Sequence>
+  );
+};