Skip to content

Conversation

@janepie
Copy link
Member

@janepie janepie commented Sep 29, 2025

deactivates the icon animation and the placeholder movement when reduce-motion OS setting is set

CSS feature and how to activate it described here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Copy link
Member

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice idea! I think it's better to just remove the animation in this case and treat the assistant icon like all other icons.

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion: reduce) {
.assistant-icon:hover .star1 {
animation: dissolve 1s linear;
Copy link
Member

@marcoambrosini marcoambrosini Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
animation: dissolve 1s linear;
animation: none;
opacity: 1;

}
.assistant-icon:hover .star2 {
animation: dissolve 1s linear;
Copy link
Member

@marcoambrosini marcoambrosini Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
animation: dissolve 1s linear;
animation: none;
opacity: 1;

}
.assistant-icon:hover .star3 {
animation: dissolve 1s linear;
Copy link
Member

@marcoambrosini marcoambrosini Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
animation: dissolve 1s linear;
animation: none;
opacity: 1;

Comment on lines 89 to 93
@keyframes dissolve {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@keyframes dissolve {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}

@janepie janepie changed the title Feat: respect reduced-motion settings for Assistant icon Feat: respect reduced-motion settings Sep 29, 2025
@janepie
Copy link
Member Author

janepie commented Sep 29, 2025

Nice idea! I think it's better to just remove the animation in this case and treat the assistant icon like all other icons.

Done! Also deactivated the placeholder animation in the Chat UI

Copy link
Member

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants