Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Print Styles, animated React component

A cover-image style picker that prints the picture as you choose. There is 1-bit, four handheld greens, newsprint with four inks at their real screen angles, or a two-ink risograph slightly off register. A print head runs across to lay each style down, and a printer's loupe magnifies the dots under your pointer; press and hold to see the original. The styles are a radio group with arrow keys.

  • Pro
  • Inputs & Controls
  • Hover

The print head chattering as it runs across the picture. 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.

Cover style
Cyan, magenta, yellow and black dots at their screen angles
Move over the picture to look through the loupe. Press to see the original.

Props

PropTypeDefaultWhat it does
defaultStyle"original" | "mac" | "pocket" | "newsprint" | "riso""newsprint"The style chosen first.
onChange(style: PrintStyle) => void—Called with the chosen style.
srcstring—An image to print instead of the painted demo scene (it must allow cross-origin use).
titlestring"Cover style"The card's heading.
enableSoundbooleantrueThe print head running across. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalsePicks styles 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

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

A cover-image style picker that prints the picture as you choose. Pick a style and a print head runs across the image, laying the new print down behind it through an ordered-dither dissolve: 1-bit black and paper, four handheld greens, newsprint (four inks screened at their real angles, 15, 75, 0 and 45 degrees, so the dots fall into rosettes), or risograph (two fluorescent inks with grain, slightly off simpler version is drawn on a 2D canvas.

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

Print Styles questions

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

The print head chattering as it runs across the picture. 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 inputs & controls