Morphing Cyber Node

A multi-state, fluid-morphing interactive widget with magnetic hover physics and dynamic glassmorphism.

A multi-state, fluid-morphing interactive widget with magnetic hover physics and dynamic glassmorphism.

Framer MotionMorphGlassmorphismInteractive

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.

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.

Component Showcase