primer / brand

React components and Primitives for GitHub marketing websites
https://primer.style/brand
MIT License
56 stars 30 forks source link

[Feature request] Story scroll river #619

Open nsolerieu opened 1 week ago

nsolerieu commented 1 week ago

Problem

As we scale the F2 template we noticed the usage of the river as a primary utility to present value propositions and visuals. The repetition make the page vertical flow very heavy and doesn't offer the variety needed to fit the often large features sets. As we have established a framework to scale our UI demos, we are looking for way to improve the reading/scroll experience for the user and open possibilities for our PMM and Writers.

Typical page featuring many stacked rivers

Suggested solution

Adopting an sticky element that update on scroll would allow to extend the scroll narrative while reducing visual load. The visual would sty fixed to the same position while the text update.

Desktop

https://github.com/user-attachments/assets/21aee994-8461-4a25-8d65-317a358431ad

Mobile

https://github.com/user-attachments/assets/950df1fe-7e4e-49c2-bfa6-c4c68da19a9c

Fallback: static (regular) rivers

Urgency

This request come from the solution page template project where we are expecting lots of river and complex, industry specific narrative that could use this upgrade. Project is expected to ship mid-late july

nsolerieu commented 1 week ago

Here are some additional specification (circa 2023)

These have been reviewed by accessibility:

In order to accommodate people with cognitive or visual impairment that are unable to visually process information because of complex visual motion we offer the ability to disable the stack effect and simply collapse the section into rows.

To optimize for harm reduction (for user that know that have an issue with fast motion perception) we suggest to enable the collapsed mode for users with prefers-reduced-motion active.

Includes:

Image


@jesussandreas any extra notes/comment from the recent copilot workspace ship? Especially around accessibility?

nsolerieu commented 6 days ago

Added further animation specs here

Image