@effing/create 0.1.0

package/template/app/effies/index.ts

@@ -0,0 +1,48 @@
+import invariant from "tiny-invariant";
+import type { z } from "zod";
+import type { EffieData, EffieSources } from "@effing/effie";
+
+/**
+ * Arguments passed to effie renderer functions
+ */
+export type EffieRendererArgs<PropsType> = {
+  props: PropsType;
+  width: number;
+  height: number;
+};
+
+type EffieModule = {
+  propsSchema: z.ZodSchema<unknown>;
+  previewProps: object;
+  renderer: (
+    args: EffieRendererArgs<unknown>,
+  ) => Promise<EffieData<EffieSources>>;
+};
+
+// Dynamically load all effie modules
+const modules = Object.fromEntries(
+  Object.entries(import.meta.glob("./*.effie.tsx")).map(([key, value]) => {
+    const id = key.split("/").slice(-1)[0].replace(".effie.tsx", "");
+    return [id, value];
+  }),
+);
+
+export type EffieId = string;
+
+export function isEffieId(effieId: string): effieId is EffieId {
+  return effieId in modules;
+}
+
+export function getEffieIds(): string[] {
+  return Object.keys(modules);
+}
+
+export async function getEffie(effieId: string): Promise<EffieModule> {
+  invariant(isEffieId(effieId), `no effie found for effieId '${effieId}'`);
+  const module = (await modules[effieId]()) as EffieModule;
+  return {
+    renderer: module.renderer,
+    previewProps: module.previewProps,
+    propsSchema: module.propsSchema,
+  };
+}

package/template/app/effies/simple-slideshow.effie.tsx

@@ -0,0 +1,148 @@
+import { z } from "zod";
+import { effieData, effieSegment } from "@effing/effie";
+import { annieUrl, pngUrlFromSatori } from "~/urls.server";
+import type { EffieRendererArgs } from ".";
+import { loadFonts, interSemiBold } from "~/fonts.server";
+import type { PhotoZoomProps } from "~/annies/photo-zoom.annie";
+import {
+  TextTypewriterOverlay,
+  type TextTypewriterProps,
+} from "~/annies/text-typewriter.annie";
+
+export const propsSchema = z.object({
+  slides: z.array(
+    z.object({
+      text: z.string(),
+      imageUrl: z.string().url(),
+      duration: z.number().positive(),
+    }),
+  ),
+});
+
+type SimpleSlideshowProps = z.infer<typeof propsSchema>;
+
+export const previewProps: SimpleSlideshowProps = {
+  slides: [
+    {
+      text: "How effing awesome is this?",
+      imageUrl: "https://picsum.photos/seed/slide1/1080/1920",
+      duration: 6,
+    },
+    {
+      text: "Create beautiful videos 🤩",
+      imageUrl: "https://picsum.photos/seed/slide2/1080/1920",
+      duration: 5,
+    },
+    {
+      text: "With total ease 😎",
+      imageUrl: "https://picsum.photos/seed/slide3/1080/1920",
+      duration: 4,
+    },
+  ],
+};
+
+export async function renderer({
+  props: { slides },
+  width,
+  height,
+}: EffieRendererArgs<SimpleSlideshowProps>) {
+  const fonts = await loadFonts([interSemiBold]);
+
+  // Generate cover from first slide
+  const cover = await pngUrlFromSatori(
+    <div
+      style={{
+        width,
+        height,
+        display: "flex",
+        backgroundImage: `url(${slides[0].imageUrl})`,
+      }}
+    >
+      <TextTypewriterOverlay
+        text={slides[0].text}
+        fontSize={Math.round(width * 0.06)}
+        fontColor={"#ffffff"}
+        horizontalAlignment="center"
+        verticalAlignment="center"
+        cursorShown={false}
+      />
+    </div>,
+    { width, height, fonts },
+  );
+
+  return effieData({
+    width,
+    height,
+    fps: 30,
+    cover,
+    background: { type: "color", color: "black" },
+    segments: await Promise.all(
+      slides.map(async (slide, i) => {
+        const direction = (["left", "right"] as const)[i % 2];
+
+        return effieSegment({
+          duration: slide.duration,
+          transition:
+            i > 0
+              ? {
+                  type: "slide",
+                  direction,
+                  duration: 1,
+                }
+              : undefined,
+          layers: [
+            {
+              type: "animation",
+              source: await annieUrl<PhotoZoomProps>({
+                annieId: "photo-zoom",
+                props: {
+                  imageUrl: slide.imageUrl,
+                  frameCount: slide.duration * 30,
+                  zoomLevel: 0.2,
+                },
+                width: width * 1.2,
+                height,
+              }),
+              effects: [
+                {
+                  type: "scroll",
+                  direction,
+                  duration: slide.duration,
+                  distance: 0.2,
+                },
+              ],
+            },
+            {
+              type: "animation",
+              source: await annieUrl<TextTypewriterProps>({
+                annieId: "text-typewriter",
+                props: {
+                  text: slide.text,
+                  fontSize: Math.round(width * 0.06),
+                  fontColor: "#ffffff",
+                  typingFrameCount: Math.min(slide.text.length * 3, 60),
+                  blinkingFrameCount: Math.round((slide.duration - 2) * 30),
+                  horizontalAlignment: "center",
+                  verticalAlignment: "center",
+                },
+                width,
+                height,
+              }),
+              delay: 1,
+              effects:
+                i === slides.length - 1
+                  ? [
+                      {
+                        type: "fade-out",
+                        duration: 0.5,
+                        start: slide.duration - 0.5,
+                      },
+                    ]
+                  : undefined,
+            },
+          ],
+        });
+      }),
+    ),
+  });
+}

