fix: correct ComponentPropsProvider usage in 8 background demos

[KhaledSaeed18]

fix: correct ComponentPropsProvider usage in 8 background demos

Problem

Several background demo components had incorrect or incomplete ComponentPropsProvider usage, causing two distinct bugs:

Bug 1: Reset button visible but non-functional

ComponentPropsProvider accepts a resetProps prop that wires the reset button in TabsLayout. Some demos either passed it under the wrong name (reset= instead of resetProps=) or used a completely wrong interface (value={{ ... }}), causing the context to fall back to its default no-op resetProps: () => {}. The reset button would appear (because hasChanges was passed correctly) but clicking it did nothing and URL state was never cleared.

Bug 2: "Copy Prompt" ignores user customizations

ComponentPropsProvider also accepts props and defaultProps which are consumed by TabsLayout's "Copy Prompt" feature to inject the user's current customized values into the usage code snippet. Without these, the copied AI prompt always contained the static default usage example, silently ignoring any prop changes the user had made.

Bug 3: Dead code (useForceRerender unused)

Three demos declared useForceRerender and passed forceRerender either to the provider (which doesn't accept it) or nowhere at all. The key={key} was applied to the component but since forceRerender was never called, the key never changed, making both the hook and the key entirely dead code.

---

How to Reproduce

Example 1: Reset button appears but does nothing

URL: https://www.reactbits.dev/backgrounds/silk

1. Open the Silk background demo
2. Adjust any slider or color (e.g. change Speed or Color)
3. The Reset button appears in the top-right toolbar
4. Click Reset
5. Expected: props reset to defaults, URL params cleared, component remounts
6. Actual: nothing happens, button click is silently ignored, customized values persist

Root cause: ComponentPropsProvider was receiving reset={resetProps} (wrong prop name) instead of resetProps={resetProps}, so the context fell back to its default no-op function.

Example 2: Reset button not shown at all

URL: https://www.reactbits.dev/backgrounds/ripple-grid

1. Open the Ripple Grid background demo
2. Adjust any slider or color
3. Expected: Reset button appears in the toolbar
4. Actual: Reset button never appears

Root cause: ComponentPropsProvider was receiving a value={{ ... }} object (wrong interface entirely), so hasChanges and resetProps were both undefined in the context, the button never rendered and had no handler.

---

Changes

SilkDemo.jsx

• Fixed reset={resetProps} → resetProps={handleReset} (wrong prop name)
• Added missing props={props} and defaultProps={DEFAULT_PROPS}
• Added handleReset combining resetProps() + forceRerender() so the component remounts on reset (required because Silk uses key={key} to remount its WebGL context on every prop change)
• Added useCallback import

RippleGridDemo.jsx

• Fixed completely wrong value={{ props, updateProp, resetProps, hasChanges, forceRerender, DEFAULT_PROPS }} interface — replaced with correct individual props
• Removed dead useForceRerender import, hook call, and key={key} on the component (none of the onChange handlers called forceRerender, so key never changed)

GridScanDemo.jsx

• Added missing props={props} and defaultProps={DEFAULT_PROPS}
• Removed forceRerender={forceRerender} from provider (unrecognized prop, silently ignored)
• Removed dead useForceRerender import, hook call, and key={key} on the component

PlasmaDemo.jsx

• Added missing props={props} and defaultProps={DEFAULT_PROPS}
• Removed forceRerender={forceRerender} from provider (unrecognized prop, silently ignored)
• Removed dead useForceRerender import, hook call, and key={key} on the component

GradientBlindsDemo.jsx

• Added missing props={props} and defaultProps={DEFAULT_PROPS}

LetterGlitchDemo.jsx

• Added missing props={props} and defaultProps={DEFAULT_PROPS}

LiquidChromeDemo.jsx

• Added missing props={props} and defaultProps={DEFAULT_PROPS}

GridDistortionDemo.jsx

• Added missing props={props} and defaultProps={DEFAULT_PROPS}

---

Root Cause

All affected demos were missing one or more required props on ComponentPropsProvider. The correct interface is:

<ComponentPropsProvider
  props={props}
  defaultProps={DEFAULT_PROPS}
  resetProps={resetProps}
  hasChanges={hasChanges}
>

SilkDemo additionally needed resetProps to call forceRerender() because the Silk component relies on key remounting to apply changes to its WebGL context, matching the pattern already used in SplashCursorDemo.

---

Checklist

• Reset button works and clears URL state on all 8 demos
• "Copy Prompt" reflects user's customized prop values on all 8 demos
• No dead imports or unused variables
• No unrecognized props passed to ComponentPropsProvider
• All changes follow existing codebase patterns
• No new abstractions or refactors introduced, minimal targeted fixes only