City-Lifeline-Cockpit/dynamic-component-service-master/openspec/changes/add-dreamy-fluid-panel-component/specs/dreamy-fluid-panel-component/spec.md

ADDED Requirements

Requirement: Render a dreamy fluid panel in the three.js canvas pipeline

The system SHALL provide a shader-driven panel component that renders as a ground-friendly reflective surface inside the existing tresjs/three preview pipeline.

Scenario: Render default panel

• WHEN the component is rendered with default parameters
• THEN it MUST display a visible ground panel with repeating reflective cells
• AND it MUST render through three.js-side shader logic rather than DOM or CSS animation

Requirement: Preserve the reference effect's reflective cell and wave behavior

The component MUST preserve shader-friendly equivalents of the reference demo's hex-like tiling, layered wave motion, per-cell shimmer variation, and tilt-based specular flashing.

Scenario: Show reflective wave motion

• WHEN the component animation is running
• THEN the panel MUST show shifting reflective flashes that respond to layered wave motion across the surface

Scenario: Show dense tiled cells

• WHEN the panel is visible
• THEN the surface MUST read as many small reflective cells instead of a single smooth color field

Requirement: Exclude interaction-driven lighting from the first version

The first version MUST NOT implement pointer, touch, hover, or click-driven lighting behavior from the reference page.

Scenario: Ignore preview pointer activity

• WHEN a user moves or clicks the pointer in preview
• THEN the panel MUST continue its default autonomous animation without interaction-specific visual response

Requirement: Support simplified tuning controls with safe bounds

The component MUST expose a simplified control set for panel length, panel width, cell density, cell size, wave speed, wave strength, shimmer speed, sparkle intensity, opacity, and core colors, and it MUST clamp invalid values to safe ranges.

Scenario: Adjust panel density and motion

• WHEN a developer changes panel dimensions, density, or motion-related props
• THEN the panel MUST update its visible size, cell packing, and motion tempo without requiring component remount

Scenario: Clamp invalid values

• WHEN a developer passes invalid or extreme numeric values
• THEN the component MUST clamp or fallback to safe values and continue rendering

Requirement: Default to a ground-ready rectangular plane with independent dimensions

The component MUST use a plane geometry with independently configurable length and width, and default to a ground-friendly orientation appropriate for floor usage.

Scenario: Load default object transform

• WHEN the component is loaded from the service registry defaults
• THEN it MUST appear as a plane aligned for floor-like placement without requiring manual rotation to become usable

Scenario: Preserve cell proportions on a non-square panel

• WHEN a developer sets different values for panel length and panel width
• THEN the reflective cells and wave field MUST remain proportionally stable rather than appearing stretched by the changed aspect ratio

Requirement: Keep shader source component-scoped and register through the service config

Shader source code MUST be stored under src/shader/dreamyFluidPanelComponent/, and the component MUST be available through src/dcsConfig.ts with usable defaults and config controls.

Scenario: Organize shader files

• WHEN the component introduces custom shader logic
• THEN the shader source MUST be read from component-scoped vertex and fragment files instead of inline shader strings

Scenario: Load from the component registry

• WHEN the dynamic component service loads its component list
• THEN the dreamy fluid panel component MUST be available without modifying generic preview view files