react-native-skia-box-shadow 0.1.0 → 0.2.0

package/README.md

@@ -12,6 +12,7 @@ Powered by [`@shopify/react-native-skia`](https://shopify.github.io/react-native
 - **Colors & Gradients** — solid colors or Skia shader fills (linear, radial, sweep)
 - **Shapes** — rect, roundedRect, circle, or arbitrary SVG path
 - **Multi-layer** — stack multiple shadow layers, just like in Figma
+- **Animated** — 60fps animations via Reanimated SharedValues (optional)
 - **Cross-platform** — iOS & Android
 
 ## Installation
@@ -21,6 +22,8 @@ npm install react-native-skia-box-shadow @shopify/react-native-skia
 ```
 
 > **Peer dependency**: `@shopify/react-native-skia` >= 1.0.0
+>
+> For animated shadows: `react-native-reanimated` >= 3.0.0 (optional)
 
 ## Usage
 
@@ -43,6 +46,49 @@ import { Shadow } from 'react-native-skia-box-shadow';
 </Shadow>
 ```
 
+### Animated shadow
+
+```tsx
+import { AnimatedShadow } from 'react-native-skia-box-shadow';
+import { useSharedValue, withSpring } from 'react-native-reanimated';
+
+const MyCard = () => {
+  const blur = useSharedValue(16);
+  const offsetY = useSharedValue(4);
+  const spread = useSharedValue(0);
+
+  const onPressIn = () => {
+    blur.value = withSpring(32);
+    offsetY.value = withSpring(12);
+    spread.value = withSpring(4);
+  };
+
+  const onPressOut = () => {
+    blur.value = withSpring(16);
+    offsetY.value = withSpring(4);
+    spread.value = withSpring(0);
+  };
+
+  return (
+    <AnimatedShadow
+      shadows={{
+        fillStyle: { kind: 'color', color: 'rgba(0,0,0,0.15)' },
+        blurRadius: blur,
+        offsetY,
+        spread,
+      }}
+      shape={{ kind: 'roundedRect', radius: 16 }}
+    >
+      <Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
+        <View style={styles.card}>
+          <Text>Press me</Text>
+        </View>
+      </Pressable>
+    </AnimatedShadow>
+  );
+};
+```
+
 ### Multiple shadow layers
 
 ```tsx
@@ -142,6 +188,16 @@ The component renders a Skia `<Canvas>` behind your children. Each shadow layer
 
 This is a React Native port of the Compose Multiplatform library [`vasyl-stetsiuk/shadow`](https://github.com/vasyl-stetsiuk/shadow).
 
+## `<AnimatedShadow>`
+
+Same API as `<Shadow>`, but numeric props (`blurRadius`, `spread`, `offsetX`, `offsetY`) accept Reanimated `SharedValue<number>` for 60fps UI-thread animations.
+
+| Additional Prop      | Type     | Default | Description                                    |
+| -------------------- | -------- | ------- | ---------------------------------------------- |
+| `maxCanvasPadding`   | `number` | `120`   | Max extent for animated values (prevents clip) |
+
+Since animated values change at runtime, the canvas padding can't be auto-calculated. Set `maxCanvasPadding` to the largest extent your shadow can reach (blur × 3 + spread + offset).
+
 ## License
 
 MIT © [Vasyl Stetsiuk](https://stetsiuk.dev)

package/lib/commonjs/AnimatedShadow.js

@@ -0,0 +1,261 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AnimatedShadow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// ── Defaults ────────────────────────────────────────────────────
+const DEFAULTS = {
+  fillStyle: {
+    kind: 'color',
+    color: 'rgba(0,0,0,0.10)'
+  },
+  blurRadius: 24,
+  spread: 4,
+  offsetX: 0,
+  offsetY: 0
+};
+const pixelRatio = _reactNative.PixelRatio.get();
+
+/**
+ * Read a value that may be static or a SharedValue.
+ * Called inside useDerivedValue / on UI thread.
+ */
+const readValue = (v, fallback) => {
+  'worklet';
+
+  if (typeof v === 'number') return v;
+  if (v === undefined || v === null) return fallback;
+  return v.value;
+};
+
+// ── Animated single shadow layer ────────────────────────────────
+const AnimatedShadowLayer = ({
+  params,
+  width,
+  height,
+  defaultShape
+}) => {
+  const {
+    fillStyle = DEFAULTS.fillStyle,
+    blurRadius = DEFAULTS.blurRadius,
+    spread = DEFAULTS.spread,
+    offsetX = DEFAULTS.offsetX,
+    offsetY = DEFAULTS.offsetY,
+    shape: shapeOverride
+  } = params;
+  const shape = shapeOverride ?? defaultShape;
+
+  // ── Paint (static — color changes don't need 60fps) ───────────
+  const paint = (0, _react.useMemo)(() => {
+    const p = _reactNativeSkia.Skia.Paint();
+    if (fillStyle.kind === 'color') {
+      p.setColor(_reactNativeSkia.Skia.Color(fillStyle.color));
+    } else {
+      p.setShader(fillStyle.factory(width, height));
+    }
+    return p;
+  }, [fillStyle, width, height]);
+
+  // ── Animated blur (derived on UI thread) ──────────────────────
+  const derivedBlur = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    return readValue(blurRadius, DEFAULTS.blurRadius) / pixelRatio;
+  }, [blurRadius]);
+
+  // ── Animated offset transform ─────────────────────────────────
+  const offsetTransform = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    return [{
+      translateX: readValue(offsetX, DEFAULTS.offsetX)
+    }, {
+      translateY: readValue(offsetY, DEFAULTS.offsetY)
+    }];
+  }, [offsetX, offsetY]);
+
+  // ── Animated spread transform ─────────────────────────────────
+  const scaleTransform = (0, _reactNativeReanimated.useDerivedValue)(() => {
+    const s = readValue(spread, DEFAULTS.spread);
+    const sw = width + s * 2;
+    const sh = height + s * 2;
+    return [{
+      scaleX: width > 0 ? sw / width : 1
+    }, {
+      scaleY: height > 0 ? sh / height : 1
+    }];
+  }, [spread, width, height]);
+
+  // ── Shape element ─────────────────────────────────────────────
+  const shapeElement = (0, _react.useMemo)(() => {
+    const blurChild = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Blur, {
+      blur: derivedBlur
+    });
+    switch (shape.kind) {
+      case 'roundedRect':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.RoundedRect, {
+          x: 0,
+          y: 0,
+          width: width,
+          height: height,
+          r: shape.radius,
+          paint: paint,
+          children: blurChild
+        });
+      case 'circle':
+        {
+          const r = Math.min(width, height) / 2;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Circle, {
+            cx: width / 2,
+            cy: height / 2,
+            r: r,
+            paint: paint,
+            children: blurChild
+          });
+        }
+      case 'path':
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
+          path: shape.svgPath,
+          paint: paint,
+          children: blurChild
+        });
+      case 'rect':
+      default:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Rect, {
+          x: 0,
+          y: 0,
+          width: width,
+          height: height,
+          paint: paint,
+          children: blurChild
+        });
+    }
+  }, [shape, width, height, paint, derivedBlur]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Group, {
+    transform: offsetTransform,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Group, {
+      transform: scaleTransform,
+      origin: {
+        x: width / 2,
+        y: height / 2
+      },
+      children: shapeElement
+    })
+  });
+};
+
+/**
+ * `<AnimatedShadow>` — Animated CSS-style box shadows.
+ *
+ * Same API as `<Shadow>`, but numeric props accept Reanimated
+ * `SharedValue<number>` for 60fps animations on the UI thread.
+ *
+ * Requires `react-native-reanimated` >= 3.0.0.
+ *
+ * @example
+ * ```tsx
+ * import { AnimatedShadow } from 'react-native-skia-box-shadow';
+ * import { useSharedValue, withSpring } from 'react-native-reanimated';
+ *
+ * const MyCard = () => {
+ *   const blur = useSharedValue(16);
+ *   const offsetY = useSharedValue(4);
+ *   const spread = useSharedValue(0);
+ *
+ *   const onPressIn = () => {
+ *     blur.value = withSpring(32);
+ *     offsetY.value = withSpring(12);
+ *     spread.value = withSpring(4);
+ *   };
+ *
+ *   const onPressOut = () => {
+ *     blur.value = withSpring(16);
+ *     offsetY.value = withSpring(4);
+ *     spread.value = withSpring(0);
+ *   };
+ *
+ *   return (
+ *     <AnimatedShadow
+ *       shadows={{
+ *         fillStyle: { kind: 'color', color: 'rgba(0,0,0,0.15)' },
+ *         blurRadius: blur,
+ *         offsetY,
+ *         spread,
+ *       }}
+ *       shape={{ kind: 'roundedRect', radius: 16 }}
+ *     >
+ *       <Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
+ *         <View style={styles.card}>
+ *           <Text>Press me</Text>
+ *         </View>
+ *       </Pressable>
+ *     </AnimatedShadow>
+ *   );
+ * };
+ * ```
+ */
+const AnimatedShadow = ({
+  shadows,
+  shape = {
+    kind: 'rect'
+  },
+  width: _width,
+  height: _height,
+  maxCanvasPadding = 120,
+  style,
+  children
+}) => {
+  const [layout, setLayout] = (0, _react.useState)(null);
+  const onLayout = e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setLayout({
+      width,
+      height
+    });
+  };
+  const width = _width ?? layout?.width ?? 0;
+  const height = _height ?? layout?.height ?? 0;
+  const shadowList = Array.isArray(shadows) ? shadows : [shadows];
+  const hasSize = width > 0 && height > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    onLayout: onLayout,
+    children: [hasSize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Canvas, {
+      style: [styles.canvas, {
+        top: -maxCanvasPadding,
+        left: -maxCanvasPadding,
+        width: width + maxCanvasPadding * 2,
+        height: height + maxCanvasPadding * 2
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Group, {
+        transform: [{
+          translateX: maxCanvasPadding
+        }, {
+          translateY: maxCanvasPadding
+        }],
+        children: shadowList.map((params, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedShadowLayer, {
+          params: params,
+          width: width,
+          height: height,
+          defaultShape: shape
+        }, idx))
+      })
+    }), children]
+  });
+};
+exports.AnimatedShadow = AnimatedShadow;
+const styles = _reactNative.StyleSheet.create({
+  container: {},
+  canvas: {
+    position: 'absolute',
+    pointerEvents: 'none'
+  }
+});
+var _default = exports.default = AnimatedShadow;
+//# sourceMappingURL=AnimatedShadow.js.map

package/lib/commonjs/AnimatedShadow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSkia","_reactNativeReanimated","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULTS","fillStyle","kind","color","blurRadius","spread","offsetX","offsetY","pixelRatio","PixelRatio","readValue","v","fallback","undefined","value","AnimatedShadowLayer","params","width","height","defaultShape","shape","shapeOverride","paint","useMemo","p","Skia","Paint","setColor","Color","setShader","factory","derivedBlur","useDerivedValue","offsetTransform","translateX","translateY","scaleTransform","s","sw","sh","scaleX","scaleY","shapeElement","blurChild","jsx","Blur","blur","RoundedRect","x","y","radius","children","Math","min","Circle","cx","cy","Path","path","svgPath","Rect","Group","transform","origin","AnimatedShadow","shadows","_width","_height","maxCanvasPadding","style","layout","setLayout","useState","onLayout","nativeEvent","shadowList","Array","isArray","hasSize","jsxs","View","styles","container","Canvas","canvas","top","left","map","idx","exports","StyleSheet","create","position","pointerEvents","_default"],"sourceRoot":"../../src","sources":["AnimatedShadow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AnimatedShadow", {
+  enumerable: true,
+  get: function () {
+    return _AnimatedShadow.AnimatedShadow;
+  }
+});
 Object.defineProperty(exports, "Shadow", {
   enumerable: true,
   get: function () {
@@ -22,5 +28,6 @@ Object.defineProperty(exports, "ShadowView", {
   }
 });
 var _Shadow = _interopRequireWildcard(require("./Shadow"));
+var _AnimatedShadow = require("./AnimatedShadow");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Shadow","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAmF,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}
+{"version":3,"names":["_Shadow","_interopRequireWildcard","require","_AnimatedShadow","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAAkD,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}

package/lib/commonjs/types.animated.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.animated.js.map

package/lib/commonjs/types.animated.js.map

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

package/lib/module/AnimatedShadow.js

@@ -0,0 +1,257 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { StyleSheet, View, PixelRatio } from 'react-native';
+import { Canvas, Group, RoundedRect, Rect, Circle, Path, Blur, Skia } from '@shopify/react-native-skia';
+import { useDerivedValue } from "react-native-reanimated";
+
+// ── Defaults ────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULTS = {
+  fillStyle: {
+    kind: 'color',
+    color: 'rgba(0,0,0,0.10)'
+  },
+  blurRadius: 24,
+  spread: 4,
+  offsetX: 0,
+  offsetY: 0
+};
+const pixelRatio = PixelRatio.get();
+
+/**
+ * Read a value that may be static or a SharedValue.
+ * Called inside useDerivedValue / on UI thread.
+ */
+const readValue = (v, fallback) => {
+  'worklet';
+
+  if (typeof v === 'number') return v;
+  if (v === undefined || v === null) return fallback;
+  return v.value;
+};
+
+// ── Animated single shadow layer ────────────────────────────────
+const AnimatedShadowLayer = ({
+  params,
+  width,
+  height,
+  defaultShape
+}) => {
+  const {
+    fillStyle = DEFAULTS.fillStyle,
+    blurRadius = DEFAULTS.blurRadius,
+    spread = DEFAULTS.spread,
+    offsetX = DEFAULTS.offsetX,
+    offsetY = DEFAULTS.offsetY,
+    shape: shapeOverride
+  } = params;
+  const shape = shapeOverride ?? defaultShape;
+
+  // ── Paint (static — color changes don't need 60fps) ───────────
+  const paint = useMemo(() => {
+    const p = Skia.Paint();
+    if (fillStyle.kind === 'color') {
+      p.setColor(Skia.Color(fillStyle.color));
+    } else {
+      p.setShader(fillStyle.factory(width, height));
+    }
+    return p;
+  }, [fillStyle, width, height]);
+
+  // ── Animated blur (derived on UI thread) ──────────────────────
+  const derivedBlur = useDerivedValue(() => {
+    return readValue(blurRadius, DEFAULTS.blurRadius) / pixelRatio;
+  }, [blurRadius]);
+
+  // ── Animated offset transform ─────────────────────────────────
+  const offsetTransform = useDerivedValue(() => {
+    return [{
+      translateX: readValue(offsetX, DEFAULTS.offsetX)
+    }, {
+      translateY: readValue(offsetY, DEFAULTS.offsetY)
+    }];
+  }, [offsetX, offsetY]);
+
+  // ── Animated spread transform ─────────────────────────────────
+  const scaleTransform = useDerivedValue(() => {
+    const s = readValue(spread, DEFAULTS.spread);
+    const sw = width + s * 2;
+    const sh = height + s * 2;
+    return [{
+      scaleX: width > 0 ? sw / width : 1
+    }, {
+      scaleY: height > 0 ? sh / height : 1
+    }];
+  }, [spread, width, height]);
+
+  // ── Shape element ─────────────────────────────────────────────
+  const shapeElement = useMemo(() => {
+    const blurChild = /*#__PURE__*/_jsx(Blur, {
+      blur: derivedBlur
+    });
+    switch (shape.kind) {
+      case 'roundedRect':
+        return /*#__PURE__*/_jsx(RoundedRect, {
+          x: 0,
+          y: 0,
+          width: width,
+          height: height,
+          r: shape.radius,
+          paint: paint,
+          children: blurChild
+        });
+      case 'circle':
+        {
+          const r = Math.min(width, height) / 2;
+          return /*#__PURE__*/_jsx(Circle, {
+            cx: width / 2,
+            cy: height / 2,
+            r: r,
+            paint: paint,
+            children: blurChild
+          });
+        }
+      case 'path':
+        return /*#__PURE__*/_jsx(Path, {
+          path: shape.svgPath,
+          paint: paint,
+          children: blurChild
+        });
+      case 'rect':
+      default:
+        return /*#__PURE__*/_jsx(Rect, {
+          x: 0,
+          y: 0,
+          width: width,
+          height: height,
+          paint: paint,
+          children: blurChild
+        });
+    }
+  }, [shape, width, height, paint, derivedBlur]);
+  return /*#__PURE__*/_jsx(Group, {
+    transform: offsetTransform,
+    children: /*#__PURE__*/_jsx(Group, {
+      transform: scaleTransform,
+      origin: {
+        x: width / 2,
+        y: height / 2
+      },
+      children: shapeElement
+    })
+  });
+};
+
+/**
+ * `<AnimatedShadow>` — Animated CSS-style box shadows.
+ *
+ * Same API as `<Shadow>`, but numeric props accept Reanimated
+ * `SharedValue<number>` for 60fps animations on the UI thread.
+ *
+ * Requires `react-native-reanimated` >= 3.0.0.
+ *
+ * @example
+ * ```tsx
+ * import { AnimatedShadow } from 'react-native-skia-box-shadow';
+ * import { useSharedValue, withSpring } from 'react-native-reanimated';
+ *
+ * const MyCard = () => {
+ *   const blur = useSharedValue(16);
+ *   const offsetY = useSharedValue(4);
+ *   const spread = useSharedValue(0);
+ *
+ *   const onPressIn = () => {
+ *     blur.value = withSpring(32);
+ *     offsetY.value = withSpring(12);
+ *     spread.value = withSpring(4);
+ *   };
+ *
+ *   const onPressOut = () => {
+ *     blur.value = withSpring(16);
+ *     offsetY.value = withSpring(4);
+ *     spread.value = withSpring(0);
+ *   };
+ *
+ *   return (
+ *     <AnimatedShadow
+ *       shadows={{
+ *         fillStyle: { kind: 'color', color: 'rgba(0,0,0,0.15)' },
+ *         blurRadius: blur,
+ *         offsetY,
+ *         spread,
+ *       }}
+ *       shape={{ kind: 'roundedRect', radius: 16 }}
+ *     >
+ *       <Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
+ *         <View style={styles.card}>
+ *           <Text>Press me</Text>
+ *         </View>
+ *       </Pressable>
+ *     </AnimatedShadow>
+ *   );
+ * };
+ * ```
+ */
+const AnimatedShadow = ({
+  shadows,
+  shape = {
+    kind: 'rect'
+  },
+  width: _width,
+  height: _height,
+  maxCanvasPadding = 120,
+  style,
+  children
+}) => {
+  const [layout, setLayout] = useState(null);
+  const onLayout = e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setLayout({
+      width,
+      height
+    });
+  };
+  const width = _width ?? layout?.width ?? 0;
+  const height = _height ?? layout?.height ?? 0;
+  const shadowList = Array.isArray(shadows) ? shadows : [shadows];
+  const hasSize = width > 0 && height > 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    onLayout: onLayout,
+    children: [hasSize && /*#__PURE__*/_jsx(Canvas, {
+      style: [styles.canvas, {
+        top: -maxCanvasPadding,
+        left: -maxCanvasPadding,
+        width: width + maxCanvasPadding * 2,
+        height: height + maxCanvasPadding * 2
+      }],
+      children: /*#__PURE__*/_jsx(Group, {
+        transform: [{
+          translateX: maxCanvasPadding
+        }, {
+          translateY: maxCanvasPadding
+        }],
+        children: shadowList.map((params, idx) => /*#__PURE__*/_jsx(AnimatedShadowLayer, {
+          params: params,
+          width: width,
+          height: height,
+          defaultShape: shape
+        }, idx))
+      })
+    }), children]
+  });
+};
+const styles = StyleSheet.create({
+  container: {},
+  canvas: {
+    position: 'absolute',
+    pointerEvents: 'none'
+  }
+});
+export default AnimatedShadow;
+export { AnimatedShadow };
+//# sourceMappingURL=AnimatedShadow.js.map

package/lib/module/AnimatedShadow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useState","StyleSheet","View","PixelRatio","Canvas","Group","RoundedRect","Rect","Circle","Path","Blur","Skia","useDerivedValue","jsx","_jsx","jsxs","_jsxs","DEFAULTS","fillStyle","kind","color","blurRadius","spread","offsetX","offsetY","pixelRatio","get","readValue","v","fallback","undefined","value","AnimatedShadowLayer","params","width","height","defaultShape","shape","shapeOverride","paint","p","Paint","setColor","Color","setShader","factory","derivedBlur","offsetTransform","translateX","translateY","scaleTransform","s","sw","sh","scaleX","scaleY","shapeElement","blurChild","blur","x","y","r","radius","children","Math","min","cx","cy","path","svgPath","transform","origin","AnimatedShadow","shadows","_width","_height","maxCanvasPadding","style","layout","setLayout","onLayout","e","nativeEvent","shadowList","Array","isArray","hasSize","styles","container","canvas","top","left","map","idx","create","position","pointerEvents"],"sourceRoot":"../../src","sources":["AnimatedShadow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -1,4 +1,5 @@
 "use strict";
 
 export { default as Shadow, Shadow as ShadowView, ShadowDefaults } from './Shadow';
+export { AnimatedShadow } from './AnimatedShadow';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","Shadow","ShadowView","ShadowDefaults"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,MAAM,EAAEA,MAAM,IAAIC,UAAU,EAAEC,cAAc,QAAQ,UAAU","ignoreList":[]}
+{"version":3,"names":["default","Shadow","ShadowView","ShadowDefaults","AnimatedShadow"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,MAAM,EAAEA,MAAM,IAAIC,UAAU,EAAEC,cAAc,QAAQ,UAAU;AAClF,SAASC,cAAc,QAAQ,kBAAkB","ignoreList":[]}

package/lib/module/types.animated.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.animated.js.map

package/lib/module/types.animated.js.map

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

package/lib/typescript/AnimatedShadow.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { AnimatedShadowProps } from './types.animated';
+/**
+ * `<AnimatedShadow>` — Animated CSS-style box shadows.
+ *
+ * Same API as `<Shadow>`, but numeric props accept Reanimated
+ * `SharedValue<number>` for 60fps animations on the UI thread.
+ *
+ * Requires `react-native-reanimated` >= 3.0.0.
+ *
+ * @example
+ * ```tsx
+ * import { AnimatedShadow } from 'react-native-skia-box-shadow';
+ * import { useSharedValue, withSpring } from 'react-native-reanimated';
+ *
+ * const MyCard = () => {
+ *   const blur = useSharedValue(16);
+ *   const offsetY = useSharedValue(4);
+ *   const spread = useSharedValue(0);
+ *
+ *   const onPressIn = () => {
+ *     blur.value = withSpring(32);
+ *     offsetY.value = withSpring(12);
+ *     spread.value = withSpring(4);
+ *   };
+ *
+ *   const onPressOut = () => {
+ *     blur.value = withSpring(16);
+ *     offsetY.value = withSpring(4);
+ *     spread.value = withSpring(0);
+ *   };
+ *
+ *   return (
+ *     <AnimatedShadow
+ *       shadows={{
+ *         fillStyle: { kind: 'color', color: 'rgba(0,0,0,0.15)' },
+ *         blurRadius: blur,
+ *         offsetY,
+ *         spread,
+ *       }}
+ *       shape={{ kind: 'roundedRect', radius: 16 }}
+ *     >
+ *       <Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
+ *         <View style={styles.card}>
+ *           <Text>Press me</Text>
+ *         </View>
+ *       </Pressable>
+ *     </AnimatedShadow>
+ *   );
+ * };
+ * ```
+ */
+declare const AnimatedShadow: React.FC<AnimatedShadowProps>;
+export default AnimatedShadow;
+export { AnimatedShadow };
+//# sourceMappingURL=AnimatedShadow.d.ts.map

package/lib/typescript/AnimatedShadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedShadow.d.ts","sourceRoot":"","sources":["../../src/AnimatedShadow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAmBjD,OAAO,KAAK,EAGV,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAuI1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8DjD,CAAC;AAUF,eAAe,cAAc,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Shadow, Shadow as ShadowView, ShadowDefaults } from './Shadow';
+export { AnimatedShadow } from './AnimatedShadow';
 export type { ShadowProps, ShadowParams, ShadowShape, ShadowFillStyle, } from './types';
+export type { AnimatedShadowProps, AnimatedShadowParams, Animatable, } from './types.animated';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,IAAI,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACnF,YAAY,EACV,WAAW,EACX,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,IAAI,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,GACX,MAAM,kBAAkB,CAAC"}

package/lib/typescript/types.animated.d.ts

@@ -0,0 +1,52 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { ReactNode } from 'react';
+import type { ViewStyle, StyleProp } from 'react-native';
+import type { ShadowShape, ShadowFillStyle } from './types';
+/**
+ * A value that can be either static or a Reanimated SharedValue.
+ * When animated, Skia reads it directly on the UI thread — no React re-renders.
+ */
+export type Animatable<T> = T | SharedValue<T>;
+/**
+ * Animated shadow layer descriptor.
+ * Any numeric prop can be a SharedValue for 60fps animation.
+ */
+export interface AnimatedShadowParams {
+    /** Fill style (not animatable — use opacity in color for fade effects) */
+    fillStyle?: ShadowFillStyle;
+    /** Gaussian blur radius. Animatable. Default: 24 */
+    blurRadius?: Animatable<number>;
+    /** Expands the shadow outline beyond element bounds. Animatable. Default: 4 */
+    spread?: Animatable<number>;
+    /** Horizontal offset. Animatable. Default: 0 */
+    offsetX?: Animatable<number>;
+    /** Vertical offset. Animatable. Default: 0 */
+    offsetY?: Animatable<number>;
+    /** Shape override for this layer */
+    shape?: ShadowShape;
+}
+/**
+ * Props for the `<AnimatedShadow>` component.
+ */
+export interface AnimatedShadowProps {
+    /** One or more animated shadow layers */
+    shadows: AnimatedShadowParams | AnimatedShadowParams[];
+    /** Default shape. Default: rect */
+    shape?: ShadowShape;
+    /** Explicit width */
+    width?: number;
+    /** Explicit height */
+    height?: number;
+    /**
+     * Maximum canvas padding to accommodate animated values.
+     * Since blur/spread/offset may change at runtime, set this to
+     * the largest extent the shadow can reach.
+     * Default: 120
+     */
+    maxCanvasPadding?: number;
+    /** RN style for the outer container */
+    style?: StyleProp<ViewStyle>;
+    /** Content rendered above the shadow */
+    children?: ReactNode;
+}
+//# sourceMappingURL=types.animated.d.ts.map

package/lib/typescript/types.animated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.animated.d.ts","sourceRoot":"","sources":["../../src/types.animated.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAE/C;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAChC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC5B,gDAAgD;IAChD,OAAO,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC7B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC7B,oCAAoC;IACpC,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,OAAO,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACvD,mCAAmC;IACnC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-skia-box-shadow",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CSS-style box shadows for React Native — blur, spread, offset, colors, gradients, and arbitrary shapes. Powered by @shopify/react-native-skia.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -30,11 +30,13 @@
     "spread",
     "ios",
     "android",
-    "react-native-skia"
+    "react-native-skia",
+    "animated",
+    "reanimated"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/nickstetsiuk/react-native-skia-box-shadow.git"
+    "url": "git+https://github.com/vasyl-stetsiuk/react-native-skia-box-shadow.git"
   },
   "author": {
     "name": "Vasyl Stetsiuk",
@@ -42,26 +44,31 @@
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/nickstetsiuk/react-native-skia-box-shadow/issues"
+    "url": "https://github.com/vasyl-stetsiuk/react-native-skia-box-shadow/issues"
   },
-  "homepage": "https://github.com/nickstetsiuk/react-native-skia-box-shadow#readme",
+  "homepage": "https://github.com/vasyl-stetsiuk/react-native-skia-box-shadow#readme",
   "peerDependencies": {
     "@shopify/react-native-skia": ">=1.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.71.0"
+    "react-native": ">=0.71.0",
+    "react-native-reanimated": ">=3.0.0"
   },
   "peerDependenciesMeta": {
     "@shopify/react-native-skia": {
       "optional": false
+    },
+    "react-native-reanimated": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@shopify/react-native-skia": "^1.11.0",
     "@types/react": "^18.2.0",
-    "@types/react-native": "^0.72.0",
+    "@types/react-native": "^0.73.0",
     "react": "^18.2.0",
     "react-native": "^0.75.0",
     "react-native-builder-bob": "^0.30.0",
+    "react-native-reanimated": "^3.16.0",
     "typescript": "^5.4.0"
   },
   "react-native-builder-bob": {

package/src/AnimatedShadow.tsx

@@ -0,0 +1,282 @@
+import React, { useMemo, useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  PixelRatio,
+  type LayoutChangeEvent,
+} from 'react-native';
+import {
+  Canvas,
+  Group,
+  RoundedRect,
+  Rect,
+  Circle,
+  Path,
+  Blur,
+  Skia,
+} from '@shopify/react-native-skia';
+
+import type { ShadowShape, ShadowFillStyle } from './types';
+import type {
+  Animatable,
+  AnimatedShadowParams,
+  AnimatedShadowProps,
+} from './types.animated';
+import {useDerivedValue} from "react-native-reanimated";
+
+// ── Defaults ────────────────────────────────────────────────────
+const DEFAULTS = {
+  fillStyle: { kind: 'color', color: 'rgba(0,0,0,0.10)' } as ShadowFillStyle,
+  blurRadius: 24,
+  spread: 4,
+  offsetX: 0,
+  offsetY: 0,
+} as const;
+
+const pixelRatio = PixelRatio.get();
+
+/**
+ * Read a value that may be static or a SharedValue.
+ * Called inside useDerivedValue / on UI thread.
+ */
+const readValue = (v: Animatable<number>, fallback: number): number => {
+  'worklet';
+  if (typeof v === 'number') return v;
+  if (v === undefined || v === null) return fallback;
+  return v.value;
+};
+
+// ── Animated single shadow layer ────────────────────────────────
+const AnimatedShadowLayer: React.FC<{
+  params: AnimatedShadowParams;
+  width: number;
+  height: number;
+  defaultShape: ShadowShape;
+}> = ({ params, width, height, defaultShape }) => {
+  const {
+    fillStyle = DEFAULTS.fillStyle,
+    blurRadius = DEFAULTS.blurRadius,
+    spread = DEFAULTS.spread,
+    offsetX = DEFAULTS.offsetX,
+    offsetY = DEFAULTS.offsetY,
+    shape: shapeOverride,
+  } = params;
+
+  const shape = shapeOverride ?? defaultShape;
+
+  // ── Paint (static — color changes don't need 60fps) ───────────
+  const paint = useMemo(() => {
+    const p = Skia.Paint();
+    if (fillStyle.kind === 'color') {
+      p.setColor(Skia.Color(fillStyle.color));
+    } else {
+      p.setShader(fillStyle.factory(width, height));
+    }
+    return p;
+  }, [fillStyle, width, height]);
+
+  // ── Animated blur (derived on UI thread) ──────────────────────
+  const derivedBlur = useDerivedValue(() => {
+    return readValue(blurRadius, DEFAULTS.blurRadius) / pixelRatio;
+  }, [blurRadius]);
+
+  // ── Animated offset transform ─────────────────────────────────
+  const offsetTransform = useDerivedValue(() => {
+    return [
+      { translateX: readValue(offsetX, DEFAULTS.offsetX) },
+      { translateY: readValue(offsetY, DEFAULTS.offsetY) },
+    ];
+  }, [offsetX, offsetY]);
+
+  // ── Animated spread transform ─────────────────────────────────
+  const scaleTransform = useDerivedValue(() => {
+    const s = readValue(spread, DEFAULTS.spread);
+    const sw = width + s * 2;
+    const sh = height + s * 2;
+    return [
+      { scaleX: width > 0 ? sw / width : 1 },
+      { scaleY: height > 0 ? sh / height : 1 },
+    ];
+  }, [spread, width, height]);
+
+  // ── Shape element ─────────────────────────────────────────────
+  const shapeElement = useMemo(() => {
+    const blurChild = <Blur blur={derivedBlur} />;
+
+    switch (shape.kind) {
+      case 'roundedRect':
+        return (
+          <RoundedRect
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            r={shape.radius}
+            paint={paint}
+          >
+            {blurChild}
+          </RoundedRect>
+        );
+
+      case 'circle': {
+        const r = Math.min(width, height) / 2;
+        return (
+          <Circle cx={width / 2} cy={height / 2} r={r} paint={paint}>
+            {blurChild}
+          </Circle>
+        );
+      }
+
+      case 'path':
+        return (
+          <Path path={shape.svgPath} paint={paint}>
+            {blurChild}
+          </Path>
+        );
+
+      case 'rect':
+      default:
+        return (
+          <Rect x={0} y={0} width={width} height={height} paint={paint}>
+            {blurChild}
+          </Rect>
+        );
+    }
+  }, [shape, width, height, paint, derivedBlur]);
+
+  return (
+    <Group transform={offsetTransform}>
+      <Group
+        transform={scaleTransform}
+        origin={{ x: width / 2, y: height / 2 }}
+      >
+        {shapeElement}
+      </Group>
+    </Group>
+  );
+};
+
+/**
+ * `<AnimatedShadow>` — Animated CSS-style box shadows.
+ *
+ * Same API as `<Shadow>`, but numeric props accept Reanimated
+ * `SharedValue<number>` for 60fps animations on the UI thread.
+ *
+ * Requires `react-native-reanimated` >= 3.0.0.
+ *
+ * @example
+ * ```tsx
+ * import { AnimatedShadow } from 'react-native-skia-box-shadow';
+ * import { useSharedValue, withSpring } from 'react-native-reanimated';
+ *
+ * const MyCard = () => {
+ *   const blur = useSharedValue(16);
+ *   const offsetY = useSharedValue(4);
+ *   const spread = useSharedValue(0);
+ *
+ *   const onPressIn = () => {
+ *     blur.value = withSpring(32);
+ *     offsetY.value = withSpring(12);
+ *     spread.value = withSpring(4);
+ *   };
+ *
+ *   const onPressOut = () => {
+ *     blur.value = withSpring(16);
+ *     offsetY.value = withSpring(4);
+ *     spread.value = withSpring(0);
+ *   };
+ *
+ *   return (
+ *     <AnimatedShadow
+ *       shadows={{
+ *         fillStyle: { kind: 'color', color: 'rgba(0,0,0,0.15)' },
+ *         blurRadius: blur,
+ *         offsetY,
+ *         spread,
+ *       }}
+ *       shape={{ kind: 'roundedRect', radius: 16 }}
+ *     >
+ *       <Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
+ *         <View style={styles.card}>
+ *           <Text>Press me</Text>
+ *         </View>
+ *       </Pressable>
+ *     </AnimatedShadow>
+ *   );
+ * };
+ * ```
+ */
+const AnimatedShadow: React.FC<AnimatedShadowProps> = ({
+  shadows,
+  shape = { kind: 'rect' },
+  width: _width,
+  height: _height,
+  maxCanvasPadding = 120,
+  style,
+  children,
+}) => {
+  const [layout, setLayout] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setLayout({ width, height });
+  };
+
+  const width = _width ?? layout?.width ?? 0;
+  const height = _height ?? layout?.height ?? 0;
+
+  const shadowList = Array.isArray(shadows) ? shadows : [shadows];
+
+  const hasSize = width > 0 && height > 0;
+
+  return (
+    <View style={[styles.container, style]} onLayout={onLayout}>
+      {hasSize && (
+        <Canvas
+          style={[
+            styles.canvas,
+            {
+              top: -maxCanvasPadding,
+              left: -maxCanvasPadding,
+              width: width + maxCanvasPadding * 2,
+              height: height + maxCanvasPadding * 2,
+            },
+          ]}
+        >
+          <Group
+            transform={[
+              { translateX: maxCanvasPadding },
+              { translateY: maxCanvasPadding },
+            ]}
+          >
+            {shadowList.map((params, idx) => (
+              <AnimatedShadowLayer
+                key={idx}
+                params={params}
+                width={width}
+                height={height}
+                defaultShape={shape}
+              />
+            ))}
+          </Group>
+        </Canvas>
+      )}
+
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  canvas: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});
+
+export default AnimatedShadow;
+export { AnimatedShadow };

package/src/index.ts

@@ -1,7 +1,13 @@
 export { default as Shadow, Shadow as ShadowView, ShadowDefaults } from './Shadow';
+export { AnimatedShadow } from './AnimatedShadow';
 export type {
   ShadowProps,
   ShadowParams,
   ShadowShape,
   ShadowFillStyle,
 } from './types';
+export type {
+  AnimatedShadowProps,
+  AnimatedShadowParams,
+  Animatable,
+} from './types.animated';

package/src/types.animated.ts

@@ -0,0 +1,54 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { ReactNode } from 'react';
+import type { ViewStyle, StyleProp } from 'react-native';
+import type { ShadowShape, ShadowFillStyle } from './types';
+
+/**
+ * A value that can be either static or a Reanimated SharedValue.
+ * When animated, Skia reads it directly on the UI thread — no React re-renders.
+ */
+export type Animatable<T> = T | SharedValue<T>;
+
+/**
+ * Animated shadow layer descriptor.
+ * Any numeric prop can be a SharedValue for 60fps animation.
+ */
+export interface AnimatedShadowParams {
+  /** Fill style (not animatable — use opacity in color for fade effects) */
+  fillStyle?: ShadowFillStyle;
+  /** Gaussian blur radius. Animatable. Default: 24 */
+  blurRadius?: Animatable<number>;
+  /** Expands the shadow outline beyond element bounds. Animatable. Default: 4 */
+  spread?: Animatable<number>;
+  /** Horizontal offset. Animatable. Default: 0 */
+  offsetX?: Animatable<number>;
+  /** Vertical offset. Animatable. Default: 0 */
+  offsetY?: Animatable<number>;
+  /** Shape override for this layer */
+  shape?: ShadowShape;
+}
+
+/**
+ * Props for the `<AnimatedShadow>` component.
+ */
+export interface AnimatedShadowProps {
+  /** One or more animated shadow layers */
+  shadows: AnimatedShadowParams | AnimatedShadowParams[];
+  /** Default shape. Default: rect */
+  shape?: ShadowShape;
+  /** Explicit width */
+  width?: number;
+  /** Explicit height */
+  height?: number;
+  /**
+   * Maximum canvas padding to accommodate animated values.
+   * Since blur/spread/offset may change at runtime, set this to
+   * the largest extent the shadow can reach.
+   * Default: 120
+   */
+  maxCanvasPadding?: number;
+  /** RN style for the outer container */
+  style?: StyleProp<ViewStyle>;
+  /** Content rendered above the shadow */
+  children?: ReactNode;
+}