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) , with children stacked above it at z-index: 10 .
Default shader parameters β type waterPlane, colors #4603ff / #FE8989 / #000000, rotation 235Β°, with 3D lighting (envPreset: "city") .
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 .
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 .
Pages that use GradientBackground#
| Page | File |
|---|---|
| Sign-in | app/src/pages/signin.tsx |
| Sign-up | app/src/pages/signup.tsx |
Share (/share/[id]) | app/src/pages/share/[id].tsx |
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 .
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) - Dark mode:
background: rgba(11, 11, 12, 0.8)+backdrop-filter: blur(8px)
-webkit-backdrop-filter is included for Safari compatibility .
Applied to: the sign-in form card , share page password and note cards , and the hub profile header .
Animation Toggle#
Users can disable the shader animation via Settings β Preference β Close Background Animation. This maps to the isCloseBackgroundAnimation config key .
When isCloseBackgroundAnimation is true, the ShaderGradient component receives animate='off', freezing the WebGL render loop . 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 .
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
isCloseBackgroundAnimationexists 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/threeis imported byGradientBackgroundas a peer dependency for animation springs .