Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { InteractiveTeamHover } from "@/registry/tween/interactive-team-hover"
export function InteractiveTeamHoverDemo() {
return <InteractiveTeamHover />
}
import { InteractiveTeamHover } from "@/components/ui/interactive-team-hover"<InteractiveTeamHover
defaultLabel="The Squad"
members={[
{ name: "Colin Reyes", img: "/colin.jpeg" },
{ name: "Liam Carter", img: "/liam.jpeg" },
// ...
]}
/>The members render as a single row of compact thumbnails. When the cursor
enters the row, the headline switches from defaultLabel to the name of
whichever portrait is under the pointer, and that thumbnail smoothly scales
from thumbSize to thumbHoverSize while its neighbors stay put. Moving off
the row resets the headline back to the default label. Pass your own
members array with { name, img } entries, and adjust accent, ink,
and cream to match your palette. The interaction is pointer-driven, so it
gracefully no-ops on touch devices that lack hover.
| Prop | Type | Default | Description |
|---|---|---|---|
members | InteractiveTeamMember[] | 9 defaults | Each entry is { name, img, imgAlt? }. |
defaultLabel | string | "The Squad" | Headline shown when the cursor is on the row but not on a specific thumb. |
thumbSize | number | 70 | Default thumbnail size (px). |
thumbHoverSize | number | 140 | Hovered thumbnail size (px). |
accent | string | "#f93535" | Color used for the member name headlines. |
ink | string | "#0f0f0f" | Background color. |
cream | string | "#e3e3db" | Foreground/default label color. |
className | string | — | Extra classes on the outer container. |