Character Afterimage

Rainbow holographic silhouettes with an optional one-time entrance trail for character art.

Components / Character Afterimage

Surfacesmotioncharacterholographic

Character artwork with cycling holographic silhouettes and an optional entrance trail.

Preview

Loading preview…

Usage

Rainbow holographic silhouettes with an optional one-time entrance trail for character art.

<CharacterAfterimage
  src="/companion.png"
  alt="Pixel companion"
  width={180}
  height={260}
  entrance
/>

Files

components/steez/CharacterAfterimage.tsxcomponent

components/steez/CharacterAfterimage.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { CharacterAfterimage } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/character-afterimage.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { CharacterAfterimage } from "<project-root>/components/steez/CharacterAfterimage";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/character-afterimage.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Avatar Stage

Framed avatar viewport with a stable shell, viewport width, and bottom divider.

Boiling Lines

Hand-drawn motion for artwork, SVG lines, and decorative borders.