Add min-w-0 + overflow-hidden to the countdown card to prevent it from
blowing out the grid column. Reduce number font from 20px to 18px on
mobile (20px on sm+), tighten gaps and colon sizes to fit within the
50% grid column on 375px screens.
Root cause: 225 individually animated DOM elements forced Chrome's
compositor to create separate paint regions per element. Any hover
state change on page content triggered re-compositing of all 225
regions, causing visible flickering on all pages.
Canvas fix: single <canvas> element renders the entire grid effect
via requestAnimationFrame. Canvas content is pixel-based and cannot
be affected by DOM hover state changes on other elements.
Additional fixes:
- Fix z-index collision: portal z-index -1 → -2 (was same as body::before noise)
- Replace all transition-all with specific properties on .btn, .btn-icon,
.input, .nav-item, .bottom-nav-item, checkbox
- Remove backdrop-blur-sm from desktop .bento-card and .card
(forced Chrome to re-sample animated background pixels on every hover)
Remove translateZ(0) from base states of .bento-card, .card, .glass
and their light theme variants. Remove transform-gpu from Card.tsx.
Change bentoFadeIn animation to end with transform:none instead of
translateY(0). GPU promotion now only occurs during hover/active
interactions, preventing Chrome from creating excessive compositing
layers that cause flickering with animated backgrounds.
The boxes background was creating 225 motion.div elements, each running
independent opacity animations via framer-motion JS on the main thread.
This blocked hover transitions on cards, causing visible flickering.
CSS @keyframes run on the compositor thread and have zero main-thread
cost, eliminating the interference with user interactions.
Previous isolation:isolate fix didn't work because:
- position:fixed elements still see through isolation boundary
- backdrop-filter samples all rendered content regardless of stacking context
- The real issue: animated background at z-index:0 with will-change:transform
forces Chrome to implicitly composite EVERY overlapping element
Fix: render BackgroundRenderer via createPortal on document.body with
z-index:-1, placing it below the root stacking context. This eliminates
implicit compositing entirely.
Also:
- Remove backdrop-blur-xl from desktop header (was resampling bg 60fps)
- Remove will-change:opacity from card ::after pseudo-element
- Replace transition-all with transition-colors on header buttons
Root cause: backdrop-filter on header/nav resamples the animated
background 60fps, causing GPU compositing flicker (Chromium bug).
- Add isolation: isolate wrapper in AppShell to prevent backdrop-filter
from seeing through to the animated background layer
- Add will-change: transform + translateZ(0) to BackgroundRenderer
for stable GPU layer
- Replace contain: layout style with contain: content on main
- Replace transition-all with specific properties in Card component
- Preserve translateZ(0) on all hover/active transforms to prevent
GPU compositing layer teardown/recreation cycle
- Lower body::before noise texture z-index to -1
- Add will-change: opacity to card spotlight pseudo-element
- Include backdrop-blur-linear in mobile performance override
- Replace transition-all with specific properties in BentoCard
- Extract CountdownTimer into React.memo component to isolate 1s
interval re-renders from the full Subscription page
- Add box-shadow transition to .hover-border-gradient (was instant)
- Remove conflicting p-[1.5px] from PurchaseCTAButton (CSS border
already handles 1.5px)
- Replace transition-all with specific properties on bento-card-hover,
bento-card-glow, device dots, toggle switches, progress bars
- Reduce translateY hover from -4px to -2px to prevent cursor
losing hover target during fast vertical mouse movement
Move ~1900 lines of purchase/renewal logic from Subscription.tsx into
a new SubscriptionPurchase.tsx page at /subscription/purchase.
- Create SubscriptionPurchase.tsx with tariffs grid, classic mode wizard,
switch preview modal, and promo handling
- Create PurchaseCTAButton.tsx with animated gradient border, state-aware
colors and context-aware text
- Create subscriptionHelpers.ts with shared utilities
- Add CopyIcon to shared icons module
- Register /subscription/purchase route with lazy loading
- Update SubscriptionCardExpired and PromoOffersSection navigators
- Add CTA translation keys to ru.json and en.json
- Remove all scrollToExtend references
- SubscriptionCardExpired: use trialTitle for expired trials, remove traffic/devices grid, show only expiry date
- Subscription page: remove duplicate trial badge from zone indicator, fix expired trial badge showing "Пробный период" instead of "Истекла"
- Subscription page: replace static days counter with live HH:MM:SS countdown timer, merge "Действует до" into countdown block
- Subscription page: remove duplicate traffic percentage block
- Handle expired state in countdown (show "Истекла" in red instead of 00:00:00)
- Use live countdown.days for urgency threshold instead of stale server value
- Add Subscription tab to desktop header navigation (was only in mobile)
- Fix device dots overflow for large limits (>10) by using progress bar
- Show available referral balance on dashboard instead of total earnings
- Add available_balance and withdrawn fields to ReferralInfo type
1. Add Math.round() to rubles→kopecks conversion (floating point safety)
2. Add missing {{currency}} template var in fa.json amountPlaceholder
3. Show desired_commission_percent in admin applications list
1. Add desired commission percent field to partner application form
and admin review page (Bug 1)
2. Add prominent "Requested Amount" row in admin withdrawal detail (Bug 2)
3. Switch withdrawal input from kopecks to rubles with auto-conversion
on submit (Bug 3)
Includes i18n updates for all 4 locales (ru, en, zh, fa).
- New ConnectionQR page with fullscreen QR display (no modal)
- QR button in InstallationGuide header next to platform selector
- Respects hideLink setting: shows URL below QR only when visible
- i18n translations for ru, en, zh, fa
- Add has_subscription to WheelConfig type
- Disable spin button when user has no subscription
- Add noSubscription guard in handleUnifiedSpin handler
- Show warning banner directing user to activate subscription
- Prevent banner stacking (noSubscription takes priority over daily limit)
- Add noSubscription i18n keys for ru, en, zh, fa
Remove opacity from beamDash keyframes — opacity on SVG paths triggers
full-page repaints. Animate only stroke-dashoffset (compositor-friendly).
Reduce animated paths from 50 to 17 (every 3rd). Isolate container with
contain:strict + will-change:transform for own compositor layer.
ThemeTab: throttle applyThemeColors via requestAnimationFrame (1x/frame),
debounce queryClient.setQueryData 150ms. Fixes browser lag when dragging
color sliders (~60 calls/sec × 50+ CSS var writes).
BackgroundBeams: replace 20 framer-motion linearGradient JS loops with
pure CSS stroke-dashoffset animation on all 50 original Aceternity paths.
Single shared gradient, GPU-composited keyframes, zero per-frame JS.
- Add glassTheme utility with theme-aware color tokens
- Replace hardcoded rgba(255,255,255,...) with dynamic values
- Replace text-white with text-dark-50 for auto theme remapping
- Restyle subscription page block to match dashboard glassmorphic design
- Light mode: white semi-opaque cards with subtle shadows
- Dark mode: unchanged visual appearance
- Rewrite TrafficProgressBar with multi-segment gradient fill, flex-based
zone tints, shimmer + highlight overlays, radial glow at fill edge
- Rewrite SubscriptionCardActive with zone header, big percentage on right,
connect device card with device dots, tariff/days-left two-column row,
sparkline placeholder, traffic refresh controls
- Rewrite SubscriptionCardExpired with red glow, grid pattern, gradient
renew button, outline tariffs button
- Rewrite TrialOfferCard with animated glow background, grid pattern,
icon glow animation, price tag with old price, gradient CTA buttons
- Rewrite StatsGrid with 2x2 card layout, icon+label+chevron header,
big value numbers, zone-colored balance/earnings cards
- Update Sparkline with color prop and last-point dot indicator
- Update useAnimatedNumber to use easeOutExpo matching prototype
- Add formatTraffic utility for MB/GB/TB unit formatting
- Add mainHex to trafficZone for inline style support
- Update animations to match prototype timing
- Add new i18n keys for redesigned components
Decompose monolithic Dashboard into SubscriptionCardActive,
SubscriptionCardExpired, TrialOfferCard, and StatsGrid sub-components.
Replace Subscription page progress bar with TrafficProgressBar compact.
Add i18n keys for traffic zones, stats labels, expired/trial states.
SubscriptionCardActive with animated zone dot, traffic bar, connect button.
SubscriptionCardExpired with red theme and renewal actions.
TrialOfferCard with stats grid and free/paid activation.
StatsGrid 2x2 with font-display values and font-mono labels.
Pure CSS approach: @property --border-angle + conic-gradient on border-box.
No extra elements, no overflow issues, no JS animation.
Smooth rotation via CSS Houdini custom property animation.
Replace framer-motion gradient interpolation (buggy in TG WebView) with
pure CSS conic-gradient + transform:rotate() keyframe animation.
Transform animations are GPU-accelerated and reliable everywhere.
- Use accent CSS vars for gradient (matches app theme dynamically)
- Increase gradient spot size for visible animation
- Darker inner bg (dark-900) for better contrast
- Increase blur to 3px for glow effect
Dashboard is the default landing page for all authenticated users.
Loading it eagerly eliminates one extra network round-trip for the
JS chunk (+30KB / +7KB gzip to main bundle, but saves ~200-500ms
of chunk fetch + parse time on first load).
- Move Google Fonts from CSS @import (render-blocking) to <link> in
index.html with preconnect for earlier discovery
- Remove @import from globals.css — browser no longer waits for CSS
parse -> @import fetch -> font CSS parse before first paint
- Defer initLogoPreload() to requestIdleCallback so logo fetch
doesn't compete with critical resources during page load
- Add prefetchBackground() to registry — triggers dynamic import
without creating React component
- Call prefetch at module init in BackgroundRenderer using cached
config from localStorage, before React renders
- Background JS chunk starts downloading immediately instead of
waiting for Suspense to trigger lazy() import
- Use 300% oversized CSS grid container instead of fixed-size flex cells
- Grid with 1fr units auto-fills the container, skew+scale covers viewport
- Simplified to flat cell array, removed SVG crosses for cleaner look
- Use original Aceternity positioning: translate(-40%,-60%) with
-top-1/4 left-1/4 to cover viewport after skew transform
- Switch from CSS grid to flex layout matching original structure
- Add cross (+) SVG markers at grid intersections
- Use pastel color palette from original, animate opacity per cell
- Increase default rows to 20 for better coverage
- Delete google-gemini-effect.tsx and noise-background.tsx
- Remove from types, registry, and backend whitelist
- Rewrite aurora: use animate-aurora directly on element instead of
invisible pseudo-element with mix-blend-difference
- Aurora: remove invert filter (broken on dark bg), use dark gradient directly
- Beams: use animated linearGradient positions instead of pathLength animation
- Beams Collision: add collision detection, explosion particles, AnimatePresence
- Gemini Effect: rewrite as SVG motion.path with animated pathLength (was canvas)
- Noise: change mixBlendMode from overlay to screen (overlay invisible on dark bg)
