This article breaks down Light & Shadow Wealth, a smart robo-advisor system built on HarmonyOS 6. Its core idea is to map market volatility, asset health, and trading risk to floating navigation and immersive light feedback, solving common problems in traditional financial apps such as chart obstruction, accidental trade taps, and weak risk perception. Keywords: HarmonyOS 6, Floating Navigation, Immersive Light Effects.
Technical specifications are summarized below
| Parameter | Description |
|---|---|
| Development Language | TypeScript / ArkTS |
| UI Framework | ArkUI |
| Target Platform | HarmonyOS 6 / API 23 |
| Core Interaction | Floating Navigation, Immersive Light Effects |
| Data Capabilities | Market State Awareness, Asset Health Assessment, Immersive K-Line Analysis |
| Core Dependencies | @kit.FinanceKit, AppStorage, Canvas, Gesture |
| Article Popularity | 307 views, 10 likes, 12 bookmarks |
This solution transforms financial interaction from menu-driven to state-driven
In traditional financial apps, bottom tabs often block useful information when users inspect candlestick charts, asset allocation, or trade confirmations. In high-volatility scenarios, users are also more likely to tap the wrong control, which lengthens the interaction path and weakens risk signaling.
HarmonyOS 6 provides Floating Navigation and Immersive Light Effects that fit this kind of highly real-time and high-risk business workflow. Navigation no longer occupies a fixed area. Instead, it changes form according to market conditions. Light effects are no longer decorative. They encode risk and deliver emotional feedback.
AI Visual Insight: The image presents a conceptual view of the app’s main visual interface, highlighting the combination of a dark financial theme, a central content area, and a floating interaction layout. Ambient glow at the top and bottom reinforces state awareness, making the interface suitable for displaying three dense categories of financial information: market data, assets, and trading actions.
Market states should be encoded as interactive UI decisions
The most important design in this article is the three-layer mapping of market state → navigation form → light feedback. During sharp rallies and crashes, the system proactively compresses or restricts operational entry points. The goal is not visual novelty. The goal is to reduce accidental taps and irrational trading.
| Market State | Price Change | Navigation Form | Light Effect Characteristics | Interaction Strategy |
|---|---|---|---|---|
| Surge | > +5% | Minimized or hidden | Gold pulse | Prevent mistaps, emergency actions only |
| Rise | +2% ~ +5% | Full or mini | Warm green breathing | Provide quick add-position entry |
| Oscillation | -2% ~ +2% | Standard expanded | Stable blue | Full functionality available |
| Fall | -5% ~ -2% | Bottom mini | Cool red warning | Quick stop-loss entry |
| Crash | < -5% | Emergency button only | Deep red alert | One-tap liquidation |
| Market Closed | Time-based judgment | Fully expanded | Static gray | Post-market review mode |
export const AssetHealthLightMap = {
excellent: { color: '#2ECC71', pulse: 6000, intensity: 0.5 }, // Excellent: slow green breathing
good: { color: '#4ECDC4', pulse: 5000, intensity: 0.6 }, // Good: stable cyan feedback
warning: { color: '#F5A623', pulse: 3000, intensity: 0.7 }, // Warning: orange adjustment prompt
danger: { color: '#FF6B6B', pulse: 1500, intensity: 0.9 }, // Danger: accelerated red pulse
critical: { color: '#FF0000', pulse: 800, intensity: 1.0 } // Critical: high-intensity alert
};This mapping translates asset risk states directly into visual light-effect parameters.
Market-aware floating navigation handles both risk isolation and action convergence
MarketAwareFloatNav.ets is the core component of the entire solution. It fetches a market overview every five seconds and updates MarketState based on percentage change. After the state changes, the navigation automatically switches among Full, Limited, Emergency, and other modes.
The value of this design is clear: navigation is no longer a static entry layer. It becomes an interaction layer with built-in risk control logic. For example, during a crash, it preserves only Emergency Liquidation. During rising or oscillating markets, it restores regular action items.
private updateMarketState(changePercent: number): void {
let newState: MarketState;
if (changePercent > 5) newState = MarketState.SURGE; // Excessive gain, enter surge state
else if (changePercent > 2) newState = MarketState.RISE; // Normal upward movement
else if (changePercent > -2) newState = MarketState.OSCILLATE; // Oscillation range
else if (changePercent > -5) newState = MarketState.FALL; // Falling state
else newState = MarketState.CRASH; // Crash state
this.marketState = newState;
this.adaptNavToMarket(newState); // Switch navigation and light effects based on market state
}This code converts market volatility into concrete navigation strategies and risk feedback.
The asset health panel turns complex configuration into instantly recognizable risk expression
The design focus of AssetHealthPanel.ets is not the chart itself, but the encoding model. The component calculates a composite health score from concentration, diversification, and average risk score, then generates synchronized color, brightness, and pulse frequency.
That means users do not need to inspect every asset ratio before judging risk. They can infer risk quickly from the rhythm and color of the light effect alone. This is especially important in mobile financial products.
private calculateHealth(): void {
const totalValue = this.assets.reduce((sum, a) => sum + a.value, 0);
const concentration = this.assets.reduce((sum, a) => {
const weight = a.value / totalValue;
return sum + weight * weight; // Estimate concentration using squared weights
}, 0);
const diversification = Math.max(0, 100 - concentration * 100); // Higher diversification means better health
const avgRisk = this.assets.reduce((sum, a) => sum + a.riskScore * (a.value / totalValue), 0);
const score = Math.round(diversification * 0.4 + (100 - avgRisk) * 0.6); // Composite score
this.healthAssessment.score = score;
}This code calculates a health score from the asset structure and drives subsequent UI light-effect linkage.
Immersive K-line analysis mode improves chart readability
KlineImmersiveMode.ets elevates the chart from a standard page component into an immersive analysis space. After the user performs a two-finger zoom, the app enters immersive mode. Standard UI elements are hidden, leaving only edge hot zones, a floating toolbar, and light effects for key price levels.
This mode delivers two practical benefits. First, it maximizes chart display area. Second, support levels, resistance levels, and moving averages are no longer distinguished only by lines. Environmental lighting expresses their relative strength and improves visual priority.
.gesture(
PinchGesture()
.onActionUpdate((event: GestureEvent) => {
this.zoomLevel = Math.max(1, Math.min(10, event.scale)); // Limit the zoom range
if (this.zoomLevel > 2 && !this.isImmersive) {
this.enterImmersiveMode(); // Automatically enter immersive analysis after reaching the zoom threshold
}
})
)This code allows the K-line view to switch automatically into immersive analysis mode when triggered by user gestures.
Main-page integration prioritizes state synchronization over page navigation
FinancePage.ets aggregates the asset panel, K-line mode, and trading page into the same page shell. The key implementation choice is to use AppStorage.watch to monitor global market state and light-effect color, instead of letting each component maintain isolated local state.
The benefit is that page background lighting, the navigation layer, asset status, and trade dialogs all retain the same market semantics. This avoids fragmented information across the UI.
aboutToAppear(): void {
AppStorage.watch('market_state', (state: MarketState) => {
this.marketState = state; // Sync the global market state
});
AppStorage.watch('market_light_color', (color: string) => {
this.marketColor = color; // Sync the global market theme color
});
}This code establishes page-level state linkage so that visuals and interactions remain consistent.
Financial security controls must be designed together with visual feedback
Another valuable point in the article is that risk control should be handled inside components. High-risk trades require identity verification. Frequent actions need cooldown periods. Large-volume or leveraged operations need stronger warning feedback.
class TradeSecurityController {
private lastTradeTime: number = 0;
private readonly COOLDOWN: number = 3000;
canTrade(): boolean {
if (Date.now() - this.lastTradeTime < this.COOLDOWN) {
return false; // Block repeated submissions during the trade cooldown period
}
return true;
}
}This code implements basic trade throttling to prevent repeated accidental operations.
Debugging and compliance should not come after interaction design
Before a financial app goes live, four areas require special validation: whether state switching remains correct under delayed market feeds, whether color encoding is accessible to users with color vision deficiencies, whether trading logs are traceable, and whether risk disclosures satisfy regulatory requirements.
If you pursue visual innovation without strengthening compliance, immersion itself can become a new source of risk. In financial software, the best experience design must first be auditable, explainable, and enforceable.
FAQ structured Q&A
1. Why is floating navigation especially suitable for financial scenarios?
Floating navigation frees up space while users inspect charts and appears only when actions are needed. Compared with fixed tabs, it fits high-density market and analysis pages better and helps reduce accidental taps.
2. What is the biggest value of immersive light effects in financial apps?
They translate abstract market movement, risk, and asset health into color, brightness, and pulse rhythm, helping users recognize system state faster instead of relying only on numeric reading.
3. What should be strengthened most before this solution goes live?
Prioritize real market data integration, identity verification flows, trade audit logs, accessibility mode, and regulatory risk-disclosure copy. The visual layer is only the surface. A complete risk-control loop is the true core of a financial product.
Core summary
This article reconstructs a HarmonyOS 6 financial app solution centered on floating navigation, immersive light effects, asset health encoding, and immersive K-line analysis. It covers state mapping, core component implementation, main-page integration, security controls, and compliance recommendations, making it a useful reference for ArkUI and HarmonyOS financial application development.