@brxndxndiaz/ui
Back to componentsdust-field

Dust Field

Turns any image or SVG into a reactive dust field that disperses on hover.

Preview

Source
Optimized
Radius160
Scatter45
Float4
Point Size3.60
Pixel Density1.50
Density Min0.40

About

Turns any image or SVG into a reactive dust field that disperses on hover. Built to be composable and ready for product interfaces.

Installation

npx @brxndxndiaz/ui add dust-field
Open JSON

Usage

TypeScriptdust-field.tsx
import { DustField } from "@/components/library/dust-field"

export default function Example() {
  return (
    <div className="h-80 w-full">
      <DustField
        src="/logo.svg"
        className="h-full w-full"
        radius={0.001}
        radiusScale={0.4}
        floatStrength={1}
        sampleSize={256}
        scatter={40}
        pixelDensity={3}
        pointSize={2}
      />
    </div>
  )
}

Examples

Intro

Brandon Diaz

I'm a full-stack developer building the tools I want to use, specializing in TypeScript and React, Node and Express, and motion-driven UI systems.

Source

// Source: src/components/library/dust-field.tsx

On this page

PreviewAboutInstallationUsageExamplesSource