fix: correct ComponentPropsProvider usage in 8 background demos

src/demo/Backgrounds/GradientBlindsDemo.jsx

@@ -154,7 +154,7 @@ const GradientBlindsDemo = () => {
   );
 
   return (
-    <ComponentPropsProvider hasChanges={hasChanges} resetProps={resetProps}>
+    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} hasChanges={hasChanges} resetProps={resetProps}>
       <TabsLayout>
         <PreviewTab>
           <Box position="relative" className="demo-container" h={500} p={0} overflow="hidden">

src/demo/Backgrounds/GridDistortionDemo.jsx

@@ -73,7 +73,7 @@ const GridDistortionDemo = () => {
   );
 
   return (
-    <ComponentPropsProvider resetProps={resetProps} hasChanges={hasChanges}>
+    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
       <TabsLayout>
         <PreviewTab>
           <Box position="relative" className="demo-container" h={500} p={0} overflow="hidden" ref={containerRef}>

src/demo/Backgrounds/GridScanDemo.jsx

@@ -10,7 +10,6 @@ import PreviewSlider from '../../components/common/Preview/PreviewSlider';
 import PreviewSwitch from '@/components/common/Preview/PreviewSwitch';
 import PreviewColorPickerCustom from '../../components/common/Preview/PreviewColorPickerCustom';
 
-import useForceRerender from '../../hooks/useForceRerender';
 import useComponentProps from '../../hooks/useComponentProps';
 import { ComponentPropsProvider } from '../../components/context/ComponentPropsContext';
 
@@ -51,8 +50,6 @@ const GridScanDemo = () => {
     showPreview
   } = props;
 
-  const [key, forceRerender] = useForceRerender();
-
   const propData = useMemo(
     () => [
       { name: 'enableWebcam', type: 'boolean', default: 'false', description: 'Enable face tracking via webcam.' },
@@ -103,12 +100,11 @@ const GridScanDemo = () => {
   );
 
   return (
-    <ComponentPropsProvider resetProps={resetProps} hasChanges={hasChanges} forceRerender={forceRerender}>
+    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
       <TabsLayout>
         <PreviewTab>
           <Box position="relative" className="demo-container" h={500} p={0} overflow="hidden">
             <GridScan
-              key={key}
               lineThickness={lineThickness}
               gridScale={gridScale}
               lineJitter={lineJitter}

src/demo/Backgrounds/LetterGlitchDemo.jsx

@@ -75,7 +75,7 @@ const LetterGlitchDemo = () => {
   );
 
   return (
-    <ComponentPropsProvider resetProps={resetProps} hasChanges={hasChanges}>
+    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
       <TabsLayout>
         <PreviewTab>
           <Box position="relative" className="demo-container" h={500} overflow="hidden" p={0}>

src/demo/Backgrounds/LiquidChromeDemo.jsx

@@ -82,7 +82,7 @@ const LiquidChromeDemo = () => {
   );
 
   return (
-    <ComponentPropsProvider resetProps={resetProps} hasChanges={hasChanges}>
+    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
       <TabsLayout>
         <PreviewTab>
           <Box position="relative" className="demo-container" h={500} p={0} overflow="hidden">

src/demo/Backgrounds/PlasmaDemo.jsx

@@ -13,7 +13,6 @@ import PreviewSelect from '../../components/common/Preview/PreviewSelect';
 import PreviewColorPickerCustom from '../../components/common/Preview/PreviewColorPickerCustom';
 import OpenInStudioButton from '../../components/common/Preview/OpenInStudioButton';
 
-import useForceRerender from '../../hooks/useForceRerender';
 import useComponentProps from '../../hooks/useComponentProps';
 import { ComponentPropsProvider } from '../../components/context/ComponentPropsContext';
 
@@ -33,8 +32,6 @@ const DEFAULT_PROPS = {
 const PlasmaDemo = () => {
   const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
   const { color, speed, direction, scale, opacity, mouseInteractive } = props;
-  const [key, forceRerender] = useForceRerender();
-
   const propData = useMemo(
     () => [
       {
@@ -78,12 +75,11 @@ const PlasmaDemo = () => {
   );
 
   return (
-    <ComponentPropsProvider resetProps={resetProps} hasChanges={hasChanges} forceRerender={forceRerender}>
+    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
       <TabsLayout>
         <PreviewTab>
           <Box position="relative" className="demo-container" h={500} p={0} overflow="hidden">
             <Plasma
-              key={key}
               color={color}
               speed={speed}
               direction={direction}

src/demo/Backgrounds/RippleGridDemo.jsx

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { CodeTab, PreviewTab, TabsLayout } from '../../components/common/TabsLayout';
 import { Box, Flex } from '@chakra-ui/react';
 
-import useForceRerender from '../../hooks/useForceRerender';
 import useComponentProps from '../../hooks/useComponentProps';
 import { ComponentPropsProvider } from '../../components/context/ComponentPropsContext';
 
@@ -52,8 +51,6 @@ const RippleGridDemo = () => {
     mouseInteractionRadius
   } = props;
 
-  const [key, forceRerender] = useForceRerender();
-
   const propData = useMemo(
     () => [
       {
@@ -133,12 +130,11 @@ const RippleGridDemo = () => {
   );
 
   return (
-    <ComponentPropsProvider value={{ props, updateProp, resetProps, hasChanges, forceRerender, DEFAULT_PROPS }}>
+    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={resetProps} hasChanges={hasChanges}>
       <TabsLayout>
         <PreviewTab>
           <Box position="relative" className="demo-container" h={500} overflow="hidden">
             <RippleGrid
-              key={key}
               enableRainbow={enableRainbow}
               gridColor={gridColor}
               rippleIntensity={rippleIntensity}

src/demo/Backgrounds/SilkDemo.jsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { CodeTab, PreviewTab, TabsLayout } from '../../components/common/TabsLayout';
 import { Box, Flex } from '@chakra-ui/react';
 
@@ -32,6 +32,11 @@ const SilkDemo = () => {
 
   const [key, forceRerender] = useForceRerender();
 
+  const handleReset = useCallback(() => {
+    resetProps();
+    forceRerender();
+  }, [resetProps, forceRerender]);
+
   const propData = useMemo(
     () => [
       {
@@ -69,7 +74,7 @@ const SilkDemo = () => {
   );
 
   return (
-    <ComponentPropsProvider reset={resetProps} hasChanges={hasChanges}>
+    <ComponentPropsProvider props={props} defaultProps={DEFAULT_PROPS} resetProps={handleReset} hasChanges={hasChanges}>
       <TabsLayout>
         <PreviewTab>
           <Box position="relative" className="demo-container" h={500} overflow="hidden" p={0}>