City-Lifeline-Cockpit/dynamic-component-service-master/openspec/changes/add-current-ripple-panel-component/proposal.md

Why

The component library already has dreamy fluid and mosaic-style ground panels, but it does not yet include a floor-ready electric ripple surface that feels like energized current flowing through a patterned panel.

The requested reference page bass-ripple.html provides the right motion language for this new component:

• pulse-driven concentric ripples
• layered standing and radial wave modes
• strong shader-based highlight response
• dense patterned surface detail

For this repository, the reusable part is the shader behavior rather than the fullscreen page shell. Pointer, touch, and click interaction from the reference should be removed, while the effect itself should be ported into a three.js ground panel component with configurable size and simplified controls.

What Changes

• Add a new currentRipplePanelComponent that renders as a ground-ready plane using three.js + shader.
• Port the reference pulse/ripple logic into component-scoped shader files instead of a fullscreen WebGL page.
• Keep the reference-style pulse frequency and strength controls, then add panel size, grid density, wire width, flow speed, ripple scale, shimmer strength, opacity, and core color controls.
• Remove click, pointer, touch, and mouse-driven ripple behavior from the port.
• Register the new component through src/dcsConfig.ts with defaults, config controls, preview metadata, and default ground placement.
• Add OpenSpec artifacts that document scope, constraints, validation, and rollback.

Capabilities

New Capabilities

• current-ripple-panel-component: Provide a shader-driven ground panel with autonomous electric ripple motion derived from the reference bass-ripple.html demo.

Modified Capabilities

• None.

Impact

• Affected code:
  • src/components/currentRipplePanelComponent.vue
  • src/shader/currentRipplePanelComponent/
  • src/dcsConfig.ts
  • public/preview/currentRipplePanelComponent.svg
• APIs:
  • Adds new component props for panel size, pulse frequency, pulse strength, grid density, wire width, ripple scale, flow speed, shimmer strength, opacity, and palette colors.
• Dependencies:
  • Reuses existing three, @tresjs/core, and three-custom-shader-material; no new dependency is required.
• Systems:
  • Adds a new component registration without modifying generic preview infrastructure files.
• Rollback strategy:
  • Remove the new registry entry from src/dcsConfig.ts, then delete the new component file, shader directory, preview asset, and change folder.