added examples back

examples/storytelling-chatbot/frontend/components/VideoTile/VideoTile.module.css

@@ -0,0 +1,34 @@
+.container{
+    position: relative;
+    animation: fadeIn 3s ease;
+    transition: all 3s ease-out;
+}
+
+.videoTile{
+    @apply bg-gray-950;
+    width: 560px;
+    height: 560px;
+    mask-image: url('/alpha-mask.gif');
+    mask-size: cover;
+    mask-repeat: no-repeat;
+    margin:0 auto;
+    z-index: 10;
+    position: relative;
+}
+
+.inactive{
+    opacity: 0.7;
+    filter:blur(3px);
+    transform: scale(0.95)
+}
+
+@keyframes fadeIn {
+    0% {
+        filter: blur(100px);
+        opacity: 0;
+    }
+    100% {
+        filter: blur(0px);
+        opacity: 1;
+    }
+}

examples/storytelling-chatbot/frontend/components/VideoTile/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styles from "./VideoTile.module.css";
+import { DailyVideo } from "@daily-co/daily-react";
+import StoryTranscript from "@/components/StoryTranscript";
+
+interface Props {
+  sessionId: string;
+  inactive: boolean;
+}
+
+const VideoTile = ({ sessionId, inactive }: Props) => {
+  return (
+    <div className={`${styles.container} ${inactive ? styles.inactive : ""} `}>
+      <StoryTranscript />
+
+      <div className={styles.videoTile}>
+        <DailyVideo
+          sessionId={sessionId}
+          type={"video"}
+          className="aspect-square"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default VideoTile;