Motion

ScreenReveal.

A second layer, without losing your place.

Workspace

A new perspective.

Accent

Glow intensity

Reduced motion

tsx

import { ScreenReveal, Button } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <ScreenReveal
      isOpen={true}
      frontContent={<p>Main screen</p>}
      revealContent={<Button>Quick action</Button>}
    />
  );
}

Installation

bash

npm install luminescent

Import luminescent/style.css once at your application root. The example above uses the same package implementation as Storybook.

Variants and states

Use the preview controls to explore the supported variants, sizes, disabled/loading states and reduced motion. Controls appear only where the component exposes the corresponding prop. Theme and glow apply to every component.

Controlled and uncontrolled state

State contract: isOpen (controlled). Omit the controlled prop to let the component own its initial state; supply a value and callback when your application owns it. Native uncontrolled fields and state-backed form controls participate in form reset. Controlled state must be reset by the application.

API reference

Generated from the source TypeScript interfaces. Native attributes, className, style, aria-* and data-* also pass through to the documented element. Import ScreenRevealProps from the package for the full inherited contract.

Prop	Type	Details
`isOpen`required	`boolean`	Optional unless marked required.
`frontContent`required	`React.ReactNode`	Optional unless marked required.
`revealContent`required	`React.ReactNode`	Optional unless marked required.
`revealDirection`	`RevealDirection`	Optional unless marked required.
`revealAmount`	`number`	Optional unless marked required.
`frontCornerRadius`	`number`	Optional unless marked required.

Accessibility and keyboard

The closed reveal layer is hidden and cannot receive focus. Provide an external, labeled toggle with aria-expanded. The front layer remains available; this is a visual layout, not a modal.

Keep labels meaningful and test application-level contrast, focus order and screen-reader output. See the accessibility guide for composition requirements.

Theme customization

tsx

import { LuminescentProvider, ScreenReveal, Button } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <LuminescentProvider theme="light" accent="violet" glow="subtle">
      <ScreenReveal
        isOpen={true}
        frontContent={<p>Main screen</p>}
        revealContent={<Button>Quick action</Button>}
      />
    </LuminescentProvider>
  );
}

Switch between light and dark in the preview, or open the playground for a larger workspace. Custom CSS variables can override spacing, color, typography and effects.