Add motivationa;

src/Compositions.tsx

@@ -56,10 +56,11 @@ export const Compositions: React.FC = () => {
     let contents: SequentialSceneData[] =
         Script.transcript
             .sort((t, u) => t.index - u.index)
-            .filter(item => item.audioCaptionFile != undefined)
-            .slice(0, 2)
+            // .filter(item => (item.audioCaptionFile != undefined))
+            // .slice(0, 2)
             .map((section) => {
-                var { text, duration: durationMilis, offset, imageAbsPaths, audioFullPath, title, pointers } = section
+                var { text, duration: durationMilis, offset, mediaAbsPaths, imageAbsPaths, audioFullPath, title, pointers } = section
+                imageAbsPaths = imageAbsPaths || mediaAbsPaths || []
                 if (!durationMilis) {
                     durationMilis = section.durationInSeconds * 1000
                 }
@@ -117,7 +118,7 @@ export const Compositions: React.FC = () => {
                 return frame
             })
 
-
+    console.log('contents', contents)
     const intro = {
         durationInFrames: 0,
         durationInSec: 5.433,

src/common/Error.tsx

@@ -0,0 +1,33 @@
+import * as Montserrat from "@remotion/google-fonts/Montserrat";
+
+export function ErrorMsg(props: { error?: string, children?: any }) {
+
+  const { fontFamily } = Montserrat.loadFont("normal", { weights: ["500"] });
+  const baseStyle = {
+    borderColor: "transparent",
+    borderRadius: "2rem",
+    borderLeftWidth: "4px",
+    borderRightWidth: "4px",
+    color: "#fff",
+    textShadow: "0px 0px 50px #000, 0px 0px 50px #000",
+    padding: "0.2rem 1.5rem",
+  };
+
+  return (
+    <center style={{
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      alignContent: 'center'
+    }}>
+      <span style={{
+        ...baseStyle,
+        fontFamily,
+        fontSize: 42,
+      }}>
+        {props.error || props.children || 'An error occurred in rendering'}
+      </span>
+    </center>
+  )
+}

src/examples/Logo.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
-
-export const Logo: React.FC<{
-	logoColor: string;
-}> = ({logoColor}) => {
-	const frame = useCurrentFrame();
-	const {height, fps} = useVideoConfig();
-
-	const entrance = spring({
-		fps,
-		frame,
-		config: {
-			damping: 200,
-		},
-		durationInFrames: 30,
-	});
-
-	const entranceOffset = interpolate(entrance, [0, 1], [height, 0]);
-
-	const wave1 = Math.cos(frame / 15) * 10 + entranceOffset;
-	const wave2 = Math.cos((frame - 5) / 15) * 10 + entranceOffset;
-
-	return (
-		<div>
-			<svg
-				style={{transform: `translateY(${wave1}px)`}}
-				className="absolute"
-				height={120}
-				viewBox="0 0 51 31"
-			>
-				<path
-					d="M0 25.364C1.701 18.6 5.954 15.218 12.758 15.218C19.0815 15.218 21.9775 18.1395 24.4794 20.6634L24.48 20.664C26.015 22.213 27.403 23.613 29.344 24.096C32.746 24.941 35.723 23.673 38.275 20.291C36.574 27.055 32.321 30.436 25.517 30.436C19.1925 30.436 16.2975 27.5155 13.7956 24.9916L13.795 24.991C12.26 23.441 10.872 22.041 8.93 21.559C5.529 20.714 2.552 21.982 0 25.364Z"
-					className="fill-sky-400"
-					style={{fill: logoColor}}
-				/>
-			</svg>
-			<svg
-				style={{transform: `translateY(${wave2}px)`}}
-				height={120}
-				viewBox="0 0 51 31"
-			>
-				<path
-					d="M12 10.146C13.701 3.382 17.954 0 24.758 0C31.0815 0 33.9775 2.92151 36.4794 5.44536L36.48 5.446C38.015 6.995 39.403 8.395 41.344 8.878C44.746 9.723 47.723 8.455 50.275 5.073C48.574 11.837 44.321 15.218 37.517 15.218C31.1925 15.218 28.2975 12.2975 25.7956 9.77365L25.795 9.773C24.26 8.223 22.872 6.823 20.93 6.341C17.529 5.496 14.552 6.764 12 10.146Z"
-					className="fill-sky-400"
-					style={{fill: logoColor}}
-				/>
-			</svg>
-		</div>
-	);
-};

src/examples/Root.tsx

@@ -1,24 +0,0 @@
-import { Composition } from 'remotion';
-import { MyComposition, myCompSchema } from './SampleComposition';
-import '../style.css';
-
-export const RemotionRoot: React.FC = () => {
-	return (
-		<>
-			<Composition
-				id="SemibitComposition"
-				component={MyComposition}
-				durationInFrames={240}
-				fps={30}
-				width={1280}
-				height={720}
-				schema={myCompSchema}
-				defaultProps={{
-					titleText: 'Welcome to Remotion with Tailwind CSS',
-					titleColor: '#000000',
-					logoColor: '#00bfff',
-				}}
-			/>
-		</>
-	);
-};

src/examples/SampleComposition.tsx

@@ -1,28 +0,0 @@
-import { AbsoluteFill } from 'remotion';
-import { Logo } from './Logo';
-import { Subtitle } from './Subtitle';
-import { Title } from './Title';
-import { z } from 'zod';
-import { zColor } from '@remotion/zod-types';
-
-export const myCompSchema = z.object({
-	titleText: z.string(),
-	titleColor: zColor(),
-	logoColor: zColor(),
-});
-
-export const MyComposition: React.FC<z.infer<typeof myCompSchema>> = ({
-	titleText: propOne,
-	titleColor: propTwo,
-	logoColor: propThree,
-}) => {
-	return (
-		<AbsoluteFill className="bg-gray-100 items-center justify-center">
-			<div className="m-10" />
-			<Logo logoColor={propThree} />
-			<div className="m-3" />
-			<Title titleText={propOne} titleColor={propTwo} />
-			<Subtitle />
-		</AbsoluteFill>
-	);
-};

src/examples/Subtitle.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import {interpolate, useCurrentFrame} from 'remotion';
-
-export const Subtitle: React.FC = () => {
-	const frame = useCurrentFrame();
-	const opacity = interpolate(frame, [30, 50], [0, 1], {
-		extrapolateLeft: 'clamp',
-		extrapolateRight: 'clamp',
-	});
-
-	return (
-		<div className="text-gray-600 text-3xl" style={{opacity}}>
-			Edit <code>src/Composition.tsx</code> and save to reload.
-		</div>
-	);
-};

src/examples/TestComposition.tsx

@@ -1,63 +0,0 @@
-//@ts-nocheck
-import { Composition, delayRender, continueRender, staticFile, Easing } from 'remotion'
-import { getVideoMetadata } from "@remotion/media-utils";
-import React, { useEffect, useState } from 'react'
-import { SingleTextWithBG } from '../youtube/SingleTextWithBG';
-import TransitionSeries from 'remotion-transition-series/lib/TransitionSeries';
-import { Plate } from '../anims/Plate';
-import { Pan } from '../anims/Pan';
-
-import { TransitionImplementationProps } from 'remotion-transition-series/lib/components/Transition';
-
-const Transition: React.FC<{
-    transitionComponent: (
-        props: TransitionImplementationProps,
-        componentA: any,
-        componentB: any
-    ) => React.ReactNode;
-}> = ({ transitionComponent, componentA, componentB }) => {
-    return (
-        <TransitionSeries>
-            <TransitionSeries.Sequence durationInFrames={60}>
-                (componentA || <Plate style={{ backgroundColor: 'salmon', color: 'black' }}>A</Plate>)
-            </TransitionSeries.Sequence>
-
-            <TransitionSeries.Transition
-                durationInFrames={30}
-                transitionComponent={transitionComponent}
-            />
-
-            <TransitionSeries.Sequence durationInFrames={60}>
-                (componentB || <Plate style={{ backgroundColor: 'indigo', color: 'white' }}>B</Plate>)
-            </TransitionSeries.Sequence>
-        </TransitionSeries>
-    );
-};
-
-
-export const TestComposition: React.FC = () => {
-
-
-    const duration = 100;
-    const easeInOutExp = Easing.inOut(Easing.exp);
-
-    return (
-        <>
-            <Composition
-                id="TestComposition"
-                component={() => <Transition transitionComponent={
-                    ({ progress, ...props }) => (
-                        <Pan {...props} progress={easeInOutExp(progress)} />
-                    )
-                } />}
-                width={1920}
-                height={1080}
-                fps={30}
-                durationInFrames={90}
-            />
-
-        </>
-    )
-
-
-}

src/examples/TestRoot.tsx

@@ -1,19 +0,0 @@
-import { Composition } from "remotion";
-
-function MyComponent() {
-    return <div>Hi</div>
-}
-export const RemotionRoot = () => {
-    return (
-        <>
-            <Composition
-                id="comp"
-                fps={30}
-                height={1080}
-                width={1920}
-                durationInFrames={90}
-                component={MyComponent}
-            />
-        </>
-    );
-};

src/examples/Title.tsx

@@ -1,23 +0,0 @@
-import {interpolate} from 'remotion';
-import {useCurrentFrame} from 'remotion';
-import React from 'react';
-
-export const Title: React.FC<{
-	titleText: string;
-	titleColor: string;
-}> = ({titleText, titleColor}) => {
-	const frame = useCurrentFrame();
-	const opacity = interpolate(frame, [20, 40], [0, 1], {
-		extrapolateLeft: 'clamp',
-		extrapolateRight: 'clamp',
-	});
-	return (
-		<div
-			style={{opacity, color: titleColor}}
-			className="text-gray-700 text-5xl font-bold leading-relaxed"
-		>
-			{' '}
-			{titleText}
-		</div>
-	);
-};

src/ig-reel/IG2LineMotivationalScene.tsx

@@ -0,0 +1,142 @@
+import { Meta, Transcript } from "common-utils";
+import { Audio, Img, spring, staticFile, useCurrentFrame } from "remotion";
+import * as Montserrat from "@remotion/google-fonts/Montserrat";
+import { MediaBackground } from "../youtube/MediaBackground";
+import { ErrorMsg } from "../common/Error";
+import { Animated, Fade } from 'remotion-animated';
+
+export default function IG2LineMotivationalScene(props: { meta: Meta; item: Transcript }) {
+  const { meta, item: transcript } = props;
+  const { fps } = meta;
+  const { mediaAbsPaths, audioFullPath, durationInSeconds } = transcript;
+
+  const media = mediaAbsPaths[0];
+  const watermark = mediaAbsPaths[1];
+  const bgMusicPath = staticFile(audioFullPath || "");
+  const { fontFamily } = Montserrat.loadFont("normal", { weights: ["400"] });
+  const frame = useCurrentFrame();
+
+
+
+  const scale = spring({ fps, frame });
+
+  const baseStyle = {
+    textAlign: 'center',
+    borderColor: "transparent",
+    borderRadius: "2rem",
+    borderLeftWidth: "4px",
+    borderRightWidth: "4px",
+    color: "#fff",
+    textShadow: "0px 0px 50px #000, 0px 0px 50px #000",
+    padding: "0.2rem 1.5rem",
+  };
+
+  const highlightStyle = {
+    backgroundColor: "#FFFF00",
+    color: "#fff",
+    textShadow: "0px 0px 50px #000, 0px 0px 50px #000",
+    borderStyle: "solid",
+  };
+  const audioCaption = transcript.audioCaption
+  if (!audioCaption) {
+    return (
+      <ErrorMsg>
+        Missing `audioCaption` in transcript item {`[${transcript.title || transcript.index}]`}
+      </ErrorMsg>
+    )
+  }
+
+  let line1 = audioCaption.words[0]
+  let line2 = audioCaption.words[1]
+  let line2String = line2.word
+  let line2Opacity = 0
+  let line2animStartFrame = line2.start * fps;
+  let line2animEndFrame = line2.end * fps;
+  if (frame > line2animStartFrame) {
+    line2Opacity = Math.min(
+      1,
+      (frame - line2animStartFrame) / (line2animEndFrame - line2animStartFrame)
+    );
+  }
+
+  let watermarkPath;
+  if (watermark) {
+    watermarkPath = staticFile(watermark.path)
+  }
+  let watermarkText = audioCaption.words[2]
+  let watermarkOpacity = 0
+  if (watermarkText) {
+    let watermarkanimStartFrame = watermarkText.start * fps;
+    let watermarkanimEndFrame = watermarkText.end * fps;
+    if (frame > line2animStartFrame) {
+      watermarkOpacity = Math.min(
+        1,
+        (frame - watermarkanimStartFrame) / (watermarkanimEndFrame - watermarkanimStartFrame)
+      );
+    }
+  }
+
+  return (
+    <>
+      <MediaBackground
+        direction="none"
+        emphasisOnImage={true}
+        duration={fps * durationInSeconds}
+        bgImagePaths={[{ path: media.path! }]}
+      >
+        {audioFullPath && <Audio src={bgMusicPath} />}
+
+        <div
+          className="p-6 rounded-lg"
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            alignContent: "center",
+            flex: 1,
+          }}
+        >
+          <span
+            style={{
+              ...baseStyle,
+              fontFamily,
+              fontSize: 42,
+              ...line1.textStyle
+            } as any}
+          >
+            {line1.word}
+          </span>
+
+          <span
+            style={{
+              ...baseStyle,
+              fontFamily,
+              fontSize: 42,
+              opacity: line2Opacity,
+              color: highlightStyle.color,
+              ...line2.textStyle
+            } as any}
+          >
+            {line2.word}
+          </span>
+
+
+        </div>
+
+        {
+          watermarkPath && (
+            <Img src={watermarkPath}
+              style={{
+                width: '50%',
+                ...audioCaption.words[2]?.textStyle,
+                opacity: watermarkOpacity ?? 1
+              }} />
+          )
+        }
+      </MediaBackground>
+    </>
+  );
+}

src/ig-reel/IGMediaRender.tsx

@@ -8,7 +8,7 @@ import Transitions from '../../public/assets/transitions.json'
 import { RenderUtils } from "../RenderUtils";
 
 
-export function IGMediaRender(props) {
+export function IGMediaRender(props: { curZoom: number, displayMedia: DisplayMedia }) {
   let displayMedia: DisplayMedia = props.displayMedia
   let bgMediaPath = staticFile(displayMedia?.path || '')
   let curZoom = props.curZoom

src/ig-reel/IGReelComposition.tsx

@@ -3,12 +3,13 @@ import { AbsoluteFill, Audio, Easing, Img, interpolate, staticFile, useCurrentFr
 import React from 'react'
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series } from "remotion";
-import { IGScene } from './IGSimpleScene';
+import { IGSimpleScene } from './IGSimpleScene';
 import { OriginalManuscript, Transcript } from 'common-utils';
 import TransitionSeries from 'remotion-transition-series';
 import { VideoSplash } from '../anims/VideoSplash';
 import Transitions from '../../public/assets/transitions.json'
 import { RenderUtils } from '../RenderUtils';
+import IG2LineMotivationalScene from './IG2LineMotivationalScene';
 
 export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   const { fontFamily } = loadFont();
@@ -21,6 +22,7 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
   let transitions = Transitions.filter(t => t.mood?.indexOf("intro") > -1)
   let startTransition = RenderUtils.randomElement(transitions, `x-${textLen}`)
 
+  // console.log('IGReelComposition props', props)
   let bgMusicPath = staticFile(bgMusic || '')
   return (
     <AbsoluteFill style={{
@@ -40,11 +42,27 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
           transcripts.map((scriptItem: Transcript, i) => {
             let { durationInSeconds } = scriptItem
             let durationInFrames = meta.fps * durationInSeconds
-
+            let template = scriptItem.extras?.template
+            let Component = (
+              <IGSimpleScene
+                meta={props.meta}
+                script={props}
+                item={scriptItem} />
+            );
+            if (template == 'motivational-2-liner') {
+              Component = (
+                <IG2LineMotivationalScene
+                  meta={props.meta}
+                  script={props}
+                  item={scriptItem} />
+              )
+            }
             return (
               <>
                 <TransitionSeries.Sequence durationInFrames={durationInFrames}>
-                  <IGScene script={props} item={scriptItem} />
+
+                  {Component}
+
                 </TransitionSeries.Sequence>
               </>
             )
@@ -52,12 +70,16 @@ export const IGReelComposition: React.FC = (props: OriginalManuscript) => {
         }
       </TransitionSeries>
 
-      <div
-        style={{
-          width: '100%',
-          height: '100%'
-        }}
-      ><VideoSplash file={startTransition.file} /></div>
+      {
+        transcripts.find(a => a.transition_type != 'none') && (
+          <div
+            style={{
+              width: '100%',
+              height: '100%'
+            }}
+          ><VideoSplash file={startTransition.file} /></div>
+        )
+      }
 
     </AbsoluteFill >
   );

src/ig-reel/IGSimpleScene.tsx

@@ -20,7 +20,12 @@ import { VideoSplash } from '../anims/VideoSplash';
 import Transitions from '../../public/assets/transitions.json'
 
 export type DisplayMedia = SectionMedia &
-{ idx: number, durationFrames: number, startFrame: number, endFrame: number, }
+{
+  idx: number,
+  durationFrames: number,
+  startFrame: number,
+  endFrame: number,
+}
 
 
 export const GenerateWordGroupRanges = function (audioCaptionFile: string, setSubtitles: Function, setGroups: Function) {
@@ -85,11 +90,12 @@ export const GenerateWordGroupRanges = function (audioCaptionFile: string, setSu
   })
 }
 
-export const IGScene: React.FC<any> = (props: {
+export const IGSimpleScene: React.FC<any> = (props: {
   script: OriginalManuscript,
   item: Transcript,
   SubtitleComponent: React.FC<any>
 }) => {
+
   const [subtitles, setSubtitles] = useState(undefined)
   const [groups, setGroups] = useState(undefined)
   const item: Transcript = props.item
@@ -103,7 +109,8 @@ export const IGScene: React.FC<any> = (props: {
 
 
   useEffect(() => {
-    GenerateWordGroupRanges(audioCaptionFile, setSubtitles, setGroups)
+    if (audioCaptionFile)
+      GenerateWordGroupRanges(audioCaptionFile, setSubtitles, setGroups)
   }, [])
 
   if (!groups) {

src/linkedin-video/LinkedinFullSysDesignComposition.tsx

@@ -3,7 +3,7 @@ import { AbsoluteFill, Audio, Easing, Img, interpolate, staticFile, useCurrentFr
 import React from 'react'
 import { loadFont } from "@remotion/google-fonts/MontserratAlternates";
 import { Series } from "remotion";
-import { IGScene } from '../ig-reel/IGSimpleScene';
+import { IGSimpleScene } from '../ig-reel/IGSimpleScene';
 import { OriginalManuscript, Transcript } from 'common-utils';
 import TransitionSeries from 'remotion-transition-series';
 import { VideoSplash } from '../anims/VideoSplash';
@@ -53,7 +53,7 @@ export const LinkedinFullSysDesignComposition: React.FC = (props: OriginalManusc
                       script={props}
                       item={scriptItem} />
                     :
-                    <IGScene
+                    <IGSimpleScene
                       script={props}
                       item={scriptItem}
                       SubtitleComponent={({ group, word }) => {

src/models/Types.ts

@@ -1,19 +1,10 @@
-export interface Word {
-  start: Number
-  end: Number
-  phenomes: Array<any>
-  startOffset: Number
-  endOffset: Number
-  idx: Number
-  sentence_end: Boolean
-  case: "success" | "failure"
-  alignedWord: String
-  word: String
+import { Word as IWord, Group as IGroup } from "common-utils"
+
+export interface Word extends IWord {
+
 }
 
 
-export interface Group {
-  words: Word[]
-  start: Number
-  end: Number
+export interface Group extends IGroup {
+
 }

src/samples/IG2LineMotivationalScene.json

@@ -0,0 +1,119 @@
+{
+  "meta": {
+    "workspaceFolderPath": ".",
+    "generationConfig": {
+      "platform": "instagram",
+      "playlistName": "motivational-2-liner",
+      "sourceVariantName": "myusername",
+      "publisherUserId": "myusername",
+      "disableCache": false,
+      "runGeneration": "1",
+      "runPublish": "1",
+      "asyncRender": "1",
+      "isTestMode": false,
+      "isChatGptTestMode": false,
+      "isDoParaphraseSource": true,
+      "youtubeSourceUrl": "",
+      "sourceContentUrl": "",
+      "wikipediaTopicUrl": "",
+      "blogUrl": "",
+      "chatgptConfig": {
+        "topic_name": "",
+        "style": "",
+        "word_count": "400",
+        "words_per_section": "200"
+      },
+      "speechVariantName": "",
+      "speechVoiceName": "",
+      "speechEndDelaySec": "",
+      "videoTitleOverride": "",
+      "bgMusicYoutubeVideoUrl": "",
+      "publishWebhookUrl": "https://app.semibit.in/api/webhooks/custom-notebook",
+      "genId": "myusername",
+      "playlistId": "myusername",
+      "extras": {}
+    },
+    "callback_url": "http://mediacore.semibit.in/generator/render_callback",
+    "renderComposition": "PaperDriveComposition",
+    "fps": 40,
+    "resolution": {
+      "width": 720,
+      "height": 1280
+    },
+    "publish_config": {
+      "platform": "instagram",
+      "userId": "myusername",
+      "playlistId": "myusername"
+    },
+    "filesRootDir": "."
+  },
+  "transcript": [
+    {
+      "audioFullPath": "audio.mp3",
+      "text": "",
+      "index": 0,
+      "status": true,
+      "transition_type": "none",
+      "title": "",
+      "durationInSeconds": 12,
+      "mediaAbsPaths": [
+        {
+          "type": "video",
+          "path": "background.mp4",
+          "durationSec": 12,
+          "dimensions": {
+            "width": 720,
+            "height": 1280
+          }
+        },
+        {
+          "type": "image",
+          "path": "logo.png"
+        }
+      ],
+      "extras": {
+        "template": "motivational-2-liner"
+      },
+      "total_syllables": 0,
+      "audioCaption": {
+        "transcript": "Hello world.",
+        "words": [
+          {
+            "textStyle": {
+              "fontSize": 35
+            },
+            "start": 0.0,
+            "end": 0.0,
+            "idx": 0,
+            "word": "If you want to hide the element"
+          },
+          {
+            "textStyle": {
+              "color": "#FFFF00",
+              "fontSize": 40
+            },
+            "start": 2.5,
+            "end": 3,
+            "idx": 1,
+            "word": "Hide it before the animation starts."
+          },
+          {
+            "textStyle": {
+              "position": "absolute",
+              "bottom": "10%"
+            },
+            "start": 6,
+            "end": 6.5,
+            "idx": 2,
+            "word": "WATERMARK"
+          }
+        ]
+      },
+      "calculate_duration_sec": null
+    }
+  ],
+  "status": true,
+  "outputFile": "./original_manuscript.json",
+  "id": "3f8c288aed",
+  "transcriptText": "None"
+}

src/samples/sample-caption.json

@@ -0,0 +1,1855 @@
+{
+  "transcript": "A surreal and intense scene of a man hand wrestling a gadha (donkey) in human form, the gadha depicted as a muscular humanoid with donkey ears, a furry face, and a powerful build; both locked in a fierce arm-wrestling match on a rough stone table, muscles straining, expressions full of determination; dramatic lighting casting deep shadows, with a rugged, ancient arena setting creating an epic and mythical atmosphere.",
+  "words": [
+    {
+      "case": "not-found-in-transcript",
+      "end": 0.01,
+      "phones": [
+        {
+          "duration": 0.01,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 0.0,
+      "word": "uh"
+    },
+    {
+      "alignedWord": "a",
+      "case": "success",
+      "end": 0.14,
+      "endOffset": 1,
+      "phones": [
+        {
+          "duration": 0.1,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 0.04,
+      "startOffset": 0,
+      "word": "A"
+    },
+    {
+      "alignedWord": "surreal",
+      "case": "success",
+      "end": 0.65,
+      "endOffset": 9,
+      "phones": [
+        {
+          "duration": 0.14,
+          "phone": "s_B"
+        },
+        {
+          "duration": 0.16,
+          "phone": "er_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "iy_I"
+        },
+        {
+          "duration": 0.11,
+          "phone": "l_E"
+        }
+      ],
+      "start": 0.14,
+      "startOffset": 2,
+      "word": "surreal"
+    },
+    {
+      "alignedWord": "and",
+      "case": "success",
+      "end": 0.78,
+      "endOffset": 13,
+      "phones": [
+        {
+          "duration": 0.04,
+          "phone": "ae_B"
+        },
+        {
+          "duration": 0.06,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.03,
+          "phone": "d_E"
+        }
+      ],
+      "start": 0.65,
+      "startOffset": 10,
+      "word": "and"
+    },
+    {
+      "alignedWord": "intense",
+      "case": "success",
+      "end": 1.23,
+      "endOffset": 21,
+      "phones": [
+        {
+          "duration": 0.06,
+          "phone": "ih_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "eh_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.04,
+          "phone": "s_E"
+        }
+      ],
+      "start": 0.78,
+      "startOffset": 14,
+      "word": "intense"
+    },
+    {
+      "alignedWord": "scene",
+      "case": "success",
+      "end": 1.52,
+      "endOffset": 27,
+      "phones": [
+        {
+          "duration": 0.12,
+          "phone": "s_B"
+        },
+        {
+          "duration": 0.11,
+          "phone": "iy_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "n_E"
+        }
+      ],
+      "start": 1.24,
+      "startOffset": 22,
+      "word": "scene"
+    },
+    {
+      "alignedWord": "of",
+      "case": "success",
+      "end": 1.69,
+      "endOffset": 30,
+      "phones": [
+        {
+          "duration": 0.07,
+          "phone": "ah_B"
+        },
+        {
+          "duration": 0.1,
+          "phone": "v_E"
+        }
+      ],
+      "start": 1.52,
+      "startOffset": 28,
+      "word": "of"
+    },
+    {
+      "alignedWord": "a",
+      "case": "success",
+      "end": 1.74,
+      "endOffset": 32,
+      "phones": [
+        {
+          "duration": 0.05,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 1.69,
+      "startOffset": 31,
+      "word": "a"
+    },
+    {
+      "alignedWord": "man",
+      "case": "success",
+      "end": 2.08,
+      "endOffset": 36,
+      "phones": [
+        {
+          "duration": 0.11,
+          "phone": "m_B"
+        },
+        {
+          "duration": 0.14,
+          "phone": "ae_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "n_E"
+        }
+      ],
+      "start": 1.74,
+      "startOffset": 33,
+      "word": "man"
+    },
+    {
+      "alignedWord": "hand",
+      "case": "success",
+      "end": 2.38,
+      "endOffset": 41,
+      "phones": [
+        {
+          "duration": 0.06,
+          "phone": "hh_B"
+        },
+        {
+          "duration": 0.11,
+          "phone": "ae_I"
+        },
+        {
+          "duration": 0.04,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "d_E"
+        }
+      ],
+      "start": 2.08,
+      "startOffset": 37,
+      "word": "hand"
+    },
+    {
+      "alignedWord": "wrestling",
+      "case": "success",
+      "end": 2.82,
+      "endOffset": 51,
+      "phones": [
+        {
+          "duration": 0.06,
+          "phone": "r_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "eh_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "s_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "l_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ng_E"
+        }
+      ],
+      "start": 2.38,
+      "startOffset": 42,
+      "word": "wrestling"
+    },
+    {
+      "case": "not-found-in-audio",
+      "endOffset": 53,
+      "startOffset": 52,
+      "word": "a"
+    },
+    {
+      "alignedWord": "<unk>",
+      "case": "success",
+      "end": 3.4000000000000004,
+      "endOffset": 59,
+      "phones": [
+        {
+          "duration": 0.43,
+          "phone": "oov_S"
+        }
+      ],
+      "start": 2.97,
+      "startOffset": 54,
+      "word": "gadha"
+    },
+    {
+      "alignedWord": "donkey",
+      "case": "success",
+      "end": 4.38,
+      "endOffset": 67,
+      "phones": [
+        {
+          "duration": 0.13,
+          "phone": "d_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "aa_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ng_I"
+        },
+        {
+          "duration": 0.12,
+          "phone": "k_I"
+        },
+        {
+          "duration": 0.3,
+          "phone": "iy_E"
+        }
+      ],
+      "start": 3.66,
+      "startOffset": 61,
+      "word": "donkey"
+    },
+    {
+      "alignedWord": "in",
+      "case": "success",
+      "end": 4.66,
+      "endOffset": 71,
+      "phones": [
+        {
+          "duration": 0.1,
+          "phone": "ih_B"
+        },
+        {
+          "duration": 0.09,
+          "phone": "n_E"
+        }
+      ],
+      "start": 4.47,
+      "startOffset": 69,
+      "word": "in"
+    },
+    {
+      "alignedWord": "human",
+      "case": "success",
+      "end": 5.03,
+      "endOffset": 77,
+      "phones": [
+        {
+          "duration": 0.04,
+          "phone": "hh_B"
+        },
+        {
+          "duration": 0.06,
+          "phone": "y_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "uw_I"
+        },
+        {
+          "duration": 0.01,
+          "phone": "m_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "n_E"
+        }
+      ],
+      "start": 4.66,
+      "startOffset": 72,
+      "word": "human"
+    },
+    {
+      "alignedWord": "form",
+      "case": "success",
+      "end": 5.48,
+      "endOffset": 82,
+      "phones": [
+        {
+          "duration": 0.09,
+          "phone": "f_B"
+        },
+        {
+          "duration": 0.16,
+          "phone": "ao_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "r_I"
+        },
+        {
+          "duration": 0.13,
+          "phone": "m_E"
+        }
+      ],
+      "start": 5.03,
+      "startOffset": 78,
+      "word": "form"
+    },
+    {
+      "alignedWord": "the",
+      "case": "success",
+      "end": 5.88,
+      "endOffset": 87,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "dh_B"
+        },
+        {
+          "duration": 0.08,
+          "phone": "ah_E"
+        }
+      ],
+      "start": 5.72,
+      "startOffset": 84,
+      "word": "the"
+    },
+    {
+      "alignedWord": "<unk>",
+      "case": "success",
+      "end": 6.16,
+      "endOffset": 93,
+      "phones": [
+        {
+          "duration": 0.28,
+          "phone": "oov_S"
+        }
+      ],
+      "start": 5.88,
+      "startOffset": 88,
+      "word": "gadha"
+    },
+    {
+      "alignedWord": "depicted",
+      "case": "success",
+      "end": 6.64,
+      "endOffset": 102,
+      "phones": [
+        {
+          "duration": 0.06,
+          "phone": "d_B"
+        },
+        {
+          "duration": 0.04,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "p_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "k_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "d_E"
+        }
+      ],
+      "start": 6.17,
+      "startOffset": 94,
+      "word": "depicted"
+    },
+    {
+      "alignedWord": "as",
+      "case": "success",
+      "end": 6.79,
+      "endOffset": 105,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "ae_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "z_E"
+        }
+      ],
+      "start": 6.64,
+      "startOffset": 103,
+      "word": "as"
+    },
+    {
+      "alignedWord": "a",
+      "case": "success",
+      "end": 6.83,
+      "endOffset": 107,
+      "phones": [
+        {
+          "duration": 0.04,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 6.79,
+      "startOffset": 106,
+      "word": "a"
+    },
+    {
+      "alignedWord": "muscular",
+      "case": "success",
+      "end": 7.3,
+      "endOffset": 116,
+      "phones": [
+        {
+          "duration": 0.1,
+          "phone": "m_B"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "s_I"
+        },
+        {
+          "duration": 0.04,
+          "phone": "k_I"
+        },
+        {
+          "duration": 0.03,
+          "phone": "y_I"
+        },
+        {
+          "duration": 0.03,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "l_I"
+        },
+        {
+          "duration": 0.01,
+          "phone": "er_E"
+        }
+      ],
+      "start": 6.83,
+      "startOffset": 108,
+      "word": "muscular"
+    },
+    {
+      "case": "not-found-in-transcript",
+      "end": 7.34,
+      "phones": [
+        {
+          "duration": 0.04,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 7.3,
+      "word": "uh"
+    },
+    {
+      "alignedWord": "<unk>",
+      "case": "success",
+      "end": 7.88,
+      "endOffset": 125,
+      "phones": [
+        {
+          "duration": 0.22,
+          "phone": "oov_S"
+        }
+      ],
+      "start": 7.66,
+      "startOffset": 117,
+      "word": "humanoid"
+    },
+    {
+      "alignedWord": "with",
+      "case": "success",
+      "end": 8.04,
+      "endOffset": 130,
+      "phones": [
+        {
+          "duration": 0.06,
+          "phone": "w_B"
+        },
+        {
+          "duration": 0.05,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.04,
+          "phone": "dh_E"
+        }
+      ],
+      "start": 7.89,
+      "startOffset": 126,
+      "word": "with"
+    },
+    {
+      "alignedWord": "donkey",
+      "case": "success",
+      "end": 8.510000000000002,
+      "endOffset": 137,
+      "phones": [
+        {
+          "duration": 0.09,
+          "phone": "d_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "aa_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ng_I"
+        },
+        {
+          "duration": 0.11,
+          "phone": "k_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "iy_E"
+        }
+      ],
+      "start": 8.05,
+      "startOffset": 131,
+      "word": "donkey"
+    },
+    {
+      "alignedWord": "ears",
+      "case": "success",
+      "end": 8.92,
+      "endOffset": 142,
+      "phones": [
+        {
+          "duration": 0.17,
+          "phone": "iy_B"
+        },
+        {
+          "duration": 0.1,
+          "phone": "r_I"
+        },
+        {
+          "duration": 0.14,
+          "phone": "z_E"
+        }
+      ],
+      "start": 8.51,
+      "startOffset": 138,
+      "word": "ears"
+    },
+    {
+      "alignedWord": "a",
+      "case": "success",
+      "end": 9.08,
+      "endOffset": 145,
+      "phones": [
+        {
+          "duration": 0.13,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 8.95,
+      "startOffset": 144,
+      "word": "a"
+    },
+    {
+      "alignedWord": "furry",
+      "case": "success",
+      "end": 9.41,
+      "endOffset": 151,
+      "phones": [
+        {
+          "duration": 0.13,
+          "phone": "f_B"
+        },
+        {
+          "duration": 0.11,
+          "phone": "er_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "iy_E"
+        }
+      ],
+      "start": 9.08,
+      "startOffset": 146,
+      "word": "furry"
+    },
+    {
+      "alignedWord": "face",
+      "case": "success",
+      "end": 9.75,
+      "endOffset": 156,
+      "phones": [
+        {
+          "duration": 0.13,
+          "phone": "f_B"
+        },
+        {
+          "duration": 0.11,
+          "phone": "ey_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "s_E"
+        }
+      ],
+      "start": 9.41,
+      "startOffset": 152,
+      "word": "face"
+    },
+    {
+      "alignedWord": "and",
+      "case": "success",
+      "end": 9.95,
+      "endOffset": 161,
+      "phones": [
+        {
+          "duration": 0.06,
+          "phone": "ah_B"
+        },
+        {
+          "duration": 0.06,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "d_E"
+        }
+      ],
+      "start": 9.78,
+      "startOffset": 158,
+      "word": "and"
+    },
+    {
+      "alignedWord": "a",
+      "case": "success",
+      "end": 10.02,
+      "endOffset": 163,
+      "phones": [
+        {
+          "duration": 0.07,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 9.95,
+      "startOffset": 162,
+      "word": "a"
+    },
+    {
+      "alignedWord": "powerful",
+      "case": "success",
+      "end": 10.54,
+      "endOffset": 172,
+      "phones": [
+        {
+          "duration": 0.09,
+          "phone": "p_B"
+        },
+        {
+          "duration": 0.14,
+          "phone": "aw_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "er_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "f_I"
+        },
+        {
+          "duration": 0.04,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "l_E"
+        }
+      ],
+      "start": 10.02,
+      "startOffset": 164,
+      "word": "powerful"
+    },
+    {
+      "alignedWord": "build",
+      "case": "success",
+      "end": 10.92,
+      "endOffset": 178,
+      "phones": [
+        {
+          "duration": 0.07,
+          "phone": "b_B"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.11,
+          "phone": "l_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "d_E"
+        }
+      ],
+      "start": 10.55,
+      "startOffset": 173,
+      "word": "build"
+    },
+    {
+      "alignedWord": "both",
+      "case": "success",
+      "end": 11.409999999999998,
+      "endOffset": 184,
+      "phones": [
+        {
+          "duration": 0.11,
+          "phone": "b_B"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ow_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "th_E"
+        }
+      ],
+      "start": 11.12,
+      "startOffset": 180,
+      "word": "both"
+    },
+    {
+      "alignedWord": "locked",
+      "case": "success",
+      "end": 11.77,
+      "endOffset": 191,
+      "phones": [
+        {
+          "duration": 0.12,
+          "phone": "l_B"
+        },
+        {
+          "duration": 0.09,
+          "phone": "aa_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "k_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "t_E"
+        }
+      ],
+      "start": 11.42,
+      "startOffset": 185,
+      "word": "locked"
+    },
+    {
+      "alignedWord": "in",
+      "case": "success",
+      "end": 11.879999999999999,
+      "endOffset": 194,
+      "phones": [
+        {
+          "duration": 0.04,
+          "phone": "ih_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "n_E"
+        }
+      ],
+      "start": 11.77,
+      "startOffset": 192,
+      "word": "in"
+    },
+    {
+      "alignedWord": "a",
+      "case": "success",
+      "end": 11.940000000000001,
+      "endOffset": 196,
+      "phones": [
+        {
+          "duration": 0.06,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 11.88,
+      "startOffset": 195,
+      "word": "a"
+    },
+    {
+      "alignedWord": "fierce",
+      "case": "success",
+      "end": 12.35,
+      "endOffset": 203,
+      "phones": [
+        {
+          "duration": 0.13,
+          "phone": "f_B"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "r_I"
+        },
+        {
+          "duration": 0.11,
+          "phone": "s_E"
+        }
+      ],
+      "start": 11.94,
+      "startOffset": 197,
+      "word": "fierce"
+    },
+    {
+      "alignedWord": "arm",
+      "case": "success",
+      "end": 12.67,
+      "endOffset": 207,
+      "phones": [
+        {
+          "duration": 0.15,
+          "phone": "aa_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "r_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "m_E"
+        }
+      ],
+      "start": 12.36,
+      "startOffset": 204,
+      "word": "arm"
+    },
+    {
+      "alignedWord": "wrestling",
+      "case": "success",
+      "end": 13.06,
+      "endOffset": 217,
+      "phones": [
+        {
+          "duration": 0.05,
+          "phone": "r_B"
+        },
+        {
+          "duration": 0.06,
+          "phone": "eh_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "s_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "l_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ng_E"
+        }
+      ],
+      "start": 12.67,
+      "startOffset": 208,
+      "word": "wrestling"
+    },
+    {
+      "alignedWord": "match",
+      "case": "success",
+      "end": 13.309999,
+      "endOffset": 223,
+      "phones": [
+        {
+          "duration": 0.05,
+          "phone": "m_B"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ae_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ch_E"
+        }
+      ],
+      "start": 13.059999,
+      "startOffset": 218,
+      "word": "match"
+    },
+    {
+      "alignedWord": "on",
+      "case": "success",
+      "end": 13.429998999999999,
+      "endOffset": 226,
+      "phones": [
+        {
+          "duration": 0.06,
+          "phone": "aa_B"
+        },
+        {
+          "duration": 0.06,
+          "phone": "n_E"
+        }
+      ],
+      "start": 13.309999,
+      "startOffset": 224,
+      "word": "on"
+    },
+    {
+      "alignedWord": "a",
+      "case": "success",
+      "end": 13.509999,
+      "endOffset": 228,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 13.429999,
+      "startOffset": 227,
+      "word": "a"
+    },
+    {
+      "alignedWord": "rough",
+      "case": "success",
+      "end": 13.739999000000001,
+      "endOffset": 234,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "r_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "f_E"
+        }
+      ],
+      "start": 13.509999,
+      "startOffset": 229,
+      "word": "rough"
+    },
+    {
+      "alignedWord": "stone",
+      "case": "success",
+      "end": 14.11,
+      "endOffset": 240,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "s_B"
+        },
+        {
+          "duration": 0.09,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ow_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "n_E"
+        }
+      ],
+      "start": 13.74,
+      "startOffset": 235,
+      "word": "stone"
+    },
+    {
+      "alignedWord": "table",
+      "case": "success",
+      "end": 14.579998999999999,
+      "endOffset": 246,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "t_B"
+        },
+        {
+          "duration": 0.12,
+          "phone": "ey_I"
+        },
+        {
+          "duration": 0.03,
+          "phone": "b_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.13,
+          "phone": "l_E"
+        }
+      ],
+      "start": 14.139999,
+      "startOffset": 241,
+      "word": "table"
+    },
+    {
+      "alignedWord": "muscles",
+      "case": "success",
+      "end": 15.309999999999999,
+      "endOffset": 255,
+      "phones": [
+        {
+          "duration": 0.13,
+          "phone": "m_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "s_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "l_I"
+        },
+        {
+          "duration": 0.03,
+          "phone": "z_E"
+        }
+      ],
+      "start": 14.86,
+      "startOffset": 248,
+      "word": "muscles"
+    },
+    {
+      "alignedWord": "straining",
+      "case": "success",
+      "end": 15.92,
+      "endOffset": 265,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "s_B"
+        },
+        {
+          "duration": 0.09,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "r_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ey_I"
+        },
+        {
+          "duration": 0.04,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.14,
+          "phone": "ng_E"
+        }
+      ],
+      "start": 15.32,
+      "startOffset": 256,
+      "word": "straining"
+    },
+    {
+      "alignedWord": "expressions",
+      "case": "success",
+      "end": 16.66,
+      "endOffset": 278,
+      "phones": [
+        {
+          "duration": 0.09,
+          "phone": "ih_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "k_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "s_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "p_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "r_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "eh_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "sh_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "z_E"
+        }
+      ],
+      "start": 15.96,
+      "startOffset": 267,
+      "word": "expressions"
+    },
+    {
+      "alignedWord": "full",
+      "case": "success",
+      "end": 16.91,
+      "endOffset": 283,
+      "phones": [
+        {
+          "duration": 0.1,
+          "phone": "f_B"
+        },
+        {
+          "duration": 0.09,
+          "phone": "uh_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "l_E"
+        }
+      ],
+      "start": 16.66,
+      "startOffset": 279,
+      "word": "full"
+    },
+    {
+      "alignedWord": "of",
+      "case": "success",
+      "end": 17.03,
+      "endOffset": 286,
+      "phones": [
+        {
+          "duration": 0.04,
+          "phone": "ah_B"
+        },
+        {
+          "duration": 0.08,
+          "phone": "v_E"
+        }
+      ],
+      "start": 16.91,
+      "startOffset": 284,
+      "word": "of"
+    },
+    {
+      "alignedWord": "determination",
+      "case": "success",
+      "end": 17.909999,
+      "endOffset": 300,
+      "phones": [
+        {
+          "duration": 0.04,
+          "phone": "d_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "er_I"
+        },
+        {
+          "duration": 0.03,
+          "phone": "m_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ey_I"
+        },
+        {
+          "duration": 0.11,
+          "phone": "sh_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.13,
+          "phone": "n_E"
+        }
+      ],
+      "start": 17.029999,
+      "startOffset": 287,
+      "word": "determination"
+    },
+    {
+      "alignedWord": "dramatic",
+      "case": "success",
+      "end": 18.8,
+      "endOffset": 310,
+      "phones": [
+        {
+          "duration": 0.09,
+          "phone": "d_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "r_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "m_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ae_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "k_E"
+        }
+      ],
+      "start": 18.21,
+      "startOffset": 302,
+      "word": "dramatic"
+    },
+    {
+      "alignedWord": "lighting",
+      "case": "success",
+      "end": 19.29,
+      "endOffset": 319,
+      "phones": [
+        {
+          "duration": 0.09,
+          "phone": "l_B"
+        },
+        {
+          "duration": 0.11,
+          "phone": "ay_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.13,
+          "phone": "ng_E"
+        }
+      ],
+      "start": 18.8,
+      "startOffset": 311,
+      "word": "lighting"
+    },
+    {
+      "alignedWord": "casting",
+      "case": "success",
+      "end": 19.81,
+      "endOffset": 327,
+      "phones": [
+        {
+          "duration": 0.05,
+          "phone": "k_B"
+        },
+        {
+          "duration": 0.13,
+          "phone": "ae_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "s_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ng_E"
+        }
+      ],
+      "start": 19.33,
+      "startOffset": 320,
+      "word": "casting"
+    },
+    {
+      "alignedWord": "deep",
+      "case": "success",
+      "end": 20.09,
+      "endOffset": 332,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "d_B"
+        },
+        {
+          "duration": 0.11,
+          "phone": "iy_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "p_E"
+        }
+      ],
+      "start": 19.81,
+      "startOffset": 328,
+      "word": "deep"
+    },
+    {
+      "alignedWord": "shadows",
+      "case": "success",
+      "end": 20.66,
+      "endOffset": 340,
+      "phones": [
+        {
+          "duration": 0.13,
+          "phone": "sh_B"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ae_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "d_I"
+        },
+        {
+          "duration": 0.11,
+          "phone": "ow_I"
+        },
+        {
+          "duration": 0.17,
+          "phone": "z_E"
+        }
+      ],
+      "start": 20.09,
+      "startOffset": 333,
+      "word": "shadows"
+    },
+    {
+      "alignedWord": "with",
+      "case": "success",
+      "end": 21.14,
+      "endOffset": 346,
+      "phones": [
+        {
+          "duration": 0.09,
+          "phone": "w_B"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "th_E"
+        }
+      ],
+      "start": 20.91,
+      "startOffset": 342,
+      "word": "with"
+    },
+    {
+      "alignedWord": "a",
+      "case": "success",
+      "end": 21.240000000000002,
+      "endOffset": 348,
+      "phones": [
+        {
+          "duration": 0.1,
+          "phone": "ah_S"
+        }
+      ],
+      "start": 21.14,
+      "startOffset": 347,
+      "word": "a"
+    },
+    {
+      "alignedWord": "rugged",
+      "case": "success",
+      "end": 21.610000000000003,
+      "endOffset": 355,
+      "phones": [
+        {
+          "duration": 0.11,
+          "phone": "r_B"
+        },
+        {
+          "duration": 0.05,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "g_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "d_E"
+        }
+      ],
+      "start": 21.240000000000002,
+      "startOffset": 349,
+      "word": "rugged"
+    },
+    {
+      "alignedWord": "ancient",
+      "case": "success",
+      "end": 22.09,
+      "endOffset": 364,
+      "phones": [
+        {
+          "duration": 0.16,
+          "phone": "ey_B"
+        },
+        {
+          "duration": 0.06,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "sh_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.05,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "t_E"
+        }
+      ],
+      "start": 21.64,
+      "startOffset": 357,
+      "word": "ancient"
+    },
+    {
+      "alignedWord": "arena",
+      "case": "success",
+      "end": 22.529999999999998,
+      "endOffset": 370,
+      "phones": [
+        {
+          "duration": 0.17,
+          "phone": "er_B"
+        },
+        {
+          "duration": 0.09,
+          "phone": "iy_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ah_E"
+        }
+      ],
+      "start": 22.13,
+      "startOffset": 365,
+      "word": "arena"
+    },
+    {
+      "alignedWord": "setting",
+      "case": "success",
+      "end": 23.01,
+      "endOffset": 378,
+      "phones": [
+        {
+          "duration": 0.11,
+          "phone": "s_B"
+        },
+        {
+          "duration": 0.12,
+          "phone": "eh_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ng_E"
+        }
+      ],
+      "start": 22.53,
+      "startOffset": 371,
+      "word": "setting"
+    },
+    {
+      "alignedWord": "creating",
+      "case": "success",
+      "end": 23.499999999999996,
+      "endOffset": 387,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "k_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "r_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "iy_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ey_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ng_E"
+        }
+      ],
+      "start": 23.009999999999998,
+      "startOffset": 379,
+      "word": "creating"
+    },
+    {
+      "alignedWord": "an",
+      "case": "success",
+      "end": 23.67,
+      "endOffset": 390,
+      "phones": [
+        {
+          "duration": 0.05,
+          "phone": "ah_B"
+        },
+        {
+          "duration": 0.12,
+          "phone": "n_E"
+        }
+      ],
+      "start": 23.5,
+      "startOffset": 388,
+      "word": "an"
+    },
+    {
+      "alignedWord": "epic",
+      "case": "success",
+      "end": 24.169999999999998,
+      "endOffset": 395,
+      "phones": [
+        {
+          "duration": 0.14,
+          "phone": "eh_B"
+        },
+        {
+          "duration": 0.08,
+          "phone": "p_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "k_E"
+        }
+      ],
+      "start": 23.759999999999998,
+      "startOffset": 391,
+      "word": "epic"
+    },
+    {
+      "alignedWord": "and",
+      "case": "success",
+      "end": 24.4,
+      "endOffset": 399,
+      "phones": [
+        {
+          "duration": 0.08,
+          "phone": "ae_B"
+        },
+        {
+          "duration": 0.13,
+          "phone": "n_I"
+        },
+        {
+          "duration": 0.01,
+          "phone": "d_E"
+        }
+      ],
+      "start": 24.18,
+      "startOffset": 396,
+      "word": "and"
+    },
+    {
+      "alignedWord": "mythical",
+      "case": "success",
+      "end": 24.92,
+      "endOffset": 408,
+      "phones": [
+        {
+          "duration": 0.1,
+          "phone": "m_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "th_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.03,
+          "phone": "k_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.08,
+          "phone": "l_E"
+        }
+      ],
+      "start": 24.41,
+      "startOffset": 400,
+      "word": "mythical"
+    },
+    {
+      "alignedWord": "atmosphere",
+      "case": "success",
+      "end": 25.650000000000002,
+      "endOffset": 419,
+      "phones": [
+        {
+          "duration": 0.11,
+          "phone": "ae_B"
+        },
+        {
+          "duration": 0.07,
+          "phone": "t_I"
+        },
+        {
+          "duration": 0.07,
+          "phone": "m_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "ah_I"
+        },
+        {
+          "duration": 0.06,
+          "phone": "s_I"
+        },
+        {
+          "duration": 0.09,
+          "phone": "f_I"
+        },
+        {
+          "duration": 0.1,
+          "phone": "ih_I"
+        },
+        {
+          "duration": 0.15,
+          "phone": "r_E"
+        }
+      ],
+      "start": 24.94,
+      "startOffset": 409,
+      "word": "atmosphere"
+    }
+  ]
+}

src/youtube/MediaBackground.tsx

@@ -13,7 +13,7 @@ import { useTranslate } from "../anims/useTranslate";
 export type MediaBackgroundProps = {
     children?: React.ReactNode;
     duration: number;
-    direction?: 'left' | 'right';
+    direction?: 'left' | 'right' | 'none';
     bgImagePaths?: { path: string }[];
     emphasisOnImage?: boolean;
     opacity?: number;
@@ -118,7 +118,7 @@ export const MediaBackground = (props: MediaBackgroundProps) => {
                 flex: 1,
                 justifyContent: 'center',//flex-end
                 flexDirection: 'column',
-                background: "linear-gradient(to bottom, #000021, #010024)",
+                background: emphasisOnImage ? undefined : "linear-gradient(to bottom, #000021, #010024)",
             }}
         >
 
@@ -127,7 +127,7 @@ export const MediaBackground = (props: MediaBackgroundProps) => {
                 (bgFile?.toLocaleLowerCase().endsWith("mp4") || mediaType == 'video' ? (
                     <Video src={bgFile} muted={muted}
                         loop
-                        style={{
+                        style={direction == 'none' ? undefined : {
                             opacity: bgOpaCity,
                             transform: `scale(${(curZoom)})  translateX(${bgTranslateX}px)`
                         }}
@@ -137,7 +137,7 @@ export const MediaBackground = (props: MediaBackgroundProps) => {
                     (
                         <Img
 
-                            style={{
+                            style={direction == 'none' ? undefined : {
                                 opacity: bgOpaCity,
                                 transform: `scale(${(curZoom)})  translateX(${bgTranslateX}px)`
                             }}
@@ -160,7 +160,7 @@ export const MediaBackground = (props: MediaBackgroundProps) => {
                     justifyContent: emphasisOnImage ? 'flex-end' : 'center',//flex-end
                     alignItems: 'center',
                     flexDirection: 'column',
-                    transform: `translateX(${textBoxTranslateX}px) translateY(${(textBoxTranslateY)}px)`
+                    transform: direction == 'none' ? undefined : `translateX(${textBoxTranslateX}px) translateY(${(textBoxTranslateY)}px)`
 
                 }} >
                 {children}