TouAI

Data Connector Illustration Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Replace the placeholder data-connector product card art with a high-fidelity interactive scene that matches the provided design, uses prepared SVG assets, and shows SVG pulse flow on hover.

Architecture: Keep the visual scene in data-connector-illustration.tsx, but move reference geometry and SVG path generation into a focused helper module so it can be validated with a lightweight node:test file. Use prepared SVG assets as components, shared bg.png/bg-dark.png as the backdrop, and render pulse animation as overlay SVG paths that appear on hover.

Tech Stack: Next.js, React, TypeScript, SVGR, SVG path animation, node:test

Task 1: Scene Geometry Helper

Files:

  • Create: components/layout-products/illustrations/data-connector-scene-logic.ts

  • Test: components/layout-products/illustrations/data-connector-scene-logic.test.mjs

  • Step 1: Write the failing test

Add a node:test file that imports the future helper module and asserts:

  • the scene reference size stays fixed

  • source node definitions exist in design order

  • generated SVG paths start at the source anchor and end at the hub/output anchor

  • Step 2: Run test to verify it fails

Run: node --test "components/layout-products/illustrations/data-connector-scene-logic.test.mjs"

Expected: FAIL because the helper module does not exist yet.

  • Step 3: Write minimal implementation

Implement:

  • reference scene dimensions

  • node/output anchor definitions

  • scaleRefX() / scaleRefY()

  • buildPulsePath() helper for cubic connector paths

  • exported path definitions for source-to-hub and hub-to-output lines

  • Step 4: Run test to verify it passes

Run: node --test "components/layout-products/illustrations/data-connector-scene-logic.test.mjs"

Expected: PASS

Task 2: Interactive Illustration Scene

Files:

  • Modify: components/layout-products/illustrations/data-connector-illustration.tsx

  • Step 1: Replace placeholder image structure

Build a scene container with:

  • shared light/dark background images

  • prepared source SVG nodes

  • a CSS hub node

  • the prepared right-out.svg output card

  • an absolutely positioned SVG line layer

  • Step 2: Add hover pulse interaction

Use local hover state and reduced-motion detection to:

  • show static base lines by default

  • render animated pulse overlays only on hover

  • keep interaction lightweight and non-blocking

  • Step 3: Tune layout to design

Match the supplied design by keeping:

  • source nodes on the left cluster

  • hub slightly right of center

  • output card on the right

  • line curvature and stagger aligned with the visual composition

  • Step 4: Verify visually and semantically

Confirm:

  • the illustration still fits the layout-products card
  • imageAlt remains exposed for the overall scene
  • no decorative node assets get duplicate accessible names

Task 3: Verification

Files:

  • Verify only

  • Step 1: Re-run helper tests

Run: node --test "components/layout-products/illustrations/data-connector-scene-logic.test.mjs"

  • Step 2: Run lint

Run: npm run lint -- "components/layout-products/illustrations/data-connector-illustration.tsx" "components/layout-products/illustrations/data-connector-scene-logic.ts"

  • Step 3: Run typecheck

Run: npm run typecheck

Data Connector Illustration Implementation Plan | Documentation