How to add a particle logo animation to a React or Next.js app

What you get

• PixelLogoLoader.tsx, with a named export PixelLogoLoader and its PixelLogoLoaderProps type. Your logo's sampled points (up to 1,600) are built in.
• Nothing to install besides React. It uses useRef and useEffect and draws on one canvas with the 2D API.
• The React export requires Pro.

1. Export the component

1. Open the workbench.
2. Upload your logo: click to choose a PNG, SVG, JPG or WebP file, drag it onto the page, or paste it with Ctrl+V / ⌘+V. Logos on a transparent or plain background work best; if parts are missing, adjust the sampling density and threshold.
3. Pick one of the 9 effects and adjust particle size, shape (square or round) and speed.
4. Click Export Code, open the React tab and choose Download File (or copy the code). This format requires Pro.

2. Add it to your app

Save the file as src/components/PixelLogoLoader.tsx, then:

import { PixelLogoLoader } from './components/PixelLogoLoader';

export default function Hero() {
  return <PixelLogoLoader height={420} />;
}

Next.js App Router

The exported file has no 'use client' directive. It uses hooks and the canvas, so add 'use client'; as the first line of PixelLogoLoader.tsx (or import it only from client components):

'use client';

import React, { useEffect, useRef } from 'react';
// ...the rest of the file stays the same

3. Props

The wrapper div has a black background, 16 px rounded corners, a thin border and a shadow by default. Override them with style:

<PixelLogoLoader
  height={320}
  style={{ background: 'transparent', border: 'none', boxShadow: 'none' }}
/>

progress, variant, duration, autoPlay, speedMultiplier and interactive are read on every frame, so changes apply immediately. colors, particleSize and particleShape are only used when the particles are created (on mount and when the container is resized); to change them later, give the component a new key so it remounts. Values for variant:

4. Use it as a loading screen

With progress set, the particles only move as far as that value, so the logo completes when loading completes:

import { useEffect, useState, type ReactNode } from 'react';
import { PixelLogoLoader } from './components/PixelLogoLoader';

export function AppShell({ children }: { children: ReactNode }) {
  const [progress, setProgress] = useState(0);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    // Replace these with your own loading steps
    const steps = [() => fetch('/api/user'), () => fetch('/api/projects')];
    (async () => {
      for (let i = 0; i < steps.length; i++) {
        await steps[i]();
        setProgress(((i + 1) / steps.length) * 100);
      }
      setReady(true);
    })();
  }, []);

  if (!ready) return <PixelLogoLoader progress={progress} height={360} />;
  return <>{children}</>;
}

5. Performance and accessibility

• On unmount the component cancels its animation frame and disconnects its ResizeObserver.
• Each component draws up to 1,600 particles. Avoid running many instances at once on low-end phones.
• The component does not check the reduced-motion setting. When users ask for reduced motion, pass progress={100} so the particles form the logo and stay there instead of looping.