Install

Workspace / effect / html-in-canvas

Particle Scroll

Dissolves your live HTML below a chosen line into fine sand particles that reassemble on scroll.

Workspaceeffecthtml-in-canvas

npx shadcn@latest add @pax-sh/particle-scroll-reactlocal only

Tier: high. Reduced motion: hard scroll cut

ParticleScroll.tsx
"use client";

import { useEffect, useRef } from "react";
import { particleScrollEffect } from "@pax-sh/effects";

export interface ParticleScrollProps {
  className?: string;
  reducedMotion?: boolean;
  tier?: "low" | "medium" | "high";
  children?: React.ReactNode;
}

export function ParticleScroll(props: ParticleScrollProps) {
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const target = rootRef.current;
    if (!target) return;
    const instance = particleScrollEffect.mount(target, {
      className: props.className,
      reducedMotion: props.reducedMotion,
      tier: props.tier,
    });
    return () => instance.dispose();
  }, [props.className, props.reducedMotion, props.tier]);

  return (
    <div ref={rootRef} className={props.className} data-pax-effect="particle-scroll">
      {props.children}
    </div>
  );
}