| text | string | — | Text content. Alternative to children. |
| children | ReactNode | — | Text content as children. Only string/number children are used. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | — | HTML tag to render. Defaults to h2 for heading variant, p for text variant. |
| variant | "heading" | "text" | heading | Preset variant. Heading uses larger radius, stronger effect, streaks, and assemble intro. Text uses smaller radius, weaker effect, no streaks, and no intro. |
| effect | "repel" | "attract" | "swirl" | "scatter" | "wave" | repel | Cursor interaction effect. Repel pushes pixels away, attract pulls them, swirl rotates around cursor, scatter randomizes, wave creates sine motion. |
| radius | number | — | Cursor radius in pixels. Default varies by variant: ~1.8x font size for heading, ~3.6x for text. |
| strength | number | — | Displacement multiplier. Default: 1 for heading, 0.5 for text. |
| falloff | "smooth" | "linear" | "sharp" | smooth | Falloff curve for cursor influence. Smooth is quadratic, linear is linear, sharp is cubic. |
| stiffness | number | — | Spring stiffness for pixel return. Default: 0.075 for heading, 0.1 for text. |
| damping | number | — | Spring damping (retention per frame). Lower = more friction. Default: 0.82 for heading, 0.8 for text. |
| chaos | number | 1 (heading) / 0.6 (text) | Per-pixel randomness 0..1. Higher = more organic variation. |
| pixelSize | number | "auto" | — | Pixel size in pixels. Default: ~0.05x font for heading, ~0.09x for text. Use "auto" for automatic sizing. |
| pixelScale | number | 0.92 | Pixel size relative to its grid cell (0.2 to 1.4). |
| shape | "square" | "circle" | square | Pixel shape. Circles disable streaks. |
| color | string | currentColor | Text color. Any CSS color or CSS variable (e.g., "var(--color-main)"). |
| accent | string | — | Moved pixels shift toward this color. Any CSS color or CSS variable. |
| streaks | boolean | true (heading) / false (text) | Stretch pixels along their motion direction. Disabled for circles. |
| inertia | number | 1 | How much cursor speed drags pixels. |
| clickBurst | boolean | number | 1 (heading) / 0.6 (text) | Shockwave on click/tap. false disables, true uses preset, number sets intensity. |
| interactive | boolean | true | Enable hover/touch reaction. false makes it static. |
| intro | "assemble" | "none" | boolean | "assemble" (heading) / "none" (text) | Intro animation. "assemble" animates pixels into place, "none" shows immediately. true = assemble, false = none. |
| introFrom | "scatter" | "top" | "bottom" | "left" | "right" | "center" | scatter | Direction pixels animate from during intro. |
| introOrder | "ltr" | "rtl" | "ttb" | "btt" | "center" | "random" | ltr | Order pixels animate in during intro. |
| introDuration | number | 1100 (heading) / 700 (text) | Intro animation duration in milliseconds. |
| introDelay | number | 0 | Delay before intro starts in milliseconds. |
| introEase | string | number[] | function | outCubic | Easing for intro. Named: linear, outCubic, outExpo, inOutCubic, outBack, outElastic. Or cubic-bezier [x1,y1,x2,y2] or custom function (t)=>number. |
| introLimit | number | 16000 | Max pixels the intro animates. Rest appear instantly. |
| bleed | number | — | Canvas extension past element in pixels. Default derived from radius. |
| maxDpr | number | 2 | Device pixel ratio cap. |
| maxParticles | number | 150000 | Cap on generated pixels. |
| respectReducedMotion | boolean | true | Disable animations when prefers-reduced-motion is set. |
| onIntroEnd | () => void | — | Callback fired when intro animation completes. |
| className | string | — | Additional CSS classes for the root element. |
| style | React.CSSProperties | — | Inline styles for the root element. |
| ...rest | React.HTMLAttributes<HTMLElement> | — | Other native attributes (id, aria-*, data-*, etc.) passed to the root element. |