Add stream of consciousness live activity ticker

[GiftedGiftB]

closed #443

Description

This PR implements the stream-of-consciousness live activity ticker for the GrantFox FWC26 campaign. It introduces a new LiveTicker component displayed on the marketing landing page, which streams realistic mock Stellar blockchain events in an infinite marquee loop. It also includes comprehensive reduced-motion support for accessibility.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Performance improvement
• Refactoring (no functional changes)
• Style/UI changes
• Test updates
• CI/CD changes
• Security improvements

Related Issues

Closes #443

Changes Made

Files Modified

• tailwind.config.ts (Lines 127-133) - Added marquee keyframe animation.
• app/components/LiveTicker.tsx - [NEW] Created the core live ticker UI component with mock event data and animations.
• app/(marketing)/page.tsx (Lines 35-37) - Integrated <LiveTicker /> below the Navbar.
• app/components/__tests__/LiveTicker.test.tsx - [NEW] Test suite for ticker rendering and accessibility toggles.

Key Changes

• Live Ticker Animation: Added an infinite marquee CSS animation that continuously scrolls recent platform events. Uses two identical internal blocks seamlessly looping at exactly -100%.
• Accessibility & Reduced Motion: Automatically queries (prefers-reduced-motion: reduce). If enabled, the component gracefully falls back to a static banner showing the single latest event, wrapping it in a role="region" for screen readers instead of an infinite aria-hidden ticker.

Testing

• Unit tests added/updated
• Integration tests added/updated
• Manual testing completed
• Cross-browser testing (if applicable)
• Mobile responsiveness tested (if applicable)
• Accessibility testing completed
• Performance testing (if applicable)

Test Coverage

• New code is covered by tests
• Existing tests still pass
• Test coverage meets project standards

Screenshots/Videos

Minimum screenshots for UI/design PRs

• Desktop default state
• Mobile default state
• One stressed state: error, empty, loading, success, validation, open menu, or open modal
• Focus-visible screenshot for the primary interactive element (required when focus behavior changed)
• Open overlay screenshot for modal, drawer, popover, select, or date picker (required when applicable)
• Quick actions closed and open states (required for toolbar, FAB, or bottom-sheet action changes)
• Keyboard-open mobile screenshot and desktop sticky state (required for sticky action panel changes)

Before

(Omitted - Marketing page previously did not have a live events ticker banner)

After

(Omitted - See live environment for the animated marquee component spanning below the Navbar)

Pre-submission Checklist

Code Quality

• Code follows project style guidelines
• Self-review completed
• Code is self-documenting
• No console errors or warnings
• No linting errors
• No TypeScript errors (if applicable)

Functionality

• All tests pass
• Feature works as expected
• No breaking changes introduced
• Performance impact assessed

Documentation

• README updated (if applicable)
• Code comments added where necessary
• API documentation updated (if applicable)
• Changelog updated (if applicable)

Security & Accessibility

• Security considerations addressed
• Accessibility standards met
• No sensitive data exposed
• Input validation implemented

Breaking Changes

Breaking Changes:

• None

Migration Steps:

• N/A

Additional Notes

Dependencies

• No new dependencies added
• Dependencies updated (list changes)
• Security vulnerabilities addressed

Performance Impact

• No performance impact
• Performance improved (Utilizes hardware-accelerated CSS animations rather than JS intervals)
• Performance impact documented

Browser/Device Support

• Tested on Chrome
• Tested on Firefox
• Tested on Safari
• Tested on Edge
• Tested on mobile devices

Labels

• feature
• ui/ux
• frontend

Reviewers

• Frontend team review
• Backend team review (if applicable)
• Design team review (if applicable)
• Security review (if applicable)

[vercel]

@GiftedGiftB is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@GiftedGiftB Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits