chore(clean up): restructures project as workspace monorepo and add v…

.gitignore

@@ -1,7 +1,2 @@
 node_modules
-.next
-.contentlayer
-examples/target
-.env
-.env.local
-.env.production
+.DS_Store

package.json

@@ -1,70 +1,8 @@
 {
-  "name": "apalis-website",
-  "version": "0.1.0",
+  "name": "apalis-dev",
   "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "NODE_ENV=production next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.0",
-    "@headlessui/react": "^2.1.3",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-radio-group": "^1.2.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.14",
-    "@vercel/analytics": "^1.3.1",
-    "algoliasearch": "^4.23.3",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "contentlayer": "latest",
-    "date-fns": "2.30.0",
-    "framer-motion": "^11.3.30",
-    "highlight.js": "^11.10.0",
-    "next": "^15.1.5",
-    "next-contentlayer": "latest",
-    "next-themes": "^0.3.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-instantsearch": "^7.13.0",
-    "react-tweet": "^3.2.1",
-    "react-twitch-embed": "^3.0.2",
-    "shikiji": "^0.8.7",
-    "styled-jsx": "^5.1.7",
-    "tailwind-merge": "^2.5.2"
-  },
-  "devDependencies": {
-    "@contentlayer/source-files": "^0.3.4",
-    "@mdx-js/mdx": "^3.0.1",
-    "@mermaid-js/mermaid-cli": "^11.6.0",
-    "@shikijs/rehype": "^3.22.0",
-    "@shikijs/transformers": "^3.22.0",
-    "@tailwindcss/typography": "^0.5.14",
-    "@types/node": "^22.4.1",
-    "@types/react": "18.2.14",
-    "autoprefixer": "^10.4.14",
-    "esbuild": "^0.23.1",
-    "github-slugger": "^2.0.0",
-    "hast-util-to-string": "^3.0.0",
-    "mdast-util-mdx": "^3.0.0",
-    "mdast-util-to-markdown": "^2.1.0",
-    "mdx-bundler": "^10.0.3",
-    "postcss": "^8.4.24",
-    "postcss-import": "^16.1.0",
-    "puppeteer": "^24.15.0",
-    "rehype-mdx-code-props": "^3.0.1",
-    "rehype-pretty-code": "^0.12.1",
-    "rehype-raw": "^6.1.1",
-    "rehype-slug": "^6.0.0",
-    "remark-code-import": "^1.2.0",
-    "remark-frontmatter": "^5.0.0",
-    "remark-gfm": "^3.0.1",
-    "shiki": "^3.22.0",
-    "tailwindcss": "^3.3.2",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "5.1.6"
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+  "workspaces": [
+    "website",
+    "video"
+  ]
+}

video/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+.remotion
+dist

video/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "apalis-animation",
+  "version": "1.0.0",
+  "description": "Apalis Animation – built with Remotion",
+  "scripts": {
+    "start": "npx remotion studio src/index.tsx",
+    "render": "npx remotion render src/index.tsx ApalisIntro out/apalis-intro.mp4",
+    "upgrade": "npx remotion upgrade"
+  },
+  "dependencies": {
+    "@remotion/cli": "4.0.290",
+    "@remotion/player": "^4.0.448",
+    "@remotion/renderer": "4.0.290",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "remotion": "4.0.290"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^6.0.2"
+  }
+}

video/remotion.config.ts

@@ -0,0 +1,4 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);

video/src/Root.tsx

