Predictive UI

The best interface is one that's already prepared for what you need. Ferni anticipates, not just reacts.

Preloading Patterns

Skeleton Loading

  • Shimmer speed: 1.5s
  • Shimmer angle: -20deg
  • Pulse opacity: 0.04 → 0.08
  • Pulse duration: 2s

Ghost Content

Placeholder shapes that hint at incoming content structure.

Text Line height: 1em, width: 60-90%
Avatar 40px circle
Card 16:9 aspect ratio
Button 120px × 44px pill

Progressive Reveal

Content appears in priority order with staggered timing.

1 Heading
2 Primary Action
3 Body
4 Metadata
5 Secondary Actions

Stagger delay: 50ms per item · Animation: fadeSlideIn 300ms ease-out

Anticipation

UI prepares for likely next actions.

Hover Intent

Detect hover trajectory to preload content

  • Detection radius: 100px
  • Velocity threshold: 50px/s
  • Preload delay: 100ms
  • Visual hint: opacity 0.02, scale 1.005

Scroll Anticipation

Preload content in scroll direction

  • Look ahead: 2 viewports
  • Velocity multiplier: 1.5×
  • Preload threshold: 0.5 viewports

Time-Based Preload

Load content based on typical usage patterns

Morning calendar, weather, priorities
Evening reflections, tomorrow-prep, wind-down
Weekend weekly-review, personal-goals, relationships

Contextual Preload

Load based on detected intent

After goal discussion goal-tracker, milestone-history
After emotional conversation mood-insights, journal
After scheduling talk calendar, reminders

Proactive Suggestions

Hey, want to check in on your morning routine?

Suggestion Bubble

  • Max width: 280px
  • Padding: 12px 16px
  • Border radius: 16px
  • Background: glass-regular
  • Entry: bubbleIn 400ms spring

Nudge

  • Arrow size: 8px
  • Animation: nudgePulse 2s infinite
  • Max occurrences: 3
  • Cooldown: 1 hour

Spotlight

  • Glow radius: 20px
  • Glow opacity: 0.15
  • Animation: spotlightPulse 3s infinite
  • Dim background: 0.4 opacity

UI Adaptation

UI adapts to user patterns over time.

Frequency Boost

Frequently used features become more prominent

  • Threshold: 5 uses / week
  • Position: elevated
  • Size: 1.1×
  • Show shortcut: true

Time Optimization

Features optimize for when they're most used

  • Track usage time
  • Show at optimal time
  • Hide when irrelevant

Sequence Detection

Detect common action sequences

  • Min length: 2 actions
  • Confidence: 0.7
  • Suggest next: true
  • Create shortcut: after 10 occurrences

Loading Stages

Loading states that feel alive, not stuck.

Instant < 100ms
Show nothing

Too fast to show anything

Fast 100-300ms
Subtle pulse

Brief acknowledgment

Normal 300ms-1s
Skeleton

Standard loading

Slow 1-5s
Skeleton + progress

Show we're working

Extended > 5s
Skeleton + progress + message

"Still working..." → "Almost there..." → "Thanks for waiting..."

Intelligence Personalization

UI adapts to individual preferences over time.

Information Density

Minimal
  • Spacing: 1.5×
  • Font: 1.1×
  • Items/view: 3
Balanced
  • Spacing: 1×
  • Font: 1×
  • Items/view: 5
Dense
  • Spacing: 0.8×
  • Font: 0.95×
  • Items/view: 8

Interaction Speed

Deliberate
  • Animation: 0.8×
  • Hold duration: 1.2×
  • Tooltip delay: 400ms
Balanced
  • Animation: 1×
  • Hold duration: 1×
  • Tooltip delay: 300ms
Quick
  • Animation: 1.3×
  • Hold duration: 0.7×
  • Tooltip delay: 150ms

Visual Complexity

Calm
  • Particles: none
  • Gradients: subtle
  • Animations: minimal
Balanced
  • Particles: light
  • Gradients: moderate
  • Animations: standard
Rich
  • Particles: full
  • Gradients: vibrant
  • Animations: expressive