@clipkit/patterns 1.0.0

package/dist/flow-line.js

@@ -0,0 +1,53 @@
+// flowLine — a "conveyor" bar: a rounded strip with a diagonal stripe texture
+// scrolling along it (the barber-pole illusion). Scroll the texture LEFT and,
+// especially once you zoom into the bar, it reads as the bar itself travelling
+// RIGHT — the classic motion-graphics fake. Built as a clipped group so the
+// stripes only show inside the strip, with the stripes positioned by a looping
+// `mod(...)` expression (pure function of time, seamless wrap).
+//
+// Returns ONE clipped `group` (move / scale / time-remap it as a unit — e.g. drop
+// it inside a `zoomRig` and push in to reveal the flow). Children are in the
+// group's LOCAL space (origin at the strip's top-left), per the runtime's
+// clipped-group model.
+const e = (expr) => ({ expr });
+export function flowLine(props) {
+    const { id, x, y, length, thickness, baseColor, stripeColor, speed = 220, angle = 22, stripeWidth = 30, time, duration, track, } = props;
+    const radius = props.radius ?? thickness / 2;
+    const period = stripeWidth * 2; // stripe + equal gap
+    const span = length + period * 2; // wrap distance (covers the slant overhang)
+    // tall enough that the slanted stripe still covers the strip top-to-bottom
+    const stripeH = thickness + Math.tan((Math.abs(angle) * Math.PI) / 180) * thickness + thickness;
+    const count = Math.ceil(span / period) + 1;
+    const children = [
+        { id: `${id}-base`, type: 'shape', shape: 'rectangle', x: length / 2, y: thickness / 2, width: length, height: thickness, fill_color: baseColor },
+    ];
+    for (let k = 0; k < count; k++) {
+        children.push({
+            id: `${id}-st-${k}`,
+            type: 'shape',
+            shape: 'rectangle',
+            // local x loops over [−period, span−period); seamless because span is a whole number of periods + cover
+            x: e(`mod(${k * period} - t*${speed}, ${span}) - ${period}`),
+            y: thickness / 2,
+            width: stripeWidth,
+            height: stripeH,
+            rotation: angle,
+            fill_color: stripeColor,
+        });
+    }
+    return {
+        id,
+        type: 'group',
+        track,
+        time,
+        duration,
+        clip: true,
+        x,
+        y,
+        width: length,
+        height: thickness,
+        border_radius: radius,
+        elements: children,
+    };
+}
+//# sourceMappingURL=flow-line.js.map

package/dist/flow-line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-line.js","sourceRoot":"","sources":["../src/flow-line.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,8EAA8E;AAC9E,+EAA+E;AAC/E,4EAA4E;AAC5E,+EAA+E;AAC/E,gEAAgE;AAChE,EAAE;AACF,kFAAkF;AAClF,6EAA6E;AAC7E,0EAA0E;AAC1E,uBAAuB;AAIvB,MAAM,CAAC,GAAG,CAAC,IAAY,EAAoB,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;AA2BzD,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EACnD,KAAK,GAAG,GAAG,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GACjE,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,GAAG,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,qBAAqB;IACrD,MAAM,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,4CAA4C;IAC9E,2EAA2E;IAC3E,MAAM,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,SAAS,GAAG,SAAS,CAAC;IAChG,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAE3C,MAAM,QAAQ,GAAc;QAC1B,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE;KAClJ,CAAC;IACF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC/B,QAAQ,CAAC,IAAI,CAAC;YACZ,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE;YACnB,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,WAAW;YAClB,wGAAwG;YACxG,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,MAAM,QAAQ,KAAK,KAAK,IAAI,OAAO,MAAM,EAAE,CAAC;YAC5D,CAAC,EAAE,SAAS,GAAG,CAAC;YAChB,KAAK,EAAE,WAAW;YAClB,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,KAAK;YACf,UAAU,EAAE,WAAW;SACb,CAAC,CAAC;IAChB,CAAC;IAED,OAAO;QACL,EAAE;QACF,IAAI,EAAE,OAAO;QACb,KAAK;QACL,IAAI;QACJ,QAAQ;QACR,IAAI,EAAE,IAAI;QACV,CAAC;QACD,CAAC;QACD,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,SAAS;QACjB,aAAa,EAAE,MAAM;QACrB,QAAQ,EAAE,QAAQ;KACR,CAAC;AACf,CAAC"}

package/dist/glass-panel.d.ts

@@ -0,0 +1,24 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface GlassPanelProps {
+    id: string;
+    /** Center in canvas px. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Corner radius. Default = pill (height/2). */
+    radius?: number;
+    /** Centered label text. */
+    label?: string;
+    labelSize?: number;
+    color: ColorName;
+    theme?: ThemeName;
+    /** Frost amount (0 = clear glass). Default 8. */
+    blur?: number;
+    time: number;
+    duration: number;
+    layer: number;
+}
+export declare function glassPanel(props: GlassPanelProps): Element;
+//# sourceMappingURL=glass-panel.d.ts.map

package/dist/glass-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass-panel.d.ts","sourceRoot":"","sources":["../src/glass-panel.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CA0B1D"}

package/dist/glass-panel.js

@@ -0,0 +1,32 @@
+// glassPanel — a refractive glass card / pill (optionally labelled). Reads
+// whatever is drawn beneath it as its backdrop, so place it over content.
+//
+// COMPONENT pattern: returns ONE plain `group`.
+import { assignLayers } from './layers.js';
+import { getFonts, getPalette } from './theme.js';
+export function glassPanel(props) {
+    const { id, x, y, width: W, height: H, label, color, time, duration, layer } = props;
+    const theme = props.theme ?? 'cinematic';
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const radius = props.radius ?? H / 2;
+    const children = [
+        {
+            id: `${id}-glass`, type: 'shape', shape: 'rectangle', x: W / 2, y: H / 2, x_anchor: '50%', y_anchor: '50%', width: W, height: H,
+            border_radius: radius, fill_color: '#ffffff',
+            effects: [{ type: 'glass', blur_radius: props.blur ?? 8, refraction: 14, edge_highlight: 1, tint: palette.accent }],
+        },
+    ];
+    if (label) {
+        children.push({
+            id: `${id}-label`, type: 'text', text: label, x: W / 2, y: H / 2, x_anchor: '50%', y_anchor: '50%',
+            font_family: fonts.sans, font_size: props.labelSize ?? 22, font_weight: '700', fill_color: palette.text,
+        });
+    }
+    return {
+        id, type: 'group', layer, time, duration, x, y, x_anchor: '50%', y_anchor: '50%', width: W, height: H,
+        animations: [{ type: 'scale-in', duration: 0.5, easing: 'ease-out-back' }, { type: 'fade-in', duration: 0.4 }, { type: 'fade-out', time: 'end', duration: 0.4 }],
+        elements: assignLayers(children),
+    };
+}
+//# sourceMappingURL=glass-panel.js.map

package/dist/glass-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass-panel.js","sourceRoot":"","sources":["../src/glass-panel.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,0EAA0E;AAC1E,EAAE;AACF,gDAAgD;AAGhD,OAAO,EAAE,YAAY,EAAyB,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAkC,MAAM,YAAY,CAAC;AAuBlF,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACrF,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,WAAW,CAAC;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAuB;QACnC;YACE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;YAC/H,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS;YAC5C,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,cAAc,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;SACpH;KACF,CAAC;IACF,IAAI,KAAK,EAAE,CAAC;QACV,QAAQ,CAAC,IAAI,CAAC;YACZ,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK;YAClG,WAAW,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,IAAI;SACxG,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;QACrG,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;QAChK,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;KACjC,CAAC;AACJ,CAAC"}

package/dist/header-bar.d.ts

