Patterns from production · Streams that hold still

Fade in new rows

Only newly added rows enter; updates do not replay the entrance.

Fade in new rowsLive demo

Try the controls to see the rule.

The rule

New rows may fade in briefly after they are inserted. Existing rows stay still; reduced motion removes the entrance animation.

Tokens used

  • motion.duration.fast180ms
  • motion.duration.reduced0ms
  • motion.easing.standardcubic-bezier(.2,.7,.2,1)
  • size.tap44px
  • space.md12px
  • motion.duration.base260ms

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvFadeIn: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: motion.duration.fast=180ms, motion.duration.reduced=0ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), size.tap=44px, space.md=12px, motion.duration.base=260ms
Compose
@Composable
fun OvFadeIn(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: motion.duration.fast=180ms, motion.duration.reduced=0ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), size.tap=44px, space.md=12px, motion.duration.base=260ms