@clipkit/patterns 1.0.0

package/dist/theme.d.ts

@@ -0,0 +1,36 @@
+import type { FontFace } from '@clipkit/protocol';
+export type ThemeName = 'mux' | 'minimal' | 'cinematic';
+export type ColorName = 'pink' | 'green' | 'blue' | 'lavender' | 'purple' | 'yellow' | 'gray';
+export interface ColorPalette {
+    /** Light background tint — used for body fills and pill interiors. */
+    bg: string;
+    /** Mid-weight accent — borders, dividers, secondary text. */
+    accent: string;
+    /** Dark accent — top borders, big headline text, pill borders + text. */
+    accentDark: string;
+    /** Color of the foreground "measure" bar (white in Mux). */
+    measure: string;
+    /** Primary body text color (black-ish). */
+    text: string;
+    /** Secondary / muted text. */
+    textMuted: string;
+}
+export interface Theme {
+    sansFont: string;
+    monoFont: string;
+    /** Display/serif face for big hero wordmarks (falls back to sansFont). */
+    displayFont?: string;
+    /** Webfonts to register on the Source so non-system faces actually load. */
+    fontFaces?: FontFace[];
+    /** When true, the theme's canvas is dark — patterns pick light defaults. */
+    dark?: boolean;
+    palettes: Record<ColorName, ColorPalette>;
+}
+export declare const THEMES: Record<ThemeName, Theme>;
+export declare function getPalette(theme: ThemeName, color: ColorName): ColorPalette;
+export declare function getFonts(theme: ThemeName): {
+    sans: string;
+    mono: string;
+    display: string;
+};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW,CAAC;AACxD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,MAAM,GACN,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,UAAU,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;CAC3C;AAaD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,CAgD3C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,YAAY,CAE3E;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAG1F"}

package/dist/theme.js

