twosugar 3679945744 feat(migrate): port inspira animation components to React workspace ...

Sprint 2 §S9. Ports 18 vue animation components (1462 lines) from
`docs/.vitepress/theme/components/inspira/` to React inside a new
`packages/inspira` workspace published as `@longbridge/openapi-inspira`.
Adds `motion` (v13.x — API-compatible with the ^11 the plan
suggested; `motion-v` in vue → `motion/react` in React).

Files created (18 components + barrel):
- packages/inspira/package.json — bun workspace, motion dep
- packages/inspira/tsconfig.json
- packages/inspira/src/index.ts — barrel
- packages/inspira/src/AnimatedBeam.tsx (from 190-line vue)
- packages/inspira/src/BentoGrid.tsx (18)
- packages/inspira/src/BentoGridItem.tsx (32)
- packages/inspira/src/BlurReveal.tsx (54)
- packages/inspira/src/BorderBeam.tsx (61)
- packages/inspira/src/BoxReveal.tsx (47)
- packages/inspira/src/ColourfulText.tsx (73)
- packages/inspira/src/FlickeringGrid.tsx (256)
- packages/inspira/src/GlowBorder.tsx (59)
- packages/inspira/src/GlowingEffect.tsx (94)
- packages/inspira/src/InteractiveGridPattern.tsx (70)
- packages/inspira/src/InteractiveHoverButton.tsx (64)
- packages/inspira/src/Marquee.tsx (73)
- packages/inspira/src/Meteors.tsx (57)
- packages/inspira/src/MorphingText.tsx (100)
- packages/inspira/src/NumberTicker.tsx (75)
- packages/inspira/src/ShimmerButton.tsx (75)
- packages/inspira/src/TextHighlight.tsx (64)

Migration decisions:
- `motion/react` in place of `motion-v` — same underlying framer-motion
- CSS keyframes from Vue `<style scoped>` re-emitted as `<style>` JSX
  tags with `inspira-` prefix to prevent collisions
- `propsRef` pattern in FlickeringGrid + MorphingText to avoid stale
  closures in RAF loops
- `useElementVisibility` + `useTransition` (@vueuse/core) replaced with
  native `IntersectionObserver` + `requestAnimationFrame`
- Fixed 2 type errors uncovered by check: duplicate borderRadius in
  GlowBorder inline styles; canvas/ctx narrowing through nested
  closures in FlickeringGrid

Modified:
- root package.json — @longbridge/openapi-inspira workspace dep +
  motion dep

Verified:
- astro check: 0 errors (132 files)
- 8 canonical URLs return 200

Deferred: rewiring homepage sections to use inspira components lands
alongside §S10 composite polish; §S9 scope is producing the package.

Closes Sprint 2 §S9.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2026-08-19 10:12:38 +08:00

..

src

feat(migrate): port inspira animation components to React workspace

2026-08-19 10:12:38 +08:00

package.json

feat(migrate): port inspira animation components to React workspace

2026-08-19 10:12:38 +08:00

tsconfig.json

feat(migrate): port inspira animation components to React workspace

2026-08-19 10:12:38 +08:00