ASCII art and canvas effect components for React

The pieces that give a dark product some texture without a heavy 3D dependency. An ASCII turntable that renders a model as characters, a split flap ticker board, a screen shuffle that moves through product shots on scroll, and a call to action that follows the cursor. They are the decorative end of the library, kept in the same dark system as the rest.

12 components, installable with the shadcn CLI.

• ASCII Turntable

  A 3D logo or token mark drawn in ASCII characters that turns with the cursor, for crypto, AI and developer tool landing pages.

  View component

• Metal Badge

  Any SVG mark as a domed chrome badge, drawn in WebGPU. It leans toward the cursor with the light following, and a click flips it. Falls back to a flat chrome face where WebGPU is missing.

  View component

• Stone Badge

  Any SVG mark as a carved stone badge, drawn in WebGPU: facets, fissures and mineral speckle on a roughened dome. It leans toward the cursor with the key light following, and a click flips it. Falls back to a flat stone face where WebGPU is missing.

  View component

• Gold Badge

  The metal badge in gold: any SVG mark as a domed, brushed gold badge drawn in WebGPU. It leans toward the cursor with the light following, and a click flips it.

  View component

• Holographic Badge

  Any SVG mark as a holographic badge: a silver dome under a thin film whose colour shifts with the angle, with a fine sparkle. Drawn in WebGPU, it leans toward the cursor and flips on click.

  View component

• Glass Badge

  Any SVG mark as a frosted glass badge: translucent, with the light catching its rolled edge and the page showing through. Drawn in WebGPU, it leans toward the cursor and flips on click.

  View component

• Neon Badge

  Any SVG mark as a dark badge with a neon outline that glows and breathes. Drawn in WebGPU, it leans toward the cursor and flips on click.

  View component

• Lightning Badge

  Any SVG mark as a dark glass badge with lightning crawling over its face. Drawn in WebGPU, it leans toward the cursor and flips on click.

  View component

• ASCII Badge

  Any SVG mark as a domed badge drawn in characters: the lit surface is read per cell and each cell's brightness picks a character from the ramp, so the letters change with the light as it turns. Drawn in WebGPU, it leans toward the cursor and flips on click.

  View component

• Matrix Ticker Board

  A dot matrix stock price board drawn on canvas, where changed digits dissolve and redraw on each quote, for trading floors and landing pages.

  View component

• Screen Shuffle

  A stack of product screenshots that rotates the front screen to the back, for SaaS and fintech landing page heroes.

  View component

• Mouse-Trail CTA

  A call to action button whose glow is fed by a cursor particle trail, for the landing page hero of an AI or fintech product.

  View component