Loading…

Shader Transition

beta

Transitions a frame between two states under a full-frame WebGL reveal — one raw-WebGL engine and sixteen presets (aperture, chroma, prism, SDF blobs and circles, noise, wipe, stripes, spiral…).

Effects & motion
3 files
No extra npm packages
Accessibility notes
Renders with WebGL

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add shader-transition

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ShaderTransition } from "@/components/ui/shader-transition";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Keyed
Custom Tokens

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ShaderTransition>

Prop	Type	Default
`accent` Colour token of the glow on the moving front. Default "primary".	`string`	`"primary"`
`accentSecondary` Colour token the preset's sheen tints the cover with. Default: accent mixed into surface.	`string`	—
`active` Two-state API: which state is shown. Changing it runs the transition.	`boolean`	`false`
`duration` Run length in ms at --motion-scale 1. Defaults to the preset's.	`number`	—
`from` Two-state API: shown while `active` is false.	`ReactNode`	—
`onRest` Called when a run settles, however it ran.	`() => void`	—
`onStart` Called when a run starts.	`() => void`	—
`onSwap` Called when the incoming state becomes visible (the midpoint, or at once without motion).	`() => void`	—
`preset` The reveal pattern. Default "noise".	`ShaderTransitionPresetName`	`"noise"`
`surface` Colour token of the cover — the surface behind the content. Default "background".	`string`	`"background"`
`to` Two-state API: shown while `active` is true.	`ReactNode`	—
`transitionKey` Keyed API: changing the key runs the transition to the new children.	`string \| number`	—
`children`	`ReactNode`	—

Plus every attribute of <div> except children.

Accessibility

Both states are real DOM; the shader only paints a decorative, aria-hidden cover over the frame. While a run is in progress the outgoing state is aria-hidden and inert, the incoming state is in the accessibility tree from the first frame, and focus inside the outgoing state moves to the incoming one. The root is aria-busy while running. Reduced motion (OS setting or --motion-scale 0) swaps instantly; without WebGL, or if the context is lost mid-run, the states cross-fade instead.

Quality

Measured from the source and its tests at build time.

All scores

8/9

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — fails
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

accent

Colour token of the glow on the moving front. Default "primary".

string

"primary"

accentSecondary

Colour token the preset's sheen tints the cover with. Default: accent mixed into surface.

string

—

active

Two-state API: which state is shown. Changing it runs the transition.

boolean

false

duration

Run length in ms at --motion-scale 1. Defaults to the preset's.

number

—

from

Two-state API: shown while active is false.

ReactNode

—

onRest

Called when a run settles, however it ran.

() => void

—

onStart

Called when a run starts.

() => void

—

onSwap

Called when the incoming state becomes visible (the midpoint, or at once without motion).

() => void

—

preset

The reveal pattern. Default "noise".

ShaderTransitionPresetName

"noise"

surface

Colour token of the cover — the surface behind the content. Default "background".

string

"background"

to

Two-state API: shown while active is true.

ReactNode

—

transitionKey

Keyed API: changing the key runs the transition to the new children.

string | number

—

children

ReactNode

—