Character Selector is a gacha game style deploy scene: three equip slots sit on stage, and clicking one opens a blurred roster overlay where star tier cards can be selected, swapped between slots, or deselected. The whole flow is choreographed with GSAP timelines, from the backdrop blur to the staggered roster grid, and hover and click sounds play throughout. Feed it your own roster through the characters prop. Built with React and Tailwind CSS for game landing pages and interactive showcases.
Installation
Install dependencies.
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import CharacterSelector from "@/components/pro/blocks/character-selector";<CharacterSelector characters={characters} slots={3} />Data shape
type Character = {
id: string;
name: string;
image: string; // full art shown in the equip slots
icon: string; // portrait shown in the roster grid
star: 4 | 5; // tier, drives the level-box border + glow
level: number;
};Behavior
- Clicking a slot opens the roster overlay with a GSAP timeline: gradient fade-in, backdrop blur, navbar slide-down, staggered roster boxes, footer button fade-in.
- Picking an empty slot sets the footer to Deploy; picking a character already in another slot swaps the two; picking the character already in the active slot unselects it.
- Hover and click sounds play on slots, roster boxes, and the deploy button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
characters | Character[] | required | The roster to pick from. |
slots | number | 3 | Number of equip slots rendered. |
title | string | "Select Resonator" | Title of the roster overlay navbar. |
onDeploy | (selected: (Character | null)[]) => void | — | Fired when the deploy button is used. |