@@ -0,0 +1,75 @@
+// Pattern theming.
+//
+// Each pattern accepts a `theme` (named bundle) + a `color` (named accent
+// inside that theme) and reads its palette via getPalette(theme, color).
+// Patterns DON'T accept arbitrary color overrides; if you need a custom
+// look, copy the pattern source and tweak it. Same model as shadcn.
+//
+// To add a theme, extend THEMES below. To add a color within a theme,
+// extend that theme's palette map. Patterns will pick it up automatically
+// as long as the color name is listed in ColorName.
+const MUX_BLACK = '#252525';
+const MUX_GRAY = '#8e8e8e';
+const WHITE = '#ffffff';
+// Cinematic webfonts (fontsource CDN) — Inter for UI, Playfair for the wordmark.
+const INTER = (w) => `https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-${w}-normal.woff2`;
+const PLAYFAIR = (w) => `https://cdn.jsdelivr.net/npm/@fontsource/playfair-display/files/playfair-display-latin-${w}-normal.woff2`;
+const CINE_BG = '#0a0e16', CINE_TEXT = '#f2f5fb', CINE_MUTE = '#8a98b8';
+const cinePalette = (accent, accentDark) => ({ bg: CINE_BG, accent, accentDark, measure: WHITE, text: CINE_TEXT, textMuted: CINE_MUTE });
+export const THEMES = {
+    mux: {
+        sansFont: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+        monoFont: 'Menlo, Monaco, Consolas, monospace',
+        palettes: {
+            pink: { bg: '#ffecf6', accent: '#fb2491', accentDark: '#d91377', measure: WHITE, text: MUX_BLACK, textMuted: MUX_GRAY },
+            green: { bg: '#eaf9e4', accent: '#1FC3A8', accentDark: '#17A089', measure: WHITE, text: MUX_BLACK, textMuted: MUX_GRAY },
+            blue: { bg: '#e5f4ff', accent: '#1CA0FD', accentDark: '#0B85DB', measure: WHITE, text: MUX_BLACK, textMuted: MUX_GRAY },
+            lavender: { bg: '#f5e4ff', accent: '#9620D8', accentDark: '#6e15a0', measure: WHITE, text: MUX_BLACK, textMuted: MUX_GRAY },
+            purple: { bg: '#f5e4ff', accent: '#9620D8', accentDark: '#6e15a0', measure: WHITE, text: MUX_BLACK, textMuted: MUX_GRAY },
+            yellow: { bg: '#FFF8E0', accent: '#FED32F', accentDark: '#E99001', measure: WHITE, text: MUX_BLACK, textMuted: MUX_GRAY },
+            gray: { bg: '#f5f5f5', accent: '#8e8e8e', accentDark: '#383838', measure: WHITE, text: MUX_BLACK, textMuted: MUX_GRAY },
+        },
+    },
+    minimal: {
+        sansFont: 'system-ui, -apple-system, sans-serif',
+        monoFont: 'monospace',
+        palettes: {
+            pink: { bg: '#fafafa', accent: '#d4d4d4', accentDark: '#525252', measure: WHITE, text: '#0a0a0a', textMuted: '#737373' },
+            green: { bg: '#fafafa', accent: '#d4d4d4', accentDark: '#525252', measure: WHITE, text: '#0a0a0a', textMuted: '#737373' },
+            blue: { bg: '#fafafa', accent: '#d4d4d4', accentDark: '#525252', measure: WHITE, text: '#0a0a0a', textMuted: '#737373' },
+            lavender: { bg: '#fafafa', accent: '#d4d4d4', accentDark: '#525252', measure: WHITE, text: '#0a0a0a', textMuted: '#737373' },
+            purple: { bg: '#fafafa', accent: '#d4d4d4', accentDark: '#525252', measure: WHITE, text: '#0a0a0a', textMuted: '#737373' },
+            yellow: { bg: '#fafafa', accent: '#d4d4d4', accentDark: '#525252', measure: WHITE, text: '#0a0a0a', textMuted: '#737373' },
+            gray: { bg: '#fafafa', accent: '#d4d4d4', accentDark: '#525252', measure: WHITE, text: '#0a0a0a', textMuted: '#737373' },
+        },
+    },
+    cinematic: {
+        sansFont: 'Inter',
+        monoFont: 'Menlo, Monaco, monospace',
+        displayFont: 'Playfair Display',
+        dark: true,
+        fontFaces: [
+            { family: 'Inter', weight: 400, src: INTER(400) },
+            { family: 'Inter', weight: 700, src: INTER(700) },
+            { family: 'Inter', weight: 800, src: INTER(800) },
+            { family: 'Playfair Display', weight: 700, src: PLAYFAIR(700) },
+        ],
+        palettes: {
+            pink: cinePalette('#ff5fae', '#c93d84'),
+            green: cinePalette('#2fe6b0', '#17a085'),
+            blue: cinePalette('#5fd0ff', '#2a93d4'),
+            lavender: cinePalette('#b58cff', '#7d54d4'),
+            purple: cinePalette('#9b6cff', '#6e3fd0'),
+            yellow: cinePalette('#f0c987', '#c79a4f'),
+            gray: cinePalette('#9fb0d8', '#5a6b8f'),
+        },
+    },
+};
+export function getPalette(theme, color) {
+    return THEMES[theme].palettes[color];
+}
+export function getFonts(theme) {
+    const t = THEMES[theme];
+    return { sans: t.sansFont, mono: t.monoFont, display: t.displayFont ?? t.sansFont };
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

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

package/dist/tilted-showcase.d.ts

@@ -0,0 +1,29 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface TiltedShowcaseProps {
+    /** Used as the id prefix for every produced element. */
+    id: string;
+    /** Screenshot URL shown inside the frame (object-fit: cover). */
+    source: string;
+    /** Accent color slot — drives the frame's top border. */
+    color: ColorName;
+    theme?: ThemeName;
+    /** Center of the card in canvas px. */
+    x: number;
+    y: number;
+    /** Card size in px (chrome bar included). Default 720×480. */
+    width?: number;
+    height?: number;
+    /**
+     * Peak y-rotation in degrees; the card swings ±tilt (ping-pong) over
+     * its lifetime. Default 22. Pass 0 for a static straight-on card.
+     */
+    tilt?: number;
+    /** Push the card toward (+) / away from (−) the camera, px. Default 0. */
+    z?: number;
+    time: number;
+    duration: number;
+    layer: number;
+}
+export declare function tiltedShowcase(props: TiltedShowcaseProps): Element;
+//# sourceMappingURL=tilted-showcase.d.ts.map

package/dist/tilted-showcase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tilted-showcase.d.ts","sourceRoot":"","sources":["../src/tilted-showcase.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAExE,MAAM,WAAW,mBAAmB;IAClC,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,OAAO,CAgGlE"}

package/dist/tilted-showcase.js

@@ -0,0 +1,106 @@
+// TiltedShowcase — the promo-video signature shot: a screenshot (or UI
+// mock) inside a browser-chrome frame, tilted back in 3D and gently
+// swinging. Pair with a Source-level `camera: { perspective }` for
+// converging perspective; without one the tilt is affine.
+//
+// COMPONENT pattern: returns ONE `clip: true` group, so the §4.4.3
+// flattening rule projects the whole framed card as a unit — and it
+// expands to plain primitives only.
+import { assignLayers } from './layers.js';
+import { getPalette } from './theme.js';
+export function tiltedShowcase(props) {
+    const { id, source, color, x, y, time, duration, layer } = props;
+    const theme = props.theme ?? 'mux';
+    const palette = getPalette(theme, color);
+    const W = props.width ?? 720;
+    const H = props.height ?? 480;
+    const tilt = props.tilt ?? 22;
+    const CHROME = 44;
+    const children = [
+        {
+            id: `${id}-frame`,
+            type: 'shape',
+            shape: 'rectangle',
+            x: W / 2,
+            y: H / 2,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: W,
+            height: H,
+            fill_color: '#161B22',
+            border_radius: 14,
+        },
+        {
+            id: `${id}-chrome`,
+            type: 'shape',
+            shape: 'rectangle',
+            x: W / 2,
+            y: CHROME / 2,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: W,
+            height: CHROME,
+            fill_color: '#21262E',
+        },
+        { id: `${id}-d1`, type: 'shape', shape: 'ellipse', x: 26, y: CHROME / 2, x_anchor: '50%', y_anchor: '50%', width: 12, height: 12, fill_color: '#EF4444' },
+        { id: `${id}-d2`, type: 'shape', shape: 'ellipse', x: 48, y: CHROME / 2, x_anchor: '50%', y_anchor: '50%', width: 12, height: 12, fill_color: '#F5B50F' },
+        { id: `${id}-d3`, type: 'shape', shape: 'ellipse', x: 70, y: CHROME / 2, x_anchor: '50%', y_anchor: '50%', width: 12, height: 12, fill_color: '#22C55E' },
+        {
+            id: `${id}-accent`,
+            type: 'shape',
+            shape: 'rectangle',
+            x: W / 2,
+            y: CHROME + 1,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: W,
+            height: 2,
+            fill_color: palette.accent,
+        },
+        {
+            id: `${id}-shot`,
+            type: 'image',
+            source,
+            x: W / 2,
+            y: CHROME + (H - CHROME) / 2,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: W,
+            height: H - CHROME,
+            fit: 'cover',
+        },
+    ];
+    return {
+        id,
+        type: 'group',
+        layer,
+        time,
+        duration,
+        x,
+        y,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width: W,
+        height: H,
+        clip: true,
+        ...(props.z !== undefined ? { z: props.z } : {}),
+        ...(tilt !== 0
+            ? {
+                keyframe_animations: [{
+                        property: 'y_rotation',
+                        loop: 'ping-pong',
+                        keyframes: [
+                            { time: 0, value: -tilt },
+                            { time: Math.max(0.1, duration / 2), value: tilt, easing: 'ease-in-out' },
+                        ],
+                    }],
+            }
+            : {}),
+        animations: [
+            { type: 'fade-in', duration: 0.5 },
+            { type: 'fade-out', time: 'end', duration: 0.4 },
+        ],
+        elements: assignLayers(children),
+    };
+}
+//# sourceMappingURL=tilted-showcase.js.map

package/dist/tilted-showcase.js.map

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

package/dist/trend-pill.d.ts

@@ -0,0 +1,33 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface TrendPillProps {
+    /** Unique id prefix; pattern appends -border / -inner / -text. */
+    id: string;
+    /** Center x in canvas pixels. */
+    cx: number;
+    /** Center y in canvas pixels. */
+    cy: number;
+    /**
+     * Signed percentage. Positive renders as "+X.X% FROM LAST MONTH",
+     * negative as "-X.X% FROM LAST MONTH".
+     */
+    delta: number;
+    /** Color slot — determines border, bg, and text colors. */
+    color: ColorName;
+    /** Theme bundle. Default 'mux'. */
+    theme?: ThemeName;
+    /** Pill width in pixels. Default 460. */
+    width?: number;
+    /** Pill height in pixels. Default 60. */
+    height?: number;
+    /** Scene-local start time in seconds. */
+    time: number;
+    /** Duration in seconds. */
+    duration: number;
+    /** Starting layer index; pattern uses layerBase..layerBase+2. */
+    layerBase: number;
+}
+export declare function trendPill(props: TrendPillProps): Element[];
+/** Convenience — signed percentage change from previous → current. */
+export declare function trendPct(current: number, previous: number): number;
+//# sourceMappingURL=trend-pill.d.ts.map

package/dist/trend-pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trend-pill.d.ts","sourceRoot":"","sources":["../src/trend-pill.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,KAAK,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,EAAE,CA2E1D;AAED,sEAAsE;AACtE,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGlE"}

package/dist/trend-pill.js

@@ -0,0 +1,83 @@
+// TrendPill — small "+X.X% FROM LAST MONTH" pill with a colored border.
+//
+// Renders as three stacked elements: an outer rectangle in the accent
+// color, a slightly smaller inner rectangle in the body background, and
+// uppercase monospace text on top. Animates in with fade + slide-up.
+import { getFonts, getPalette } from './theme.js';
+export function trendPill(props) {
+    const { id, cx, cy, delta, color, time, duration, layerBase, } = props;
+    const theme = props.theme ?? 'mux';
+    const width = props.width ?? 460;
+    const height = props.height ?? 60;
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const sign = delta >= 0 ? '+' : '-';
+    const text = `${sign}${Math.abs(delta).toFixed(1)}% FROM LAST MONTH`;
+    const slide = [
+        { type: 'fade-in', duration: 0.4 },
+        { type: 'slide-up-in', duration: 0.6, easing: 'ease-out-cubic' },
+    ];
+    return [
+        {
+            id: `${id}-border`,
+            type: 'shape',
+            layer: layerBase,
+            time,
+            duration,
+            shape: 'rectangle',
+            x: cx,
+            y: cy,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width,
+            height,
+            fill_color: palette.accentDark,
+            border_radius: 12,
+            animations: slide,
+        },
+        {
+            id: `${id}-inner`,
+            type: 'shape',
+            layer: layerBase + 1,
+            time,
+            duration,
+            shape: 'rectangle',
+            x: cx,
+            y: cy,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: width - 6,
+            height: height - 6,
+            fill_color: palette.bg,
+            border_radius: 10,
+            animations: slide,
+        },
+        {
+            id: `${id}-text`,
+            type: 'text',
+            layer: layerBase + 2,
+            time,
+            duration,
+            text,
+            x: cx,
+            // Nudged 4 px so uppercase glyphs look optically centered (geometric
+            // centering of uppercase text appears slightly too high).
+            y: cy + 4,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            font_family: fonts.mono,
+            font_size: 26,
+            font_weight: '600',
+            letter_spacing: 1.5,
+            fill_color: palette.accentDark,
+            animations: slide,
+        },
+    ];
+}
+/** Convenience — signed percentage change from previous → current. */
+export function trendPct(current, previous) {
+    if (previous === 0)
+        return current === 0 ? 0 : 100;
+    return ((current - previous) / previous) * 100;
+}
+//# sourceMappingURL=trend-pill.js.map

package/dist/trend-pill.js.map

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

package/dist/zoom-rig.d.ts

@@ -0,0 +1,27 @@
+import type { Element } from '@clipkit/protocol';
+export interface ZoomShot {
+    /** The world point to centre, in canvas coords. */
+    focal: [number, number];
+    /** Zoom factor (1 = whole frame). */
+    scale: number;
+    /** Time (seconds, rig-local) this shot is reached. The first shot is the
+     *  starting pose and should usually be `at: 0`. */
+    at: number;
+}
+export interface ZoomRigProps {
+    /** Id prefix for the wrapper group. */
+    id: string;
+    /** The world content (absolute canvas coords). */
+    elements: Element[];
+    /** Framing keyframes. ≥1; reached in order, eased between. */
+    shots: ZoomShot[];
+    canvasWidth: number;
+    canvasHeight: number;
+    /** Ease between shots (cubic in-out). Default true; false = linear. */
+    ease?: boolean;
+    time: number;
+    duration: number;
+    track: number;
+}
+export declare function zoomRig(props: ZoomRigProps): Element;
+//# sourceMappingURL=zoom-rig.d.ts.map

package/dist/zoom-rig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-rig.d.ts","sourceRoot":"","sources":["../src/zoom-rig.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,WAAW,QAAQ;IACvB,mDAAmD;IACnD,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd;uDACmD;IACnD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,kDAAkD;IAClD,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,8DAA8D;IAC9D,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CA6BpD"}

package/dist/zoom-rig.js

@@ -0,0 +1,46 @@
+// zoomRig — a continuous "camera" move done with a group transform (the
+// motion-graphics "infinite zoom" rig, not the 2.5D scene camera). Wraps your
+// world content in one group and animates its scale + position so a sequence of
+// SHOTS frames different points of the scene: push in on A, pan to B, pull back
+// out — all as one continuous move, every transition a real camera gesture
+// rather than a cut.
+//
+// The math (verified against the compositor): for a full-frame group anchored at
+// its centre, a world point (fx, fy) lands at screen centre at zoom S when
+//   group.x = cx - S·(fx - cx),  group.y = cy - S·(fy - cy)
+// where (cx, cy) is the canvas centre. We solve that PER SHOT and emit it as
+// `keyframe_animations` for scale/x/y (the runtime interpolates + eases between
+// shots). Keyframed group transforms anchor at the group centre and correctly
+// carry nested children — including clipped groups (a `flowLine`) and `svg`
+// (a `morphShape`) — which expression-valued group x/y do NOT.
+//
+// Put it around content authored in ABSOLUTE canvas coordinates (the same space
+// every other pattern uses). Keep shot scales ≥ 1 (S < 1 reveals outside the
+// world). Pair with `motion_blur` on the Source to sell the fast push/pull.
+export function zoomRig(props) {
+    const { id, elements, shots, canvasWidth: W, canvasHeight: H, time, duration, track } = props;
+    const easing = (props.ease ?? true) ? 'ease-in-out' : undefined;
+    const cx = W / 2;
+    const cy = H / 2;
+    // Solve the framing transform at each shot; the runtime eases between them.
+    const key = (value) => shots.map((s, i) => ({ time: Math.max(0, s.at), value: value(s), ...(i > 0 && easing ? { easing } : {}) }));
+    const animations = [
+        { property: 'scale', keyframes: key((s) => s.scale) },
+        { property: 'x', keyframes: key((s) => cx - s.scale * (s.focal[0] - cx)) },
+        { property: 'y', keyframes: key((s) => cy - s.scale * (s.focal[1] - cy)) },
+    ];
+    return {
+        id,
+        type: 'group',
+        track,
+        time,
+        duration,
+        x: cx,
+        y: cy,
+        width: W,
+        height: H,
+        keyframe_animations: animations,
+        elements,
+    };
+}
+//# sourceMappingURL=zoom-rig.js.map

package/dist/zoom-rig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-rig.js","sourceRoot":"","sources":["../src/zoom-rig.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,8EAA8E;AAC9E,gFAAgF;AAChF,gFAAgF;AAChF,2EAA2E;AAC3E,qBAAqB;AACrB,EAAE;AACF,iFAAiF;AACjF,2EAA2E;AAC3E,4DAA4D;AAC5D,6EAA6E;AAC7E,gFAAgF;AAChF,8EAA8E;AAC9E,4EAA4E;AAC5E,+DAA+D;AAC/D,EAAE;AACF,gFAAgF;AAChF,6EAA6E;AAC7E,4EAA4E;AA8B5E,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC9F,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAChE,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IAEjB,4EAA4E;IAC5E,MAAM,GAAG,GAAG,CAAC,KAA8B,EAAE,EAAE,CAC7C,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAE9G,MAAM,UAAU,GAAG;QACjB,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;QACrD,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE;QAC1E,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE;KAC3E,CAAC;IAEF,OAAO;QACL,EAAE;QACF,IAAI,EAAE,OAAO;QACb,KAAK;QACL,IAAI;QACJ,QAAQ;QACR,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;QACL,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,mBAAmB,EAAE,UAAU;QAC/B,QAAQ;KACE,CAAC;AACf,CAAC"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@clipkit/patterns",
+  "version": "1.0.0",
+  "description": "Authoring-time pattern library for Clipkit — composable motion-graphics units that emit primitive Source elements.",
+  "license": "Apache-2.0",
+  "repository": { "type": "git", "url": "git+https://github.com/clipkit-video/clipkit.git", "directory": "packages/patterns" },
+  "homepage": "https://clipkit.dev",
+  "bugs": "https://github.com/clipkit-video/clipkit/issues",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@clipkit/music-analysis": "^1.0.0",
+    "@clipkit/protocol": "^1.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3"
+  }
+}