Performance

Vizzele is built so the effects stay on everywhere — a five-year-old laptop, a budget phone — and only get cheaper when they have to. Most of it happens without you doing anything.

What runs, and when

• Every animation shares one requestAnimationFrame loop, split into read, update and render phases so the DOM is never measured and written in the same breath. The loop sleeps when nothing moves.
• WebGL backgrounds, canvases and orbs pause while they are off-screen or the tab is hidden, and render one still frame under reduced motion.
• Continuous CSS effects (shimmers, the keyboard's RGB wave, glows) animate only transform, opacity or filter — work the GPU does on its own, with no style or paint per frame.

Adaptive quality

The shared loop measures real frame times. When a device can't keep up for two seconds in a row, the quality steps down: WebGL renders fewer pixels (the CSS scales them back up), the fluid uses a smaller grid and fewer solver passes, particle and confetti counts shrink, and at the lowest level the GPU draws every other frame. When frames are fast again it climbs back, slowly, so it never flickers. While it is reduced, <html data-vz-quality="low"> is set for your own CSS.

import { getQuality, onQualityChange, setQuality } from '@vizzele/core';

getQuality(); // 1 = full, down to 0.4
onQualityChange((q) => console.log('quality', q));

setQuality(0.55);   // e.g. a "battery saver" toggle
setQuality('auto'); // back to the governor

Load less up front

Below-the-fold showpieces don't need to exist before anyone scrolls to them. Wrap them in LazyMount — and code-split them — so they cost nothing until they're near:

import { lazy, Suspense } from 'react';
import { LazyMount } from '@vizzele/react';

const Story = lazy(() => import('./Story'));

<LazyMount minHeight={800}>
  <Suspense>
    <Story />
  </Suspense>
</LazyMount>

Content people search for should stay server-rendered: in Next.js, next/dynamic keeps the HTML and still splits the code, so each section hydrates on its own instead of in one long task.