@ossclip/scenes 0.1.0

package/src/components/RuleCard.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { z } from "zod/v4";
+import { RuleCardProps, type Theme } from "@ossclip/core/browser";
+import { pop, rise, useEnter } from "../anim";
+import { editStyle, type ElementEdits } from "../editable";
+
+export const RuleCard: React.FC<{
+  props: z.infer<typeof RuleCardProps>;
+  theme: Theme;
+  edits?: ElementEdits;
+}> = ({ props, theme, edits }) => {
+  const p0 = useEnter(0);
+  const p1 = useEnter(8);
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 26,
+        fontFamily: theme.fontDisplay,
+        width: "100%",
+        padding: "0 30px",
+      }}
+    >
+      <div
+        style={{
+          ...pop(p0),
+          width: "100%",
+          background: theme.fg,
+          color: theme.bg,
+          borderRadius: theme.radiusPx,
+          padding: "40px 48px",
+          textAlign: "left",
+        }}
+      >
+        <div
+          data-edit-id="kicker"
+          style={{
+            fontSize: 30,
+            fontWeight: 800,
+            letterSpacing: "0.28em",
+            textTransform: "uppercase",
+            color: "#55555E",
+            marginBottom: 14,
+            fontFamily: theme.fontMono,
+            ...editStyle(edits, "kicker"),
+          }}
+        >
+          {props.kicker}
+        </div>
+        <div
+          data-edit-id="text"
+          style={{
+            fontSize: 72,
+            fontWeight: 900,
+            lineHeight: 1.02,
+            textTransform: "uppercase",
+            ...editStyle(edits, "text"),
+          }}
+        >
+          {props.text}
+        </div>
+      </div>
+      {props.struck ? (
+        <div
+          data-edit-id="struck"
+          style={{
+            ...rise(p1),
+            fontSize: 44,
+            fontWeight: 800,
+            color: theme.muted,
+            textDecoration: "line-through",
+            textDecorationThickness: 6,
+            textDecorationColor: theme.danger,
+            textTransform: "uppercase",
+            letterSpacing: "0.04em",
+            ...editStyle(edits, "struck"),
+          }}
+        >
+          {props.struck}
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/ScreenshotFrame.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { z } from "zod/v4";
+import { Img, interpolate, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import { ScreenshotFrameProps, type Theme } from "@ossclip/core/browser";
+import { pop, useEnter } from "../anim";
+import { editStyle, type ElementEdits } from "../editable";
+
+export const ScreenshotFrame: React.FC<{
+  props: z.infer<typeof ScreenshotFrameProps>;
+  theme: Theme;
+  edits?: ElementEdits;
+}> = ({ props, theme, edits }) => {
+  const p = useEnter(0);
+  const labelP = useEnter(8);
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const drift = props.kenBurns
+    ? interpolate(frame, [0, fps * 8], [1.0, 1.08], { extrapolateRight: "clamp" })
+    : 1;
+  const src = props.src
+    ? /^https?:\/\//.test(props.src)
+      ? props.src
+      : staticFile(props.src)
+    : null;
+  return (
+    <div
+      data-edit-id="image"
+      style={{ ...pop(p), position: "relative", width: "94%", ...editStyle(edits, "image") }}
+    >
+      <div
+        style={{
+          overflow: "hidden",
+          borderRadius: theme.radiusPx / 2,
+          border: `2px solid ${theme.cardBorder}`,
+          background: theme.cardBg,
+          boxShadow: "0 24px 80px rgba(0,0,0,0.5)",
+        }}
+      >
+        {src ? (
+          <Img
+            src={src}
+            style={{ width: "100%", display: "block", transform: `scale(${drift})` }}
+          />
+        ) : (
+          <div
+            style={{
+              height: 420,
+              display: "flex",
+              flexDirection: "column",
+              gap: 14,
+              padding: 30,
+              transform: `scale(${drift})`,
+            }}
+          >
+            {[0.9, 0.75, 0.85, 0.6, 0.8, 0.5].map((w, i) => (
+              <div
+                key={i}
+                style={{
+                  height: 22,
+                  width: `${w * 100}%`,
+                  borderRadius: 6,
+                  background: i % 3 === 0 ? theme.cardBorder : "#22222B",
+                }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      {props.label ? (
+        <div
+          data-edit-id="label"
+          style={{
+            ...pop(labelP),
+            position: "absolute",
+            right: -8,
+            bottom: -20,
+            background: theme.fg,
+            color: theme.bg,
+            fontFamily: theme.fontMono,
+            fontSize: 28,
+            fontWeight: 800,
+            letterSpacing: "0.08em",
+            padding: "12px 22px",
+            borderRadius: 10,
+            textTransform: "uppercase",
+            ...editStyle(edits, "label"),
+          }}
+        >
+          {props.label}
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/StatCard.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { z } from "zod/v4";
+import { StatCardProps, type Theme } from "@ossclip/core/browser";
+import { pop, rise, useEnter } from "../anim";
+import { editStyle, type ElementEdits } from "../editable";
+
+export const StatCard: React.FC<{
+  props: z.infer<typeof StatCardProps>;
+  theme: Theme;
+  edits?: ElementEdits;
+}> = ({ props, theme, edits }) => {
+  const p0 = useEnter(0);
+  const p1 = useEnter(6);
+  const inverted = props.inverted;
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 30,
+        fontFamily: theme.fontDisplay,
+        width: "100%",
+        padding: "0 30px",
+      }}
+    >
+      <div
+        style={{
+          ...pop(p0),
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 40,
+          width: "100%",
+          background: inverted ? theme.fg : theme.cardBg,
+          color: inverted ? theme.bg : theme.fg,
+          border: `2px solid ${inverted ? theme.fg : theme.cardBorder}`,
+          borderRadius: theme.radiusPx,
+          padding: "44px 52px",
+        }}
+      >
+        <div
+          data-edit-id="label"
+          style={{
+            fontSize: 42,
+            fontWeight: 800,
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            lineHeight: 1.15,
+            maxWidth: "55%",
+            ...editStyle(edits, "label"),
+          }}
+        >
+          {props.label}
+        </div>
+        <div
+          data-edit-id="value"
+          style={{
+            fontSize: 110,
+            fontWeight: 900,
+            whiteSpace: "nowrap",
+            ...editStyle(edits, "value"),
+          }}
+        >
+          {props.value}
+        </div>
+      </div>
+      {props.caption ? (
+        <div
+          data-edit-id="caption"
+          style={{
+            ...rise(p1),
+            fontSize: 38,
+            fontWeight: 800,
+            color: theme.fg,
+            background: theme.cardBg,
+            border: `2px solid ${theme.cardBorder}`,
+            borderRadius: theme.radiusPx / 2,
+            padding: "16px 30px",
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+            ...editStyle(edits, "caption"),
+          }}
+        >
+          {props.caption}
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/StrikethroughReveal.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { z } from "zod/v4";
+import { StrikethroughRevealProps, type Theme } from "@ossclip/core/browser";
+import { rise, useEnter } from "../anim";
+import { revealMetrics, revealRows } from "../fit";
+import { editStyle, type ElementEdits } from "../editable";
+
+/**
+ * One RENDERED row, with its own strike rule.
+ *
+ * The rule must be per rendered row, not per logical line: when a line wrapped,
+ * the absolutely-positioned bar sat at 50% of the whole two-line block and so
+ * struck the gap between the rows rather than either of them (FINDINGS §27).
+ *
+ * `editId` is keyed by the LOGICAL line (props.lines index), not the rendered
+ * row: a wrapped line produces multiple rows here, and all of them share the
+ * same id/edits so a user's nudge moves every row of that line together
+ * rather than only the first fragment.
+ */
+const Row: React.FC<{
+  text: string;
+  struck: boolean;
+  /** Verdict glyph (R16 §66) — ✗/✓ leading the row, none for plain lines. */
+  mark: "none" | "cross" | "check";
+  delay: number;
+  fontSize: number;
+  theme: Theme;
+  editId: string;
+  edits?: ElementEdits;
+}> = ({ text, struck, mark, delay, fontSize, theme, editId, edits }) => {
+  const p = useEnter(delay);
+  const strike = useEnter(delay + 8);
+  return (
+    <div
+      data-edit-id={editId}
+      style={{ ...rise(p, 30), position: "relative", display: "inline-block", ...editStyle(edits, editId) }}
+    >
+      <span
+        style={{
+          fontSize,
+          fontWeight: 900,
+          textTransform: "uppercase",
+          lineHeight: 1.08,
+          whiteSpace: "nowrap",
+          color: struck ? theme.muted : theme.fg,
+        }}
+      >
+        {mark !== "none" ? (
+          <span
+            style={{
+              color: mark === "cross" ? theme.danger : theme.success,
+              marginRight: "0.3em",
+            }}
+          >
+            {mark === "cross" ? "✗" : "✓"}
+          </span>
+        ) : null}
+        {text}
+      </span>
+      {struck ? (
+        <div
+          style={{
+            position: "absolute",
+            left: "-2%",
+            top: "50%",
+            height: fontSize * 0.11,
+            width: `${strike * 104}%`,
+            background: theme.danger,
+            borderRadius: fontSize * 0.055,
+            transform: "translateY(-50%) rotate(-2deg)",
+          }}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export const StrikethroughReveal: React.FC<{
+  props: z.infer<typeof StrikethroughRevealProps>;
+  theme: Theme;
+  widthPx?: number;
+  heightPx?: number;
+  edits?: ElementEdits;
+}> = ({ props, theme, widthPx, heightPx, edits }) => {
+  // The verdict glyph rides in the width estimate ("✗ " ≈ its real footprint)
+  // so a marked line shrinks with its glyph instead of overflowing. `mark` is
+  // read defensively: baked render-props from before §66 carry no key.
+  const texts = props.lines.map((l) =>
+    (l.mark ?? "none") !== "none" ? `✗ ${l.text}` : l.text,
+  );
+  const fontSize = revealMetrics(texts, widthPx, heightPx);
+  // Each logical line becomes one or more rows; a line only breaks at an
+  // arrow, and the arrow leads the row it points into. lineIndex is kept
+  // alongside so every row can carry its logical line's data-edit-id. The
+  // glyph marks only the FIRST row of a wrapped line — one verdict per line.
+  const rows = props.lines.flatMap((line, lineIndex) =>
+    revealRows(line.text, fontSize, widthPx ?? 831).map((text, rowIdx) => ({
+      text,
+      struck: line.struck,
+      mark: rowIdx === 0 ? (line.mark ?? "none") : ("none" as const),
+      lineIndex,
+    })),
+  );
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: fontSize * 0.2,
+        textAlign: "center",
+        fontFamily: theme.fontDisplay,
+      }}
+    >
+      {rows.map((row, i) => (
+        <Row
+          key={i}
+          text={row.text}
+          struck={row.struck}
+          mark={row.mark}
+          delay={i * 6}
+          fontSize={fontSize}
+          theme={theme}
+          editId={`line-${row.lineIndex}`}
+          edits={edits}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/TerminalMock.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { z } from "zod/v4";
+import { TerminalMockProps, type Theme } from "@ossclip/core/browser";
+import { pop, rise, useEnter } from "../anim";
+import { editStyle, type ElementEdits } from "../editable";
+
+const Window: React.FC<{
+  title: string;
+  lines: string[];
+  delay: number;
+  theme: Theme;
+  editId: string;
+  edits?: ElementEdits;
+}> = ({ title, lines, delay, theme, editId, edits }) => {
+  const p = useEnter(delay);
+  return (
+    <div
+      data-edit-id={editId}
+      style={{
+        ...pop(p),
+        background: theme.cardBg,
+        border: `2px solid ${theme.cardBorder}`,
+        borderRadius: theme.radiusPx / 2,
+        overflow: "hidden",
+        width: "100%",
+        fontFamily: theme.fontMono,
+        ...editStyle(edits, editId),
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          padding: "14px 20px",
+          borderBottom: `2px solid ${theme.cardBorder}`,
+        }}
+      >
+        {["#FF5F57", "#FEBC2E", "#28C840"].map((c) => (
+          <div key={c} style={{ width: 16, height: 16, borderRadius: 8, background: c }} />
+        ))}
+        <div style={{ marginLeft: 10, fontSize: 24, color: theme.muted }}>{title}</div>
+      </div>
+      <div style={{ padding: "18px 22px", display: "flex", flexDirection: "column", gap: 8 }}>
+        {lines.map((line, i) => (
+          <div key={i} style={{ fontSize: 27, color: theme.fg, whiteSpace: "pre" }}>
+            {line}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const TerminalMock: React.FC<{
+  props: z.infer<typeof TerminalMockProps>;
+  theme: Theme;
+  edits?: ElementEdits;
+}> = ({ props, theme, edits }) => {
+  const tail = useEnter(props.windows.length * 6 + 4);
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 22,
+        width: "100%",
+        padding: "0 30px",
+      }}
+    >
+      {props.windows.map((w, i) => (
+        <Window
+          key={i}
+          title={w.title}
+          lines={w.lines}
+          delay={i * 6}
+          theme={theme}
+          editId={`window-${i}`}
+          edits={edits}
+        />
+      ))}
+      {props.fanOut ? (
+        <div
+          // The last un-transformable element on any component (R17 §85
+          // audit): with an id it joins the generic drag/resize/retype
+          // machinery like everything else.
+          data-edit-id="fanOut"
+          style={{
+            ...rise(tail),
+            fontFamily: theme.fontDisplay,
+            fontSize: 40,
+            fontWeight: 900,
+            letterSpacing: "0.2em",
+            color: theme.fg,
+            textTransform: "uppercase",
+            ...editStyle(edits, "fanOut"),
+          }}
+        >
+          ⌄ {props.fanOut}
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/TitleCard.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { z } from "zod/v4";
+import { TitleCardProps, type Theme } from "@ossclip/core/browser";
+import { rise, useEnter } from "../anim";
+import { editStyle, type ElementEdits } from "../editable";
+
+export const TitleCard: React.FC<{
+  props: z.infer<typeof TitleCardProps>;
+  theme: Theme;
+  edits?: ElementEdits;
+}> = ({ props, theme, edits }) => {
+  const p0 = useEnter(0);
+  const p1 = useEnter(5);
+  const p2 = useEnter(10);
+  // The producer sometimes emits the same string for both fields; the huge
+  // emphasis wins and the redundant title is skipped (FINDINGS §5).
+  const emphasis = props.emphasis?.trim();
+  const titleIsRedundant =
+    !!emphasis && emphasis.toLowerCase().includes(props.title.trim().toLowerCase());
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 28,
+        textAlign: "center",
+        fontFamily: theme.fontDisplay,
+        color: theme.fg,
+        padding: "0 40px",
+      }}
+    >
+      {props.eyebrow ? (
+        <div
+          data-edit-id="eyebrow"
+          style={{
+            ...rise(p0),
+            fontSize: 34,
+            fontWeight: 700,
+            letterSpacing: "0.35em",
+            color: theme.muted,
+            textTransform: "uppercase",
+            ...editStyle(edits, "eyebrow"),
+          }}
+        >
+          {props.eyebrow}
+        </div>
+      ) : null}
+      {emphasis ? (
+        <div
+          data-edit-id="emphasis"
+          style={{
+            ...rise(p1, 40),
+            fontSize: 210,
+            fontWeight: 900,
+            lineHeight: 0.95,
+            ...editStyle(edits, "emphasis"),
+          }}
+        >
+          {emphasis}
+        </div>
+      ) : null}
+      {!titleIsRedundant ? (
+        <div
+          data-edit-id="title"
+          style={{
+            ...rise(emphasis ? p2 : p1, 34),
+            fontSize: emphasis ? 64 : 96,
+            fontWeight: 900,
+            lineHeight: 1.05,
+            textTransform: "uppercase",
+            letterSpacing: "0.02em",
+            ...editStyle(edits, "title"),
+          }}
+        >
+          {props.title}
+        </div>
+      ) : null}
+      {props.sub ? (
+        <div
+          data-edit-id="sub"
+          style={{
+            ...rise(p2),
+            fontSize: 40,
+            fontWeight: 600,
+            color: theme.muted,
+            ...editStyle(edits, "sub"),
+          }}
+        >
+          {props.sub}
+        </div>
+      ) : null}
+    </div>
+  );
+};