Flow Presentation & Motion

Custom flows open as modals. Presentation controls their size and layout, appearance helps them fit your app, and an optional screen transition controls how one step gives way to the next.

Choose a transition

Omit screenTransition or use { kind: 'none' } for immediate screen replacement. The four built-in animations need only a kind:

Transition	Effect	Default duration
`slide-horizontal`	Slides between steps from side to side	500 ms
`slide-vertical`	Slides between steps vertically	500 ms
`fade`	Crossfades between steps	350 ms
`scale-fade`	Combines a subtle scale change with a fade	450 ms

presentation: {
  kind: 'modal',
  size: 'default',
  columns: 1,
  screenTransition: { kind: 'slide-horizontal', durationMs: 500 },
}

durationMs is optional and accepts an integer from 100 through 1,000 milliseconds. Forward and Back navigation use their corresponding directions. The first screen appears immediately because there is no outgoing screen to animate.

Respect reduced motion

When a user prefers reduced motion, BugDrop replaces screens immediately even when a transition is configured. You do not need to add a separate media-query implementation.

Add custom motion

Use kind: 'custom' when the built-ins do not fit. Custom motion declares separate forward and backward frames, plus an optional duration and easing. Each direction specifies where the incoming screen starts (enterFrom) and where the outgoing screen ends (exitTo). The released frame controls are opacity, horizontal and vertical translation, and scale.

Keep custom motion short and restrained, and verify both directions. The Flow Examples page compares every built-in and a custom configuration before you choose one; local development also enables interactive previews.

Match your app

Use size, columns, theme, accentColor, and density to align the flow with its host application. These declarative controls are the supported styling boundary; custom flows do not expose arbitrary class names, CSS injection, or inline mounting.

Exact reference

The tables below are the exact released presentation, appearance, content, and screen-transition contracts for BugDrop v1.56.3, including custom motion and reduced-motion behavior.

Presentation and appearance

Released presentation and appearance controls
Capability	Released contract
presentation properties	Required`kind` Optional`sizecolumnsscreenTransition`
presentation.kind	`modal`
presentation.size	`compactdefaultwide`
presentation.columns	`12`
appearance properties	RequiredNone Optional`themeaccentColordensity`
appearance.theme	`lightdarkauto`
appearance.density	`compactcomfortable`
content properties	RequiredNone Optional`successTitlesuccessMessagecancelLabel`

Screen transitions

Released screen transition controls
Capability	Released contract
kind	`noneslide-horizontalslide-verticalfadescale-fadecustom`
built-in kind	`slide-horizontalslide-verticalfadescale-fade`
easing	`standardlinearease-inease-outease-in-out`
direction	`forwardbackward`
custom motion	Required`enterFromexitTo` OptionalNone
custom frame	RequiredNone Optional`opacitytranslateXtranslateYscale`
immediate replacement	`transition omittedkind noneinitial screenreduced motion`

Required screen transition branches
Capability	Released contract
none	Required`kind` OptionalNone
builtIn	Required`kind` Optional`durationMs`
custom	Required`kindforwardbackward` Optional`durationMseasing`

Transition duration defaults
Capability	Released contract
slide-horizontal default	`500ms`
slide-vertical default	`500ms`
fade default	`350ms`
scale-fade default	`450ms`
custom default	`500ms`

durationMs must be an integer from 100 to 1000 milliseconds. Custom motion defaults to standard easing. On Back navigation, the configured backward motion is used; built-in slides also follow navigation direction. Reduced-motion preference replaces screen motion immediately.

Custom transition frame bounds
Capability	Released contract
opacity	0 to 1; default 1
translateX	-200 to 200; default 0
translateY	-200 to 200; default 0
scale	0.5 to 1.5; default 1

Compare these choices in Flow Examples, preview them interactively in local development, then match the rest of the widget in Styling.