UI Animation and Visual Effects#

Blinko's public-facing pages use two layered visual effects: a shader-based animated gradient background rendered via WebGL, and frosted glass panels overlaid on top using CSS backdrop-filter. These effects are used on the sign-in, sign-up, share, and hub pages.

GradientBackground Component#

The central abstraction is GradientBackground (app/src/components/Common/GradientBackground.tsx). It renders a full-viewport WebGL canvas using @shadergradient/react (v2.0.19) 1, with children stacked above it at z-index: 10 2.

Default shader parameters — type waterPlane, colors #4603ff / #FE8989 / #000000, rotation 235°, with 3D lighting (envPreset: "city") 3.

Custom background URL — super admins can supply a shadergradient.co query URL via customBackgroundUrl config key. When set, it takes precedence over the default parameters 4.

Error boundary — a GradientErrorBoundary class component wraps the WebGL canvas. On any render error, it falls back to a plain CSS bg-gradient-to-br from-blue-500 to-purple-600 div 5.

Pages that use GradientBackground#

The hub page (app/src/pages/hub.tsx) does not wrap its full layout in GradientBackground — it uses glass-effect directly on the profile header card 6.

Frosted Glass Effect (.glass-effect)#

The .glass-effect CSS class is defined in globals.css and applies a frosted glass look on top of the gradient background:

• Light mode: background: rgba(255, 255, 255, 0.85) + backdrop-filter: blur(8px) 7
• Dark mode: background: rgba(11, 11, 12, 0.8) + backdrop-filter: blur(8px) 8

-webkit-backdrop-filter is included for Safari compatibility .

Applied to: the sign-in form card 10, share page password and note cards , and the hub profile header 6.

Animation Toggle#

Users can disable the shader animation via Settings → Preference → Close Background Animation. This maps to the isCloseBackgroundAnimation config key 12.

When isCloseBackgroundAnimation is true, the ShaderGradient component receives animate='off', freezing the WebGL render loop 13. The static gradient texture remains visible; only the per-frame animation is stopped.

The settings panel shows a live GradientBackground preview inside a tooltip on the toggle control 14.

Performance Notes#

• The WebGL canvas renders on the GPU compositor thread. The animation can be expensive on low-end or integrated-GPU devices — this is the primary reason isCloseBackgroundAnimation exists as a user-facing option.
• backdrop-filter: blur() triggers GPU compositing on the glass elements. Stacking many blurred layers in a single viewport can degrade performance on mobile.
• The error boundary guarantees the page remains functional if WebGL is unavailable (e.g., headless environments, certain mobile browsers).
• @react-spring/three is imported by GradientBackground as a peer dependency for animation springs 15.