package/template/app/fonts.server.ts

@@ -0,0 +1,103 @@
+import type { FontData } from "@effing/satori";
+
+export type { FontData };
+
+export type Font = () => Promise<FontData>;
+
+/**
+ * Load multiple fonts in parallel
+ */
+export async function loadFonts(fonts: Font[]): Promise<FontData[]> {
+  return Promise.all(fonts.map((font) => font()));
+}
+
+// Font cache to avoid re-fetching
+const fontCache = new Map<string, Promise<ArrayBuffer>>();
+
+async function fetchFont(url: string): Promise<ArrayBuffer> {
+  if (!fontCache.has(url)) {
+    fontCache.set(
+      url,
+      fetch(url).then((res) => {
+        if (!res.ok) throw new Error(`Failed to fetch font: ${url}`);
+        return res.arrayBuffer();
+      }),
+    );
+  }
+  return fontCache.get(url)!;
+}
+
+// Google Fonts URLs - fetched from Google Fonts CSS2 API
+const GOOGLE_FONTS_BASE = "https://fonts.gstatic.com/s";
+
+/**
+ * Inter Semi-Bold (600)
+ */
+export const interSemiBold: Font = async () => ({
+  name: "Inter",
+  data: await fetchFont(
+    `${GOOGLE_FONTS_BASE}/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf`,
+  ),
+  weight: 600,
+  style: "normal",
+});
+
+/**
+ * Inter Bold (700)
+ */
+export const interBold: Font = async () => ({
+  name: "Inter",
+  data: await fetchFont(
+    `${GOOGLE_FONTS_BASE}/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf`,
+  ),
+  weight: 700,
+  style: "normal",
+});
+
+/**
+ * Roboto Regular (400)
+ */
+export const robotoRegular: Font = async () => ({
+  name: "Roboto",
+  data: await fetchFont(
+    `${GOOGLE_FONTS_BASE}/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf`,
+  ),
+  weight: 400,
+  style: "normal",
+});
+
+/**
+ * Roboto Bold (700)
+ */
+export const robotoBold: Font = async () => ({
+  name: "Roboto",
+  data: await fetchFont(
+    `${GOOGLE_FONTS_BASE}/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf`,
+  ),
+  weight: 700,
+  style: "normal",
+});
+
+/**
+ * Open Sans Regular (400)
+ */
+export const openSansRegular: Font = async () => ({
+  name: "Open Sans",
+  data: await fetchFont(
+    `${GOOGLE_FONTS_BASE}/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf`,
+  ),
+  weight: 400,
+  style: "normal",
+});
+
+/**
+ * Open Sans Semi-Bold (600)
+ */
+export const openSansSemiBold: Font = async () => ({
+  name: "Open Sans",
+  data: await fetchFont(
+    `${GOOGLE_FONTS_BASE}/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf`,
+  ),
+  weight: 600,
+  style: "normal",
+});

package/template/app/root.tsx

@@ -0,0 +1,31 @@
+import type { MetaFunction } from "react-router";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+
+export const meta: MetaFunction = () => [
+  { title: "Effing Starter" },
+  { name: "description", content: "Starter project for annies and effies" },
+];
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body
+        style={{
+          margin: 0,
+          fontFamily: "system-ui, sans-serif",
+          backgroundColor: "white",
+        }}
+      >
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/template/app/routes/_index.tsx

@@ -0,0 +1,88 @@
+import { Link, useLoaderData } from "react-router";
+import { getAnnieIds } from "~/annies";
+import { getEffieIds } from "~/effies";
+
+export async function loader() {
+  return {
+    annieIds: getAnnieIds(),
+    effieIds: getEffieIds(),
+  };
+}
+
+export default function Index() {
+  const { annieIds, effieIds } = useLoaderData<typeof loader>();
+
+  return (
+    <div style={{ padding: "2rem", maxWidth: 800, margin: "0 auto" }}>
+      <h1 style={{ marginTop: 0 }}>Effing Starter</h1>
+      <p style={{ color: "#666", fontSize: 18 }}>
+        A starter project for developing annies and effies using the @effing/*
+        packages.
+      </p>
+
+      <section style={{ marginTop: "2rem" }}>
+        <h2>Annies</h2>
+        <p style={{ color: "#666" }}>
+          Frame-by-frame animations rendered as TAR archives of PNG/JPEG frames.
+        </p>
+        {annieIds.length === 0 ? (
+          <p>
+            No annies found. Create one at <code>app/annies/*.annie.tsx</code>
+          </p>
+        ) : (
+          <ul style={{ listStyle: "none", padding: 0 }}>
+            {annieIds.map((id) => (
+              <li key={id} style={{ marginBottom: 8 }}>
+                <Link
+                  to={`/pan/${id}`}
+                  style={{
+                    display: "inline-block",
+                    padding: "8px 16px",
+                    backgroundColor: "#f5f5f5",
+                    borderRadius: 4,
+                    textDecoration: "none",
+                    color: "#333",
+                  }}
+                >
+                  {id} →
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section style={{ marginTop: "2rem" }}>
+        <h2>Effies</h2>
+        <p style={{ color: "#666" }}>
+          Video compositions defined as JSON, rendered by FFS (FFmpeg Service).
+        </p>
+        {effieIds.length === 0 ? (
+          <p>
+            No effies found. Create one at <code>app/effies/*.effie.tsx</code>
+          </p>
+        ) : (
+          <ul style={{ listStyle: "none", padding: 0 }}>
+            {effieIds.map((id) => (
+              <li key={id} style={{ marginBottom: 8 }}>
+                <Link
+                  to={`/pff/${id}`}
+                  style={{
+                    display: "inline-block",
+                    padding: "8px 16px",
+                    backgroundColor: "#f5f5f5",
+                    borderRadius: 4,
+                    textDecoration: "none",
+                    color: "#333",
+                  }}
+                >
+                  {id} →
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}

package/template/app/routes/an.$segment.tsx

@@ -0,0 +1,32 @@
+import { annieResponse } from "@effing/annie";
+import { deserialize } from "@effing/serde";
+import { getAnnie } from "~/annies";
+import type { Route } from "./+types/an.$segment";
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  // Deserialize the signed URL segment
+  const payload = await deserialize<{ annieId: string }>(
+    params.segment,
+    process.env.SECRET_KEY!,
+  );
+
+  const { annieId, ...props } = payload;
+  const { renderer, propsSchema } = await getAnnie(annieId);
+
+  // Validate props if schema exists
+  if (propsSchema) {
+    propsSchema.parse(props);
+  }
+
+  // Get dimensions from query params
+  const url = new URL(request.url);
+  const width = parseInt(url.searchParams.get("w") || "1080", 10);
+  const height = parseInt(url.searchParams.get("h") || "1080", 10);
+
+  const frames = renderer({ props, width, height });
+
+  return annieResponse(frames, {
+    signal: request.signal,
+    filename: annieId,
+  });
+}

package/template/app/routes/ff.$segment.tsx

@@ -0,0 +1,27 @@
+import { deserialize } from "@effing/serde";
+import { effieResponse } from "@effing/effie";
+import { getEffie } from "~/effies";
+import type { Route } from "./+types/ff.$segment";
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  // Deserialize the signed URL segment
+  const { effieId, ...props } = await deserialize<{
+    effieId: string;
+  }>(params.segment, process.env.SECRET_KEY!);
+
+  const { renderer, propsSchema } = await getEffie(effieId);
+
+  // Validate props if schema exists
+  if (propsSchema) {
+    propsSchema.parse(props);
+  }
+
+  // Get dimensions from query params
+  const url = new URL(request.url);
+  const width = parseInt(url.searchParams.get("w") || "1080", 10);
+  const height = parseInt(url.searchParams.get("h") || "1080", 10);
+
+  const effieData = await renderer({ props, width, height });
+
+  return effieResponse(effieData);
+}

package/template/app/routes/pan.$annieId.tsx

@@ -0,0 +1,87 @@
+import { useLoaderData } from "react-router";
+import invariant from "tiny-invariant";
+import { AnniePlayer } from "@effing/annie-player/react";
+import { getAnnie } from "~/annies";
+import { annieUrl } from "~/urls.server";
+import type { Route } from "./+types/pan.$annieId";
+
+const styles = {
+  pageContainer: {
+    padding: "2rem",
+    display: "flex",
+    flexDirection: "column",
+    gap: "2rem",
+  },
+  headerTitle: {
+    margin: 0,
+  },
+  preBlock: {
+    padding: "0.75rem 1rem",
+    backgroundColor: "#fafafa",
+    border: "1px solid #ddd",
+    borderRadius: 4,
+    overflow: "auto",
+    fontSize: "0.75rem",
+    margin: 0,
+  },
+} as const satisfies Record<string, React.CSSProperties>;
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { previewProps, propsSchema } = await getAnnie(params.annieId);
+  invariant(
+    propsSchema.safeParse(previewProps).success,
+    "previewProps does not adhere to the propsSchema",
+  );
+
+  const searchParams = new URL(request.url).searchParams;
+  const width = parseInt(searchParams.get("w") || "1080", 10);
+  const height = parseInt(searchParams.get("h") || "1080", 10);
+
+  const url = await annieUrl({
+    annieId: params.annieId,
+    props: previewProps as Record<string, unknown>,
+    width,
+    height,
+  });
+
+  return {
+    annieId: params.annieId,
+    annieUrl: url,
+    width,
+    height,
+  };
+}
+
+export default function AnniePreviewPage() {
+  const { annieId, annieUrl, width, height } = useLoaderData<typeof loader>();
+
+  const scaledResolution = { width: Math.round((540 * width) / height), height: 540 };
+
+  return (
+    <div style={styles.pageContainer}>
+      <h1 style={styles.headerTitle}>Annie Preview: {annieId}</h1>
+
+      <AnniePlayer
+        src={annieUrl}
+        height={scaledResolution.height}
+        // defaultWidth={scaledResolution.width}
+        autoLoad={true}
+        autoPlay={true}
+        fps={30}
+      />
+
+      <div>
+        <h3>Direct URL</h3>
+        <pre style={styles.preBlock}>{annieUrl}</pre>
+      </div>
+
+      <div>
+        <h3>Convert to Animated PNG</h3>
+        <pre style={styles.preBlock}>
+          {`curl '${annieUrl}' \\
+  | tar -xO | ffmpeg -f image2pipe -framerate 30 -i - -plays 0 -c:v apng -f apng ${annieId}.png`}
+        </pre>
+      </div>
+    </div>
+  );
+}