Showcase company logos in a better way

[niraj8]

The homepage showcases logos for companies that use styled-components in their websites with an animation

There are 70+ logos that run across the screen, below is a link to the original issue by @jfhector that explains why this is not ideal.

https://github.com/styled-components/styled-components/issues/3278

Let's discuss how can we better showcase these logos on the homepage

[jfhector]

Thanks @niraj8 .

To meet the web content accessibility guidelines 2.1 level AA

You'd need to:

• either not animate this thing automatically
• or make it easy for people to stop the animation.

Here's the relevant success criterion, with more guidance.

To avoid people with vestibular disorders feel sick

The minimum you need to do is disable the animation within @media (prefers-reduced-motion) { ... }.

For example:

.animation {
  animation: <your animation as it currently is>
}

/* Remove or reduce the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
  .animation {
    animation-name: none;
  }
}

More details about why animations like this make people sick

‘Vestibular disorder’ is like car sickness, but triggered by motions on a screen that your brain does not expect. Even mild parallax effects can trigger that.

I’m mildly sensitive to ‘vestibular disorder’ triggers. I feel mildly car sick a little bit sick after looking at this for a few seconds. But other people really do feel quite sick when seeing animations like this. Here’s another example.

More guidance on @media (prefers-reduced-motion) { ... }

Operating systems let users say that they prefer ‘reduced motion’. Then, it’s a website’s responsibility to honour that preference. (Here’s how Apple does it.)

I have ‘reduced motion’ toggled on my computer’s accessibility preferences. But those logos still animate.

Here's a good article summarising everything about prefers-reduced-motion. But there really isn't much to it. My pseudo-code example above says it all.

[lukyth]

@jfhector Thank you for the write up! I really learned new thing about accessibility from it 😍 Also, I do feel a bit sick looking at that section as well.

Let's discuss how can we better showcase these logos on the homepage

I assume we still want every logo to be shown, what do you think about making it scroll horizontally instead of animating it? Or create a new page for this since there're tons of logo?

[niraj8]

We have a good showcase page, a selection(~10) of logos should be good on the homepage What do you think?

[lukyth]

That sounds good to me. Perhaps something like this?

USED BY FOLKS AT logo1 logo2 logo3 logo4 logo5 logo6 logo7 logo8 logo9 logo10 and more! TO CREATE BEAUTIFUL WEBSITES LIKE THESE the rest is same as current

And the logo will keep wrapping for responsive, it'll probably shown in one line for wide desktop.

I'm also thinking, since there's a showcase page already, how about removing the "USED BY FOLKS AT" section entirely?

[niraj8]

I am in favour of keeping some logos on the homepage and adding a link to the showcase right below this section. I'll raise a pull with the layout in the your comment and let's see how it looks in the preview build.

[xit4]

Hey everyone, I created PR #879 based on @lukyth 's last comment. It behaves like this: Screencast from 10-21-2022 05:08:26 PM.webm

1. As you can see I did not add the "and more!" part because there is a Discover More button a few pixels below
2. I centered "USED BY FOLKS AT" which was not centered before
3. I limited the logos to the first 10 more pageranked websites

I am available for changes and/or fixes. Just let me know what you think

[AntoineKM]

I saw your @xit4 PR but it is not ideal, the best would be to keep the animation for those who have the option activated and to put this display for those who do not have it.