@efxlab/motion-canvas-responsive 4.0.0

package/lib/hooks/useRatioEffect.js

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { detectRatioClass, useResponsiveContext, } from '../context/ResponsiveContext';
+export function useRatioEffect(condition, callback, deps = []) {
+    const state = useResponsiveContext();
+    const aspectRatio = state.width / state.height;
+    const ratioClass = detectRatioClass(aspectRatio);
+    const conditions = Array.isArray(condition) ? condition : [condition];
+    const matches = conditions.some(cond => {
+        if (cond === state.ratio)
+            return true;
+        if (cond === ratioClass)
+            return true;
+        if (cond === 'portrait' && ratioClass === 'portrait')
+            return true;
+        if (cond === 'landscape' && ratioClass === 'landscape')
+            return true;
+        if (cond === 'square' && ratioClass === 'square')
+            return true;
+        if (cond === 'ultrawide' && ratioClass === 'ultrawide')
+            return true;
+        return false;
+    });
+    useEffect(() => {
+        if (matches) {
+            return callback();
+        }
+    }, [matches, ...deps]);
+}
+//# sourceMappingURL=useRatioEffect.js.map

package/lib/hooks/useRatioEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRatioEffect.js","sourceRoot":"","sources":["../../src/hooks/useRatioEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,8BAA8B,CAAC;AAWtC,MAAM,UAAU,cAAc,CAC5B,SAA4C,EAC5C,QAAmC,EACnC,OAAc,EAAE;IAEhB,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC/C,MAAM,UAAU,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAEjD,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEtE,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;QACrC,IAAI,IAAI,KAAK,KAAK,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QACtC,IAAI,IAAI,KAAK,UAAU;YAAE,OAAO,IAAI,CAAC;QACrC,IAAI,IAAI,KAAK,UAAU,IAAI,UAAU,KAAK,UAAU;YAAE,OAAO,IAAI,CAAC;QAClE,IAAI,IAAI,KAAK,WAAW,IAAI,UAAU,KAAK,WAAW;YAAE,OAAO,IAAI,CAAC;QACpE,IAAI,IAAI,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QAC9D,IAAI,IAAI,KAAK,WAAW,IAAI,UAAU,KAAK,WAAW;YAAE,OAAO,IAAI,CAAC;QACpE,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,QAAQ,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;AACzB,CAAC"}

package/lib/hooks/useRatioElement.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { RatioClass, RatioId } from '../types';
+type RatioCondition = RatioId | RatioClass | 'portrait' | 'landscape' | 'square' | 'ultrawide';
+export interface UseRatioElementOptions {
+    only?: RatioCondition[];
+    except?: RatioCondition[];
+    element: () => React.ReactElement | null;
+}
+export declare function useRatioElement(options: UseRatioElementOptions): React.ReactElement | null;
+export {};
+//# sourceMappingURL=useRatioElement.d.ts.map

package/lib/hooks/useRatioElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRatioElement.d.ts","sourceRoot":"","sources":["../../src/hooks/useRatioElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAKrC,OAAO,KAAK,EAAC,UAAU,EAAE,OAAO,EAAC,MAAM,UAAU,CAAC;AAElD,KAAK,cAAc,GACf,OAAO,GACP,UAAU,GACV,UAAU,GACV,WAAW,GACX,QAAQ,GACR,WAAW,CAAC;AAEhB,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,OAAO,EAAE,MAAM,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CAC1C;AAED,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,KAAK,CAAC,YAAY,GAAG,IAAI,CAqC3B"}

package/lib/hooks/useRatioElement.js

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { detectRatioClass, useResponsiveContext, } from '../context/ResponsiveContext';
+export function useRatioElement(options) {
+    const state = useResponsiveContext();
+    const aspectRatio = state.width / state.height;
+    const ratioClass = detectRatioClass(aspectRatio);
+    return useMemo(() => {
+        const conditions = options.only ?? [];
+        const exceptions = options.except ?? [];
+        const matchesConditions = conditions.length === 0 ||
+            conditions.some(cond => {
+                if (cond === state.ratio)
+                    return true;
+                if (cond === ratioClass)
+                    return true;
+                if (cond === 'portrait' && ratioClass === 'portrait')
+                    return true;
+                if (cond === 'landscape' && ratioClass === 'landscape')
+                    return true;
+                if (cond === 'square' && ratioClass === 'square')
+                    return true;
+                if (cond === 'ultrawide' && ratioClass === 'ultrawide')
+                    return true;
+                return false;
+            });
+        const matchesExceptions = exceptions.some(cond => {
+            if (cond === state.ratio)
+                return true;
+            if (cond === ratioClass)
+                return true;
+            if (cond === 'portrait' && ratioClass === 'portrait')
+                return true;
+            if (cond === 'landscape' && ratioClass === 'landscape')
+                return true;
+            if (cond === 'square' && ratioClass === 'square')
+                return true;
+            if (cond === 'ultrawide' && ratioClass === 'ultrawide')
+                return true;
+            return false;
+        });
+        if (matchesConditions && !matchesExceptions) {
+            return options.element();
+        }
+        return null;
+    }, [state.ratio, ratioClass, options]);
+}
+//# sourceMappingURL=useRatioElement.js.map

package/lib/hooks/useRatioElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRatioElement.js","sourceRoot":"","sources":["../../src/hooks/useRatioElement.ts"],"names":[],"mappings":"AAAA,OAAc,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,8BAA8B,CAAC;AAiBtC,MAAM,UAAU,eAAe,CAC7B,OAA+B;IAE/B,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC/C,MAAM,UAAU,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAEjD,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC;QACtC,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;QAExC,MAAM,iBAAiB,GACrB,UAAU,CAAC,MAAM,KAAK,CAAC;YACvB,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBACrB,IAAI,IAAI,KAAK,KAAK,CAAC,KAAK;oBAAE,OAAO,IAAI,CAAC;gBACtC,IAAI,IAAI,KAAK,UAAU;oBAAE,OAAO,IAAI,CAAC;gBACrC,IAAI,IAAI,KAAK,UAAU,IAAI,UAAU,KAAK,UAAU;oBAAE,OAAO,IAAI,CAAC;gBAClE,IAAI,IAAI,KAAK,WAAW,IAAI,UAAU,KAAK,WAAW;oBAAE,OAAO,IAAI,CAAC;gBACpE,IAAI,IAAI,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ;oBAAE,OAAO,IAAI,CAAC;gBAC9D,IAAI,IAAI,KAAK,WAAW,IAAI,UAAU,KAAK,WAAW;oBAAE,OAAO,IAAI,CAAC;gBACpE,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;QAEL,MAAM,iBAAiB,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAC/C,IAAI,IAAI,KAAK,KAAK,CAAC,KAAK;gBAAE,OAAO,IAAI,CAAC;YACtC,IAAI,IAAI,KAAK,UAAU;gBAAE,OAAO,IAAI,CAAC;YACrC,IAAI,IAAI,KAAK,UAAU,IAAI,UAAU,KAAK,UAAU;gBAAE,OAAO,IAAI,CAAC;YAClE,IAAI,IAAI,KAAK,WAAW,IAAI,UAAU,KAAK,WAAW;gBAAE,OAAO,IAAI,CAAC;YACpE,IAAI,IAAI,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ;gBAAE,OAAO,IAAI,CAAC;YAC9D,IAAI,IAAI,KAAK,WAAW,IAAI,UAAU,KAAK,WAAW;gBAAE,OAAO,IAAI,CAAC;YACpE,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;QAEH,IAAI,iBAAiB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5C,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC3B,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;AACzC,CAAC"}

package/lib/hooks/useResponsive.d.ts

@@ -0,0 +1,3 @@
+import type { ResponsiveConfig } from '../types';
+export declare function useResponsive<T>(config: ResponsiveConfig<T>): T;
+//# sourceMappingURL=useResponsive.d.ts.map

package/lib/hooks/useResponsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsive.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsive.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAE/C,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,CA6B/D"}

