@devinilabs/reelstack 1.2.0

package/templates/dark/template.tsx

@@ -0,0 +1,115 @@
+/**
+ * Auto-scaffolded by ReelStack.
+ *
+ * Family: Dark Cinematic
+ * Preset: __PRESET_NAME__   (source: __SOURCE_REEL__)
+ * Duration: __DURATION_FRAMES__ frames @ __FPS__ fps
+ *
+ * Late-night ad-film mood. Drifting spotlights + radial vignette + crossfaded
+ * scenes via the SegmentOpacity helper.
+ */
+import React from "react";
+import { AbsoluteFill, getInputProps, useCurrentFrame, useVideoConfig } from "remotion";
+import { palette } from "@devinilabs/reelstack/families/dark";
+import {
+  DriftingSpotlights,
+  GridBackground,
+  RadialVignette,
+  ForestCard,
+  so,
+} from "@devinilabs/reelstack/families/dark/components";
+import { ease } from "@devinilabs/reelstack/utils/easing";
+import { SafeZones, TOP_SAFE, BOTTOM_SAFE } from "@devinilabs/reelstack/utils/safe-zones";
+
+const SEGS = {
+  hook:   [0,    8.0],
+  body:   [8.0, 30.0],
+  anchor: [30.0, 50.0],
+  cta:    [50.0, 60.0],
+} 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 = () => {
+  const { fps } = useVideoConfig();
+  const frame = useCurrentFrame();
+  return (
+    <AbsoluteFill style={{ background: palette.bg, fontFamily: "Geist, system-ui", color: palette.fg }}>
+      <DriftingSpotlights reduceMotion={REDUCE_MOTION} />
+      <GridBackground />
+      <RadialVignette />
+
+      <div style={{ position: "absolute", inset: 0, opacity: so(frame, fps, ...SEGS.hook) }}>
+        <HookScene />
+      </div>
+      <div style={{ position: "absolute", inset: 0, opacity: so(frame, fps, ...SEGS.body) }}>
+        <BodyScene />
+      </div>
+      <div style={{ position: "absolute", inset: 0, opacity: so(frame, fps, ...SEGS.anchor) }}>
+        <AnchorScene />
+      </div>
+      <div style={{ position: "absolute", inset: 0, opacity: so(frame, fps, ...SEGS.cta) }}>
+        <CtaScene />
+      </div>
+      <SafeZones visible={false} />
+    </AbsoluteFill>
+  );
+};
+
+const HookScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const t = ease.power4Out(Math.min(1, frame / 30));
+  return (
+    <AbsoluteFill style={{
+      paddingTop: TOP_SAFE + 80, paddingInline: 64, paddingBottom: BOTTOM_SAFE + 80,
+      display: "flex", flexDirection: "column", gap: 20, justifyContent: "center",
+    }}>
+      <span style={{
+        fontSize: 84, fontWeight: 700, letterSpacing: -1.5, lineHeight: 1.05,
+        opacity: t, transform: `translateY(${(1 - t) * 24}px)`,
+      }}>
+        __HOOK__
+      </span>
+      <span style={{
+        fontSize: 36, color: palette.fgSoft, opacity: t,
+        transform: `translateY(${(1 - t) * 24}px)`,
+      }}>
+        __SUB__
+      </span>
+    </AbsoluteFill>
+  );
+};
+
+const BodyScene: React.FC = () => (
+  <AbsoluteFill style={{ paddingTop: TOP_SAFE + 80, paddingInline: 64, display: "flex", flexDirection: "column", gap: 24 }}>
+    <span style={{ fontSize: 64, fontWeight: 700, letterSpacing: -1 }}>Body scene.</span>
+    <span style={{ fontSize: 30, color: palette.fgSoft }}>
+      Replace with your narrative beat. SegmentOpacity owns scene transitions.
+    </span>
+  </AbsoluteFill>
+);
+
+const AnchorScene: React.FC = () => (
+  <AbsoluteFill style={{ paddingTop: TOP_SAFE + 100, paddingInline: 64, display: "flex", flexDirection: "column", gap: 24 }}>
+    <ForestCard>
+      <span style={{ fontSize: 56, fontWeight: 700, letterSpacing: -1 }}>Anchor.</span>
+      <p style={{ fontSize: 26, color: palette.fgSoft, marginTop: 12 }}>
+        Forest-green card surface — the family's signature embedded UI frame.
+      </p>
+    </ForestCard>
+  </AbsoluteFill>
+);
+
+const CtaScene: React.FC = () => (
+  <AbsoluteFill style={{
+    paddingInline: 64, paddingBottom: BOTTOM_SAFE + 80,
+    display: "flex", flexDirection: "column", gap: 20, justifyContent: "flex-end",
+  }}>
+    <span style={{ fontSize: 64, fontWeight: 700, color: palette.claude }}>__CTA__</span>
+  </AbsoluteFill>
+);

package/templates/forbidden/template.tsx

@@ -0,0 +1,111 @@
+/**
+ * Auto-scaffolded by ReelStack.
+ *
+ * Family: Forbidden
+ * Preset: __PRESET_NAME__   (source: __SOURCE_REEL__)
+ * Duration: __DURATION_FRAMES__ frames @ __FPS__ fps
+ *
+ * Cream-rose paper background with desaturated forbidden palette stops.
+ * Inherits Glass primitives via Forbidden's own components folder, which
+ * re-exports them — so every primitive imported here is the right one for
+ * this family. Never reference glass/components directly from a Forbidden
+ * template; the alias layer is what keeps presets palette-correct.
+ *
+ * Tinted shadows are the family's secret weapon: every shadow uses the
+ * rose-purple stack, never pure black.
+ */
+import React from "react";
+import { AbsoluteFill, Sequence, getInputProps } from "remotion";
+
+import { palette } from "@devinilabs/reelstack/families/forbidden";
+import {
+  CausticBlobs,
+  HairlineGrid,
+  GlassCard,
+  EyebrowPill,
+  StaggeredWords,
+  Counter,
+  SonarRings,
+  ParticleBurst,
+  FloatingGlyphs,
+  tintedShadow,
+} from "@devinilabs/reelstack/families/forbidden/components";
+import { SafeZones, TOP_SAFE, BOTTOM_SAFE } from "@devinilabs/reelstack/utils/safe-zones";
+
+const BEATS = {
+  hook:   0,
+  reveal: 144,
+  body:   386,
+  anchor: 961,
+  cta:    1500,
+} 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 = () => (
+  <AbsoluteFill style={{ background: palette.bg, fontFamily: "Geist, system-ui" }}>
+    <CausticBlobs reduceMotion={REDUCE_MOTION} />
+    <HairlineGrid strokeOpacity={0.04} />
+    <FloatingGlyphs count={12} color={palette.inkMuted} reduceMotion={REDUCE_MOTION} />
+
+    <Sequence from={BEATS.hook}><HookScene /></Sequence>
+    <Sequence from={BEATS.reveal}><RevealScene /></Sequence>
+    <Sequence from={BEATS.body}><BodyScene /></Sequence>
+    <Sequence from={BEATS.anchor}><AnchorScene /></Sequence>
+    <Sequence from={BEATS.cta}><CtaScene /></Sequence>
+
+    <SafeZones visible={false} />
+  </AbsoluteFill>
+);
+
+const HookScene: React.FC = () => (
+  <AbsoluteFill style={{
+    paddingTop: TOP_SAFE + 80, paddingInline: 64, paddingBottom: BOTTOM_SAFE + 80,
+    display: "flex", flexDirection: "column", gap: 24, justifyContent: "center",
+  }}>
+    <EyebrowPill startFrame={0} tint="violet" reduceMotion={REDUCE_MOTION}>__PRESET_NAME__</EyebrowPill>
+    <StaggeredWords startFrame={6} text={"__HOOK__"} fontSize={84} color={palette.ink} reduceMotion={REDUCE_MOTION} />
+    <SonarRings cx={540} cy={840} stroke={palette.ultraviolet} count={4} startFrame={0} reduceMotion={REDUCE_MOTION} />
+    <ParticleBurst cx={540} cy={840} startFrame={28}
+      colors={[palette.ember, palette.crimson, palette.ultraviolet, palette.plasma]} reduceMotion={REDUCE_MOTION} />
+  </AbsoluteFill>
+);
+
+const RevealScene: React.FC = () => (
+  <AbsoluteFill style={{ paddingInline: 64 }}>
+    <GlassCard variant="strong" style={{ position: "absolute", top: 720, left: 64, right: 64, padding: 36, ...tintedShadow("mid") }}>
+      <StaggeredWords startFrame={0} text={"__SUB__"} fontSize={48} color={palette.ink} reduceMotion={REDUCE_MOTION} />
+    </GlassCard>
+  </AbsoluteFill>
+);
+
+const BodyScene: React.FC = () => (
+  <AbsoluteFill style={{ paddingTop: TOP_SAFE + 100, paddingInline: 64, display: "flex", flexDirection: "column", gap: 24 }}>
+    <Counter startFrame={0} toValue={42} fontSize={196} color={palette.crimson} reduceMotion={REDUCE_MOTION} />
+    <StaggeredWords startFrame={20} text="Body scene — replace with your forbidden narrative." fontSize={36} color={palette.inkSoft} reduceMotion={REDUCE_MOTION} />
+  </AbsoluteFill>
+);
+
+const AnchorScene: React.FC = () => (
+  <AbsoluteFill style={{ paddingInline: 64 }}>
+    <GlassCard variant="heavy" style={{ position: "absolute", top: 600, left: 64, right: 64, ...tintedShadow("deep") }}>
+      <StaggeredWords startFrame={0} text="Anchor — keep the energy unsettling." fontSize={42} color={palette.ink} reduceMotion={REDUCE_MOTION} />
+    </GlassCard>
+    <SonarRings cx={540} cy={1100} stroke={palette.plasma} count={3} startFrame={0} reduceMotion={REDUCE_MOTION} />
+  </AbsoluteFill>
+);
+
+const CtaScene: React.FC = () => (
+  <AbsoluteFill style={{
+    paddingInline: 64, paddingBottom: BOTTOM_SAFE + 80,
+    display: "flex", flexDirection: "column", gap: 20, justifyContent: "flex-end",
+  }}>
+    <EyebrowPill startFrame={0} tint="teal" reduceMotion={REDUCE_MOTION}>CTA</EyebrowPill>
+    <StaggeredWords startFrame={4} text={"__CTA__"} fontSize={56} color={palette.crimson} reduceMotion={REDUCE_MOTION} />
+  </AbsoluteFill>
+);

