feat: enhance mobile UI with animations and improved DAG visualization

[jumski]

Enhanced Mobile UI and Interaction Experience

This PR improves the mobile user experience with smoother animations, better event visualization, and more intuitive interactions:

• Added transition animations using Svelte's fade and fly effects for smoother UI transitions
• Created a new DAGNode component with integrated pulse animation for better workflow visualization
• Improved the mobile code panel with fade transitions and tap-to-dismiss functionality
• Enhanced the explanation panel with clearer input/output displays and more concise step descriptions
• Redesigned the welcome modal with clearer explanations and better layout
• Added a mobile-friendly events bar that shows event badges and expands to a full event stream view
• Improved the pulse dot animation with a new "exploding" effect for better visual feedback
• Updated the DAG visualization to use the new node component and improved layout
• Optimized the worker configuration with faster polling intervals

The changes focus on making the demo more intuitive on mobile devices while maintaining the desktop experience, with special attention to animation timing, touch interactions, and visual feedback.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c1942ba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[jumski]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• chore: make tweaks to the demo copy, ui, colors, modals #361
• chore: fix demo code review commends #360
• fix: demo ci issues #359
• feat: add Plausible Analytics integration to demo app #342
• fix: improve mobile UI and reduce maxAttempts from 3 to 2 #341
• chore: remove test_flow_worker and add missing anon permissions #340
• feat: redesign UI layout with pulse dots and events panel #337
• feat: demo add synth events #332
• feat: add PR preview deployments for demo app #330
• feat: enhance mobile UI with animations and improved DAG visualization #329 👈 (View in Graphite)
• feat: demo rename slugs #328
• feat: demo improve modal copy #327
• feat: demo - split code block to separate #326
• feat: enhance CodePanel with mobile sections and responsive layout #325
• refactor: improve layout structure and responsiveness of the demo page #324
• style: improve UI layout and add descriptive annotations to components #323
• refactor: update testimonial data with new testimonials and correct author/source info #322
• feat: demo - fix the lint errors #319
• chore: setup demo deployments and small tweaks #318
• feat: add code panel and step selection with explanation UI #312
• feat: implement DAG visualization and debug panel with flowState props #311
• feat: implement article flow with parallel steps and retry logic #291
• feat: implement pgflow vertical slice with anonymous access #290
• feat: add SvelteKit demo app foundation #289
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• merge:queue - adds this PR to the back of the merge queue
• hotfix:queue - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit c1942ba

Command	Status	Duration	Result
nx affected -t verify-exports --base=79ee03a813...	✅ Succeeded	<1s	View ↗
nx affected -t build --configuration=production...	✅ Succeeded	28s	View ↗
nx affected -t lint typecheck test --parallel -...	✅ Succeeded	17s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-11 14:46:13 UTC

[github-actions]

🔍 Preview Deployment: Website

✅ Deployment successful!

🔗 Preview URL: https://pr-329.pgflow.pages.dev

📝 Details:

• Branch: feat-demo-copy-and-explanation-tweaks
• Commit: c136ab7f73078c1ac36ddf18b5f215d11d0bac32
• View Logs

_Last updated: _