@devinilabs/reelstack 1.2.0

package/templates/warm/template.tsx

@@ -0,0 +1,210 @@
+/**
+ * Auto-scaffolded by ReelStack.
+ *
+ * Family: Warm Signature
+ * Preset: __PRESET_NAME__   (source: __SOURCE_REEL__)
+ * Duration: __DURATION_FRAMES__ frames @ __FPS__ fps
+ *
+ * Generated rules baked in:
+ *   - IG safe zones reserved (top 290px / bottom 422px)
+ *   - Motion floor primer (FilmGrain + AccentGlow ambient on every scene)
+ *   - GSAP-vocabulary easings via reelstack/utils/easing
+ *   - Audio-lock skeleton (BEATS const ready for /reelstack-beats output)
+ *
+ * STRICT RULE: amber primary, emerald payoff, red wall. No other accents.
+ * The lint command flags any other color used in this reel.
+ */
+import React from "react";
+import { Sequence, getInputProps, useCurrentFrame } from "remotion";
+
+import { palette } from "@devinilabs/reelstack/families/warm";
+import {
+  AccentGlow,
+  FilmGrain,
+  BentoGrid,
+  BentoCell,
+  WarmSurface,
+  ScaleBlurCounter,
+} from "@devinilabs/reelstack/families/warm/components";
+import { ease } from "@devinilabs/reelstack/utils/easing";
+import { SafeZones, TOP_SAFE, BOTTOM_SAFE } from "@devinilabs/reelstack/utils/safe-zones";
+
+// ─── BEATS ────────────────────────────────────────────────────────────────
+// Run /reelstack-beats <vo.wav> to populate this from whisper-cli SRT.
+// Hand-eyeballing beats causes 6+ second drift on 90s reels — don't.
+const BEATS = {
+  hook:   0,
+  name:   180,
+  body:   600,
+  anchor: 1200,
+  cta:    1800,
+} as const;
+
+/** Read inputProps for reduceMotion at module load.
+ *  Buyers can render a low-motion variant via:
+ *    npx remotion render <id> out/x.mp4 --props='{"reduceMotion":true}'
+ */
+const _inputProps = (getInputProps() as { reduceMotion?: boolean }) || {};
+const REDUCE_MOTION = _inputProps.reduceMotion === true;
+
+export const __REEL_NAME__Reel: React.FC = () => {
+  return (
+    <WarmSurface>
+      {/* Background motion layers (the family's signature ambient) */}
+      <FilmGrain reduceMotion={REDUCE_MOTION} />
+      <AccentGlow reduceMotion={REDUCE_MOTION} />
+
+      {/* Hook — between safe zones */}
+      <Sequence from={BEATS.hook}>
+        <HookScene />
+      </Sequence>
+
+      {/* Name drop — preset-specific */}
+      <Sequence from={BEATS.name}>
+        <NameScene />
+      </Sequence>
+
+      {/* Body — bento matrix */}
+      <Sequence from={BEATS.body}>
+        <BodyScene />
+      </Sequence>
+
+      {/* Anchor — second motion floor anchor */}
+      <Sequence from={BEATS.anchor}>
+        <AnchorScene />
+      </Sequence>
+
+      {/* CTA */}
+      <Sequence from={BEATS.cta}>
+        <CtaScene />
+      </Sequence>
+
+      {/* Dev-only safe-zone overlay. Set visible={false} for production. */}
+      <SafeZones visible={false} />
+    </WarmSurface>
+  );
+};
+
+// ─── Scenes ──────────────────────────────────────────────────────────────
+
+const HookScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const t = ease.power4Out(Math.min(1, frame / 30));
+  return (
+    <WarmSurface
+      style={{
+        background: "transparent",
+        paddingTop: TOP_SAFE + 100,
+        paddingInline: 64,
+        paddingBottom: BOTTOM_SAFE + 100,
+        display: "flex",
+        flexDirection: "column",
+        gap: 20,
+        justifyContent: "center",
+      }}
+    >
+      <span
+        style={{
+          fontSize: 90,
+          fontWeight: 700,
+          letterSpacing: -2,
+          lineHeight: 1.05,
+          opacity: t,
+          transform: `translateY(${(1 - t) * 32}px)`,
+        }}
+      >
+        __HOOK__
+      </span>
+    </WarmSurface>
+  );
+};
+
+const NameScene: React.FC = () => (
+  <WarmSurface
+    style={{
+      background: "transparent",
+      paddingInline: 64,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    }}
+  >
+    <span
+      style={{
+        fontSize: 168,
+        fontWeight: 700,
+        color: palette.amber,
+        letterSpacing: -3,
+        textShadow: `0 0 60px ${palette.amberGlow}`,
+      }}
+    >
+      __SUB__
+    </span>
+  </WarmSurface>
+);
+
+const BodyScene: React.FC = () => (
+  <WarmSurface
+    style={{
+      background: "transparent",
+      paddingTop: TOP_SAFE + 80,
+      paddingInline: 64,
+    }}
+  >
+    <BentoGrid cols={2} gap={18}>
+      {[1, 2, 3, 4].map((i) => (
+        <BentoCell key={i} startFrame={i * 6} idx={i} reduceMotion={REDUCE_MOTION} />
+      ))}
+    </BentoGrid>
+  </WarmSurface>
+);
+
+const AnchorScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  // Gentle camera pan via easing
+  const t = ease.power3Out(Math.min(1, frame / 60));
+  return (
+    <WarmSurface
+      style={{
+        background: "transparent",
+        paddingTop: TOP_SAFE + 100,
+        paddingInline: 64,
+        display: "flex",
+        flexDirection: "column",
+        gap: 24,
+        transform: `translateY(${(1 - t) * 24}px)`,
+      }}
+    >
+      <ScaleBlurCounter
+        startFrame={0}
+        durationFrames={48}
+        toValue={1000}
+        suffix="+"
+        fontSize={168}
+        reduceMotion={REDUCE_MOTION}
+      />
+      <span style={{ fontSize: 96, fontWeight: 700, color: palette.emerald, letterSpacing: -2 }}>
+        Payoff.
+      </span>
+      <span style={{ fontSize: 36, color: palette.fgSoft }}>
+        Use emerald only for "ship" / launch / success moments. Single-accent rule.
+      </span>
+    </WarmSurface>
+  );
+};
+
+const CtaScene: React.FC = () => (
+  <WarmSurface
+    style={{
+      background: "transparent",
+      paddingInline: 64,
+      paddingBottom: BOTTOM_SAFE + 80,
+      display: "flex",
+      flexDirection: "column",
+      gap: 20,
+      justifyContent: "flex-end",
+    }}
+  >
+    <span style={{ fontSize: 64, fontWeight: 700, color: palette.amber }}>__CTA__</span>
+  </WarmSurface>
+);

package/utils/ai-purple-blocklist.ts

@@ -0,0 +1,13 @@
+/** "Generic AI purple/violet" hexes commonly emitted by AI design tools.
+ *  ReelStack bans them in scaffolded code; lint flags any color matching this list.
+ *  Forbidden's ultraviolet (#6B5BD9) and plasma (#A87FE8) are family-specific overrides
+ *  and are NOT in the blocklist (they live in the Forbidden palette explicitly).
+ */
+export const AI_PURPLE_HEXES = [
+  "#7c3aed", "#8b5cf6", "#6366f1", "#a78bfa", "#c084fc",
+  "#9333ea", "#7e22ce", "#a855f7",
+] as const;
+export const isAiPurple = (hex: string): boolean => {
+  const lc = hex.toLowerCase();
+  return AI_PURPLE_HEXES.some((b) => b.toLowerCase() === lc);
+};

package/utils/banned-fonts.ts

@@ -0,0 +1,11 @@
+/** Fonts banned by leonxlnx/taste-skill — generic AI defaults that signal lack of taste.
+ *  Used by `reelstack lint` to flag any fontFamily containing one of these.
+ *  Allowed in ReelStack: Geist, Geist Mono, system-ui (fallback). Editorial-serif options
+ *  per Cream Paper / Warm Signature variant overlays: Lyon Text, Newsreader, Playfair Display.
+ */
+export const BANNED_FONTS = [
+  "Inter", "Roboto", "Helvetica", "Arial", "Open Sans", "Lato", "Source Sans Pro",
+  "Nunito", "Poppins", "Montserrat", "Raleway", "PT Sans", "Ubuntu",
+] as const;
+export const isBannedFont = (fontFamily: string): boolean =>
+  BANNED_FONTS.some((b) => fontFamily.toLowerCase().includes(b.toLowerCase()));

package/utils/cubic-bezier.ts

@@ -0,0 +1,36 @@
+/** Soft-variant cubic-bezier easings (from leonxlnx/taste-skill-soft).
+ *  Applied to Glass + Paper + Warm families' "premium polish" motion.
+ *  Each is a CSS cubic-bezier string; for Remotion `interpolate({easing})`,
+ *  use the matching JS-callback variant via `bezierEase(...)` helper.
+ */
+export const SOFT_BEZIERS = {
+  softInOut: "cubic-bezier(0.32, 0.72, 0, 1)",
+  softElastic: "cubic-bezier(0.16, 1, 0.3, 1)",
+  softSnappy: "cubic-bezier(0.22, 1, 0.36, 1)",
+} as const;
+/** Bezier as a Remotion-friendly easing function. */
+export const bezierEase = (mX1: number, mY1: number, mX2: number, mY2: number) => {
+  // Cubic bezier solver. Input t in [0,1], output curve value in [0,1].
+  // Standard implementation — handles the 4-control-point bezier curve.
+  const A = (a1: number, a2: number) => 1 - 3 * a2 + 3 * a1;
+  const B = (a1: number, a2: number) => 3 * a2 - 6 * a1;
+  const C = (a1: number) => 3 * a1;
+  const calcBezier = (t: number, a1: number, a2: number) =>
+    ((A(a1, a2) * t + B(a1, a2)) * t + C(a1)) * t;
+  const slope = (t: number, a1: number, a2: number) =>
+    3 * A(a1, a2) * t * t + 2 * B(a1, a2) * t + C(a1);
+  const getTForX = (x: number): number => {
+    let t = x;
+    for (let i = 0; i < 8; i++) {
+      const cs = slope(t, mX1, mX2);
+      if (cs === 0) return t;
+      const cx = calcBezier(t, mX1, mX2) - x;
+      t -= cx / cs;
+    }
+    return t;
+  };
+  return (x: number) => calcBezier(getTForX(x), mY1, mY2);
+};
+export const softInOut = bezierEase(0.32, 0.72, 0, 1);
+export const softElastic = bezierEase(0.16, 1, 0.3, 1);
+export const softSnappy = bezierEase(0.22, 1, 0.36, 1);

package/utils/easing.ts

@@ -0,0 +1,84 @@
+/**
+ * ReelStack — GSAP→Remotion easing dictionary.
+ *
+ * Translates GSAP's easing vocabulary into Remotion-compatible callback
+ * functions. Use as the `easing` argument to `interpolate()`.
+ *
+ * Example:
+ *   interpolate(frame, [0, 30], [0, 1], { easing: ease.power4Out })
+ *
+ * The matching spring configs match design-system.md:
+ *   spring({ frame, fps, config: spring.snappy })
+ */
+
+export type Easing = (t: number) => number;
+
+const clamp = (n: number) => Math.max(0, Math.min(1, n));
+
+// Power eases (1=linear, 2=quad, 3=cubic, 4=quart, 5=quint)
+const power = (p: number) => ({
+  In:    (t: number) => Math.pow(clamp(t), p),
+  Out:   (t: number) => 1 - Math.pow(1 - clamp(t), p),
+  InOut: (t: number) =>
+    clamp(t) < 0.5
+      ? Math.pow(2 * clamp(t), p) / 2
+      : 1 - Math.pow(-2 * clamp(t) + 2, p) / 2,
+});
+
+const expo = {
+  In:    (t: number) => (t === 0 ? 0 : Math.pow(2, 10 * clamp(t) - 10)),
+  Out:   (t: number) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * clamp(t))),
+  InOut: (t: number) => {
+    const x = clamp(t);
+    if (x === 0) return 0;
+    if (x === 1) return 1;
+    return x < 0.5
+      ? Math.pow(2, 20 * x - 10) / 2
+      : (2 - Math.pow(2, -20 * x + 10)) / 2;
+  },
+};
+
+const back = {
+  In:  (t: number) => {
+    const x = clamp(t);
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return c3 * x * x * x - c1 * x * x;
+  },
+  Out: (t: number) => {
+    const x = clamp(t);
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
+  },
+};
+
+export const ease = {
+  linear:    (t: number) => clamp(t),
+  power2In:  power(2).In,
+  power2Out: power(2).Out,
+  power3In:  power(3).In,
+  power3Out: power(3).Out,
+  power4In:  power(4).In,
+  power4Out: power(4).Out,
+  power5In:  power(5).In,
+  power5Out: power(5).Out,
+  expoIn:    expo.In,
+  expoOut:   expo.Out,
+  expoInOut: expo.InOut,
+  backIn:    back.In,
+  backOut:   back.Out,
+} as const;
+
+/**
+ * Spring configs — pass directly to Remotion's `spring({ config })`.
+ */
+export const springs = {
+  smooth:  { damping: 200, mass: 1, stiffness: 100 },
+  snappy:  { damping: 20,  mass: 1, stiffness: 200 },
+  gentle:  { damping: 15,  mass: 1, stiffness: 80  },
+  bouncy:  { damping: 8,   mass: 1, stiffness: 100 },
+  glass:   { damping: 12,  mass: 1, stiffness: 120 },
+} as const;
+
+export type SpringName = keyof typeof springs;

package/utils/grid.ts

@@ -0,0 +1,13 @@
+/** ReelStack 4-px grid system. Every padding/margin/gap should be a multiple of GRID. */
+export const GRID = 4;
+export const GRID_2 = GRID * 2;   // 8
+export const GRID_3 = GRID * 3;   // 12
+export const GRID_4 = GRID * 4;   // 16
+export const GRID_5 = GRID * 5;   // 20
+export const GRID_6 = GRID * 6;   // 24
+export const GRID_8 = GRID * 8;   // 32
+export const GRID_12 = GRID * 12; // 48
+export const GRID_16 = GRID * 16; // 64
+export const GRID_20 = GRID * 20; // 80
+export const GRID_24 = GRID * 24; // 96
+export const isOnGrid = (n: number): boolean => n % GRID === 0;

package/utils/render-presets.json

@@ -0,0 +1,56 @@
+{
+  "ig": {
+    "label": "Instagram Reels",
+    "width": 1080,
+    "height": 1920,
+    "fps": 30,
+    "codec": "h264",
+    "videoBitrate": "8M",
+    "audioCodec": "aac",
+    "audioBitrate": "192k",
+    "pixelFormat": "yuv420p",
+    "remotionFlags": [
+      "--codec=h264",
+      "--video-bitrate=8M",
+      "--audio-codec=aac",
+      "--audio-bitrate=192k",
+      "--pixel-format=yuv420p"
+    ]
+  },
+  "tiktok": {
+    "label": "TikTok",
+    "width": 1080,
+    "height": 1920,
+    "fps": 30,
+    "codec": "h264",
+    "videoBitrate": "8M",
+    "audioCodec": "aac",
+    "audioBitrate": "192k",
+    "pixelFormat": "yuv420p",
+    "remotionFlags": [
+      "--codec=h264",
+      "--video-bitrate=8M",
+      "--audio-codec=aac",
+      "--audio-bitrate=192k",
+      "--pixel-format=yuv420p"
+    ]
+  },
+  "shorts": {
+    "label": "YouTube Shorts",
+    "width": 1080,
+    "height": 1920,
+    "fps": 30,
+    "codec": "h264",
+    "videoBitrate": "9M",
+    "audioCodec": "aac",
+    "audioBitrate": "192k",
+    "pixelFormat": "yuv420p",
+    "remotionFlags": [
+      "--codec=h264",
+      "--video-bitrate=9M",
+      "--audio-codec=aac",
+      "--audio-bitrate=192k",
+      "--pixel-format=yuv420p"
+    ]
+  }
+}

package/utils/safe-zones.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+
+/**
+ * SafeZones — IG/TikTok/Shorts overlay component.
+ *
+ * Visually marks the top 290 px and bottom 422 px of the 1920 canvas as
+ * reserved (Instagram chrome, TikTok username + caption, Shorts CTA bar).
+ *
+ * Pass `visible={false}` for production renders. For Remotion Studio
+ * iteration, pass `visible={process.env.NODE_ENV !== "production"}`.
+ */
+export const TOP_SAFE = 290;
+export const BOTTOM_SAFE = 422; // bottom 22% — y where reserved band starts is 1920 - 422 = 1498
+
+export const SafeZones: React.FC<{
+  visible?: boolean;
+  tint?: string;
+}> = ({ visible = true, tint = "rgba(255, 0, 100, 0.10)" }) => {
+  if (!visible) return null;
+  return (
+    <AbsoluteFill style={{ pointerEvents: "none" }}>
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: TOP_SAFE,
+          background: tint,
+          borderBottom: "2px dashed rgba(255, 0, 100, 0.4)",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: BOTTOM_SAFE,
+          background: tint,
+          borderTop: "2px dashed rgba(255, 0, 100, 0.4)",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+/**
+ * Helper that returns true if a y-coordinate (and optional height) overlaps
+ * a reserved band. Used by `reelstack lint`.
+ */
+export function overlapsSafeZone(y: number, height = 0): "top" | "bottom" | null {
+  if (y < TOP_SAFE) return "top";
+  if (y + height > 1920 - BOTTOM_SAFE) return "bottom";
+  return null;
+}