package/templates/glass/template.tsx

@@ -0,0 +1,201 @@
+/**
+ * Auto-scaffolded by ReelStack.
+ *
+ * Family: Glass Iridescent
+ * 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 (CausticBlobs + HairlineGrid + LightBeam + FloatingGlyphs)
+ *   - GSAP-vocabulary easings via reelstack/utils/easing
+ *   - Audio-lock skeleton (BEATS const ready for /reelstack-beats output)
+ */
+import React from "react";
+import {
+  AbsoluteFill,
+  Sequence,
+  getInputProps,
+  useCurrentFrame,
+} from "remotion";
+
+import { palette } from "@devinilabs/reelstack/families/glass";
+import {
+  CausticBlobs,
+  HairlineGrid,
+  GlassCard,
+  EyebrowPill,
+  StaggeredWords,
+  Counter,
+  SonarRings,
+  ParticleBurst,
+  LightBeam,
+  FloatingGlyphs,
+} from "@devinilabs/reelstack/families/glass/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,
+  reveal:  90,
+  body:    540,
+  anchor:  1200,
+  cta:     1620,
+} 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 (
+    <AbsoluteFill style={{ background: palette.bg, fontFamily: "Geist, system-ui" }}>
+      {/* Background motion layers (the family's signature ambient) */}
+      <CausticBlobs reduceMotion={REDUCE_MOTION} />
+      <HairlineGrid />
+      <LightBeam color={palette.iriGold} cx="50%" cy="32%" reduceMotion={REDUCE_MOTION} />
+      <FloatingGlyphs count={14} color={palette.inkMuted} reduceMotion={REDUCE_MOTION} />
+
+      {/* Hero band — between safe zones */}
+      <Sequence from={BEATS.hook}>
+        <HeroScene />
+      </Sequence>
+
+      {/* Reveal — name drop, preset-specific */}
+      <Sequence from={BEATS.reveal}>
+        <RevealScene />
+      </Sequence>
+
+      {/* Body — your scenes go here */}
+      <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} />
+    </AbsoluteFill>
+  );
+};
+
+// ─── Scenes ──────────────────────────────────────────────────────────────
+
+const HeroScene: React.FC = () => (
+  <AbsoluteFill
+    style={{
+      paddingTop: TOP_SAFE + 80,
+      paddingBottom: BOTTOM_SAFE + 80,
+      paddingInline: 64,
+      display: "flex",
+      flexDirection: "column",
+      gap: 24,
+      alignItems: "flex-start",
+      justifyContent: "center",
+    }}
+  >
+    <EyebrowPill startFrame={0} tint="violet" reduceMotion={REDUCE_MOTION}>__PRESET_NAME__</EyebrowPill>
+    <StaggeredWords startFrame={6} text={"__HOOK__"} fontSize={84} reduceMotion={REDUCE_MOTION} />
+    <SonarRings cx={540} cy={840} count={4} startFrame={0} reduceMotion={REDUCE_MOTION} />
+    <ParticleBurst cx={540} cy={840} startFrame={28} count={20} reduceMotion={REDUCE_MOTION} />
+  </AbsoluteFill>
+);
+
+const RevealScene: React.FC = () => (
+  <AbsoluteFill style={{ paddingInline: 64 }}>
+    <GlassCard
+      variant="strong"
+      style={{
+        position: "absolute",
+        top: 720,
+        left: 64,
+        right: 64,
+        padding: 36,
+      }}
+    >
+      <StaggeredWords
+        startFrame={0}
+        text={"__SUB__"}
+        fontSize={56}
+        color={palette.ink}
+        reduceMotion={REDUCE_MOTION}
+      />
+    </GlassCard>
+  </AbsoluteFill>
+);
+
+const BodyScene: React.FC = () => (
+  <AbsoluteFill
+    style={{
+      paddingTop: TOP_SAFE + 100,
+      paddingInline: 64,
+      display: "flex",
+      flexDirection: "column",
+      gap: 32,
+    }}
+  >
+    <Counter
+      startFrame={0}
+      durationFrames={48}
+      toValue={1000}
+      suffix="+"
+      fontSize={196}
+      reduceMotion={REDUCE_MOTION}
+    />
+    <StaggeredWords
+      startFrame={24}
+      text="Your body copy. Replace with the narrative beat that follows your reveal."
+      fontSize={42}
+      color={palette.inkSoft}
+      reduceMotion={REDUCE_MOTION}
+    />
+  </AbsoluteFill>
+);
+
+const AnchorScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  // Gentle camera pan via easing
+  const t = ease.power3Out(Math.min(1, frame / 60));
+  return (
+    <AbsoluteFill
+      style={{ paddingInline: 64, transform: `translateY(${(1 - t) * 24}px)` }}
+    >
+      <GlassCard variant="heavy" style={{ position: "absolute", top: 600, left: 64, right: 64 }}>
+        <StaggeredWords startFrame={0} text="Anchor scene — energy must not drop here." fontSize={48} reduceMotion={REDUCE_MOTION} />
+      </GlassCard>
+      <SonarRings cx={540} cy={1100} count={3} period={240} startFrame={0} reduceMotion={REDUCE_MOTION} />
+      <ParticleBurst cx={540} cy={1100} startFrame={20} count={14} reduceMotion={REDUCE_MOTION} />
+    </AbsoluteFill>
+  );
+};
+
+const CtaScene: React.FC = () => (
+  <AbsoluteFill
+    style={{
+      paddingTop: TOP_SAFE + 200,
+      paddingInline: 64,
+      paddingBottom: BOTTOM_SAFE + 80,
+      display: "flex",
+      flexDirection: "column",
+      gap: 20,
+      justifyContent: "flex-end",
+    }}
+  >
+    <EyebrowPill startFrame={0} tint="teal" reduceMotion={REDUCE_MOTION}>CTA</EyebrowPill>
+    <StaggeredWords startFrame={4} text={"__CTA__"} fontSize={64} reduceMotion={REDUCE_MOTION} />
+  </AbsoluteFill>
+);