package/lib/hooks/useResponsive.js

@@ -0,0 +1,29 @@
+import { detectRatioClass, useResponsiveContext, } from '../context/ResponsiveContext';
+export function useResponsive(config) {
+    const state = useResponsiveContext();
+    const aspectRatio = state.width / state.height;
+    const ratioClass = detectRatioClass(aspectRatio);
+    let result = { ...config.base };
+    const classOverrides = [];
+    if (config.portrait && ratioClass === 'portrait') {
+        classOverrides.push(config.portrait);
+    }
+    else if (config.landscape && ratioClass === 'landscape') {
+        classOverrides.push(config.landscape);
+    }
+    else if (config.square && ratioClass === 'square') {
+        classOverrides.push(config.square);
+    }
+    else if (config.ultrawide && ratioClass === 'ultrawide') {
+        classOverrides.push(config.ultrawide);
+    }
+    const specificOverride = config[state.ratio];
+    if (specificOverride) {
+        classOverrides.push(specificOverride);
+    }
+    for (const override of classOverrides) {
+        result = { ...result, ...override };
+    }
+    return result;
+}
+//# sourceMappingURL=useResponsive.js.map

package/lib/hooks/useResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsive.js","sourceRoot":"","sources":["../../src/hooks/useResponsive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,8BAA8B,CAAC;AAGtC,MAAM,UAAU,aAAa,CAAI,MAA2B;IAC1D,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC/C,MAAM,UAAU,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAEjD,IAAI,MAAM,GAAQ,EAAC,GAAG,MAAM,CAAC,IAAI,EAAC,CAAC;IAEnC,MAAM,cAAc,GAAiB,EAAE,CAAC;IAExC,IAAI,MAAM,CAAC,QAAQ,IAAI,UAAU,KAAK,UAAU,EAAE,CAAC;QACjD,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;SAAM,IAAI,MAAM,CAAC,SAAS,IAAI,UAAU,KAAK,WAAW,EAAE,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;SAAM,IAAI,MAAM,CAAC,MAAM,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;QACpD,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;SAAM,IAAI,MAAM,CAAC,SAAS,IAAI,UAAU,KAAK,WAAW,EAAE,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC7C,IAAI,gBAAgB,EAAE,CAAC;QACrB,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxC,CAAC;IAED,KAAK,MAAM,QAAQ,IAAI,cAAc,EAAE,CAAC;QACtC,MAAM,GAAG,EAAC,GAAG,MAAM,EAAE,GAAG,QAAQ,EAAC,CAAC;IACpC,CAAC;IAED,OAAO,MAAW,CAAC;AACrB,CAAC"}

package/lib/hooks/useResponsiveAnimation.d.ts

@@ -0,0 +1,3 @@
+import type { AnimationConfig, ResponsiveConfig } from '../types';
+export declare function useResponsiveAnimation(config: ResponsiveConfig<AnimationConfig>): AnimationConfig;
+//# sourceMappingURL=useResponsiveAnimation.d.ts.map

package/lib/hooks/useResponsiveAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsiveAnimation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,eAAe,EAAE,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAGhE,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,gBAAgB,CAAC,eAAe,CAAC,GACxC,eAAe,CAEjB"}

package/lib/hooks/useResponsiveAnimation.js

@@ -0,0 +1,5 @@
+import { useResponsive } from './useResponsive';
+export function useResponsiveAnimation(config) {
+    return useResponsive(config);
+}
+//# sourceMappingURL=useResponsiveAnimation.js.map

package/lib/hooks/useResponsiveAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveAnimation.js","sourceRoot":"","sources":["../../src/hooks/useResponsiveAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,MAAM,UAAU,sBAAsB,CACpC,MAAyC;IAEzC,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;AAC/B,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,20 @@
+export * from './components';
+export * from './context/ResponsiveContext';
+export * from './helpers';
+export * from './hooks/useRatio';
+export * from './hooks/useRatioEffect';
+export * from './hooks/useRatioElement';
+export * from './hooks/useResponsive';
+export * from './hooks/useResponsiveAnimation';
+export * from './layout/ResponsiveLayout';
+export * from './scene';
+export * from './types';
+declare module '@efxlab/motion-canvas-core' {
+    interface Scene {
+        setResponsiveSetup(callback: (size: {
+            x: number;
+            y: number;
+        }) => void): void;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAExB,OAAO,QAAQ,4BAA4B,CAAC;IAC1C,UAAU,KAAK;QACb,kBAAkB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAC,KAAK,IAAI,GAAG,IAAI,CAAC;KAC5E;CACF"}

package/lib/index.js

@@ -0,0 +1,12 @@
+export * from './components';
+export * from './context/ResponsiveContext';
+export * from './helpers';
+export * from './hooks/useRatio';
+export * from './hooks/useRatioEffect';
+export * from './hooks/useRatioElement';
+export * from './hooks/useResponsive';
+export * from './hooks/useResponsiveAnimation';
+export * from './layout/ResponsiveLayout';
+export * from './scene';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/lib/layout/ResponsiveLayout.d.ts

@@ -0,0 +1,39 @@
+import type { RatioClass, RatioId } from '../types';
+export interface ResponsiveLayout {
+    ratio: RatioId;
+    ratioClass: RatioClass;
+    width: number;
+    height: number;
+    w: number;
+    h: number;
+    hw: number;
+    hh: number;
+    ar: number;
+    isPortrait: boolean;
+    isLandscape: boolean;
+    isSquare: boolean;
+    isUltrawide: boolean;
+    px: (frac: number) => number;
+    py: (frac: number) => number;
+    sz: (base: number) => number;
+    sx: (frac: number) => number;
+    sy: (frac: number) => number;
+    pad: (frac: number) => number;
+    topPad: (basePadding: number) => number;
+    bottomPad: (basePadding: number) => number;
+    leftPad: (basePadding: number) => number;
+    rightPad: (basePadding: number) => number;
+}
+export declare function createResponsiveLayout(width: number, height: number, ratio?: RatioId): ResponsiveLayout;
+export declare function useRatio(): ResponsiveLayout;
+/**
+ * Create a responsive layout from width and height values.
+ * This is a standalone version that doesn't require the responsive context,
+ * useful for creating layouts from raw values.
+ *
+ * @param width - The width of the view
+ * @param height - The height of the view
+ * @param ratio - Optional ratio ID (default: '16x9')
+ */
+export declare function viewLayout(width: number, height: number, ratio?: RatioId): ResponsiveLayout;
+//# sourceMappingURL=ResponsiveLayout.d.ts.map

package/lib/layout/ResponsiveLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayout.d.ts","sourceRoot":"","sources":["../../src/layout/ResponsiveLayout.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,UAAU,EAAE,OAAO,EAAC,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7B,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7B,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7B,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7B,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9B,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,OAAgB,GACtB,gBAAgB,CA8BlB;AAED,wBAAgB,QAAQ,IAAI,gBAAgB,CAG3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,OAAgB,GACtB,gBAAgB,CAElB"}

package/lib/layout/ResponsiveLayout.js

@@ -0,0 +1,48 @@
+import { detectRatioClass, useResponsiveContext, } from '../context/ResponsiveContext';
+export function createResponsiveLayout(width, height, ratio = '16x9') {
+    const aspectRatio = width / height;
+    const ratioClass = detectRatioClass(aspectRatio);
+    const scale = Math.min(width, height) / 1080;
+    return {
+        ratio,
+        ratioClass,
+        width,
+        height,
+        w: width,
+        h: height,
+        hw: width / 2,
+        hh: height / 2,
+        ar: aspectRatio,
+        isPortrait: ratioClass === 'portrait',
+        isLandscape: ratioClass === 'landscape',
+        isSquare: ratioClass === 'square',
+        isUltrawide: ratioClass === 'ultrawide',
+        px: (frac) => frac * width,
+        py: (frac) => frac * height,
+        sz: (base) => base * scale,
+        sx: (frac) => frac * width,
+        sy: (frac) => frac * height,
+        pad: (frac) => frac * Math.min(width, height),
+        topPad: (basePadding) => -(height / 2) + basePadding * scale,
+        bottomPad: (basePadding) => height / 2 - basePadding * scale,
+        leftPad: (basePadding) => -(width / 2) + basePadding * scale,
+        rightPad: (basePadding) => width / 2 - basePadding * scale,
+    };
+}
+export function useRatio() {
+    const state = useResponsiveContext();
+    return createResponsiveLayout(state.width, state.height, state.ratio);
+}
+/**
+ * Create a responsive layout from width and height values.
+ * This is a standalone version that doesn't require the responsive context,
+ * useful for creating layouts from raw values.
+ *
+ * @param width - The width of the view
+ * @param height - The height of the view
+ * @param ratio - Optional ratio ID (default: '16x9')
+ */
+export function viewLayout(width, height, ratio = '16x9') {
+    return createResponsiveLayout(width, height, ratio);
+}
+//# sourceMappingURL=ResponsiveLayout.js.map

package/lib/layout/ResponsiveLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayout.js","sourceRoot":"","sources":["../../src/layout/ResponsiveLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,8BAA8B,CAAC;AA6BtC,MAAM,UAAU,sBAAsB,CACpC,KAAa,EACb,MAAc,EACd,QAAiB,MAAM;IAEvB,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;IACnC,MAAM,UAAU,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAE7C,OAAO;QACL,KAAK;QACL,UAAU;QACV,KAAK;QACL,MAAM;QACN,CAAC,EAAE,KAAK;QACR,CAAC,EAAE,MAAM;QACT,EAAE,EAAE,KAAK,GAAG,CAAC;QACb,EAAE,EAAE,MAAM,GAAG,CAAC;QACd,EAAE,EAAE,WAAW;QACf,UAAU,EAAE,UAAU,KAAK,UAAU;QACrC,WAAW,EAAE,UAAU,KAAK,WAAW;QACvC,QAAQ,EAAE,UAAU,KAAK,QAAQ;QACjC,WAAW,EAAE,UAAU,KAAK,WAAW;QACvC,EAAE,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,GAAG,KAAK;QAClC,EAAE,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,GAAG,MAAM;QACnC,EAAE,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,GAAG,KAAK;QAClC,EAAE,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,GAAG,KAAK;QAClC,EAAE,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,GAAG,MAAM;QACnC,GAAG,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC;QACrD,MAAM,EAAE,CAAC,WAAmB,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,KAAK;QACpE,SAAS,EAAE,CAAC,WAAmB,EAAE,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,GAAG,KAAK;QACpE,OAAO,EAAE,CAAC,WAAmB,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,KAAK;QACpE,QAAQ,EAAE,CAAC,WAAmB,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,GAAG,KAAK;KACnE,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;IACrC,OAAO,sBAAsB,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACxE,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,UAAU,CACxB,KAAa,EACb,MAAc,EACd,QAAiB,MAAM;IAEvB,OAAO,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACtD,CAAC"}

package/lib/layout/ResponsiveLayout.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ResponsiveLayout.test.d.ts.map

package/lib/layout/ResponsiveLayout.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayout.test.d.ts","sourceRoot":"","sources":["../../src/layout/ResponsiveLayout.test.ts"],"names":[],"mappings":""}

package/lib/layout/ResponsiveLayout.test.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var vitest_1 = require("vitest");
+var ResponsiveLayout_1 = require("../layout/ResponsiveLayout");
+(0, vitest_1.describe)('ResponsiveLayout', function () {
+    (0, vitest_1.describe)('createResponsiveLayout', function () {
+        (0, vitest_1.it)('should create layout for 16:9 landscape', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(1920, 1080, '16x9');
+            (0, vitest_1.expect)(layout.ratio).toBe('16x9');
+            (0, vitest_1.expect)(layout.ratioClass).toBe('landscape');
+            (0, vitest_1.expect)(layout.width).toBe(1920);
+            (0, vitest_1.expect)(layout.height).toBe(1080);
+            (0, vitest_1.expect)(layout.ar).toBeCloseTo(1.778, 2);
+            (0, vitest_1.expect)(layout.isLandscape).toBe(true);
+            (0, vitest_1.expect)(layout.isPortrait).toBe(false);
+        });
+        (0, vitest_1.it)('should create layout for 9:16 portrait', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(1080, 1920, '9x16');
+            (0, vitest_1.expect)(layout.ratio).toBe('9x16');
+            (0, vitest_1.expect)(layout.ratioClass).toBe('portrait');
+            (0, vitest_1.expect)(layout.isPortrait).toBe(true);
+            (0, vitest_1.expect)(layout.isLandscape).toBe(false);
+        });
+        (0, vitest_1.it)('should create layout for 1:1 square', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(1080, 1080, '1x1');
+            (0, vitest_1.expect)(layout.ratioClass).toBe('square');
+            (0, vitest_1.expect)(layout.isSquare).toBe(true);
+        });
+        (0, vitest_1.it)('should create layout for 21:9 ultrawide', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(2520, 1080, '21x9');
+            (0, vitest_1.expect)(layout.ratioClass).toBe('ultrawide');
+            (0, vitest_1.expect)(layout.isUltrawide).toBe(true);
+        });
+        (0, vitest_1.it)('should calculate px correctly', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(1920, 1080, '16x9');
+            (0, vitest_1.expect)(layout.px(0)).toBe(0);
+            (0, vitest_1.expect)(layout.px(-0.5)).toBe(-960);
+            (0, vitest_1.expect)(layout.px(0.5)).toBe(960);
+        });
+        (0, vitest_1.it)('should calculate py correctly', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(1920, 1080, '16x9');
+            (0, vitest_1.expect)(layout.py(0)).toBe(0);
+            (0, vitest_1.expect)(layout.py(-0.5)).toBe(-540);
+            (0, vitest_1.expect)(layout.py(0.5)).toBe(540);
+        });
+        (0, vitest_1.it)('should calculate sz correctly', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(1920, 1080, '16x9');
+            (0, vitest_1.expect)(layout.sz(1080)).toBe(1080); // base 1080 at 1080 min dimension
+            (0, vitest_1.expect)(layout.sz(64)).toBeCloseTo(64);
+        });
+        (0, vitest_1.it)('should calculate half dimensions', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(1920, 1080, '16x9');
+            (0, vitest_1.expect)(layout.hw).toBe(960);
+            (0, vitest_1.expect)(layout.hh).toBe(540);
+        });
+        (0, vitest_1.it)('should calculate padding correctly', function () {
+            var layout = (0, ResponsiveLayout_1.createResponsiveLayout)(1920, 1080, '16x9');
+            // topPad: -h/2 + sz(padding)
+            // -540 + (100 * scale) where scale = 1080/1080 = 1
+            (0, vitest_1.expect)(layout.topPad(100)).toBe(-440);
+            // bottomPad: h/2 - sz(padding)
+            (0, vitest_1.expect)(layout.bottomPad(100)).toBe(440);
+        });
+    });
+});

package/lib/scene/index.d.ts

@@ -0,0 +1,3 @@
+export * from './integration';
+export * from './makeResponsiveScene';
+//# sourceMappingURL=index.d.ts.map

package/lib/scene/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/scene/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC"}

package/lib/scene/index.js

@@ -0,0 +1,3 @@
+export * from './integration';
+export * from './makeResponsiveScene';
+//# sourceMappingURL=index.js.map

package/lib/scene/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/scene/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC"}

package/lib/scene/integration.d.ts

@@ -0,0 +1,7 @@
+import type { Vector2 } from '@efxlab/motion-canvas-core';
+import type { RatioId } from '../types';
+export interface ResponsiveSetupOptions {
+    ratio?: RatioId;
+}
+export declare function createResponsiveSetup(options?: ResponsiveSetupOptions): (size: Vector2) => void;
+//# sourceMappingURL=integration.d.ts.map

package/lib/scene/integration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration.d.ts","sourceRoot":"","sources":["../../src/scene/integration.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAC;AAExD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,sBAA2B,IAChE,MAAM,OAAO,UAGtB"}

package/lib/scene/integration.js

@@ -0,0 +1,7 @@
+import { initResponsiveFromSize } from '../context/ResponsiveContext';
+export function createResponsiveSetup(options = {}) {
+    return (size) => {
+        initResponsiveFromSize(size, options.ratio ?? '16x9');
+    };
+}
+//# sourceMappingURL=integration.js.map

package/lib/scene/integration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration.js","sourceRoot":"","sources":["../../src/scene/integration.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,sBAAsB,EAAC,MAAM,8BAA8B,CAAC;AAOpE,MAAM,UAAU,qBAAqB,CAAC,UAAkC,EAAE;IACxE,OAAO,CAAC,IAAa,EAAE,EAAE;QACvB,sBAAsB,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC;IACxD,CAAC,CAAC;AACJ,CAAC"}

package/lib/scene/makeResponsiveScene.d.ts

@@ -0,0 +1,19 @@
+import type { Scene2D } from '@efxlab/motion-canvas-2d';
+import type { ThreadGenerator, ThreadGeneratorFactory } from '@efxlab/motion-canvas-core';
+type SceneFactory = () => ThreadGenerator;
+export interface ResponsiveSceneConfig {
+    base: SceneFactory;
+    portrait?: SceneFactory;
+    landscape?: SceneFactory;
+    square?: SceneFactory;
+    ultrawide?: SceneFactory;
+    '16x9'?: SceneFactory;
+    '9x16'?: SceneFactory;
+    '4x3'?: SceneFactory;
+    '1x1'?: SceneFactory;
+    fullwindow?: SceneFactory;
+    [key: string]: SceneFactory | undefined;
+}
+export declare function makeResponsiveScene(config: ResponsiveSceneConfig): ThreadGeneratorFactory<Scene2D>;
+export {};
+//# sourceMappingURL=makeResponsiveScene.d.ts.map

package/lib/scene/makeResponsiveScene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeResponsiveScene.d.ts","sourceRoot":"","sources":["../../src/scene/makeResponsiveScene.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACvB,MAAM,4BAA4B,CAAC;AAGpC,KAAK,YAAY,GAAG,MAAM,eAAe,CAAC;AAE1C,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,YAAY,CAAC;IAEzB,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,qBAAqB,GAC5B,sBAAsB,CAAC,OAAO,CAAC,CAmBjC"}

package/lib/scene/makeResponsiveScene.js

@@ -0,0 +1,19 @@
+import { useResponsiveContext } from '../context/ResponsiveContext';
+export function makeResponsiveScene(config) {
+    return function* () {
+        // Note: _view parameter is required by ThreadGeneratorFactory but scene is selected via config
+        const state = useResponsiveContext();
+        const specificFactory = config[state.ratio];
+        if (specificFactory) {
+            yield* specificFactory();
+            return;
+        }
+        const classFactory = config[state.ratioClass];
+        if (classFactory) {
+            yield* classFactory();
+            return;
+        }
+        yield* config.base();
+    };
+}
+//# sourceMappingURL=makeResponsiveScene.js.map

package/lib/scene/makeResponsiveScene.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeResponsiveScene.js","sourceRoot":"","sources":["../../src/scene/makeResponsiveScene.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAsBlE,MAAM,UAAU,mBAAmB,CACjC,MAA6B;IAE7B,OAAO,QAAQ,CAAC;QACd,+FAA+F;QAC/F,MAAM,KAAK,GAAG,oBAAoB,EAAE,CAAC;QAErC,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,eAAe,EAAE,CAAC;YACpB,KAAK,CAAC,CAAC,eAAe,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC9C,IAAI,YAAY,EAAE,CAAC;YACjB,KAAK,CAAC,CAAC,YAAY,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;AACJ,CAAC"}

package/lib/types.d.ts

