CRT Power-Off

The picture flares, collapses to a bright line, shrinks to a dot and fades; switching on runs it backwards. For closing panels, ending sessions, game over and 'lights out'.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add crt-off

Usage

Example

import { CRTOff } from "@/components/galactrex/crt-off";

<CRTOff on={screenOn}>
  <GameScreen />
</CRTOff>

Source

Installs to components/galactrex/crt-off.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The content.
`on`	`boolean`	—	False switches it off; true switches it on.
`duration`	`number`	`0.55`	Seconds for the switch.
`onDone`	`(on: boolean) => void`	—	Called when the switch finishes.
`className`	`string`	—	Extra classes for the outer element.

Variants

Power off. Close a panel with a click.
Power on. Start a screen from a dot.

Accessibility

Switched-off content is aria-hidden and takes no pointer events.

Motion and reduced motion

Keyframes of scale, opacity and brightness only.
Reduced motion: a plain fade.