Interactive Sprite

Turn a directional sprite sheet into a character that follows the pointer and returns to rest when movement stops.

Features

• Selects one of eight directional frames from the pointer's angle around the character.
• Returns to the center frame 300ms after pointer movement stops by default.
• Lets users try their own sprite sheet from the DialKit panel without uploading it to a server.
• Uses one animation frame per pointer update and no animation dependency.
• Ignores touch pointers and stays centered when reduced motion is requested.
• Supports custom grid dimensions and frame maps.
• Includes DialKit controls for tuning the dead zone and idle delay live.

Installation

pnpm dlx shadcn@latest add @tentui/interactive-sprite

Create a sprite sheet with ChatGPT

Paste this prompt into ChatGPT image generation and replace the bracketed character description with your own:

Create a square 3×3 sprite sheet of the same [character description], shown as a consistent head-and-shoulders portrait in every cell.
 
Arrange the gaze directions exactly like this:
- Top row: up-left, up, up-right
- Middle row: left, straight ahead, right
- Bottom row: down-left, down, down-right
 
Use nine equally sized cells with no gaps, borders, labels, or padding. Keep the character's scale, position, expression, lighting, clothing, and art style identical in every cell; only the eyes and head direction should change. Center the portrait in each cell, avoid cropping, use a transparent background, and export one 1536×1536 PNG or WebP image.

Image generators can drift between cells. Check that the grid is evenly spaced and each portrait stays aligned before using the result.

Usage

Place the generated image in your public directory, then pass its URL to the component.

import { InteractiveSprite } from "@/components/interactive-sprite";

<InteractiveSprite
  alt="Character looking toward the pointer"
  className="size-40 rounded-full"
  src="/character-sprite.webp"
/>

The default frame map expects a 3×3 sheet in the order described above. Adjust frames, columns, and rows when your sheet uses a different layout.

Accessibility

Provide a useful alt when the character carries meaning. Pass an empty string when it is decorative. Touch pointers are ignored, and reduced-motion users see the centered resting frame.

API reference