Pattern lock
3x3 pattern lock with a pixel trail; skipped middle nodes join automatically, a wrong pattern shatters and falls, a right one turns green.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxPattern pattern="0,3,6,7,8" />
Installation
pnpm dlx shadcn@latest add @lumesec/px-patternFirst 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-pattern.jsonUsage
import { PxPattern } from "@/components/lumesec/px-pattern";
export function Example() {
return (
<PxPattern />
);
}Behaviour
Draw through the nodes to unlock. The trail is pixels, skipped middle nodes join automatically, a wrong pattern shatters and falls, and the right one goes green node by node.
API reference
Attributes
patternReact proppatternTypestringDefault0,3,6,7,8The correct pattern as comma-separated node indexes 0 to 8, row by row from the top left. Read when a pattern is checked and when Show me runs.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
unlockReact proponUnlockDetail{}Fires when the drawn pattern matches pattern.
failReact proponFailDetail{}Fires when a pattern of two or more nodes does not match.
Methods
Call them on the element, for example through a React ref.
demo()Draws the correct pattern node by node, then checks it. Ignored while already running or after a correct pattern.
reset()Clears the current pattern and returns to the idle prompt.
Properties
secret (read-only)Typenumber[]The pattern attribute parsed into node indexes.
Accessibility
- The canvas has
role="img"andaria-label="Pattern lock. Use Show me to watch the right pattern.". - The status text under the grid is an
aria-live="polite"region that reports success or "Wrong pattern". - Drawing requires a pointer; "Show me" is a native button.
- Reduced motion: the wrong-pattern shake and the success sparks are skipped; the falling debris still animates.
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 --destructive, --foreground, --lumesec, --lumesec-success and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-danger, --ui-fg, --ui-muted and --ui-ok.
Notes
- The match is exact and ordered, and the pattern is checked in the browser from a visible attribute, so this is a UI pattern, not a security control.
- The default pattern is an L. The host carries
data-state="ok"ordata-state="wrong"; it resets 2.4 seconds after a match and 1.2 seconds after a failure. - The canvas is a fixed 216 by 216px.
Related
Was this page helpful?