Pixel reactions
Pixel like button whose heart explodes and snaps back filled; press and hold opens four more reactions that the same pixels fly into.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxReact count={128} />Installation
pnpm dlx shadcn@latest add @lumesec/px-reactFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-react.jsonUsage
import { PxReact } from "@/components/lumesec/px-react";
export function Example() {
return (
<PxReact count={128} />
);
}Behaviour
The heart’s pixels explode outward and snap back filled. Unliking drains it row by row to an outline. Press and hold for four more reactions; picking one sends the same pixels flying into its shape.
API reference
Attributes
countReact propcountTypenumberDefault128Starting reaction count. Read once on first connect.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
reactReact proponReactDetail{ liked: boolean, reaction: string }Fires on like, unlike and when a reaction is picked. reaction is Love, Star, Zap, Fire or Spark.
Methods
Call them on the element, for example through a React ref.
toggle()Likes or unlikes with the current reaction and adjusts the count by one.
pick(index: number)Selects reaction 0 to 4 (Love, Star, Zap, Fire, Spark), marks it liked and moves focus to the button.
Keyboard
| Keys | Action |
|---|---|
| ArrowUp (on the button) | Open the reaction palette and focus the current reaction. |
| ArrowLeft / ArrowRight (in the palette) | Move focus between reactions, wrapping around. |
| Escape (in the palette) | Close the palette and return focus to the button. |
Accessibility
- The main control is a native button with
aria-pressedfor the liked state andaria-label="Like. Press and hold for more reactions"; after a pick the label starts with the reaction name. - The palette has
role="menu"; each reaction is a button withrole="menuitem"and anaria-label. - The count is plain text without a live region.
- Reduced motion: pixels move straight to their new shape without exploding, the palette opens without its pop-in and the spark bursts are skipped.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --border, --card, --destructive, --foreground, --lumesec, --lumesec-shine, --lumesec-warning, --muted and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-danger, --ui-fg, --ui-muted, --ui-raised, --ui-shine, --ui-surface and --ui-warn.
Notes
- A press held for 430 ms opens the palette instead of toggling. Pressing anywhere else in the component closes it.
- The button is a fixed 76 by 76px; the palette opens above it.
Related
Was this page helpful?