Skip to content

Conversation

anegg0
Copy link
Contributor

@anegg0 anegg0 commented Jun 28, 2025

This PR introduces Lidia, a new interactive diagram system for the Arbitrum documentation that enables readers to explore complex technical concepts through click-to-morph visualizations.

Summary

Lidia is a way to present multi-layered technical information by allowing users to click on diagram elements to progressively reveal deeper levels of detail. The feature includes smooth crossfade
transitions between diagram states and intuitive navigation controls.

Changes

  • New documentation page: Added /for-devs/lidia-interactive-diagrams.mdx with usage guide and examples
  • React components:
    • LidiaDiagram.tsx: Main component handling diagram rendering and interactions
    • useLidiaState.ts: Custom hook for managing diagram state transitions
    • Type definitions and component exports
  • Styling: Added lidia.css with animations and responsive design
  • Features:
    • Click-to-navigate between diagram states
    • Smooth crossfade transitions between SVG images
    • Hover tooltips for guidance
    • Back button navigation
    • Configurable through JSON files

Copy link

vercel bot commented Jun 28, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
arbitrum-docs ✅ Ready (Inspect) Visit Preview Jun 28, 2025 1:22am

@anegg0 anegg0 mentioned this pull request Jul 1, 2025
@anegg0 anegg0 marked this pull request as draft July 1, 2025 01:26
@anegg0
Copy link
Contributor Author

anegg0 commented Jul 16, 2025

Switching Lidia to using ReactFlow. Find the next iteration in this PR: #2442

@anegg0 anegg0 closed this Jul 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant