Chapter 3 — Reference · Section 12

Motion & Effects

The Digital Sanctuary lives in restraint. Motion responds to the user — it does not demand their attention. All permitted effects use 300ms ease-out or 600ms ease-out for scroll-reveal. No spring. No bounce. No loops.

Timing Reference

Effect	Duration	Easing	Property	Notes
Tonal hover lift	`300ms`	`ease-out`	`background-color`	surface-container-low → highest
Brightness on gradient	`300ms`	`ease-out`	`filter: brightness`	1.0 → 1.08 — no layout shift
Scale press	`300ms`	`ease-out`	`transform: scale`	1.0 → 0.98 on active
Opacity fade (links)	`300ms`	`ease-out`	`opacity`	1.0 → 0.70
Scroll reveal	`600ms`	`ease-out`	`opacity + translateY`	0→1, 8px→0 — single pass, never loops
Focus ring appear	`150ms`	`ease-out`	`outline`	focus-visible only, not on mouse click

Live Demos

Core Micro-interactions

Course Card Hover

surface-container-low → highest · 300ms ease-out

Module 1 · Foundations

Introduction to Systematic Theology

Dr. Elena Martinez

Hover or focus — 3-tier lift, no shadow

Button Interactions

hover: brightness(1.08) · active: scale(0.98)

Hold to see scale press

Chip Toggle

color + leading checkmark · 200ms ease-out

Click "Theology" — checkmark appears as selection changes

Navigation & List Transitions

Sidebar Active State

bg-primary/10 + text-primary · instant active, 200ms hover

Hover to see state transition

Link / Ghost Action

opacity-70 on hover · never remove color

Read the full transcript View module details Download syllabus (PDF)

Preserves color hierarchy · 300ms ease-out

Counter Badge Update

Numeric change — wrap in aria-live for screen readers

Messages4

role="status" + aria-live announces to screen readers

Entrance & Reveal Animations

Text Scroll Reveal

opacity 0→1 + translateY(8px→0) · 600ms ease-out · single pass

Chapter 3 · Soteriology

The Doctrine of Atonement

Explore the substitutionary, moral influence, and Christus Victor models of the atonement.

Card Stagger Reveal

Each card enters 80ms after the previous · 600ms each

Introduction to Greek

New

Church Fathers

In Progress

Apologetics

Completed

Focus & Overlay Effects

Focus Ring

focus-visible only · 2px outline · 2px offset · 150ms ease-out

Mouse click → no ring. Keyboard Tab → ring appears.

Glass / Frosted Overlay

bg-surface/70 + backdrop-blur(20px) · floating only

Module 2

Church History

Only for truly floating elements — never for flat surfaces

Modal Entrance

opacity 0→1 + scale(0.97→1) · 300ms ease-out

Click anywhere outside to dismiss

Loading & Skeleton States

Skeleton Card

animate-pulse · aria-busy on container

animate-pulse uses opacity 50%→100%, no layout shift

Text Skeleton

Staggered pulse for paragraphs

Stagger with animationDelay for natural loading feel

Disabled State

opacity-40 + cursor-not-allowed · WCAG exempt from contrast

Disabled chip

opacity-40 communicates intent without removing the element

Not Permitted

Parallax scrolling

Breaks the "still room" metaphor. Creates motion sickness risk and conflicts with prefers-reduced-motion intent.

Spring / bounce easing

Playful energy directly conflicts with the scholarly, contemplative voice of the platform.

Looping animations

Draws the eye persistently. The sanctuary is still — motion only responds to user action or a one-time section entry.

Accessibility — prefers-reduced-motion

All motion must respect @media (prefers-reduced-motion: reduce). Wrap scroll-reveal animations in a media query check. For transform animations, substitute a simple opacity fade (no translateY). For Tailwind utilities, use motion-reduce:animate-none and motion-reduce:transition-none modifier classes. WCAG 2.1 Success Criterion 2.3.3 (AAA) requires a mechanism to suppress non-essential motion.