@assistkick/create 1.7.0 → 1.8.0

package/templates/assistkick-product-system/packages/video/components/outro_scene.tsx

@@ -0,0 +1,153 @@
+/** @jsxImportSource react */
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+} from "remotion";
+import { colors, fonts } from "./theme";
+
+type OutroSceneProps = {
+  title?: string;
+  subtitle?: string;
+  callToAction?: string;
+};
+
+export const OutroScene: React.FC<OutroSceneProps> = ({
+  title = "Done!",
+  subtitle = "The process is complete",
+  callToAction,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const checkSpring = spring({
+    frame,
+    fps,
+    config: { damping: 12 },
+  });
+
+  const checkScale = interpolate(checkSpring, [0, 1], [0, 1]);
+
+  const textOpacity = interpolate(frame, [0.5 * fps, 1 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const textY = interpolate(frame, [0.5 * fps, 1 * fps], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const urlOpacity = interpolate(frame, [1.2 * fps, 1.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: colors.baseDark,
+        fontFamily: fonts.sans,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {/* Background gradient circle */}
+      <div
+        style={{
+          position: "absolute",
+          width: 600,
+          height: 600,
+          borderRadius: "50%",
+          background:
+            "radial-gradient(circle, rgba(220,241,131,0.15) 0%, transparent 70%)",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+        }}
+      />
+
+      <div style={{ textAlign: "center" }}>
+        {/* Checkmark */}
+        <div
+          style={{
+            width: 100,
+            height: 100,
+            borderRadius: "50%",
+            backgroundColor: colors.accentSecondary,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "0 auto 32px",
+            transform: `scale(${checkScale})`,
+          }}
+        >
+          <svg
+            width="50"
+            height="50"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </div>
+
+        <h1
+          style={{
+            color: "white",
+            fontSize: 52,
+            fontWeight: 700,
+            margin: "0 0 16px 0",
+            opacity: textOpacity,
+            transform: `translateY(${textY}px)`,
+          }}
+        >
+          {title}
+        </h1>
+
+        <p
+          style={{
+            color: "rgba(255,255,255,0.6)",
+            fontSize: 28,
+            margin: "0 0 40px 0",
+            opacity: textOpacity,
+            transform: `translateY(${textY}px)`,
+          }}
+        >
+          {subtitle}
+        </p>
+
+        {callToAction && (
+          <div
+            style={{
+              opacity: urlOpacity,
+              display: "inline-flex",
+              alignItems: "center",
+              backgroundColor: "rgba(255,255,255,0.08)",
+              borderRadius: 12,
+              padding: "12px 28px",
+              border: "1px solid rgba(255,255,255,0.12)",
+            }}
+          >
+            <code
+              style={{
+                color: colors.accentPrimary,
+                fontSize: 22,
+                fontFamily: fonts.mono,
+              }}
+            >
+              {callToAction}
+            </code>
+          </div>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/templates/assistkick-product-system/packages/video/components/part_divider.tsx

@@ -0,0 +1,90 @@
+/** @jsxImportSource react */
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+} from "remotion";
+import { colors, fonts } from "./theme";
+
+type PartDividerProps = {
+  partNumber: number;
+  title: string;
+  color: string;
+};
+
+export const PartDivider: React.FC<PartDividerProps> = ({
+  partNumber,
+  title,
+  color,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const lineWidth = interpolate(frame, [0, 0.6 * fps], [0, 800], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const textSpring = spring({
+    frame: frame - 0.3 * fps,
+    fps,
+    config: { damping: 200 },
+  });
+
+  const textOpacity = interpolate(textSpring, [0, 1], [0, 1]);
+  const textY = interpolate(textSpring, [0, 1], [30, 0]);
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: colors.baseDark,
+        fontFamily: fonts.sans,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div style={{ textAlign: "center" }}>
+        <div
+          style={{
+            width: lineWidth,
+            height: 3,
+            backgroundColor: color,
+            margin: "0 auto 32px",
+            borderRadius: 2,
+          }}
+        />
+        <div
+          style={{
+            opacity: textOpacity,
+            transform: `translateY(${textY}px)`,
+          }}
+        >
+          <span
+            style={{
+              color,
+              fontSize: 22,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: 4,
+            }}
+          >
+            Part {partNumber}
+          </span>
+          <h2
+            style={{
+              color: "white",
+              fontSize: 56,
+              fontWeight: 700,
+              margin: "12px 0 0 0",
+            }}
+          >
+            {title}
+          </h2>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/templates/assistkick-product-system/packages/video/components/scene.tsx

@@ -0,0 +1,226 @@
+/** @jsxImportSource react */
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+} from "remotion";
+import { VideoSplitLayout } from "./video_split_layout";
+import { colors, fonts } from "./theme";
+
+type SceneProps = {
+  stepNumber: number;
+  title: string;
+  bullets: string[];
+  route?: string;
+  part: "primary" | "secondary";
+  highlight?: string;
+  video?: string;
+  partLabel?: string;
+};
+
+export const Scene: React.FC<SceneProps> = ({
+  stepNumber,
+  title,
+  bullets,
+  route,
+  part,
+  highlight,
+  video,
+  partLabel,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const bgColor = part === "primary" ? colors.primary : colors.secondary;
+  const accentColor =
+    part === "primary" ? colors.accentPrimary : colors.accentSecondary;
+
+  const titleSpring = spring({
+    frame,
+    fps,
+    config: { damping: 200 },
+  });
+
+  const titleY = interpolate(titleSpring, [0, 1], [40, 0]);
+  const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);
+
+  const routeOpacity = interpolate(frame, [0.3 * fps, 0.6 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <VideoSplitLayout
+      video={video}
+      backgroundColor={bgColor}
+      accentColor={accentColor}
+    >
+      {(hasVideo) => (
+        <>
+          {/* Step badge */}
+          <div
+            style={{
+              opacity: titleOpacity,
+              transform: `translateY(${titleY}px)`,
+              marginBottom: 24,
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 16,
+              }}
+            >
+              <div
+                style={{
+                  width: 56,
+                  height: 56,
+                  borderRadius: "50%",
+                  backgroundColor: accentColor,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "white",
+                  fontSize: 28,
+                  fontWeight: 700,
+                }}
+              >
+                {stepNumber}
+              </div>
+              {partLabel && (
+                <span
+                  style={{
+                    color: accentColor,
+                    fontSize: 20,
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: 2,
+                  }}
+                >
+                  {partLabel}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Title */}
+          <div
+            style={{
+              opacity: titleOpacity,
+              transform: `translateY(${titleY}px)`,
+              marginBottom: 20,
+            }}
+          >
+            <h1
+              style={{
+                color: "white",
+                fontSize: hasVideo ? 42 : 52,
+                fontWeight: 700,
+                margin: 0,
+                lineHeight: 1.2,
+              }}
+            >
+              {title}
+            </h1>
+          </div>
+
+          {/* Route indicator */}
+          {route && (
+            <div
+              style={{
+                opacity: routeOpacity,
+                marginBottom: 24,
+              }}
+            >
+              <div
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  backgroundColor: "rgba(255,255,255,0.1)",
+                  borderRadius: 8,
+                  padding: "8px 20px",
+                  border: "1px solid rgba(255,255,255,0.15)",
+                }}
+              >
+                <span
+                  style={{
+                    color: "rgba(255,255,255,0.5)",
+                    fontSize: 16,
+                    marginRight: 8,
+                  }}
+                >
+                  URL:
+                </span>
+                <code
+                  style={{
+                    color: accentColor,
+                    fontSize: hasVideo ? 18 : 22,
+                    fontFamily: fonts.mono,
+                    fontWeight: 600,
+                  }}
+                >
+                  {route}
+                </code>
+              </div>
+            </div>
+          )}
+
+          {/* Bullets */}
+          <div>
+            {bullets.map((bullet, i) => {
+              const bulletDelay = 0.5 * fps + i * 0.4 * fps;
+              const bulletSpring = spring({
+                frame: frame - bulletDelay,
+                fps,
+                config: { damping: 200 },
+              });
+              const bulletX = interpolate(bulletSpring, [0, 1], [30, 0]);
+              const bulletOp = interpolate(bulletSpring, [0, 1], [0, 1]);
+
+              const isHighlighted = highlight && bullet.includes(highlight);
+
+              return (
+                <div
+                  key={i}
+                  style={{
+                    opacity: bulletOp,
+                    transform: `translateX(${bulletX}px)`,
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: 16,
+                    marginBottom: hasVideo ? 18 : 24,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      backgroundColor: accentColor,
+                      marginTop: 12,
+                      flexShrink: 0,
+                    }}
+                  />
+                  <span
+                    style={{
+                      color: isHighlighted
+                        ? accentColor
+                        : "rgba(255,255,255,0.9)",
+                      fontSize: hasVideo ? 24 : 28,
+                      lineHeight: 1.5,
+                      fontWeight: isHighlighted ? 600 : 400,
+                    }}
+                  >
+                    {bullet}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </VideoSplitLayout>
+  );
+};

package/templates/assistkick-product-system/packages/video/components/theme.ts

@@ -0,0 +1,22 @@
+/**
+ * Remotion video theme — color palette and font families.
+ * Compositions can override these defaults via inputProps.
+ */
+
+export const fonts = {
+  sans: "'DM Sans', sans-serif",
+  mono: "'JetBrains Mono', 'Fira Code', monospace",
+} as const;
+
+export const colors = {
+  /** Primary dark teal — primary scene backgrounds */
+  primary: "#124142",
+  /** Muted-800 — secondary scene backgrounds */
+  secondary: "#272b26",
+  /** Light teal — primary accent */
+  accentPrimary: "#bbdedd",
+  /** Yellow-green — secondary accent / CTAs */
+  accentSecondary: "#dcf183",
+  /** Muted-950 — darkest background */
+  baseDark: "#0e100e",
+} as const;

package/templates/assistkick-product-system/packages/video/components/title_scene.tsx

@@ -0,0 +1,169 @@
+/** @jsxImportSource react */
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+} from "remotion";
+import { colors, fonts } from "./theme";
+
+type TitleSceneProps = {
+  brandName?: string;
+  title: string;
+  subtitle?: string;
+  titleAccent?: string;
+};
+
+export const TitleScene: React.FC<TitleSceneProps> = ({
+  brandName,
+  title,
+  subtitle,
+  titleAccent,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleSpring = spring({
+    frame,
+    fps,
+    config: { damping: 200 },
+  });
+
+  const titleScale = interpolate(titleSpring, [0, 1], [0.8, 1]);
+  const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);
+
+  const subtitleOpacity = interpolate(
+    frame,
+    [0.8 * fps, 1.3 * fps],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    },
+  );
+
+  const subtitleY = interpolate(frame, [0.8 * fps, 1.3 * fps], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const lineWidth = interpolate(frame, [0.5 * fps, 1.2 * fps], [0, 400], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: colors.baseDark,
+        fontFamily: fonts.sans,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {/* Background gradient circles */}
+      <div
+        style={{
+          position: "absolute",
+          width: 600,
+          height: 600,
+          borderRadius: "50%",
+          background:
+            "radial-gradient(circle, rgba(187,222,221,0.15) 0%, transparent 70%)",
+          top: -100,
+          right: -100,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          width: 500,
+          height: 500,
+          borderRadius: "50%",
+          background:
+            "radial-gradient(circle, rgba(220,241,131,0.12) 0%, transparent 70%)",
+          bottom: -100,
+          left: -100,
+        }}
+      />
+
+      <div
+        style={{
+          textAlign: "center",
+          opacity: titleOpacity,
+          transform: `scale(${titleScale})`,
+        }}
+      >
+        {/* Brand name */}
+        {brandName && (
+          <div
+            style={{
+              color: colors.accentPrimary,
+              fontSize: 24,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: 4,
+              marginBottom: 24,
+            }}
+          >
+            {brandName}
+          </div>
+        )}
+
+        {/* Main title */}
+        <h1
+          style={{
+            color: "white",
+            fontSize: 64,
+            fontWeight: 800,
+            margin: 0,
+            lineHeight: 1.2,
+          }}
+        >
+          {title}
+        </h1>
+        {titleAccent && (
+          <h2
+            style={{
+              color: colors.accentPrimary,
+              fontSize: 56,
+              fontWeight: 700,
+              margin: "8px 0 0 0",
+            }}
+          >
+            {titleAccent}
+          </h2>
+        )}
+
+        {/* Decorative line */}
+        <div
+          style={{
+            width: lineWidth,
+            height: 3,
+            backgroundColor: colors.accentPrimary,
+            margin: "32px auto",
+            borderRadius: 2,
+          }}
+        />
+
+        {/* Subtitle */}
+        {subtitle && (
+          <p
+            style={{
+              color: "rgba(255,255,255,0.6)",
+              fontSize: 28,
+              fontWeight: 400,
+              opacity: subtitleOpacity,
+              transform: `translateY(${subtitleY}px)`,
+              margin: 0,
+            }}
+          >
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};