Particle Logo Canvas

A WebGL canvas that rebuilds your logo from thousands of particles which scatter away from the cursor and ease back to their origin.

Open in

particle-logo-canvas-demo

components/ui/particle-logo-canvas-demo.tsx

"use client"

import { ParticleLogoCanvas } from "@/registry/tween/particle-logo-canvas"

export function ParticleLogoCanvasDemo() {
  return <ParticleLogoCanvas />
}

Installation


pnpm dlx shadcn@latest add https://tween-www.vercel.app/r/particle-logo-canvas.json

Usage

import { ParticleLogoCanvas } from "@/components/ui/particle-logo-canvas"

<ParticleLogoCanvas
  logoSrc="/your-logo.svg"
  logoTint="#ffffff"
  background="transparent"
/>

The component samples logoSrc onto an offscreen logoSize canvas and spawns one GPU particle per opaque pixel, tinting each by logoTint so the logo reassembles itself on screen. Pointer movement applies a force to any particle within distortionRadius, scaled by forceStrength, pushing it away from the cursor up to maxDisplacement from its origin. Every frame returnForce pulls each particle a fraction of the way back, so the mark continually heals after being disturbed. Rendering runs in a single WebGL draw call with pointSize scaled by the device pixel ratio, keeping the effect crisp and smooth even with tens of thousands of points. Swap in any transparent PNG or SVG and the canvas adapts to its shape automatically, making it a drop-in interactive treatment for brand marks.

Props

Prop	Type	Default	Description
`logoSrc`	`string`	Tween glyph	URL of the logo image (PNG or SVG with transparency works best).
`logoSize`	`number`	`1100`	Square pixel size of the offscreen sampling canvas.
`logoTint`	`string`	`"#ffffff"`	Color multiplied with each sampled pixel (white = pass through).
`background`	`string`	`"transparent"`	Wrapper background; `transparent` tracks the theme.
`pointSize`	`number`	`3.5`	Base `gl_PointSize` (scaled by DPR).
`distortionRadius`	`number`	`3000`	Radius (in canvas pixels) within which the cursor pushes particles.
`forceStrength`	`number`	`0.003`	Multiplier applied to each cursor force impulse.
`maxDisplacement`	`number`	`100`	Maximum distance a particle is allowed to drift from its origin.
`returnForce`	`number`	`0.025`	Per-frame fraction pulling each particle back toward its origin.
`className`	`string`	—	Extra classes on the outer container.

Fullscreen Overlay Menu SVG Stroke Hover Cards

On This Page

Installation Usage Props

Contribute