Skip to content

[Motion] Price-tick flash in the order book and last price #873

Closed
#996
Closed
[Motion] Price-tick flash in the order book and last price#873
#996
Assignees
Jaydbrown
Labels
Stellar WaveIssues in the Stellar wave programenhancementNew feature or requesthelp wantedExtra attention is neededphase:9-uxpriority:medium

Description

@IbrahimIjai
IbrahimIjai
opened on Oct 15, 2026

Summary

No flash/highlight when a level or the last price changes; add a 300 ms green/red background flash with reduced-motion opt-out.

Status: confirmed in the codebase.

Acceptance criteria

  • Uses the motion tokens in packages/ui/src/styles/globals.css (durations/easings/springs); no raw duration-*, ease-[…] or transition-all
  • Honours prefers-reduced-motion (and the in-app setting, once it exists): instant or opacity-only fallback
  • Animates transform/opacity only (or justifies otherwise); no layout shift; smooth at 60 fps on a mid-range phone (check with DevTools Performance + CPU 4× throttle)
  • Interruptible: reversing the interaction mid-animation continues from the current state, with no jump or replay
  • Keyboard and screen-reader behaviour unchanged or improved; focus never lost
  • PR includes a before/after screen recording (desktop and mobile)

Part of the 2026-10-15 UX/quality review of main @ 4c5cf1d. Contributors: read AGENTS.md and CONTRIBUTING.md. The full commit gate must pass, with no eslint-disable, .skip, or lowered thresholds. Comment here before starting so work isn't duplicated.

Activity

  1. IbrahimIjai
    added
    enhancementNew feature or request
    help wantedExtra attention is needed
    priority:medium
    phase:9-ux
    on Oct 15, 2026
  2. drips-wave
    added
    Stellar WaveIssues in the Stellar wave program
    on Oct 16, 2026

  3. Ay-obami commented on Oct 18, 2026

    @Ay-obami
    Ay-obami
    on Oct 18, 2026 – with Drips Wave
    Contributor

    @Ay-obami has applied to work on this issue as part of the Stellar Wave Program's 10th wave.

    I'll like to work on this issue

    ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ay-obami to this issue.

  4. Jaydbrown commented on Oct 18, 2026

    @Jaydbrown
    Jaydbrown
    on Oct 18, 2026 – with Drips Wave
    Contributor

    @Jaydbrown has applied to work on this issue as part of the Stellar Wave Program's 10th wave.

    hello maintainer assign these isssues to me

    ℹ️ Repo Maintainers: To accept this application, review their application or assign @Jaydbrown to this issue.

  5. Ghoost-404 commented on Oct 18, 2026

    @Ghoost-404
    Ghoost-404
    on Oct 18, 2026 – with Drips Wave

    @Ghoost-404 has applied to work on this issue as part of the Stellar Wave Program's 10th wave.

    hello, i'd like to work on this issue please

    ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ghoost-404 to this issue.

  6. IbrahimIjai
    assigned
    Jaydbrown
    on Oct 18, 2026

  7. drips-wave commented on Oct 18, 2026

    @drips-wave
    drips-waveBot
    on Oct 18, 2026 – with Drips Wave

    Congratulations, @Jaydbrown! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on October 22, 2026.

    🧑‍💻 @Jaydbrown: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

    Warning

    When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

    🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

    🌊 Happy Wave 🌊

  8. Jaydbrown commented on Oct 18, 2026

    @Jaydbrown
    Jaydbrown
    on Oct 18, 2026
    Contributor

    Resolved in #996:

    • Added .so4-flash-up-overlay (green using --color-long) and .so4-flash-down-overlay (red using --color-short) to packages/ui/src/styles/globals.css.
    • Configured 300ms duration using design token var(--duration-slow) and easing var(--ease-out).
    • Added reduced-motion support honoring @media (prefers-reduced-motion: reduce) and :root[data-reduced-motion="true"].
    • Integrated tick flash into DepthLadder.tsx:
      • DepthRow levels flash on size/price updates.
      • SpreadRow reference price flashes on tick up / tick down.
      • Animate opacity only on absolute overlays with zero layout shift, fully interruptible, with unaffected keyboard/screen-reader accessibility.
    • Added comprehensive unit tests in DepthLadder.test.tsx verifying both level size and reference price flash overlays.
  9. IbrahimIjai
    closed this as completedin #996on Oct 19, 2026

  10. drips-wave commented on Oct 19, 2026

    @drips-wave
    drips-waveBot
    on Oct 19, 2026 – with Drips Wave

    This issue has been completed by @Jaydbrown as part of the Stellar Wave Program's 10th Wave 🥳

    😎 @Jaydbrown: You earned 200 Points for completing this issue! Once the Wave's rewards are finalized, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

    🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programenhancementNew feature or requesthelp wantedExtra attention is neededphase:9-uxpriority:medium

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions