@devinilabs/reelstack 1.3.0 → 1.3.2

package/cli/lint.js

@@ -2,14 +2,14 @@
  * `reelstack lint <file> [--critique]` — static-analysis pass over a reel composition.
  *
  * Reports (default mode — list of violations with line numbers):
- *   - SAFE_ZONE_BREACH:           element y-coords overlap reserved bands.
- *   - MOTION_FLOOR_VIOLATION:     scenes with too few simultaneous animation layers.
- *   - HERO_TEXT_OVERFLOW:         counter or hero text wider than canvas - 64px gutter.
+ *   - SAFE_ZONE_BREACH:           (warn) element y-coords overlap reserved bands — decorative elements OK with data-reelstack-safe-override.
+ *   - MOTION_FLOOR_VIOLATION:     (warn) scenes with too few simultaneous animation layers — nested-motion components produce false positives.
+ *   - HERO_TEXT_OVERFLOW:         (warn) counter or hero text wider than canvas - 64px gutter.
  *   - AUDIO_NOT_LOCKED:           file imports <Audio> but defines no BEAT const block.
- *   - HAND_DRAWN_BRAND:           inline <svg> longer than 800 chars in a logo-sized element.
+ *   - HAND_DRAWN_BRAND:           (warn) inline <svg> longer than 800 chars — intentional brand SVGs are fine.
  *   - ACCENT_ALLOWLIST_VIOLATION: (warn) hex color outside the resolved family's ALLOWED_ACCENTS list — intentional sponsor/custom accents are fine, the rule catches accidental token typos.
- *   - SPACING_NON_GRID:           padding/margin/gap not on the 4px grid.
- *   - MISSING_REDUCE_MOTION:      component imports useCurrentFrame but lacks a `reduceMotion` prop.
+ *   - SPACING_NON_GRID:           (warn) padding/margin/gap not on the 4px grid — optical-spacing exceptions OK.
+ *   - MISSING_REDUCE_MOTION:      (warn) component imports useCurrentFrame but lacks a `reduceMotion` prop — accessibility hygiene, not render-blocking.
  *   - GENERIC_PLACEHOLDER:        "Lorem ipsum", "John Doe", "Acme Corp" — leftover stub copy.
  *   - HOOK_LATENCY:               earliest <Sequence> starts after frame 30 — first second of reel is empty.
  *   - CTA_MISSING:                (warn) no CTA component or CTA keyword (follow/subscribe/etc.) found anywhere.
@@ -86,14 +86,14 @@ function lint(file) {
     if (topMatch) {
       const y = Number(topMatch[1]);
       if (y >= 0 && y < TOP_SAFE && !line.includes("data-reelstack-safe-override")) {
-        violations.push({ line: i + 1, code: "SAFE_ZONE_BREACH", msg: `top: ${y} overlaps top reserved band (0..${TOP_SAFE}).` });
+        violations.push({ line: i + 1, code: "SAFE_ZONE_BREACH", severity: "warning", msg: `top: ${y} overlaps top reserved band (0..${TOP_SAFE}). Add data-reelstack-safe-override if decorative.` });
       }
     }
     const bottomMatch = line.match(/bottom:\s*(-?\d+)\s*,?/);
     if (bottomMatch) {
       const b = Number(bottomMatch[1]);
       if (b >= 0 && b < BOTTOM_SAFE && !line.includes("data-reelstack-safe-override")) {
-        violations.push({ line: i + 1, code: "SAFE_ZONE_BREACH", msg: `bottom: ${b} overlaps bottom reserved band (0..${BOTTOM_SAFE}).` });
+        violations.push({ line: i + 1, code: "SAFE_ZONE_BREACH", severity: "warning", msg: `bottom: ${b} overlaps bottom reserved band (0..${BOTTOM_SAFE}). Add data-reelstack-safe-override if decorative.` });
       }
     }
   });
@@ -114,7 +114,8 @@ function lint(file) {
       violations.push({
         line: lineNum,
         code: "HAND_DRAWN_BRAND",
-        msg: `Inline <svg> is ${svg.length} chars — likely hand-drawn. Use /reelstack-icons to pull a real brand SVG.`,
+        severity: "warning",
+        msg: `Inline <svg> is ${svg.length} chars — could be hand-drawn. For brand marks, use /reelstack-icons; intentional inline brand SVGs are fine.`,
       });
     }
   }
@@ -197,7 +198,8 @@ function lint(file) {
       violations.push({
         line: lineOf(openIdx),
         code: "MOTION_FLOOR_VIOLATION",
-        msg: `Sequence at frame ${fromValue} has ${motionCalls} motion calls, family rule is ≥3 (≥4 in opener).`,
+        severity: "warning",
+        msg: `Sequence at frame ${fromValue} has ${motionCalls} motion calls, family rule is ≥3 (≥4 in opener). If motion lives in a nested component, this warning is a false positive.`,
       });
     }
 
@@ -219,7 +221,8 @@ function lint(file) {
       violations.push({
         line: i + 1,
         code: "HERO_TEXT_OVERFLOW",
-        msg: `fontSize ${px}px on apparent hero-counter; cap at 256px or wrap with maxWidth=${HERO_TEXT_MAX}.`,
+        severity: "warning",
+        msg: `fontSize ${px}px on apparent hero-counter; verify it fits within ${HERO_TEXT_MAX}px (canvas - 64px gutter) on real devices.`,
       });
     }
   });
@@ -265,7 +268,8 @@ function lint(file) {
         violations.push({
           line: lineOfIdx(idx),
           code: "SPACING_NON_GRID",
-          msg: `${rawProp}: ${val} is off the 4px grid. Round to ${Math.round(val / 4) * 4}.`,
+          severity: "warning",
+          msg: `${rawProp}: ${val} is off the 4px grid. Round to ${Math.round(val / 4) * 4} — or accept the warning if this is intentional optical spacing.`,
         });
       }
     };
@@ -309,7 +313,8 @@ function lint(file) {
             violations.push({
               line: lineOfIdx(mFC.index),
               code: "MISSING_REDUCE_MOTION",
-              msg: `React.FC component uses useCurrentFrame but prop type lacks "reduceMotion". Add reduceMotion?: boolean for accessibility.`,
+              severity: "warning",
+              msg: `React.FC component uses useCurrentFrame but prop type lacks "reduceMotion". Add reduceMotion?: boolean for accessibility (warning — not render-blocking).`,
             });
           }
         }
@@ -317,7 +322,8 @@ function lint(file) {
           violations.push({
             line: 1,
             code: "MISSING_REDUCE_MOTION",
-            msg: `Component uses useCurrentFrame but no reduceMotion prop found anywhere. Add reduceMotion?: boolean.`,
+            severity: "warning",
+            msg: `Component uses useCurrentFrame but no reduceMotion prop found anywhere. Add reduceMotion?: boolean for accessibility (warning — not render-blocking).`,
           });
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devinilabs/reelstack",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Premium 9:16 Reel OS for Remotion. 5 cinematic style families, 22 production-tested presets, audio-locked motion, IG-safe by default. v1.1+ bakes in leonxlnx/taste-skill design discipline + huashu-design productivity patterns.",
   "keywords": [
     "remotion",

package/reference/dark/claudedispatch.tsx

@@ -2424,7 +2424,7 @@ export const ClaudeDispatchReel: React.FC = () => {
 
   return (
     <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: FONT }}>
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
 
       <Background frame={frame} fps={fps} />
 

package/reference/dark/notebooklm.tsx

@@ -2309,7 +2309,7 @@ const SceneRouter: React.FC = () => {
 export const NotebookLMReel: React.FC = () => {
   return (
     <AbsoluteFill style={{ background: C.bg }}>
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
       <SceneRouter />
     </AbsoluteFill>
   );

package/reference/dark/stitch.tsx

@@ -3023,7 +3023,7 @@ export const StitchReel: React.FC = () => {
 
   return (
     <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: FONT }}>
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
 
       <Background frame={frame} fps={fps} />
 

package/reference/forbidden/heretic.tsx

@@ -17,7 +17,6 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   Img,
   OffthreadVideo,
@@ -2630,7 +2629,7 @@ export const HereticReel: React.FC = () => {
       {frame >= HBEAT.stars && frame < HBEAT.cta && <StarsScene />}
       {frame >= HBEAT.cta && frame < HBEAT.end && <CtaScene />}
 
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
     </AbsoluteFill>
   );
 };

package/reference/glass/claudewatch.tsx

@@ -17,7 +17,6 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   Img,
   OffthreadVideo,
@@ -818,9 +817,10 @@ const HookScene: React.FC = () => {
                 top: "55%",
                 left: -2,
                 height: 4,
+                width: "calc(100% + 4px)",
                 background: C.crimson,
-                width: `calc(${strikeWidth}% + 4px)`,
-                transform: "translateY(-50%) rotate(-2deg)",
+                transform: `translateY(-50%) rotate(-2deg) scaleX(${strikeWidth / 100})`,
+                transformOrigin: "left center",
                 boxShadow: `0 0 12px ${C.crimson}`,
                 borderRadius: 2,
               }}
@@ -3777,7 +3777,7 @@ export const ClaudeWatchReel: React.FC<{ embedded?: boolean }> = ({
         fontFamily: FONT,
       }}
     >
-      {!embedded && {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}}
+      {!embedded && {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}}
 
       {/* Perpetual atmosphere — runs all scenes (skipped when embedded; host provides bg+caustics) */}
       {!embedded && <CausticBlobs />}

package/reference/glass/graphify.tsx

@@ -17,7 +17,6 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   Img,
   OffthreadVideo,
@@ -2412,7 +2411,7 @@ export const GraphifyReel: React.FC = () => {
       </div>
 
       {/* Audio */}
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
     </AbsoluteFill>
   );
 };

package/reference/glass/paperclip.tsx

@@ -17,7 +17,6 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Img,
   OffthreadVideo,
   Sequence,
@@ -2184,7 +2183,7 @@ export const PaperclipReel: React.FC = () => {
       }}
     >
       {/* Voiceover — single Audio at root, no Sequence wrap */}
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
 
       {/* Perpetual layers */}
       <CausticBlobs />

package/reference/paper/designreel.tsx

@@ -873,7 +873,7 @@ export const DesignReel: React.FC = () => {
 
   return (
     <AbsoluteFill style={{ backgroundColor: "#e8e4de", fontFamily: FONT }}>
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
       <Background frame={frame} />
       <HookScene frame={frame} fps={fps} />
       <TaglineScene frame={frame} fps={fps} />

package/reference/paper/justdrop.tsx

@@ -1884,7 +1884,7 @@ export const JustDropReel: React.FC = () => {
 
   return (
     <AbsoluteFill style={{ backgroundColor: "#e8e4de", fontFamily: FONT }}>
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
       <Background frame={frame} />
       <HookScene frame={frame} fps={fps} />
       <PowersScene frame={frame} fps={fps} />

package/reference/paper/opus.tsx

@@ -1751,7 +1751,7 @@ export const OpusReel: React.FC = () => {
   return (
     <AbsoluteFill style={{ backgroundColor: "#e8e4de", fontFamily: FONT }}>
       {/* Voiceover audio */}
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
 
       <Background frame={frame} />
       <HookScene frame={frame} fps={fps} />

package/reference/warm/huashu.tsx

@@ -17,7 +17,6 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   OffthreadVideo,
   Sequence,
@@ -3367,7 +3366,7 @@ export const HuashuReel: React.FC = () => {
       }}
     >
       {/* VOICEOVER — runs the entire composition */}
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
 
       <Sequence from={SCENES.S1.from} durationInFrames={SCENES.S1.dur}>
         <Scene1 />

package/reference/warm/mempalace.tsx

@@ -17,7 +17,6 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Audio,
   Easing,
   Img,
   OffthreadVideo,
@@ -2878,7 +2877,7 @@ const Scene8: React.FC = () => {
 export const MemPalaceReel: React.FC = () => {
   return (
     <AbsoluteFill style={{ background: C.bg }}>
-      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
 
       <Sequence from={SCENES.S1.from} durationInFrames={SCENES.S1.dur}>
         <Scene1 />

package/skill/SKILL.md

@@ -19,6 +19,12 @@ When a `/reelstack-*` command fires, you scaffold a complete `<Name>Reel.tsx` Re
 
 ---
 
+## Craft posture
+
+Approach each reel as a senior motion designer would: motion-heavy openers where the lint's ≥4-layer floor is the floor, not the ceiling; every anchor scene earns its dwell with kinetic typography or perpetual primitives (`SonarRings`, `ParticleBurst`, `DriftingSpotlights`, `IridescentRing`, `CausticBlobs`, etc.); GSAP-flavored easings (`power4Out`, `expoOut`, `backOut`, `bouncy`, `gentle` — exposed via `utils/easing.ts` and reinforced by the bundled `gsap-core` / `gsap-timeline` companion skills) throughout. Before iterating, READ the matching reference reel at `~/.reelstack/reference/<family>/<preset>.tsx` for cadence and scene composition. The lint enforces the floor — you're aiming above it.
+
+---
+
 ## Design discipline & productivity influences
 
 ReelStack v1.1+ bakes in two outside influences so buyers don't think about taste at all — they just trigger a slash command and inherit curator-grade design + huashu-style productivity patterns: