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
idleText
Label shown in ready/idle state.
scanningText
Status label shown during scanner active state.
scanningIp
Eyebrow detail label in scanning mode.
audioModeText
Primary action button label in scanner view.
cancelText
Secondary cancel button label in scanner view.
alertTitle
Large headline text in danger/alert state.
alertSubtitle
Eyebrow detail text in danger/alert state.
lockdownText
Lockdown recovery button label in alert state.
primaryColor
Theme color for scanner scanning states.
secondaryColor
Theme color for alarm and cancel states.
tertiaryColor
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. |