feat: interactive Aspire topology architecture diagram#16
Merged
Conversation
…re page Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…glow pulse Staggered row entrance via IntersectionObserver, flowing dashed arrows on hover, pulsing glow on active nodes, gradient active fill, animated cluster border, smooth panel transitions with Vue Transition, and hover pre-state. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Arrows now only highlight outgoing connections from the active node — clicking ThreadAgent no longer lights up incoming arrows from entry points. Removed the animated gradient background fill on active nodes. Incoming arrows show at reduced opacity instead of fully highlighted. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Complete visual redesign inspired by hex1b.dev: - Stripped all subtitle text from boxes, single clean labels only - Added ambient flowing particles along all connection lines - Added breathing glow ring around ThreadAgent (central hub) - Animated dashed cluster border drifts continuously - Canvas background with rounded border frames the diagram - More spacious layout with generous whitespace - Rounder corners (rx=10-12), thinner borders (1px) - Staggered entrance animation for all rows - Description panel with fade transitions - All detail moved to hover panel, diagram stays clean Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…Tabs Complete redesign as horizontal Aspire topology: Clients (left) → Orleans Cluster with 5 agent groups (center) → Resources (right), all inside an Aspire AppHost border. Replaces BehaviorTabs on homepage. - Flowing particles along all 6 connection lines - Animated dashed cluster border - Staggered entrance animation per column - Hover glow with pulsing drop-shadow - Click to lock/unlock, description panel with transitions - Directional arrow highlighting (outgoing only) - Canvas background framing the diagram - Works in light and dark mode via CSS variables Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<BehaviorTabs />on the homepage with<ArchitectureDiagram />/guide/architecturepage as wellAnimations
Interaction
Files
website/.vitepress/theme/components/ArchitectureDiagram.vuewebsite/.vitepress/theme/index.tswebsite/index.mdwebsite/guide/architecture.mdTest plan
npm run buildinwebsite/passes🤖 Generated with Claude Code