Orbital engine:
- 8 KPI cards on elliptical orbits (rx:320-380, ry:100-140)
- Cards rotate around center — appear on left/right edges
- Visibility = |cos(angle)| — brightest at sides, fade toward center
- Scale: 0.6–1.0 based on horizontal position
- 60 radial lines from center outward (forward motion feel)
- Glow pulses & expands with speed
- Center: clean headline + CTA (composio.dev style)
- Hover = accelerate orbit speed (CRUISE 0.4 → BOOST 3.0)
No more dots, no falling snow — coherent orbital dance around the text
Forward motion (not sideways):
- Tunnel walls: rotateY(12°) left, rotateY(-12°) right
- 10 KPI cards slide down walls with perspective scale (smaller = farther)
- Cards reset when off-screen, pick new random data
- 50 radial lines emanating from center outward
- 80 starfield dots scattering from center
- Center: clean — just headline + CTA, no data
- Goo glow expands & brightens with speed
- Hover = accelerate forward (CRUISE 0.5 → BOOST 2.5)
Metaphor: driving into a data tunnel, cards on walls rush past
Tunnel engine:
- 30 speed lines (near/mid/far) rushing left→right
- 6 KPI cards at 3 depths: nearest blurry+large, far sharp+small
- Cruise speed 0.8, boost 2.5× on CTA hover
- 40% cards start in viewport for instant visual
- Motion blur: cards blur proportional to speed (0→4px)
- Glow expands & brightens with speed
Drive-the-car metaphor: hover = gas pedal, cards & lines accelerate
Like driving through a tunnel with business data flying by
- Redesign KPI cards to look like stock tickers
- Add ticker ID (e.g. ВЫРУЧК:KPI, AOV:KPI)
- Arrow up/down SVG indicators for change direction
- Mini trend-line (50px) inside each card
- Change color: green (#16a34a) for up, red (#e21d1d) for down
- Remove sparkline background area, keep only line
- Fix duplicate arrowUp variable naming (bArrowUp/bArrowDown/bArrowNeutral)
- Added Bloomberg-style table with Follow buttons, ticker IDs, values, and change arrows
- Two sections: Revenue by channel + Marketing metrics
- SVG arrows (12x10) with fill=currentcolor for up/down/neutral states
- Monospace typography for IDs, values, and change amounts
- Responsive grid layout (desktop → tablet → mobile)
- Follow button toggle with blue active state
neo