Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Silk Print, animated React component

A silk scarf hanging from a rod on a product card, drawn as a real cloth mesh in WebGL. Waves roll down it in a soft draught and its sheen runs along the threads and slides across the folds. Your pointer is a breath of air that ripples the silk, and dragging turns it on the rod so you can see the print through the back. Pick a colourway and the print changes. The name, details, price and colourway buttons are ordinary HTML.

  • Pro
  • 3D Components
  • Hover

A soft rustle whenever the draught or your hand moves the silk. 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.

Tidewater scarf
Mulberry silk twill, 90 × 90 cm, hand-rolled hem
$185
Indigo
Move over the silk to stir it. Drag to turn it round.

Props

PropTypeDefaultWhat it does
namestring"Tidewater scarf"The product's name.
detailstring"Mulberry silk twill, 90 × 90 cm, hand-rolled hem"The line under the name.
pricestring"$185"The price shown.
colourwaysSilkColourway[]—The colourways to choose from: { id, name, ground, mid, ink, accent }.
defaultColourwaystring"indigo"The id of the colourway shown first.
onChange(id: string) => void—Called with the chosen colourway's id.
enableSoundbooleantrueA rustle when the wind or your hand moves the silk. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseTurns the scarf and changes colourway by itself 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

    Silk Print 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 Silk Print works

A silk scarf hanging from a rod, for a product page. The print hangs in a soft draught: slow waves roll down it from the rod, bigger toward the free hem, and its surface catches the light the way silk does, a bright sheen that runs along the threads and slides across the folds as they move. Move your pointer over it and you're a breath of air: ripples spread out from where you are and the cloth billows back.

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

Silk Print questions

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

A soft rustle whenever the draught or your hand moves the silk. 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 3d components