feat(market-insights): animated gradient border for Market Insights entry card#28047
Conversation
…radient Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
…stroke Made-with: Cursor
Made-with: Cursor
- Add onSlideStart to SlidingTextCarousel; wire entry card border key bump - Extend border trail opacity fade-in end fraction - Cover onSlideStart in unit tests Made-with: Cursor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
…p ci] Made-with: Cursor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 3 total unresolved issues (including 2 from previous reviews).
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
- Use smoothstep for trail opacity fade-in - Tune fade-in/fade-out timing (plateau before fade-out) Made-with: Cursor
Made-with: Cursor
🔍 Smart E2E Test Selection⏭️ Smart E2E selection skipped - base branch is not main or a release branch (base: TSA-324-mrkt-insights-card-ui-update) All E2E tests pre-selected. |
|
|
✅ E2E Fixture Validation — Schema is up to date |
22d0899
into
TSA-324-mrkt-insights-card-ui-update
Description
Adds an animated gradient border to the Market Insights entry card on Asset Overview: a dashed stroke that sweeps around the card with a soft trailing gradient aligned to the path. The carousel that cycles trend descriptions now exposes
onSlideStartso the border animation retriggers when each slide begins (not only when it finishes). Constants and easing were tuned for a smoother trail (fade-in/fade-out fractions, sweep path end). IncludesSlidingTextCarousel, polyline helpers for the rounded rect, skeleton/test updates, and wiring fromAssetOverviewContent.Changelog
CHANGELOG entry: Improved the Market Insights card on the asset overview with an animated gradient border that highlights the card as trend descriptions rotate.
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
N/A
After
N/A
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
UI-only changes but with non-trivial
react-native-reanimated/SVG worklet math and new polyline sampling that could impact animation correctness/performance across devices.Overview
Adds a new sweeping dashed border animation to the Market Insights entry card, using a trail-aligned SVG gradient (tail→head) and tuned sweep/opacity behavior (elastic trail length, eased timing, configurable fade-in/hold/fade-out).
Refactors the border implementation to compute a rounded-rect polyline + arc-length lookup (
roundedRectBorderPolyline.ts) so the gradient endpoints track the moving dash segment, and centralizes shared chrome gradient tokens inconstants.tsfor the border, title, sparkle, and arrow.Updates the carousel/card wiring so the border re-triggers when each description slide starts (
onSlideStart), switches the card wrapper toTouchableOpacity+ innerViewfor viewport tracking, hardens analytics to only includedigest_idwhen present, and adjusts/adds tests for the new layout/slide-start behavior.Written by Cursor Bugbot for commit ba52e22. This will update automatically on new commits. Configure here.