Unlock Face Id

A glyph showing Face ID authentication with animated brackets and a face. It transitions between states like scanning, success, and error. Use it to indicate authentication status in a UI.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/unlock-face-id

npx layro-cli add @educlopez/unlock-face-id

npx layro-cli add @educlopez/unlock-face-id

bunx layro-cli add @educlopez/unlock-face-id

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { useCallback, useEffect, useId, useRef, useState } from "react";

export type UnlockStatus = "idle" | "scanning" | "success" | "error";

export type UnlockFaceIdProps = {
  /** Content gated behind the scan — blurred while locked, sharp once unlocked */
  children?: ReactNode;
  /** Additional CSS classes */
  className?: string;

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 7, 2026
First release.

Similar components

View all

Clerk Otp

Otp Slots