feat(visuals): animated "live trace" visual for appmap.io#2366
Draft
evlawler wants to merge 1 commit into
Draft
Conversation
Add a self-contained, framework-free animated AppMap trace as a custom element <appmap-live-trace> for the marketing site. A request flows through the application's call graph: nodes light up as they become active, glowing particles travel the call edges, and edges stay lit with AppMap's pink -> purple -> blue brand gradient, then fade and loop. - No build step or dependencies; embeds via one <script> + a custom element, sized with CSS. - Three scenarios: web request, background job, and Navie analysis. - Honors prefers-reduced-motion (static render) and pauses when scrolled out of view. - Brand palette sourced from packages/components scss variables. - Lives outside packages/* so it does not affect the monorepo build. Includes a demo index.html (hero + all scenarios) and a preview image. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXq1KwfYNSPNM7a9kqNZho
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
2 participants
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.
What
A new active visual for the appmap.io website: a self-running, framework-free animated AppMap trace, packaged as a custom element
<appmap-live-trace>.A request flows through the application's call graph — nodes light up as they become active, glowing particles travel the call edges, and edges stay lit with AppMap's signature pink → purple → blue brand gradient as the trace completes, then the whole thing fades and loops.
Why it fits a marketing site
<script>+ a custom element, sized with CSS. Embeds anywhere (including via<iframe>).packages/components/src/scss/_variables.scss(near-black backgrounds, brand gradient, syntax-value accent colors), so it matches the rest of the site.scenarioattribute:web(aGET /orders/142request),background(a Sidekiq billing job), andnavie(Navie surfacing an N+1 from a trace).prefers-reduced-motion(renders a static completed trace) and pauses the animation loop when scrolled out of view.Contents
Lives outside
packages/*, so it does not participate in the Yarn workspace and does not affect the monorepo build, lint, or typecheck.Verification
Rendered headless via the pre-installed Chromium (Playwright) and screenshotted — no console/page errors. Demo page renders the hero plus all three scenarios.
Notes / open questions
appmap-examples, or Storybook stories inpackages/components), or different scenarios/copy.preview-hero.png(~700KB) is included as a reference; can drop it if you'd rather not carry the binary.🤖 Generated with Claude Code
https://claude.ai/code/session_01LXq1KwfYNSPNM7a9kqNZho
Generated by Claude Code