City-Lifeline-Cockpit/dynamic-component-service-master/openspec/changes/add-vertigo-halo-component/tasks.md

1. Change Scaffold

• 1.1 Create a new OpenSpec change for vertigoHaloComponent.
• 1.2 Document that the component ports vertigo.html into a square shader plane without page-level interaction.

2. Component Implementation

• 2.1 Add src/components/vertigoHaloComponent.vue with safe prop clamping, shader setup, and time-driven uniform updates.
• 2.2 Add src/shader/vertigoHaloComponent/panel.vert and panel.frag for the vertigo tunnel halo effect.
• 2.3 Remove mouse drag, touch drag, and other page-level interaction from the ported behavior.

3. Service Integration

• 3.1 Register the new component in src/dcsConfig.ts with defaults, object transform, and config controls.
• 3.2 Add a preview asset for the new component under public/preview/.

4. Validation

• 4.1 Run npm run build and confirm the new component integrates cleanly.
• 4.2 Keep existing panel components untouched while adding the new component.

5. Fine Tuning

• 5.1 Fade the visible rings out before the square border becomes visible.
• 5.2 Add a gradientSpeed control with a -1 to 1 range for reversible gradient flow.
• 5.3 Make gradientSpeed drive the radial ring expansion and shrink direction instead of only changing color flow.