@@ -0,0 +1,36 @@
+import type { Element, PathGradient, PathDef } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface HeaderBarProps {
+    /** Used as the id prefix for every produced element. */
+    id: string;
+    /** Scene title shown in the header center-left. */
+    title: string;
+    /** Optional right-aligned date range string. */
+    dateRange?: string;
+    /** Body fill color slot (drives the lower 80% of the canvas). */
+    bodyColor: ColorName;
+    theme?: ThemeName;
+    /** Composition width + height. */
+    canvasWidth: number;
+    canvasHeight: number;
+    /**
+     * Optional logo definition. If supplied, the pattern emits an SVG
+     * element on the left of the header.
+     */
+    logo?: {
+        viewBox: [number, number, number, number];
+        paths: PathDef[];
+        gradients?: PathGradient[];
+        /** Logo width in canvas px. Default 220. */
+        width?: number;
+    };
+    time: number;
+    duration: number;
+    /**
+     * Starting layer index. The pattern uses layerBase..layerBase+4 (body,
+     * header bg, logo, title, date).
+     */
+    layerBase: number;
+}
+export declare function headerBar(props: HeaderBarProps): Element[];
+//# sourceMappingURL=header-bar.d.ts.map

package/dist/header-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-bar.d.ts","sourceRoot":"","sources":["../src/header-bar.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1C,KAAK,EAAE,OAAO,EAAE,CAAC;QACjB,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;QAC3B,4CAA4C;QAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,EAAE,CA4G1D"}

package/dist/header-bar.js

@@ -0,0 +1,108 @@
+// HeaderBar — the scene framing used in dashboard-style videos: a
+// colored body fill, a white header strip with a left-aligned logo, a
+// centered title, and a right-aligned date range.
+//
+// The pattern emits the body fill + header background + title + date.
+// The logo is BYO — pass an SVG definition (viewBox + paths + optional
+// gradients) and the pattern lays it out on the left of the header.
+import { getFonts, getPalette } from './theme.js';
+export function headerBar(props) {
+    const { id, title, dateRange, bodyColor, canvasWidth: W, canvasHeight: H, logo, time, duration, layerBase, } = props;
+    const theme = props.theme ?? 'mux';
+    const palette = getPalette(theme, bodyColor);
+    const grayPalette = getPalette(theme, 'gray');
+    const fonts = getFonts(theme);
+    const HEADER_H = 216; // 20 % of a 1080-tall canvas; tweak if scaling
+    const out = [];
+    // Colored body fill (below the header).
+    out.push({
+        id: `${id}-body`,
+        type: 'shape',
+        layer: layerBase,
+        time,
+        duration,
+        shape: 'rectangle',
+        x: W / 2,
+        y: HEADER_H + (H - HEADER_H) / 2,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width: W,
+        height: H - HEADER_H,
+        fill_color: palette.bg,
+    });
+    // White header background.
+    out.push({
+        id: `${id}-header-bg`,
+        type: 'shape',
+        layer: layerBase + 1,
+        time,
+        duration,
+        shape: 'rectangle',
+        x: W / 2,
+        y: HEADER_H / 2,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width: W,
+        height: HEADER_H,
+        fill_color: '#ffffff',
+    });
+    // Logo on the left of the header.
+    if (logo) {
+        const logoW = logo.width ?? 220;
+        const logoAspect = logo.viewBox[3] / logo.viewBox[2];
+        out.push({
+            id: `${id}-logo`,
+            type: 'shape',
+            layer: layerBase + 2,
+            time,
+            duration,
+            x: 80,
+            y: HEADER_H / 2,
+            x_anchor: 0,
+            y_anchor: 0.5,
+            width: logoW,
+            height: logoW * logoAspect,
+            view_box: logo.viewBox,
+            paths: logo.paths,
+            ...(logo.gradients ? { gradients: logo.gradients } : {}),
+        });
+    }
+    // Scene title — left-aligned, sits right of the logo.
+    out.push({
+        id: `${id}-title`,
+        type: 'text',
+        layer: layerBase + 3,
+        time,
+        duration,
+        text: title,
+        x: 380,
+        y: HEADER_H / 2,
+        x_anchor: 0,
+        font_family: fonts.sans,
+        font_size: 36,
+        font_weight: '400',
+        fill_color: '#383838',
+        animations: [{ type: 'fade-in', duration: 1.0 }],
+    });
+    // Date range — right-aligned.
+    if (dateRange) {
+        out.push({
+            id: `${id}-date`,
+            type: 'text',
+            layer: layerBase + 4,
+            time,
+            duration,
+            text: dateRange,
+            x: W - 80,
+            y: HEADER_H / 2,
+            x_anchor: 1,
+            font_family: fonts.sans,
+            font_size: 28,
+            font_weight: '400',
+            fill_color: grayPalette.accent,
+            animations: [{ type: 'fade-in', duration: 1.0 }],
+        });
+    }
+    return out;
+}
+//# sourceMappingURL=header-bar.js.map

package/dist/header-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-bar.js","sourceRoot":"","sources":["../src/header-bar.ts"],"names":[],"mappings":"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"}

package/dist/hero-reveal.d.ts

@@ -0,0 +1,17 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface HeroRevealProps {
+    id: string;
+    /** The wordmark — set in the theme's display (serif) face. */
+    wordmark: string;
+    tagline?: string;
+    color: ColorName;
+    theme?: ThemeName;
+    canvasWidth: number;
+    canvasHeight: number;
+    time: number;
+    duration: number;
+    layer: number;
+}
+export declare function heroReveal(props: HeroRevealProps): Element;
+//# sourceMappingURL=hero-reveal.d.ts.map

package/dist/hero-reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-reveal.d.ts","sourceRoot":"","sources":["../src/hero-reveal.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAwC1D"}

package/dist/hero-reveal.js

@@ -0,0 +1,47 @@
+// heroReveal — a cinematic logo reveal: a soft accent glow, a refractive
+// glass orb, and a serif wordmark with a tagline. The premium opener.
+//
+// COMPONENT pattern: returns ONE plain `group` (children draw in order so
+// the glass orb refracts the glow beneath it; the wordmark sits on top).
+import { assignLayers } from './layers.js';
+import { getFonts, getPalette } from './theme.js';
+export function heroReveal(props) {
+    const { id, wordmark, tagline, color, canvasWidth: W, canvasHeight: H, time, duration, layer } = props;
+    const theme = props.theme ?? 'cinematic';
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const cx = W / 2, cy = H / 2;
+    const children = [
+        // accent glow forming behind the orb
+        {
+            id: `${id}-glow`, type: 'shape', shape: 'ellipse', x: cx, y: cy, x_anchor: '50%', y_anchor: '50%', width: 600, height: 600, opacity: 0.5,
+            gradient: { type: 'radial', cx: 0.5, cy: 0.5, radius: 0.5, stops: [{ offset: 0, color: palette.accent }, { offset: 1, color: palette.bg }] },
+            animations: [{ type: 'scale-in', duration: 1.6, easing: 'ease-out' }],
+        },
+        // refractive glass orb (reads the glow as backdrop)
+        {
+            id: `${id}-orb`, type: 'shape', shape: 'ellipse', x: cx, y: cy, x_anchor: '50%', y_anchor: '50%', width: 300, height: 300, fill_color: '#ffffff',
+            time: 0.3, animations: [{ type: 'fade-in', duration: 0.6 }],
+            effects: [{ type: 'glass', mode: 'dome', edge_width: 130, refraction: 22, dispersion: 5 }],
+        },
+        // serif wordmark
+        {
+            id: `${id}-wordmark`, type: 'text', text: wordmark, x: cx, y: cy - 4, x_anchor: '50%', y_anchor: '50%', time: 0.55,
+            font_family: fonts.display, font_size: 96, font_weight: '700', letter_spacing: 8, fill_color: palette.text,
+            animations: [{ type: 'scale-in', duration: 1.0, easing: 'ease-out' }, { type: 'fade-in', duration: 0.6 }],
+        },
+    ];
+    if (tagline) {
+        children.push({
+            id: `${id}-tagline`, type: 'text', text: tagline, x: cx, y: cy + 86, x_anchor: '50%', y_anchor: '50%', time: 1.1,
+            font_family: fonts.sans, font_size: 26, letter_spacing: 2, fill_color: palette.textMuted,
+            animations: [{ type: 'fade-in', duration: 0.6 }],
+        });
+    }
+    return {
+        id, type: 'group', layer, time, duration, x: 0, y: 0, width: W, height: H,
+        animations: [{ type: 'fade-out', time: 'end', duration: 0.5 }],
+        elements: assignLayers(children),
+    };
+}
+//# sourceMappingURL=hero-reveal.js.map

package/dist/hero-reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-reveal.js","sourceRoot":"","sources":["../src/hero-reveal.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export { headerBar, type HeaderBarProps } from './header-bar.js';
+export { statBlock, type StatBlockProps } from './stat-block.js';
+export { barChartRow, type BarChartRowProps } from './bar-chart-row.js';
+export { rankedList, type RankedListItem, type RankedListProps } from './ranked-list.js';
+export { pieCard, type PieCardProps } from './pie-card.js';
+export { statsScene, barsScene, rankingScene, pieScene, type StatsSceneProps, type BarsSceneProps, type RankingSceneProps, type PieSceneProps, type StatItem, type BarItem, type PieItem, } from './data-scenes.js';
+export { liquidMorph, type LiquidMorphProps, type MorphShape } from './liquid-morph.js';
+export { introCard, type IntroCardProps } from './intro-card.js';
+export { lowerThird, type LowerThirdProps } from './lower-third.js';
+export { tiltedShowcase, type TiltedShowcaseProps } from './tilted-showcase.js';
+export { cameraOrbit, type CameraOrbitProps } from './camera-orbit.js';
+export { litSurface, type LitSurfaceProps } from './lit-surface.js';
+export { heroReveal, type HeroRevealProps } from './hero-reveal.js';
+export { glassPanel, type GlassPanelProps } from './glass-panel.js';
+export { ctaOutro, type CtaOutroProps } from './cta-outro.js';
+export { kineticHeadline, type KineticHeadlineProps } from './kinetic-headline.js';
+export { promo, type PromoOptions, type Scene, type SceneCtx } from './promo.js';
+export { trendPill, trendPct, type TrendPillProps } from './trend-pill.js';
+export { pulseToTempo, accentOnBeats, snapToBeat, revealOnBeat, slideOnBeat, type PulseToTempoOptions, type AccentOnBeatsOptions, type RevealOnBeatOptions, type SlideOnBeatOptions, } from './beat-sync.js';
+export { THEMES, getPalette, getFonts, type ThemeName, type ColorName, type ColorPalette, type Theme, } from './theme.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAI3D,OAAO,EACL,UAAU,EACV,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,OAAO,EACZ,KAAK,OAAO,GACb,MAAM,kBAAkB,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAMxF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,KAAK,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAIjF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG3E,OAAO,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,YAAY,EACZ,WAAW,EACX,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,MAAM,EACN,UAAU,EACV,QAAQ,EACR,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,KAAK,GACX,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,43 @@
+// @clipkit/patterns — authoring-time pattern library.
+//
+// Patterns are TypeScript functions that take params + a theme and emit
+// arrays of primitive Clipkit Source elements. They are NOT a runtime
+// concept: the resulting Source JSON references only the primitives
+// declared in @clipkit/protocol. The runtime never sees a "pattern".
+//
+// Model mirrors shadcn/ui — copy the pattern source if you need a custom
+// look, don't pile on parameters.
+export { headerBar } from './header-bar.js';
+export { statBlock } from './stat-block.js';
+export { barChartRow } from './bar-chart-row.js';
+export { rankedList } from './ranked-list.js';
+export { pieCard } from './pie-card.js';
+// Data-viz SCENES — full-frame compositions (headerBar + data patterns) that
+// promo() can sequence, so "make me a stats / chart / top-10 video" works.
+export { statsScene, barsScene, rankingScene, pieScene, } from './data-scenes.js';
+// liquidMorph — shape → travelling path → shape, with liquid blob in-betweens
+// (the Transition Tour morph, generalized).
+export { liquidMorph } from './liquid-morph.js';
+// Component patterns — each returns ONE `group` element (move / animate /
+// time-remap the whole unit) that expands to plain primitives. This is
+// the protocol's "pre-comp" answer: reuse lives in authoring functions,
+// not in a schema element.
+export { introCard } from './intro-card.js';
+export { lowerThird } from './lower-third.js';
+export { tiltedShowcase } from './tilted-showcase.js';
+export { cameraOrbit } from './camera-orbit.js';
+export { litSurface } from './lit-surface.js';
+// Cinematic patterns (dark theme) + the Source-level composer.
+export { heroReveal } from './hero-reveal.js';
+export { glassPanel } from './glass-panel.js';
+export { ctaOutro } from './cta-outro.js';
+export { kineticHeadline } from './kinetic-headline.js';
+export { promo } from './promo.js';
+// Internal helper, exported so callers can use it directly when they
+// don't want a full StatBlock / BarChartRow.
+export { trendPill, trendPct } from './trend-pill.js';
+// Beat-sync — map a @clipkit/music-analysis BeatMap onto motion.
+export { pulseToTempo, accentOnBeats, snapToBeat, revealOnBeat, slideOnBeat, } from './beat-sync.js';
+// Theme primitives.
+export { THEMES, getPalette, getFonts, } from './theme.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,EAAE;AACF,wEAAwE;AACxE,sEAAsE;AACtE,oEAAoE;AACpE,qEAAqE;AACrE,EAAE;AACF,yEAAyE;AACzE,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAuB,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAuB,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAyB,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,UAAU,EAA6C,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAAE,OAAO,EAAqB,MAAM,eAAe,CAAC;AAE3D,6EAA6E;AAC7E,2EAA2E;AAC3E,OAAO,EACL,UAAU,EACV,SAAS,EACT,YAAY,EACZ,QAAQ,GAQT,MAAM,kBAAkB,CAAC;AAE1B,8EAA8E;AAC9E,4CAA4C;AAC5C,OAAO,EAAE,WAAW,EAA0C,MAAM,mBAAmB,CAAC;AAExF,0EAA0E;AAC1E,uEAAuE;AACvE,wEAAwE;AACxE,2BAA2B;AAC3B,OAAO,EAAE,SAAS,EAAuB,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,cAAc,EAA4B,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AAEpE,+DAA+D;AAC/D,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAsB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAA6B,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,KAAK,EAAgD,MAAM,YAAY,CAAC;AAEjF,qEAAqE;AACrE,6CAA6C;AAC7C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAuB,MAAM,iBAAiB,CAAC;AAE3E,iEAAiE;AACjE,OAAO,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,YAAY,EACZ,WAAW,GAKZ,MAAM,gBAAgB,CAAC;AAExB,oBAAoB;AACpB,OAAO,EACL,MAAM,EACN,UAAU,EACV,QAAQ,GAKT,MAAM,YAAY,CAAC"}

package/dist/intro-card.d.ts

@@ -0,0 +1,23 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface IntroCardProps {
+    /** Used as the id prefix for every produced element. */
+    id: string;
+    /** Big headline, the card's one job. */
+    headline: string;
+    /** Small all-caps line above the headline (e.g. a brand or series name). */
+    kicker?: string;
+    /** Supporting line under the headline. */
+    subtitle?: string;
+    /** Accent color slot — drives the backdrop tint and the rule. */
+    color: ColorName;
+    theme?: ThemeName;
+    /** Composition width + height — the card fills the frame. */
+    canvasWidth: number;
+    canvasHeight: number;
+    time: number;
+    duration: number;
+    layer: number;
+}
+export declare function introCard(props: IntroCardProps): Element;
+//# sourceMappingURL=intro-card.d.ts.map

package/dist/intro-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"intro-card.d.ts","sourceRoot":"","sources":["../src/intro-card.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAwHxD"}

package/dist/intro-card.js

@@ -0,0 +1,123 @@
+// IntroCard — a full-frame opening title: themed backdrop, an accent
+// rule, a big headline, and an optional kicker + subtitle, with
+// entrance/exit animation built in.
+//
+// This is a COMPONENT pattern: it returns a single `group` element so
+// the whole card moves, fades, or time-remaps as one unit — and it
+// expands to nothing but plain primitives. Reuse lives here in the
+// authoring function, not in the schema (there is no nested-composition
+// element; nested timing is `time_remap` on a plain group, §5.8.3).
+import { assignLayers } from './layers.js';
+import { getFonts, getPalette } from './theme.js';
+export function introCard(props) {
+    const { id, headline, kicker, subtitle, color, canvasWidth: W, canvasHeight: H, time, duration, layer, } = props;
+    const theme = props.theme ?? 'mux';
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const cy = H / 2;
+    const children = [];
+    // Full-frame backdrop tint.
+    children.push({
+        id: `${id}-bg`,
+        type: 'shape',
+        shape: 'rectangle',
+        x: 0,
+        y: 0,
+        width: W,
+        height: H,
+        fill_color: palette.bg,
+    });
+    if (kicker) {
+        children.push({
+            id: `${id}-kicker`,
+            type: 'text',
+            time: 0.15,
+            text: kicker.toUpperCase(),
+            x: W / 2,
+            y: cy - 130,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            font_family: fonts.mono,
+            font_size: 30,
+            letter_spacing: 6,
+            fill_color: palette.accentDark,
+            animations: [{ type: 'fade-in', duration: 0.5 }],
+        });
+    }
+    children.push({
+        id: `${id}-headline`,
+        type: 'text',
+        time: 0.25,
+        text: headline,
+        x: W / 2,
+        y: cy - 30,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        font_family: fonts.sans,
+        font_size: 96,
+        font_weight: '700',
+        fill_color: palette.text,
+        animations: [{ type: 'fade-in', duration: 0.6 }],
+        // Gentle 40px rise (the slide-up-in preset's fixed 200px is too much
+        // for a headline already in frame).
+        keyframe_animations: [{
+                property: 'y',
+                keyframes: [
+                    { time: 0, value: cy - 30 + 40 },
+                    { time: 0.6, value: cy - 30, easing: 'ease-out' },
+                ],
+            }],
+    });
+    // Accent rule under the headline, drawn with a scale-from-center wipe.
+    children.push({
+        id: `${id}-rule`,
+        type: 'shape',
+        time: 0.55,
+        shape: 'rectangle',
+        x: W / 2,
+        y: cy + 50,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width: 220,
+        height: 8,
+        border_radius: 4,
+        fill_color: palette.accent,
+        keyframe_animations: [{
+                property: 'x_scale',
+                keyframes: [
+                    { time: 0, value: 0 },
+                    { time: 0.45, value: 1, easing: 'ease-out' },
+                ],
+            }],
+    });
+    if (subtitle) {
+        children.push({
+            id: `${id}-subtitle`,
+            type: 'text',
+            time: 0.7,
+            text: subtitle,
+            x: W / 2,
+            y: cy + 120,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            font_family: fonts.sans,
+            font_size: 38,
+            fill_color: palette.textMuted,
+            animations: [{ type: 'fade-in', duration: 0.6 }],
+        });
+    }
+    return {
+        id,
+        type: 'group',
+        layer,
+        time,
+        duration,
+        x: 0,
+        y: 0,
+        width: W,
+        height: H,
+        animations: [{ type: 'fade-out', time: 'end', duration: 0.5 }],
+        elements: assignLayers(children),
+    };
+}
+//# sourceMappingURL=intro-card.js.map

package/dist/intro-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intro-card.js","sourceRoot":"","sources":["../src/intro-card.ts"],"names":[],"mappings":"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"}

package/dist/kinetic-headline.d.ts

@@ -0,0 +1,18 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface KineticHeadlineProps {
+    id: string;
+    text: string;
+    subtitle?: string;
+    color: ColorName;
+    theme?: ThemeName;
+    canvasWidth: number;
+    canvasHeight: number;
+    /** Stagger between letters, seconds. Default 0.05. */
+    stagger?: number;
+    time: number;
+    duration: number;
+    layer: number;
+}
+export declare function kineticHeadline(props: KineticHeadlineProps): Element;
+//# sourceMappingURL=kinetic-headline.d.ts.map

package/dist/kinetic-headline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kinetic-headline.d.ts","sourceRoot":"","sources":["../src/kinetic-headline.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,OAAO,CAgCpE"}