ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Dust Snap, animated React component

A word that turns to dust when you snap, the way it happens on film. It shivers; then, from one end, the surface goes dark and grainy in creeping patches and gives way. It does not vanish as smoke: it becomes a dense cloud of dry, earthy specks that holds the word's shape for a beat before a wind carries it off to the right in wisps. Snap again and the dust is drawn back in against the wind, last gone first home. The sound is built from the animation itself: a dry finger snap, crackle and grains that follow the crumbling front, a breath of air that swells and thins with the cloud, and a soft knock when the word is whole again.

  • Free
  • Motion Effects
  • Spring

A dry finger snap, then a tremble of rustle as the word shivers. As the surface goes dark it crackles like dry earth, and every speck that breaks away is a tiny grain of sound that pans to where the front is crossing the word, so the busier the crumbling the more you hear. The cloud is a soft, gusting breath of air that swells and thins with it and drifts right with the wind. Snapping again gathers the air upward, specks land as light ticks, and the word is set down with a soft low knock. Everything is driven by the picture frame by frame. Nothing plays until the visitor has clicked or pressed a key once. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Snap to turn it to dust.

Props

PropTypeDefaultWhat it does
textstring"NexusUI"The word that turns to dust. It is fitted to the card whatever the width.
theme"light" | "dark""light"Light (dark dust on a pale ground, as in the film) or dark (pale dust on near-black).
autoplaybooleanfalseSnaps by itself, waits for the dust to settle and snaps again, until the first real click. Never runs under reduced motion (the word fades instead) and pauses while the card is off screen.
enableSoundbooleantruePlays a dry finger snap, then crackle and grains that follow the crumbling front, a breath of air that swells and thins with the cloud, ticks as the dust lands on the way back and a soft knock when the word is whole. Every layer is driven by the picture, frame by frame, so it stays in step. Follows the site-wide sound switch; autoplay makes the same sounds once the visitor has used the page.
volumenumber0.7Sound volume, 0 to 1.
framedbooleantrueDraws the card with rounded corners and a shadow. Pass false to fill whatever surface you put it on, with no card around it.
onChange(gone: boolean) => void—Called when it finishes turning to dust (true) or coming back (false).

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry

    Run this once per project. It writes the Nexus UI entry into components.json for you:

    npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"

    Type it exactly as shown. {name} is filled in by the CLI with the component you ask for, so you never replace it.

  1. 3

    Add the component

    Run this from your project root. It adds the component, the helpers it imports and its npm packages.

    npx shadcn@latest add @nexus-labs/dust-snap
  2. 4

    Check what was added

    With a project made as in the Quick Start (a src/ folder), these files land in it:

    components/
    dust-snap/
    dust-snap-sound.ts
    dust-snap.tsx
    index.ts
  3. 5

    Copying by hand? Skip the registry

    Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:

    npm install framer-motion

    Then show the source and create each file at the path it gives:

  4. 6

    Use it in a page

    Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

    // src/app/page.tsx
import { DustSnap } from "@/components/dust-snap";

export default function Page() {
  return (
    <main>
      <DustSnap />
    </main>
  );
}

Dust Snap questions

Does it make sound, and how do I turn it off?

A dry finger snap, then a tremble of rustle as the word shivers. As the surface goes dark it crackles like dry earth, and every speck that breaks away is a tiny grain of sound that pans to where the front is crossing the word, so the busier the crumbling the more you hear. The cloud is a soft, gusting breath of air that swells and thins with it and drifts right with the wind. Snapping again gathers the air upward, specks land as light ticks, and the word is set down with a soft low knock. Everything is driven by the picture frame by frame. Nothing plays until the visitor has clicked or pressed a key once. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More motion effects