Theme Reveal

Soft Circle, Dissolve and upward Curtain appearance transitions with an independent full-page theme API.

LIVE PREVIEWYour changes update liveLocal renderer

Tweaks

Theme Reveal settings

Motion

Reveal style

Soft Circle grows from the trigger; Dissolve fades; Curtain lifts the outgoing appearance upward.

Traversal duration in milliseconds. Soft Circle uses 900; Dissolve 500; Curtain 760.

Easing

Shared timing curve used by panel and full-page snapshots.

Origin

Circle origin: pointer/element center, panel/page center, or custom percentage coordinates.

Soft Circle feather width as a fraction of the mask. Zero gives a sharp edge.

State

Initial theme

Disabled

Accessible name

Geometry

Width of the visible pill in CSS pixels.

Visible pill height; native hit area remains at least 44px high.

Gap between the selected circular thumb and track edge.

Moon and sun icon size, bounded by the thumb interior.

Line weight of the original moon and sun marks.

Minimum standalone canvas height; fills a taller receiving host.

Palette

Light canvas

Flat receiving canvas in light appearance.

Dark canvas

Flat receiving canvas in dark appearance.

Light track

Pill track in light appearance.

Dark track

Pill track in dark appearance.

Light thumb

Selected circular thumb in light appearance.

Dark thumb

Selected circular thumb in dark appearance.

Light icons

Moon and sun line color in light appearance.

Dark icons

Moon and sun line color in dark appearance.

Light border

Fine pill outline in light appearance.

Dark border

Fine pill outline in dark appearance.

Focus accent

Visible keyboard focus ring; blue is optional and does not tint the canvas.

Your settings travel with the component.
Preview size and pause stay here.

Theme Reveal v1.0.0

Package 1.0.0 · Independent componentMIT licensed

Install & usageReact component

API reference27 properties

Usage notesComponent documentation

Rendering & accessibilityLocal renderer