package/templates/paper/template.tsx

@@ -0,0 +1,133 @@
+/**
+ * Auto-scaffolded by ReelStack.
+ *
+ * Family: Cream Paper
+ * Preset: __PRESET_NAME__   (source: __SOURCE_REEL__)
+ * Duration: __DURATION_FRAMES__ frames @ __FPS__ fps
+ *
+ * Editorial print mood. Cream paper background with dark-green card stack.
+ * Card springs use damping 20 / stiffness 200 — the family's signature motion.
+ *
+ * Generated rules baked in:
+ *   - IG safe zones reserved (top 290px / bottom 422px)
+ *   - Cream-paper grid + radial fade (CreamGrid)
+ *   - Hero text via power4Out scale + blur (ScaleBlurText)
+ *   - Forest-green spring cards (CardSpring / GreenAccentCard)
+ *   - Audio-lock skeleton (BEATS const ready for /reelstack-beats output)
+ */
+import React from "react";
+import { AbsoluteFill, Sequence, getInputProps } from "remotion";
+
+import { palette } from "@devinilabs/reelstack/families/paper";
+import {
+  CardSpring,
+  ScaleBlurText,
+  CreamGrid,
+} from "@devinilabs/reelstack/families/paper/components";
+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,
+  body:   240,
+  anchor: 900,
+  cta:    1500,
+} 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 = () => (
+  <AbsoluteFill style={{ background: palette.bg, fontFamily: "Geist, system-ui" }}>
+    {/* Background paper texture */}
+    <CreamGrid />
+
+    {/* Hook — hero ScaleBlurText */}
+    <Sequence from={BEATS.hook}>
+      <HookScene />
+    </Sequence>
+
+    {/* Body — narrative beat in a forest-green card */}
+    <Sequence from={BEATS.body}>
+      <BodyScene />
+    </Sequence>
+
+    {/* Anchor — second motion floor, two stacked cards */}
+    <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} />
+  </AbsoluteFill>
+);
+
+// ─── Scenes ──────────────────────────────────────────────────────────────
+
+const HookScene: React.FC = () => (
+  <AbsoluteFill
+    style={{
+      paddingTop: TOP_SAFE + 80,
+      paddingBottom: BOTTOM_SAFE + 80,
+      paddingInline: 64,
+      display: "flex",
+      flexDirection: "column",
+      gap: 24,
+      justifyContent: "center",
+    }}
+  >
+    <ScaleBlurText startFrame={0} text="__HOOK__" size={88} reduceMotion={REDUCE_MOTION} />
+    <ScaleBlurText startFrame={18} text="__SUB__" size={48} color={palette.body} reduceMotion={REDUCE_MOTION} />
+  </AbsoluteFill>
+);
+
+const BodyScene: React.FC = () => (
+  <AbsoluteFill style={{ paddingTop: TOP_SAFE + 80, paddingInline: 64 }}>
+    <CardSpring startFrame={0} style={{ position: "absolute", top: 460, left: 64, right: 64 }} reduceMotion={REDUCE_MOTION}>
+      <span style={{ fontSize: 48, fontWeight: 700, letterSpacing: -1 }}>Body card.</span>
+      <p style={{ fontSize: 26, color: palette.cardForestBody, marginTop: 12 }}>
+        Replace with your narrative beat.
+      </p>
+    </CardSpring>
+  </AbsoluteFill>
+);
+
+const AnchorScene: React.FC = () => (
+  <AbsoluteFill style={{ paddingInline: 64 }}>
+    <CardSpring startFrame={0} style={{ position: "absolute", top: 760, left: 64, right: 64 }} reduceMotion={REDUCE_MOTION}>
+      <span style={{ fontSize: 56, fontWeight: 700, letterSpacing: -1 }}>Anchor.</span>
+      <p style={{ fontSize: 26, color: palette.cardForestBody, marginTop: 12 }}>
+        Second motion floor — keep energy peaking.
+      </p>
+    </CardSpring>
+    <CardSpring startFrame={12} style={{ position: "absolute", top: 1100, left: 64, right: 64 }} reduceMotion={REDUCE_MOTION}>
+      <span style={{ fontSize: 36, fontWeight: 600, color: palette.terminalGreen }}>$ install</span>
+    </CardSpring>
+  </AbsoluteFill>
+);
+
+const CtaScene: React.FC = () => (
+  <AbsoluteFill
+    style={{
+      paddingInline: 64,
+      paddingBottom: BOTTOM_SAFE + 80,
+      display: "flex",
+      flexDirection: "column",
+      gap: 24,
+      justifyContent: "flex-end",
+    }}
+  >
+    <ScaleBlurText startFrame={0} text="__CTA__" size={68} color={palette.accent} reduceMotion={REDUCE_MOTION} />
+  </AbsoluteFill>
+);