Product Features
Radar Interface and Interaction Flow
📱 Product features and interaction design
📡 Core interface: Radar (The Radar)
The home page adopts a 'radar/sonar' style dynamic visual design that emphasizes a sense of 'exploration'.
State A (Scanning): The central logo rotates and concentric ripple waves (breathing effect) spread outward to intuitively inform the user that the device is consuming power to search.
State B (Detected): Detected user avatars are distributed on the radar chart according to RSSI signal strength.
Visual metaphor: Strong signal (near) avatars are large and near the center; weak signal (far) avatars are small and near the edge.
Status indicators: 🟢 Green dot (online now), ⚪ Gray dot (out of range).
State C (Interaction): Tap a blip on the radar to initiate a temporary conversation.
🖱 Key interaction flows
When a user tries to contact someone beyond direct connection range, the system triggers a 'relay animation'.
The UI draws a line from A to C, sequentially lighting up the avatars of relay nodes B1, B2 along the way.
Node Fee: Each relay node displays the 'toll' it charges underneath. The system pops up to ask whether to pay.
This is the most direct way to educate users about the value of the Mesh network.
Real-Person Verification
To maintain network authenticity, users must complete verification before withdrawing tokens.
Interaction: Tap avatar -> take photo -> a scanning line appears on the screen (loops from bottom to top).
Logic: Verification only passes if similarity > 70% and liveness detection is passed.
Supports text, voice, and images.
Message board mode: For users who are not online in real time, messages become leave-behinds and are delivered when the recipient returns to Bluetooth range or via network relay.
🔗 Cross-node contact
When a user attempts to contact someone beyond direct connection range, the system will trigger 'relay animation'.
Visualized path: The UI draws a connecting line and sequentially lights up the avatars of relay nodes B1, B2 in the middle.
Node fees: Visually display the 'toll' charged by each relay node (e.g., 0.1 $BF), educating users about the value of the Mesh network.
🆔 Identity verification process
Users must complete real-person verification before setting an avatar or withdrawing tokens.
Interaction: Tap avatar -> launch front camera.
Verification: A scanning line appears on the screen; liveness detection must pass and similarity must be > 70%.
🐦 Yappers module and social graph import
To solve the cold-start problem, Butterfly introduces the Yappers module. If two users who met in real life both link their Twitter, they can not only exchange $Butterfly but also automatically follow each other on Twitter.
Last updated