@@ -0,0 +1,168 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Composition,
+  interpolate,
+  Sequence,
+  useCurrentFrame,
+} from "remotion";
+import { HeroScene } from "./scenes/HeroScene";
+import { TitleScene } from "./scenes/TitleScene";
+import { HookScene } from "./scenes/HookScene";
+import { ProblemScene } from "./scenes/ProblemScene";
+import { IntroApalisScene } from "./scenes/IntroApalisScene";
+import { PipelineScene } from "./scenes/PipelineScene";
+import { UseCasesScene } from "./scenes/UseCasesScene";
+import { WhoItsForScene } from "./scenes/WhoItsForScene";
+import { DependencyInjectionScene } from "./scenes/DependencyInjectionScene";
+import { ErrorHandlingScene } from "./scenes/ErrorHandlingScene";
+import { BackendScene } from "./scenes/BackendScene";
+import { WorkflowsScene } from "./scenes/WorkflowsScene";
+import { IntegrationsScene } from "./scenes/IntegrationsScene";
+
+const FADE = 10;
+
+const FadeWrapper: React.FC<{
+  durationInFrames: number;
+  children: React.ReactNode;
+  fadeIn?: boolean;
+  fadeOut?: boolean;
+}> = ({ durationInFrames, children, fadeIn = true, fadeOut = true }) => {
+  const frame = useCurrentFrame();
+  const fadeInOpacity = fadeIn
+    ? interpolate(frame, [0, FADE], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+      })
+    : 1;
+  const fadeOutOpacity = fadeOut
+    ? interpolate(frame, [durationInFrames - FADE, durationInFrames], [1, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+      })
+    : 1;
+  return (
+    <AbsoluteFill style={{ opacity: Math.min(fadeInOpacity, fadeOutOpacity) }}>
+      {children}
+    </AbsoluteFill>
+  );
+};
+
+// Scene frame map
+// Scene 1  (Hero):          0 –  200  (200 frames, ~6.7s)
+// Scene 2  (Title):       200 –  400  (200 frames, ~6.7s)
+// Scene 3  (Hook):        400 –  610  (210 frames, ~7s)
+// Scene 4  (Problem):     610 –  790  (180 frames, ~6s)
+// Scene 5  (IntroApalis): 790 – 1150  (360 frames, ~12s)
+// Scene 6  (Pipeline):   1150 – 1360  (210 frames, ~7s)
+// Scene 7  (UseCases):   1360 – 1570  (210 frames, ~7s)
+// Scene 8  (DepInject):  1570 – 1840  (270 frames, ~9s)
+// Scene 9  (ErrHandle):  1840 – 2110  (270 frames, ~9s)
+// Scene 10 (Backend):    2110 – 2770  (660 frames, ~22s — 4 internal acts)
+// Scene 11 (Workflows):  2770 – 3570  (800 frames, ~26.7s — 4 internal acts)
+// Scene 12 (Integrations): 3570 – 4370 (800 frames, ~26.7s — 5 internal acts, 144f reading window each)
+// Scene 13 (WhoItsFor):  4370 – 4550  (180 frames, ~6s)
+// Total: 4550 frames @ 30 fps = ~152 seconds
+
+const ApalisIntro: React.FC = () => {
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#0d0d0d",
+        fontFamily:
+          "system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif",
+      }}
+    >
+      <Sequence from={0} durationInFrames={200}>
+        <FadeWrapper durationInFrames={200} fadeIn={false}>
+          <HeroScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={200} durationInFrames={200}>
+        <FadeWrapper durationInFrames={200}>
+          <TitleScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={400} durationInFrames={210}>
+        <FadeWrapper durationInFrames={210}>
+          <HookScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={610} durationInFrames={180}>
+        <FadeWrapper durationInFrames={180}>
+          <ProblemScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={790} durationInFrames={360}>
+        <FadeWrapper durationInFrames={360}>
+          <IntroApalisScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={1150} durationInFrames={210}>
+        <FadeWrapper durationInFrames={210}>
+          <PipelineScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={1360} durationInFrames={210}>
+        <FadeWrapper durationInFrames={210}>
+          <UseCasesScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={1570} durationInFrames={270}>
+        <FadeWrapper durationInFrames={270}>
+          <DependencyInjectionScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={1840} durationInFrames={270}>
+        <FadeWrapper durationInFrames={270}>
+          <ErrorHandlingScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={2110} durationInFrames={660}>
+        <FadeWrapper durationInFrames={660}>
+          <BackendScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={2770} durationInFrames={800}>
+        <FadeWrapper durationInFrames={800}>
+          <WorkflowsScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={3570} durationInFrames={800}>
+        <FadeWrapper durationInFrames={800}>
+          <IntegrationsScene />
+        </FadeWrapper>
+      </Sequence>
+
+      <Sequence from={4370} durationInFrames={180}>
+        <FadeWrapper durationInFrames={180} fadeOut={false}>
+          <WhoItsForScene />
+        </FadeWrapper>
+      </Sequence>
+    </AbsoluteFill>
+  );
+};
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <Composition
+      id="ApalisIntro"
+      component={ApalisIntro}
+      durationInFrames={4550}
+      fps={30}
+      width={1920}
+      height={1080}
+    />
+  );
+};