Morphing Control Node
A multi-state, fluid-morphing interactive widget with magnetic hover physics and dynamic glassmorphism.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
idleTextSystem Ready
Label shown in ready/idle state.
scanningTextScanning
Status label shown during scanner active state.
scanningIp192.168.1.X
Eyebrow detail label in scanning mode.
audioModeTextAudio Mode
Primary action button label in scanner view.
cancelTextCancel
Secondary cancel button label in scanner view.
alertTitleBREACH
Large headline text in danger/alert state.
alertSubtitleUNAUTHORIZED ACCESS DETECTED
Eyebrow detail text in danger/alert state.
lockdownTextLOCKDOWN
Lockdown recovery button label in alert state.
primaryColor#7fff5e
Theme color for scanner scanning states.
secondaryColor#ff5c71
Theme color for alarm and cancel states.
tertiaryColor#e8d5b7
Theme color for ambient audio/idle glow.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| idleText | string | "System Ready" | Label shown in ready/idle state. |
| scanningText | string | "Scanning" | Status label shown during scanner active state. |
| scanningIp | string | "192.168.1.X" | Eyebrow detail label in scanning mode. |
| audioModeText | string | "Audio Mode" | Primary action button label in scanner view. |
| cancelText | string | "Cancel" | Secondary cancel button label in scanner view. |
| alertTitle | string | "BREACH" | Large headline text in danger/alert state. |
| alertSubtitle | string | "UNAUTHORIZED ACCESS DETECTED" | Eyebrow detail text in danger/alert state. |
| lockdownText | string | "LOCKDOWN" | Lockdown recovery button label in alert state. |
| primaryColor | string | "#7fff5e" | Theme color for scanner scanning states. |
| secondaryColor | string | "#ff5c71" | Theme color for alarm and cancel states. |
| tertiaryColor | string | "#e8d5b7" | Theme color for ambient audio/idle glow. |