@@ -0,0 +1,35 @@
+export type RatioId = '16x9' | '9x16' | '4x3' | '1x1' | 'fullwindow' | string;
+export type RatioClass = 'landscape' | 'portrait' | 'square' | 'ultrawide';
+export interface ResponsiveRatioConfig {
+    aspect: string;
+    ratioClass?: RatioClass;
+}
+export interface ResponsiveRatiosConfig {
+    [ratioId: string]: ResponsiveRatioConfig;
+}
+export interface ResponsiveConfig<T> {
+    base: T;
+    portrait?: Partial<T>;
+    landscape?: Partial<T>;
+    square?: Partial<T>;
+    ultrawide?: Partial<T>;
+    '16x9'?: Partial<T>;
+    '9x16'?: Partial<T>;
+    '4x3'?: Partial<T>;
+    '1x1'?: Partial<T>;
+    fullwindow?: Partial<T>;
+    [key: string]: Partial<T> | undefined;
+}
+export interface ResponsiveState {
+    ratio: RatioId;
+    ratioClass: RatioClass;
+    width: number;
+    height: number;
+}
+export interface AnimationConfig {
+    duration?: number;
+    easing?: any;
+    delay?: number;
+    [key: string]: any;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,YAAY,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,CAAC,OAAO,EAAE,MAAM,GAAG,qBAAqB,CAAC;CAC1C;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,IAAI,EAAE,CAAC,CAAC;IACR,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEvB,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEpB,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEpB,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEnB,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;CACvC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB"}

package/lib/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@efxlab/motion-canvas-responsive",
+  "version": "4.0.0",
+  "description": "Ratio-independent animation system for Motion Canvas",
+  "author": "motion-canvas",
+  "homepage": "https://motioncanvas.io/",
+  "bugs": "https://github.com/motion-canvas/motion-canvas/issues",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "ts-patch install -s && tsc -w",
+    "build": "ts-patch install -s && tsc",
+    "bundle": "rollup -c rollup.config.mjs",
+    "test": "vitest"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/electroheadfx/efx-motion-canvas.git"
+  },
+  "files": [
+    "lib",
+    "src",
+    "tsconfig.project.json"
+  ],
+  "devDependencies": {
+    "@efxlab/motion-canvas-internal": "workspace:*",
+    "@preact/signals": "^1.2.1",
+    "@types/node": "^25.2.3",
+    "jsdom": "^22.1.0",
+    "preact": "10.19.3",
+    "ts-patch": "^3.3.0",
+    "vitest": "^0.34.6"
+  },
+  "dependencies": {
+    "@efxlab/motion-canvas-core": "workspace:*"
+  }
+}

package/src/components/ParticleGroup.tsx

@@ -0,0 +1,36 @@
+import {cloneElement, isValidElement, ReactElement} from 'react';
+import {useRatio} from '../layout/ResponsiveLayout';
+
+export interface ParticleGroupProps {
+  count: number;
+  compositeOperation?: GlobalCompositeOperation;
+  opacity?: number;
+  children: (index: number) => ReactElement;
+}
+
+export function ParticleGroup({
+  count,
+  compositeOperation = 'source-over',
+  opacity = 1,
+  children,
+}: ParticleGroupProps): ReactElement[] {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const _layout = useRatio();
+  const elements: ReactElement[] = [];
+
+  for (let i = 0; i < count; i++) {
+    const child = children(i);
+    if (isValidElement(child)) {
+      const childOpacity = (child.props as any).opacity ?? 1;
+      elements.push(
+        cloneElement(child, {
+          key: i,
+          compositeOperation,
+          opacity: childOpacity * opacity,
+        } as any),
+      );
+    }
+  }
+
+  return elements;
+}

package/src/components/RatioLayer.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  useRatioElement,
+  UseRatioElementOptions,
+} from '../hooks/useRatioElement';
+
+export interface RatioLayerProps extends UseRatioElementOptions {
+  children?: React.ReactElement | null;
+}
+
+export function RatioLayer({
+  children,
+  ...options
+}: RatioLayerProps): React.ReactElement | null {
+  return useRatioElement({
+    ...options,
+    element: () => children ?? null,
+  });
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ParticleGroup';
+export * from './RatioLayer';