Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Sand Drift Gallery, animated React component

An endless strip of pictures that turn to sand at the edges. A wind takes the grains, swirling them outward and up, and packs them back into a picture as it returns; fling the strip and the sand trails behind, blown harder the faster you throw it. Tens of thousands of WebGL points meet a crisp card in the middle, and the strip drifts on its own while nobody is touching it. Focus it and the arrow keys step through the pictures.

  • Pro
  • Cards
  • Scroll

Sand hissing behind the strip when you fling it, louder the harder you throw. 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.

Field notes
Drag or fling the strip. Arrow keys step through.
Dunes at noon, Erg, 41 °C. Picture 1 of 5.

Props

PropTypeDefaultWhat it does
itemsDriftItem[]—Captions for the five painted pictures: { title, note }.
titlestring"Field notes"The heading above the strip.
scatternumber150How far the sand flies at the edges, in px.
driftnumber22How fast the strip drifts while nobody is touching it, in px per second.
enableSoundbooleantrueSand hissing as you fling the strip. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseFlings the strip now and then until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

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 with your API key

    Sand Drift Gallery is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Sand Drift Gallery works

An endless strip of pictures that turn to sand at the edges. Toward either edge each picture breaks into grains, and a wind takes them: they swirl outward and up on a curling into place. Drag the strip, or fling it, and the sand trails behind the motion, blown harder the faster you throw. In the middle the pictures are crisp.

The source, the install command and the build prompt come with Pro.

Sand Drift Gallery questions

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

Sand hissing behind the strip when you fling it, louder the harder you throw. 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 cards