Motion with a reason

Motion starts with meaning

Drever does not ask authors to choose easing curves or entrance presets. Authors describe the narrative relationship; the active theme decides how that relationship moves.

Focus, replace, and compare

These intents use direct Step children:

<MotionGroup intent="focus" flow="block">
  <Step>Frame the question.</Step>
  <Step>Reveal the evidence.</Step>
  <Step>Make the decision.</Step>
</MotionGroup>

Use flow="block" for vertical reading order and flow="inline" for a horizontal pipeline or comparison. Flow provides meaning to the theme; it does not create layout.

Stagger without adding navigation stops

Put stagger inside one Step. One advance reveals the complete group:

<Step>
  <MotionGroup intent="stagger" flow="inline">
    <div>Parse</div>
    <div>Compile</div>
    <div>Verify</div>
    <div>Ship</div>
  </MotionGroup>
</Step>

If the audience needs to discuss an item separately, author separate Steps instead.

Step renders a real DOM wrapper. When a reveal contains absolute scene content, give those descendants a stable positioned and explicitly sized or inset local wrapper. Do not use an otherwise unpositioned Step as their full-canvas coordinate system: transform and individual translate can establish a containing block, then rebase the children when the property changes between pending, active, and complete states.

Continuity across slides

Give the same explicit name to the same object—or to clearly corresponding states of one narrative object—on adjacent slides:

<MotionGroup intent="continuity" name="decision-card">
  <DecisionCard />
</MotionGroup>

Carry meaning, not arbitrary resemblance. Shared color or shape alone is not continuity, but two different objects may connect when the story makes their relationship unambiguous and their shared features and endpoints are deliberately authored. Keep the captured shell's size, aspect ratio, typography, and media crop deliberate. Changing prose usually belongs outside the shared bitmap.

The non-negotiable principles

1. Start with a concrete claim, evidence, and decision. Motion cannot rescue abstract copy.
2. Motion explains focus, order, replacement, comparison, or continuity. Otherwise omit it.
3. Give each moment one primary motion and at most one quieter supporting cue. Steps, native transitions, kinetic type, video, 3D, and third-party animation share that budget.
4. Give each spatial payload one owner: Step reveal, navigation continuity, or local live-DOM motion. Never stack a Step entrance and child keyframe on the same object.
5. Move the smallest meaningful object and only the properties that express its change. Background, title, controls, and page chrome stay put.
6. Keep recurring geometry, wrapping, paint, and shadow lists stable.
7. Never clip a surface whose shadow or glow must remain visible.
8. Mark the active Step without dimming an entire completed Step below readable contrast.
9. Give the theme a coherent transition vocabulary, not one effect on every edge. Direct cuts, reading-edge reveals, precise state commits, and quiet dissolves may coexist when each has a different narrative job.
10. Make broad card walls deterministic. A non-linear reveal may feel organic, but its order, endpoints, and export state remain authored.
11. Review intermediate frames, backward navigation, reduced motion, speaker, document, and export.

The eight official design studies deliberately use different motion voices. The same intent can feel calm in Basic, editorial in Editorial, precise in Studio, handwritten in Fieldnote, directional in Atlas, accountable in Ledger, cinematic in Cinema, or assembled in Construct.

Plan a role, not an entrance

A key object can begin completely below the canvas, enter when it becomes evidence, dock at a quiet edge while the explanation takes focus, and retire when it stops helping. Reveal a fragment only when the fragment itself creates useful anticipation; never leave a meaningless clipped sliver. Use only the beats the story needs. A browser frame that moves from demonstration to low-contrast context explains a changing narrative role; four unrelated entrance effects do not.

Keep one motion owner per element. Use native continuity between slides or local live-DOM motion inside one slide, never both at once.

Time the idea, not the effect

When the audience must notice a before state, let it settle before directing the eye. Choose delay and duration from the reading job and the preceding transition instead of applying a fixed one-second rule. Quiet motion should remain perceptible at presentation distance.

Animate one semantic payload at a time. Multiple techniques are valid only when they form a sequence with one focal object at a time. If presentation navigation owns a reveal, use a Step instead of an inline button; keep direct manipulation for ideas that actually require interaction.

Declare authored CSS keyframes only while the audience slide is active: [data-drever-slide][data-slide-state="active"]. For a Step-owned cue, also require [data-drever-step][data-step-state="active"] and define its settled complete style separately. Inactive slides remain mounted, so an animation on the base element can finish before the audience arrives.

Make every moving indicator honest

A cursor or focus reticle needs a recognizable hotspot that lands exactly on a meaningful target. A route signal is different: keep its center on the path and make it reach the real endpoint. Put the marker and milestones in one local positioned wrapper, derive stops from its grid or percentages, and avoid pixel travel measured from another container.

Start live metrics when the audience slide becomes active, keep the number and chart on the same deterministic frame, and pause them when that surface deactivates. Use stable tabular number geometry and one accessible summary instead of announcing every interpolated value. Reduced-motion, document, speaker, and export surfaces receive the intentional final state immediately.

Reserve space for the largest transformed and painted frame of an animation. Expanded 2D or 3D layers must never cross a track, label, or adjacent copy; clipping the overlap is not a repair. Give a full-canvas scene one stable positioned slide-relative root with explicit inset: 0. Contain paint at that outer boundary while preserving enough inner space for every required shadow, glow, filter, outline, and transformed frame. Background nodes remain lower contrast, move slowly and asynchronously, and never resemble the active cursor or signal.

Bring focused capabilities

Prefer native CSS and small local React for simple motion. When the story needs a focused capability, this non-exhaustive list offers optional starting points:

• Technique and component references: React Bits
• General animation runtimes: Motion and GSAP
• Spatial and 3D: Spline, Three.js, and React Three Fiber
• Vector and state animation: Rive and Lottie

These projects are examples, not Drever dependencies, presets, endorsements, or partnerships. Choose by capability rather than name. Before copying code, assets, or runtimes, inspect current official documentation, source, license, bundle behavior, and export constraints, then adapt the technique to the deck's subject-led design.

If the deck claims a capability, prove it with a focused working example rather than a library name, logo, or link. Let the external tool own only the boundary that needs it while Drever keeps navigation, history, notes, and delivery.

Every live integration needs accessible final meaning, keyboard behavior, deterministic loading and export readiness, reduced-motion output, and a stable poster or authored fallback when document or export surfaces should not run it. Loop only when ongoing change is the subject, use a deterministic sequence, pause it outside the active audience surface, and author a stable final state. Keep continuous backgrounds and 3D subordinate to the claim.