Motion & Haptics

GospeLib's motion design has three simultaneous qualities: springy for micro-interactions, instant for content reveals, and choreographed for panel transitions. Haptics are used in exactly three places — never for decoration.

Motion Character

Quality	When	Example
Springy	Small element responses	Highlight pulse, bookmark confirmation, tab switch
Instant	Content reveals (≤80ms)	Lexicon entry appears on word tap — no ceremony
Choreographed	Panel transitions	Study panel expands, constellation zooms, bottom sheet rises

Easing Curves

Token	Value	Usage
motion.easing.spring	cubic-bezier(0.34, 1.56, 0.64, 1)	Micro-interactions, active states
motion.easing.smoothInOut	cubic-bezier(0.4, 0, 0.2, 1)	Panel transitions (Material standard)
motion.easing.decelerate	cubic-bezier(0.0, 0.0, 0.2, 1)	Elements entering the screen
motion.easing.accelerate	cubic-bezier(0.4, 0.0, 1, 1)	Elements leaving the screen

Duration Scale

Token	Duration	Usage
motion.duration.instant	≤80ms	Content reveals, lexicon bubbles, inline expansions
motion.duration.fast	120ms	Micro-interactions, state changes, highlights
motion.duration.standard	220ms	Panel slides, tab transitions, sheet expansions
motion.duration.deliberate	350ms	Constellation zoom, full-screen mode transition
motion.duration.slow	500ms	Onboarding, first-time educational animations

Specific Motion Behaviors

Text Highlight Creation

Color washes in from the tap point outward, like ink spreading into paper.

• Duration: 180ms
• Easing: spring

Bookmark Double-Tap

Small bookmark icon materializes at the verse number, scales up to 1.3× then settles at 1.0×, followed by a soft ripple.

• Duration: 260ms total

Inline Lexicon Expansion

Content below the tapped word pushes down as the bubble expands from 0 height. No fade — purely a height spring animation.

• Duration: 200ms
• Easing: spring

Constellation Zoom (Graph View)

Camera pulls back from passage level. Verse text shrinks into a node. Surrounding nodes materialize with staggered 20ms delay per node.

• Duration: 350ms
• Easing: smoothInOut

Bottom Sheet Rise

Sheet enters via decelerate curve from below. Handle appears first, then content reveals.

• Duration: 280ms
• Easing: decelerate

Chapter Navigation (Page Turn)

Horizontal slide. Old chapter exits left via accelerate, new chapter enters right via decelerate.

• Duration: 220ms
• Accompanied by subtle haptic

Command Palette Open

Appears from center-top with slight scale (0.96 → 1.0) and fade (0 → 1).

• Duration: 160ms
• Easing: spring

Reduced Motion

All animations respect prefers-reduced-motion (iOS/Android system setting + in-app toggle):

Normal	Reduced Motion
Spring animations	Instant state change
Directional transitions	Crossfade (opacity only)
Constellation zoom	Cut with crossfade
Page turn slide	Crossfade

See Accessibility for full details.

Haptics

Haptics are used in exactly three places. They are never used for decorative or gamification purposes.

Pattern 1: Gesture Recognition Confirmation

Property	Value
Type	Selection haptic (light)
Trigger	Long-press recognition moment on verse number
Timing	Exactly at the gesture threshold crossing
Strength	Light

Pattern 2: Action Confirmation

Property	Value
Type	Impact haptic (medium)
Trigger	Highlight created, bookmark set, note saved
Timing	On action completion, not on button press
Strength	Medium

Pattern 3: Chapter Navigation

Property	Value
Type	Page turn haptic (light)
Trigger	Chapter boundary crossed during scroll/swipe
Timing	At the frame when new chapter header becomes visible
Strength	Light — barely perceptible, like a physical page

note

No haptics during reading. No haptics for navigation between app sections. No haptic feedback on taps.

Related Pages

• Design Tokens — motion easing and duration token values
• Reader Experience — page turn and chrome animations
• Knowledge Graph — constellation zoom animation
• Accessibility — reduced motion support