react-native-blur-vibe 0.1.6 → 0.1.7

package/lib/commonjs/BlurView.js

@@ -11,17 +11,36 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 /**
  * BlurView — react-native-blur-vibe
  *
- * Cross-platform blur view for React Native.
- * iOS: UIVisualEffectView | Android: RenderEffect (API 31+) / RenderScript fallback
+ * Cross-platform backdrop blur.
  *
- * overlayColor works on BOTH platforms — composites a color on top of the blur,
- * exactly like CSS: backdrop-filter: blur(Xpx) + background-color: overlayColor
+ * iOS:               UIVisualEffectView — compositor-level, always smooth
+ * Android API 31+:   Dual-RenderNode + RenderEffect — GPU, no pixelation,
+ *                    supports progressive blur + noise
+ * Android API < 31:  QmBlurView RenderScript — CPU, smooth at downsample=4
  *
- * @example
+ * @example Basic frosted glass
  * <BlurView
- *   blurAmount={15}
- *   blurType="systemMaterial"
+ *   blurAmount={30}
+ *   overlayColor="#FFFFFF20"
+ *   style={StyleSheet.absoluteFill}
+ * />
+ *
+ * @example Progressive blur (fades from full blur at top to transparent at bottom)
+ * <BlurView
+ *   blurAmount={40}
  *   overlayColor="#00000040"
+ *   progressiveBlurDirection="topToBottom"
+ *   progressiveStartIntensity={1}
+ *   progressiveEndIntensity={0}
+ *   style={StyleSheet.absoluteFill}
+ * />
+ *
+ * @example Music card frosted glass with noise
+ * <BlurView
+ *   blurAmount={60}
+ *   overlayColor="#FFFFFF15"
+ *   noiseFactor={0.12}
+ *   borderRadius={16}
  *   style={StyleSheet.absoluteFill}
  * />
  */const BlurView = ({
@@ -30,6 +49,10 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   overlayColor,
   reducedTransparencyFallbackColor = '#F2F2F2',
   blurRadius = 4,
+  progressiveBlurDirection = 'none',
+  progressiveStartIntensity = 1.0,
+  progressiveEndIntensity = 0.0,
+  noiseFactor = 0.08,
   style,
   children,
   ...rest
@@ -41,6 +64,10 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     overlayColor: resolvedOverlayColor,
     reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
     blurRadius: blurRadius,
+    progressiveBlurDirection: progressiveBlurDirection,
+    progressiveStartIntensity: progressiveStartIntensity,
+    progressiveEndIntensity: progressiveEndIntensity,
+    noiseFactor: noiseFactor,
     style: [styles.transparent, style],
     ...rest,
     children: children

package/lib/commonjs/BlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_BlurVibeViewNativeComponent","_interopRequireDefault","_jsxRuntime","e","__esModule","default","BlurView","blurAmount","blurType","overlayColor","reducedTransparencyFallbackColor","blurRadius","style","children","rest","resolvedOverlayColor","Platform","OS","jsx","styles","transparent","displayName","StyleSheet","create","backgroundColor","_default","exports"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,4BAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+D,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,MAAMG,QAAQ,GAAGA,CAAC;EAChBC,UAAU,GAAG,EAAE;EACfC,QAAQ,GAAG,OAAO;EAClBC,YAAY;EACZC,gCAAgC,GAAG,SAAS;EAC5CC,UAAU,GAAG,CAAC;EACdC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACU,CAAC,KAAK;EACnB,MAAMC,oBAAoB,GACxBN,YAAY,KAAKO,qBAAQ,CAACC,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;EAE3E,oBACE,IAAAf,WAAA,CAAAgB,GAAA,EAAClB,4BAAA,CAAAK,OAAkB;IACjBE,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEM,oBAAqB;IACnCL,gCAAgC,EAAEA,gCAAiC;IACnEC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAE,CAACO,MAAM,CAACC,WAAW,EAAER,KAAK,CAAE;IAAA,GAC/BE,IAAI;IAAAD,QAAA,EAEPA;EAAQ,CACS,CAAC;AAEzB,CAAC;AAEDP,QAAQ,CAACe,WAAW,GAAG,UAAU;AAEjC,MAAMF,MAAM,GAAGG,uBAAU,CAACC,MAAM,CAAC;EAC/BH,WAAW,EAAE;IACXI,eAAe,EAAE;EACnB;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArB,OAAA,GAEYC,QAAQ","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_BlurVibeViewNativeComponent","_interopRequireDefault","_jsxRuntime","e","__esModule","default","BlurView","blurAmount","blurType","overlayColor","reducedTransparencyFallbackColor","blurRadius","progressiveBlurDirection","progressiveStartIntensity","progressiveEndIntensity","noiseFactor","style","children","rest","resolvedOverlayColor","Platform","OS","jsx","styles","transparent","displayName","StyleSheet","create","backgroundColor","_default","exports"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,4BAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+D,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,MAAMG,QAAQ,GAAGA,CAAC;EAChBC,UAAU,GAAG,EAAE;EACfC,QAAQ,GAAG,OAAO;EAClBC,YAAY;EACZC,gCAAgC,GAAG,SAAS;EAC5CC,UAAU,GAAG,CAAC;EACdC,wBAAwB,GAAG,MAAM;EACjCC,yBAAyB,GAAG,GAAG;EAC/BC,uBAAuB,GAAG,GAAG;EAC7BC,WAAW,GAAG,IAAI;EAClBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACU,CAAC,KAAK;EACnB,MAAMC,oBAAoB,GACxBV,YAAY,KAAKW,qBAAQ,CAACC,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;EAE3E,oBACE,IAAAnB,WAAA,CAAAoB,GAAA,EAACtB,4BAAA,CAAAK,OAAkB;IACjBE,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEU,oBAAqB;IACnCT,gCAAgC,EAAEA,gCAAiC;IACnEC,UAAU,EAAEA,UAAW;IACvBC,wBAAwB,EAAEA,wBAAyB;IACnDC,yBAAyB,EAAEA,yBAA0B;IACrDC,uBAAuB,EAAEA,uBAAwB;IACjDC,WAAW,EAAEA,WAAY;IACzBC,KAAK,EAAE,CAACO,MAAM,CAACC,WAAW,EAAER,KAAK,CAAE;IAAA,GAC/BE,IAAI;IAAAD,QAAA,EAEPA;EAAQ,CACS,CAAC;AAEzB,CAAC;AAEDX,QAAQ,CAACmB,WAAW,GAAG,UAAU;AAEjC,MAAMF,MAAM,GAAGG,uBAAU,CAACC,MAAM,CAAC;EAC/BH,WAAW,EAAE;IACXI,eAAe,EAAE;EACnB;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAzB,OAAA,GAEYC,QAAQ","ignoreList":[]}

package/lib/module/BlurVibeViewNativeComponent.ts

@@ -4,20 +4,6 @@ import type { HostComponent, ViewProps } from 'react-native';
 // @ts-ignore - internal RN path, exists at runtime
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 
-/**
- * NativeComponent codegen spec for BlurVibeView.
- *
- * Type mapping (JS → Native):
- *   Float   → NSNumber (iOS) / Float (Android)
- *   string  → NSString (iOS) / String (Android)
- *   Int32   → NSNumber (iOS) / Int   (Android)
- *
- * Color props (overlayColor, reducedTransparencyFallbackColor) use
- * plain `string` — NOT the RN `ColorValue` type — because we parse
- * hex manually on both platforms for full alpha channel control.
- * Using ColorValue would trigger RN's color normalization which
- * reorders alpha bytes and breaks #RRGGBBAA format.
- */
 export interface NativeBlurVibeViewProps extends ViewProps {
   // 0–100 blur intensity
   blurAmount?: Float;
@@ -28,11 +14,19 @@ export interface NativeBlurVibeViewProps extends ViewProps {
   // Hex color string with alpha — "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
   overlayColor?: string;
 
-  // Fallback when blur unavailable (Reduce Transparency / old API)
+  // Fallback when blur unavailable
   reducedTransparencyFallbackColor?: string;
 
-  // Android downscale factor 1–8 — no-op on iOS
+  // Android API < 31 only: downsample factor 1–8
   blurRadius?: Int32;
+
+  // Progressive blur — Android API 31+ only
+  progressiveBlurDirection?: string;
+  progressiveStartIntensity?: Float;
+  progressiveEndIntensity?: Float;
+
+  // Noise grain overlay — Android API 31+ only
+  noiseFactor?: Float;
 }
 
 export default codegenNativeComponent<NativeBlurVibeViewProps>(

package/lib/module/BlurView.js

@@ -6,17 +6,36 @@ import NativeBlurVibeView from './BlurVibeViewNativeComponent';
 /**
  * BlurView — react-native-blur-vibe
  *
- * Cross-platform blur view for React Native.
- * iOS: UIVisualEffectView | Android: RenderEffect (API 31+) / RenderScript fallback
+ * Cross-platform backdrop blur.
  *
- * overlayColor works on BOTH platforms — composites a color on top of the blur,
- * exactly like CSS: backdrop-filter: blur(Xpx) + background-color: overlayColor
+ * iOS:               UIVisualEffectView — compositor-level, always smooth
+ * Android API 31+:   Dual-RenderNode + RenderEffect — GPU, no pixelation,
+ *                    supports progressive blur + noise
+ * Android API < 31:  QmBlurView RenderScript — CPU, smooth at downsample=4
  *
- * @example
+ * @example Basic frosted glass
  * <BlurView
- *   blurAmount={15}
- *   blurType="systemMaterial"
+ *   blurAmount={30}
+ *   overlayColor="#FFFFFF20"
+ *   style={StyleSheet.absoluteFill}
+ * />
+ *
+ * @example Progressive blur (fades from full blur at top to transparent at bottom)
+ * <BlurView
+ *   blurAmount={40}
  *   overlayColor="#00000040"
+ *   progressiveBlurDirection="topToBottom"
+ *   progressiveStartIntensity={1}
+ *   progressiveEndIntensity={0}
+ *   style={StyleSheet.absoluteFill}
+ * />
+ *
+ * @example Music card frosted glass with noise
+ * <BlurView
+ *   blurAmount={60}
+ *   overlayColor="#FFFFFF15"
+ *   noiseFactor={0.12}
+ *   borderRadius={16}
  *   style={StyleSheet.absoluteFill}
  * />
  */
@@ -27,6 +46,10 @@ const BlurView = ({
   overlayColor,
   reducedTransparencyFallbackColor = '#F2F2F2',
   blurRadius = 4,
+  progressiveBlurDirection = 'none',
+  progressiveStartIntensity = 1.0,
+  progressiveEndIntensity = 0.0,
+  noiseFactor = 0.08,
   style,
   children,
   ...rest
@@ -38,6 +61,10 @@ const BlurView = ({
     overlayColor: resolvedOverlayColor,
     reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
     blurRadius: blurRadius,
+    progressiveBlurDirection: progressiveBlurDirection,
+    progressiveStartIntensity: progressiveStartIntensity,
+    progressiveEndIntensity: progressiveEndIntensity,
+    noiseFactor: noiseFactor,
     style: [styles.transparent, style],
     ...rest,
     children: children

package/lib/module/BlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","StyleSheet","NativeBlurVibeView","jsx","_jsx","BlurView","blurAmount","blurType","overlayColor","reducedTransparencyFallbackColor","blurRadius","style","children","rest","resolvedOverlayColor","OS","styles","transparent","displayName","create","backgroundColor"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAEnD,OAAOC,kBAAkB,MAAM,+BAA+B;;AAE9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhBA,SAAAC,GAAA,IAAAC,IAAA;AAiBA,MAAMC,QAAQ,GAAGA,CAAC;EAChBC,UAAU,GAAG,EAAE;EACfC,QAAQ,GAAG,OAAO;EAClBC,YAAY;EACZC,gCAAgC,GAAG,SAAS;EAC5CC,UAAU,GAAG,CAAC;EACdC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACU,CAAC,KAAK;EACnB,MAAMC,oBAAoB,GACxBN,YAAY,KAAKR,QAAQ,CAACe,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;EAE3E,oBACEX,IAAA,CAACF,kBAAkB;IACjBI,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEM,oBAAqB;IACnCL,gCAAgC,EAAEA,gCAAiC;IACnEC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAE,CAACK,MAAM,CAACC,WAAW,EAAEN,KAAK,CAAE;IAAA,GAC/BE,IAAI;IAAAD,QAAA,EAEPA;EAAQ,CACS,CAAC;AAEzB,CAAC;AAEDP,QAAQ,CAACa,WAAW,GAAG,UAAU;AAEjC,MAAMF,MAAM,GAAGf,UAAU,CAACkB,MAAM,CAAC;EAC/BF,WAAW,EAAE;IACXG,eAAe,EAAE;EACnB;AACF,CAAC,CAAC;AAEF,eAAef,QAAQ","ignoreList":[]}
+{"version":3,"names":["Platform","StyleSheet","NativeBlurVibeView","jsx","_jsx","BlurView","blurAmount","blurType","overlayColor","reducedTransparencyFallbackColor","blurRadius","progressiveBlurDirection","progressiveStartIntensity","progressiveEndIntensity","noiseFactor","style","children","rest","resolvedOverlayColor","OS","styles","transparent","displayName","create","backgroundColor"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAEnD,OAAOC,kBAAkB,MAAM,+BAA+B;;AAE9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAnCA,SAAAC,GAAA,IAAAC,IAAA;AAoCA,MAAMC,QAAQ,GAAGA,CAAC;EAChBC,UAAU,GAAG,EAAE;EACfC,QAAQ,GAAG,OAAO;EAClBC,YAAY;EACZC,gCAAgC,GAAG,SAAS;EAC5CC,UAAU,GAAG,CAAC;EACdC,wBAAwB,GAAG,MAAM;EACjCC,yBAAyB,GAAG,GAAG;EAC/BC,uBAAuB,GAAG,GAAG;EAC7BC,WAAW,GAAG,IAAI;EAClBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACU,CAAC,KAAK;EACnB,MAAMC,oBAAoB,GACxBV,YAAY,KAAKR,QAAQ,CAACmB,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;EAE3E,oBACEf,IAAA,CAACF,kBAAkB;IACjBI,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEU,oBAAqB;IACnCT,gCAAgC,EAAEA,gCAAiC;IACnEC,UAAU,EAAEA,UAAW;IACvBC,wBAAwB,EAAEA,wBAAyB;IACnDC,yBAAyB,EAAEA,yBAA0B;IACrDC,uBAAuB,EAAEA,uBAAwB;IACjDC,WAAW,EAAEA,WAAY;IACzBC,KAAK,EAAE,CAACK,MAAM,CAACC,WAAW,EAAEN,KAAK,CAAE;IAAA,GAC/BE,IAAI;IAAAD,QAAA,EAEPA;EAAQ,CACS,CAAC;AAEzB,CAAC;AAEDX,QAAQ,CAACiB,WAAW,GAAG,UAAU;AAEjC,MAAMF,MAAM,GAAGnB,UAAU,CAACsB,MAAM,CAAC;EAC/BF,WAAW,EAAE;IACXG,eAAe,EAAE;EACnB;AACF,CAAC,CAAC;AAEF,eAAenB,QAAQ","ignoreList":[]}

package/lib/typescript/commonjs/src/BlurVibeViewNativeComponent.d.ts

@@ -1,25 +1,15 @@
 import type { HostComponent, ViewProps } from 'react-native';
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
-/**
- * NativeComponent codegen spec for BlurVibeView.
- *
- * Type mapping (JS → Native):
- *   Float   → NSNumber (iOS) / Float (Android)
- *   string  → NSString (iOS) / String (Android)
- *   Int32   → NSNumber (iOS) / Int   (Android)
- *
- * Color props (overlayColor, reducedTransparencyFallbackColor) use
- * plain `string` — NOT the RN `ColorValue` type — because we parse
- * hex manually on both platforms for full alpha channel control.
- * Using ColorValue would trigger RN's color normalization which
- * reorders alpha bytes and breaks #RRGGBBAA format.
- */
 export interface NativeBlurVibeViewProps extends ViewProps {
     blurAmount?: Float;
     blurType?: string;
     overlayColor?: string;
     reducedTransparencyFallbackColor?: string;
     blurRadius?: Int32;
+    progressiveBlurDirection?: string;
+    progressiveStartIntensity?: Float;
+    progressiveEndIntensity?: Float;
+    noiseFactor?: Float;
 }
 declare const _default: HostComponent<NativeBlurVibeViewProps>;
 export default _default;

package/lib/typescript/commonjs/src/BlurVibeViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IAExD,UAAU,CAAC,EAAE,KAAK,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAG1C,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;wBAII,aAAa,CAAC,uBAAuB,CAAC;AAF3C,wBAE4C"}
+{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IAExD,UAAU,CAAC,EAAE,KAAK,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAG1C,UAAU,CAAC,EAAE,KAAK,CAAC;IAGnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,yBAAyB,CAAC,EAAE,KAAK,CAAC;IAClC,uBAAuB,CAAC,EAAE,KAAK,CAAC;IAGhC,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;wBAII,aAAa,CAAC,uBAAuB,CAAC;AAF3C,wBAE4C"}

package/lib/typescript/commonjs/src/BlurView.d.ts

@@ -2,22 +2,41 @@ import type { BlurViewProps } from './types';
 /**
  * BlurView — react-native-blur-vibe
  *
- * Cross-platform blur view for React Native.
- * iOS: UIVisualEffectView | Android: RenderEffect (API 31+) / RenderScript fallback
+ * Cross-platform backdrop blur.
  *
- * overlayColor works on BOTH platforms — composites a color on top of the blur,
- * exactly like CSS: backdrop-filter: blur(Xpx) + background-color: overlayColor
+ * iOS:               UIVisualEffectView — compositor-level, always smooth
+ * Android API 31+:   Dual-RenderNode + RenderEffect — GPU, no pixelation,
+ *                    supports progressive blur + noise
+ * Android API < 31:  QmBlurView RenderScript — CPU, smooth at downsample=4
  *
- * @example
+ * @example Basic frosted glass
  * <BlurView
- *   blurAmount={15}
- *   blurType="systemMaterial"
+ *   blurAmount={30}
+ *   overlayColor="#FFFFFF20"
+ *   style={StyleSheet.absoluteFill}
+ * />
+ *
+ * @example Progressive blur (fades from full blur at top to transparent at bottom)
+ * <BlurView
+ *   blurAmount={40}
  *   overlayColor="#00000040"
+ *   progressiveBlurDirection="topToBottom"
+ *   progressiveStartIntensity={1}
+ *   progressiveEndIntensity={0}
+ *   style={StyleSheet.absoluteFill}
+ * />
+ *
+ * @example Music card frosted glass with noise
+ * <BlurView
+ *   blurAmount={60}
+ *   overlayColor="#FFFFFF15"
+ *   noiseFactor={0.12}
+ *   borderRadius={16}
  *   style={StyleSheet.absoluteFill}
  * />
  */
 declare const BlurView: {
-    ({ blurAmount, blurType, overlayColor, reducedTransparencyFallbackColor, blurRadius, style, children, ...rest }: BlurViewProps): import("react/jsx-runtime").JSX.Element;
+    ({ blurAmount, blurType, overlayColor, reducedTransparencyFallbackColor, blurRadius, progressiveBlurDirection, progressiveStartIntensity, progressiveEndIntensity, noiseFactor, style, children, ...rest }: BlurViewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default BlurView;

package/lib/typescript/commonjs/src/BlurView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../../src/BlurView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,QAAQ;qHASX,aAAa;;CAiBf,CAAC;AAUF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../../src/BlurView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,QAAA,MAAM,QAAQ;gNAaX,aAAa;;CAqBf,CAAC;AAUF,eAAe,QAAQ,CAAC"}

package/lib/typescript/commonjs/src/types.d.ts

@@ -1,40 +1,258 @@
 import type { ViewProps } from 'react-native';
+/**
+ * iOS blur material style — maps directly to `UIBlurEffect.Style`.
+ *
+ * **iOS only.** Ignored on Android (Android uses `blurAmount` + `overlayColor`
+ * to control blur appearance).
+ *
+ * ### Adaptive styles (recommended)
+ * These automatically adapt to light/dark mode:
+ * - `"light"` — light frosted glass (default)
+ * - `"dark"` — dark frosted glass
+ * - `"extraLight"` — brighter than light
+ * - `"regular"` — system default material
+ * - `"prominent"` — higher contrast than regular
+ *
+ * ### Material styles (iOS 13+, adaptive)
+ * - `"systemUltraThinMaterial"` — thinnest, most transparent
+ * - `"systemThinMaterial"` — thin
+ * - `"systemMaterial"` — medium (equivalent to iOS sheet backgrounds)
+ * - `"systemThickMaterial"` — thick
+ * - `"systemChromeMaterial"` — for toolbars and navigation bars
+ *
+ * ### Light variants (iOS 13+, always light)
+ * - `"systemUltraThinMaterialLight"`
+ * - `"systemThinMaterialLight"`
+ * - `"systemMaterialLight"`
+ * - `"systemThickMaterialLight"`
+ * - `"systemChromeMaterialLight"`
+ *
+ * ### Dark variants (iOS 13+, always dark)
+ * - `"systemUltraThinMaterialDark"`
+ * - `"systemThinMaterialDark"`
+ * - `"systemMaterialDark"`
+ * - `"systemThickMaterialDark"`
+ * - `"systemChromeMaterialDark"`
+ */
 export type BlurType = 'light' | 'dark' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
+/**
+ * Direction for progressive (gradient) blur.
+ *
+ * Controls which axis the blur fades across, and which end starts at full
+ * intensity vs. transparent. Use with `progressiveStartIntensity` and
+ * `progressiveEndIntensity` for fine control.
+ *
+ * **iOS**: Uses `CAFilter variableBlur` — true per-pixel variable radius,
+ * same technique as Apple's Home Screen and Control Center. Falls back to
+ * `maskView` opacity gradient if CAFilter is unavailable.
+ *
+ * **Android API 31+**: Uses `LinearGradient`/`RadialGradient` as an alpha
+ * mask over the GPU `RenderEffect` blur layer.
+ *
+ * **Android API < 31**: Silently ignored (uniform blur is shown).
+ *
+ * | Value            | Blur starts at | Fades towards  |
+ * |------------------|----------------|----------------|
+ * | `"topToBottom"`  | Top edge       | Bottom edge    |
+ * | `"bottomToTop"`  | Bottom edge    | Top edge       |
+ * | `"leftToRight"`  | Left edge      | Right edge     |
+ * | `"rightToLeft"`  | Right edge     | Left edge      |
+ * | `"radial"`       | Center         | Outer edges    |
+ * | `"none"`         | — uniform blur — no gradient    |
+ *
+ * @example
+ * // Sticky header: full blur at top, invisible at bottom
+ * progressiveBlurDirection="topToBottom"
+ * progressiveStartIntensity={1}
+ * progressiveEndIntensity={0}
+ *
+ * @example
+ * // Bottom sheet scrim: invisible at top, full blur at bottom
+ * progressiveBlurDirection="bottomToTop"
+ * progressiveStartIntensity={1}
+ * progressiveEndIntensity={0}
+ */
+export type ProgressiveBlurDirection = 'topToBottom' | 'bottomToTop' | 'leftToRight' | 'rightToLeft' | 'radial' | 'none';
 export interface BlurViewProps extends ViewProps {
     /**
-     * Blur intensity from 0 to 100.
+     * Blur intensity. Range: `0` (no blur) to `100` (maximum blur).
+     *
+     * Approximate CSS `backdrop-filter` equivalents:
+     *
+     * | `blurAmount` | CSS equivalent          | Visual feel         |
+     * |-------------|-------------------------|---------------------|
+     * | `5`         | `backdrop-blur-sm` (4px)  | Subtle hint of blur |
+     * | `15`        | `backdrop-blur` (8px)     | Light frosted glass |
+     * | `25`        | `backdrop-blur-md` (12px) | Standard card blur  |
+     * | `50`        | `backdrop-blur-xl` (24px) | Heavy frosted glass |
+     * | `75`        | `backdrop-blur-2xl`       | Dense blur          |
+     * | `100`       | `backdrop-blur-3xl`       | Maximum blur        |
+     *
+     * **iOS**: Controls `UIViewPropertyAnimator` fraction on `UIBlurEffect`.
+     * **Android API 31+**: Maps quadratically to `RenderEffect.createBlurEffect` radius (0–25px).
+     * **Android API < 31**: Maps to `RenderScript` Gaussian radius via QmBlurView.
+     *
      * @default 10
      */
     blurAmount?: number;
     /**
-     * iOS only — maps to UIBlurEffectStyle.
-     * @default 'light'
-     */
-    blurType?: BlurType;
-    /**
-     * Overlay color composited ON TOP of the blur layer. Works on iOS AND Android.
+     * Overlay color composited **on top of** the blur layer.
      *
-     * Alpha channel controls how much blur is visible — like CSS:
-     *   backdrop-filter: blur(Xpx) + background-color: overlayColor
+     * Equivalent to CSS:
+     * ```css
+     * backdrop-filter: blur(Xpx);
+     * background-color: <overlayColor>;
+     * ```
      *
-     * "#00000000" → transparent overlay = pure blur
-     * "#00000080" → semi-transparent black tint over blur
-     * "#FFFFFFFF" → fully opaque = blur hidden
+     * The alpha channel controls how much of the blur is visible:
+     * - `"#00000000"` — fully transparent, pure blur (no tint)
+     * - `"#00000040"` — 25% black tint over blur (dark frosted glass)
+     * - `"#FFFFFF30"` — 19% white tint over blur (light frosted glass)
+     * - `"#000000FF"` — fully opaque black, blur is hidden
      *
-     * @default "transparent" on iOS | "#00000030" on Android
+     * Supported color formats: `"transparent"`, `"#RGB"`, `"#RRGGBB"`, `"#RRGGBBAA"`
+     *
+     * **Works on both iOS and Android.**
+     *
+     * @default `"transparent"` on iOS, `"#00000030"` on Android
      */
     overlayColor?: string;
     /**
-     * Fallback color when blur is unavailable.
-     * (Reduce Transparency on iOS, API < 21 on Android)
-     * @default "#F2F2F2"
+     * Fallback solid color shown when blur effects are unavailable.
+     *
+     * Shown when:
+     * - **iOS**: User has enabled *Reduce Transparency* in Accessibility settings
+     * - **Android**: Device API level < 21
+     *
+     * Should be a color that provides sufficient contrast for your UI without
+     * the blur effect. Commonly a semi-opaque version of your background color.
+     *
+     * Supported formats: `"transparent"`, `"#RGB"`, `"#RRGGBB"`, `"#RRGGBBAA"`
+     *
+     * **Works on both iOS and Android.**
+     *
+     * @default `"#F2F2F2"`
      */
     reducedTransparencyFallbackColor?: string;
     /**
-     * Android only — downscale factor for RenderScript blur path (API 21-30).
-     * Higher = faster performance, slightly softer blur. Range: 1–8.
+     * iOS blur material style.
+     *
+     * Maps to `UIBlurEffect.Style`. Controls the visual character of the blur —
+     * thickness, color tint, and how content shows through.
+     *
+     * Use adaptive styles (`"systemMaterial"`, `"light"`, `"dark"`) for apps
+     * that support both light and dark mode.
+     *
+     * **iOS only.** Ignored on Android — use `overlayColor` to tint the blur
+     * on Android.
+     *
+     * @default `"light"`
+     * @platform ios
+     */
+    blurType?: BlurType;
+    /**
+     * Android API < 31 only — RenderScript capture downsample factor.
+     *
+     * Controls how aggressively the screen is downsampled before the blur
+     * kernel is applied. Higher values are faster but produce a softer,
+     * less detailed blur.
+     *
+     * | Value | Resolution captured | Quality  | Performance |
+     * |-------|---------------------|----------|-------------|
+     * | `1`   | Full resolution     | Sharpest | Slowest     |
+     * | `4`   | 1/16 pixels (default) | Good   | Fast        |
+     * | `8`   | 1/64 pixels         | Softer   | Fastest     |
+     *
+     * On **Android API 31+** this prop is ignored — blur runs at full
+     * resolution on the GPU via `RenderEffect`.
+     *
+     * On **iOS** this prop is ignored entirely.
+     *
      * @default 4
+     * @platform android
      */
     blurRadius?: number;
+    /**
+     * Direction the blur fades across the view.
+     *
+     * Creates a gradient blur effect — full blur intensity at one edge,
+     * fading to no blur (or a different intensity) at the other.
+     * Commonly used for:
+     * - Sticky/floating headers (blur fades downward)
+     * - Bottom sheet scrims (blur fades upward)
+     * - Side drawers (blur fades horizontally)
+     * - Spotlight effects (radial, full blur at center)
+     *
+     * Use `progressiveStartIntensity` and `progressiveEndIntensity` to
+     * control the intensity at each end of the gradient.
+     *
+     * **iOS**: True per-pixel variable-radius blur via `CAFilter variableBlur`
+     * (same as Apple's Home Screen / Control Center). Falls back to opacity
+     * masking if CAFilter is unavailable.
+     *
+     * **Android API 31+**: Alpha mask gradient over GPU `RenderEffect` blur.
+     *
+     * **Android API < 31**: Silently ignored — uniform blur is shown.
+     *
+     * @default `"none"` (uniform blur)
+     * @platform ios, android (API 31+)
+     */
+    progressiveBlurDirection?: ProgressiveBlurDirection;
+    /**
+     * Blur intensity at the **start** of the gradient direction. Range: `0.0`–`1.0`.
+     *
+     * - `1.0` = full blur (at `blurAmount` intensity)
+     * - `0.0` = completely unblurred / transparent
+     *
+     * What "start" means per direction:
+     * - `"topToBottom"` → intensity at the **top** edge
+     * - `"bottomToTop"` → intensity at the **bottom** edge
+     * - `"leftToRight"` → intensity at the **left** edge
+     * - `"rightToLeft"` → intensity at the **right** edge
+     * - `"radial"` → intensity at the **center**
+     *
+     * @default 1.0
+     * @platform ios, android (API 31+)
+     */
+    progressiveStartIntensity?: number;
+    /**
+     * Blur intensity at the **end** of the gradient direction. Range: `0.0`–`1.0`.
+     *
+     * - `1.0` = full blur (at `blurAmount` intensity)
+     * - `0.0` = completely unblurred / transparent
+     *
+     * What "end" means per direction:
+     * - `"topToBottom"` → intensity at the **bottom** edge
+     * - `"bottomToTop"` → intensity at the **top** edge
+     * - `"leftToRight"` → intensity at the **right** edge
+     * - `"rightToLeft"` → intensity at the **left** edge
+     * - `"radial"` → intensity at the **outer edges**
+     *
+     * @default 0.0
+     * @platform ios, android (API 31+)
+     */
+    progressiveEndIntensity?: number;
+    /**
+     * Noise grain overlay strength — adds tactile frosted-glass texture.
+     *
+     * Overlays a subtle static noise pattern on top of the blur layer.
+     * This mimics the micro-texture of real ground glass, making digital
+     * blur feel more physical and premium.
+     *
+     * | Value  | Effect                                          |
+     * |--------|-------------------------------------------------|
+     * | `0`    | No noise — clean digital blur                   |
+     * | `0.08` | Subtle grain, barely perceptible (default)      |
+     * | `0.15` | Noticeable grain (matches Haze library default) |
+     * | `0.30` | Heavy grain — strong tactile texture            |
+     *
+     * **iOS**: Drawn as a tiled `CGImage` noise layer with `.overlay` blend mode.
+     * **Android API 31+**: Tiled `BitmapShader` drawn over the blur layer.
+     * **Android API < 31**: Silently ignored.
+     *
+     * @default 0.08
+     * @platform ios, android (API 31+)
+     */
+    noiseFactor?: number;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/commonjs/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAM/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,wBAAwB,GAChC,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,QAAQ,GACR,MAAM,CAAC;AAMX,MAAM,WAAW,aAAc,SAAQ,SAAS;IAG9C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;;;OAeG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAI1C;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IAEpD;;;;;;;;;;;;;;;OAeG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;;;;;;;;;;;;;OAeG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/lib/typescript/module/src/BlurVibeViewNativeComponent.d.ts

@@ -1,25 +1,15 @@
 import type { HostComponent, ViewProps } from 'react-native';
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
-/**
- * NativeComponent codegen spec for BlurVibeView.
- *
- * Type mapping (JS → Native):
- *   Float   → NSNumber (iOS) / Float (Android)
- *   string  → NSString (iOS) / String (Android)
- *   Int32   → NSNumber (iOS) / Int   (Android)
- *
- * Color props (overlayColor, reducedTransparencyFallbackColor) use
- * plain `string` — NOT the RN `ColorValue` type — because we parse
- * hex manually on both platforms for full alpha channel control.
- * Using ColorValue would trigger RN's color normalization which
- * reorders alpha bytes and breaks #RRGGBBAA format.
- */
 export interface NativeBlurVibeViewProps extends ViewProps {
     blurAmount?: Float;
     blurType?: string;
     overlayColor?: string;
     reducedTransparencyFallbackColor?: string;
     blurRadius?: Int32;
+    progressiveBlurDirection?: string;
+    progressiveStartIntensity?: Float;
+    progressiveEndIntensity?: Float;
+    noiseFactor?: Float;
 }
 declare const _default: HostComponent<NativeBlurVibeViewProps>;
 export default _default;

package/lib/typescript/module/src/BlurVibeViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IAExD,UAAU,CAAC,EAAE,KAAK,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAG1C,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;wBAII,aAAa,CAAC,uBAAuB,CAAC;AAF3C,wBAE4C"}
+{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IAExD,UAAU,CAAC,EAAE,KAAK,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAG1C,UAAU,CAAC,EAAE,KAAK,CAAC;IAGnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,yBAAyB,CAAC,EAAE,KAAK,CAAC;IAClC,uBAAuB,CAAC,EAAE,KAAK,CAAC;IAGhC,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;wBAII,aAAa,CAAC,uBAAuB,CAAC;AAF3C,wBAE4C"}