Sentiment Tint Shift
Each row's edge and wash ease from neutral toward the tone the classifier detected.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Sentiment Tint Shift
*
* Classification landing on a queue of messages. Each row's edge and
* wash ease from neutral toward the tone the model detected, one rowAbout this pattern
Classification arriving on a queue that someone is already reading. Rather than popping a badge onto every row at once, each row's left rail and background wash ease from neutral toward its detected hue, one row after the next, and the label chip follows only after the colour has already said it. Because color-mix() results cannot be interpolated, the shift is a crossfade between two static layers rather than an animated colour — the neutral rail stays put and the sentiment rail fades in over it. Nothing scales, nothing springs, no row flashes.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
Conversations pick up a tone colour on the row edge once assessed.
Related patterns
- Regenerate SwapThe old answer dissolves upward while the new one rises into the space it left.
- Semantic Search RerankFirst-pass hits travel to their meaning-ranked places while each relevance bar grows to its score.
- Translate CrossfadeCopy hands over to its translation while the block eases to the new text's height.