Model morph
Model picker where one pixel swarm morphs between a diamond, a ring and a rotating star, with speed, depth and cost bars.
Installation
pnpm dlx shadcn@latest add @lumesec/px-modelFirst 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-model.jsonUsage
import { PxModel } from "@/components/lumesec/px-model";
export function Example() {
return (
<PxModel />
);
}Behaviour
One swarm of pixels takes a different shape per model: a sparse, jittery diamond for speed, a calm ring for balance, a dense rotating star for depth. Switching sends every pixel flying to its new place.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
changeReact proponChangeDetail{ model: string }Fires when the user picks a model. model is Swift, Balanced or Deep. Not fired for the initial selection.
Methods
Call them on the element, for example through a React ref.
select(index: number)Selects model 0 (Swift), 1 (Balanced) or 2 (Deep) and fires change.
Keyboard
| Keys | Action |
|---|---|
| ArrowLeft / ArrowRight | Select the previous or next model, wrapping around, and move focus to it. |
Accessibility
- The model buttons sit in a
role="radiogroup"witharia-label="Model"; each hasrole="radio"andaria-checked. - Roving tabindex: only the selected option is in the tab order.
- The canvas has
role="img"with anaria-labelnaming the model and its speed, depth and cost scores out of 10. - Reduced motion: pixels jump straight into the new shape instead of flying; the shape's own rotation and jitter continue.
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 --card, --foreground, --lumesec, --muted and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-muted, --ui-surface and --ui-track.
Notes
- The three models and their scores are built-in demo data: Swift (speed 10, depth 3, cost 2), Balanced (7, 7, 5) and Deep (4, 10, 9). Balanced is selected initially.
- The canvas is 212px tall.
Related
Was this page helpful?