feat: OnboardingArrow component for ligretto onboarding flow

[memebattle-dev]

Summary

Adds the OnboardingArrow component that dynamically draws hand-drawn curved SVG arrows between two DOM elements in the Ligretto onboarding flow. Shape is fully configurable via a builder function — the caller decides what curve to draw.

• Dynamic positioning — accepts from / to refs, tracks their position via ResizeObserver. Renders as position: absolute inside its container, so scroll moves the arrow with the layout instead of triggering recalculation
• Auto-anchors — when fromAnchor / toAnchor are omitted, each side picks the edge center closest to the other element (shortest-distance connection)
• Function-based shape API — path prop is an OnboardingArrowPathBuilder function. Five presets are shipped as importable functions (arcPath, sCurvePath, lassoPath, spiralPath, wavePath), and consumers can pass their own custom builder for one-off shapes
• Hand-drawn look — SVG feTurbulence + feDisplacementMap filter displaces the stroke into a wobbly sketchy line. No external library (rough.js etc.). roughness, bowing, seed control the jitter; seed is derived from useId so the wobble stays stable across re-renders
• Stroked chevron arrowhead — open two-line marker, not a filled triangle

API

import { OnboardingArrow, arcPath, sCurvePath } from '#shared/ui/OnboardingArrow'

<OnboardingArrow
  from={deckRef}
  to={playgroundRef}
  path={sCurvePath}         // any OnboardingArrowPathBuilder; default arcPath
  fromAnchor={undefined}    // auto-pick closest edge if omitted
  toAnchor={undefined}
  curvature={0.4}           // 0..1, how far the curve bows off the chord
  twist={1}                 // signed; magnitude scales secondary controls, sign flips side
  roughness={1}             // sketch displacement amount
  bowing={1}                // sketch wobble frequency
  seed={undefined}          // stable jitter seed; defaults to a hash of useId
  strokeWidth={2.5}
  color="white"
/>

Custom shape via function

const heart: OnboardingArrowPathBuilder = ({ from, to, chord, normal, tangent }) => {
  // return any SVG path `d` string
}

<OnboardingArrow from={a} to={b} path={heart} />

Container requirement

The component must be rendered inside a position: relative (or otherwise positioned) container that also contains the from / to elements. All anchor coordinates are computed relative to that container, which is why scrolling doesn't require a recalculation.

Files

File	Description
OnboardingArrow.tsx	Component: container wrapper + SVG + sketch filter + chevron marker
buildPath.ts	Pure path builders (arcPath, sCurvePath, lassoPath, spiralPath, wavePath), PathBuilderArgs, computeGeometry
useElementAnchorPoints.ts	Hook: ResizeObserver-driven anchor tracking, container-relative coords, auto-anchor fallback
index.ts	Named exports (component + types + preset functions)
OnboardingArrow.stories.tsx	CSF3 stories: one per preset, CustomBuilder, AutoAnchors, MultipleArrows, Playground with live controls

What's next

• Wire into OnboardingPage.tsx with correct from/to targets per Figma layout
• Tune curvature / twist per onboarding step to match Figma silhouettes (Vector 5 1064:209, Vector 6 1077:741, Vector 7 1077:742)

Closes #594

🤖 Generated with Claude Code

[github-actions]

Storybook

• 📚 Preview Storybook
• 🔍 Chromatic build