Classified Overlay
TOP SECRET overlay with diagonal red/black hazard stripes. Slides away violently when unlocked to reveal children content beneath. Used to gate sensitive information.
[SRC]tsx
1import { ClassifiedOverlay } from "@mdrbx/nerv-ui";
Interactive Demo
[i]INTERACTIVE
Click the DECRYPT button to toggle the overlay on and off.
TOGGLE DEMOinspection frame
live inspectionframe-01
CLASSIFIED DATA — EYES ONLY
CLEARANCE: LEVEL 7
DEAD SEA SCROLLS LOCATION: [REDACTED]
HUMAN INSTRUMENTALITY PROJECT: [REDACTED]
DECRYPTED AT 2026-03-18
TOP SECRET
Locked State
LOCKEDinspection frame
live inspectionframe-01
CLASSIFIED DATA — EYES ONLY
TOP SECRET
Unlocked State
UNLOCKEDinspection frame
live inspectionframe-01
CLASSIFIED DATA — EYES ONLY
CLEARANCE: LEVEL 7
DEAD SEA SCROLLS LOCATION: [REDACTED]
Custom Text
CUSTOMinspection frame
live inspectionframe-01
NERV INTERNAL MEMO — RESTRICTED ACCESS
EYES ONLY
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "CLASSIFIED" | Overlay text displayed in red |
| isUnlocked | boolean | false | When true, overlay slides away to reveal children |
| children | ReactNode | — | Content revealed when unlocked |
| className | string | "" | Additional CSS classes |
[i]EXIT ANIMATION
When unlocked, the overlay slides upward with y: "-100%" over 0.2 seconds
using easeIn easing — a violent, satisfying reveal.