Patterns from production · Layout that holds

The hero draws its own places

The first screen shows this site, not the network’s wallpaper.

The hero draws its own placesLive demo

Try the controls to see the rule.

The rule

A home’s first picture says what this site is: an orbit of its own places, or its own live numbers, every node a link. A generic picture shared by many sites says nothing.

Tokens used

  • motion.duration.slow360ms
  • motion.easing.standardcubic-bezier(.2,.7,.2,1)
  • color.accent.basetheme.accent
  • size.tap44px
  • space.md12px
  • motion.duration.base260ms

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

SwiftUI
struct OvOwnPlaces: 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.slow=360ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), color.accent.base=theme.accent, size.tap=44px, space.md=12px, motion.duration.base=260ms
Compose
@Composable
fun OvOwnPlaces(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.slow=360ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), color.accent.base=theme.accent, size.tap=44px, space.md=12px, motion.duration.base=260ms