18:I[55681,["/_next/static/immutable/chunks/0n1e3sa98ofw1.js","/_next/static/immutable/chunks/08d5fd10hv216.js","/_next/static/immutable/chunks/0flz64rcijipw.js","/_next/static/immutable/chunks/1xn4tjfk8re4z.js","/_next/static/immutable/chunks/0le58q90h2df-.js"],"default"] 19:T3b72,"use client"; import type React from "react"; import { useLayoutEffect, useRef, useState } from "react"; import { animate } from "motion/react"; import "./otp-input.css"; /* ------------------------------------------------------------------ props -- */ export type OtpInputProps = { /** How many digits. A dash splits the row in half. */ length?: number; /** * The code that passes. Ignored when `verify` is given — use that to check * against a server. */ code?: string; /** Your own check: resolve `true` to pass, `false` to crack the eggs. */ verify?: (value: string) => boolean | Promise; /** "light" eggs on white, or "dark" eggs on black. */ theme?: "light" | "dark"; /** The line under the row. `false` hides it. */ hint?: React.ReactNode | false; /** Take the keyboard as soon as it mounts. */ autoFocus?: boolean; /** A blinking caret in the egg the next digit goes into. */ caret?: boolean; /** Fired once a full code has passed. */ onSuccess?: (value: string) => void; }; /* ---------------------------------------------------------------- motion -- */ const OUT_EASE = [0.16, 1, 0.3, 1] as const; /** How far a digit travels in or out. */ const TRAVEL = 30; const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); /* * The geometry: one jagged line down the middle of the egg, used for both * halves' clip paths and for the crack's stroke — so an egg always splits * exactly where it cracked. It is drawn against the full-size egg; the clip * paths are percentages and the crack is a viewBox, so both scale with it. */ const W = 54; const H = 68; const TEETH = 15; const AMP = 1.7; const JAG: [number, number][] = Array.from({ length: TEETH + 1 }, (_, i) => { const edge = i === 0 || i === TEETH; const off = edge ? 0 : i % 2 ? AMP : -AMP; return [50 + (off / W) * 100, (i / TEETH) * 100]; }); const pct = (p: [number, number]) => `${p[0].toFixed(2)}% ${p[1].toFixed(2)}%`; const CLIP_L = `polygon(0% 0%, ${JAG.map(pct).join(", ")}, 0% 100%)`; const CLIP_R = `polygon(100% 0%, ${JAG.map(pct).join(", ")}, 100% 100%)`; const CRACK_D = `M ${JAG.map((p) => `${((p[0] / 100) * W).toFixed(2)} ${((p[1] / 100) * H).toFixed(2)}`).join(" L ")}`; /* slot 0 rises from below, slot 1 drops from above, and so on across */ const dirOf = (i: number) => (i % 2 === 0 ? 1 : -1); type Cell = { el: HTMLDivElement; /* the uncut egg under the two halves — it hides their seam until they part */ whole: HTMLDivElement; halves: HTMLDivElement[]; digits: HTMLSpanElement[]; crack: SVGSVGElement; path: SVGPathElement; ends: ({ x: number; y: number; rotate: number } | null)[]; }; type Status = "idle" | "ok" | "err"; /* -------------------------------------------------------------- component -- */ /** * A one-time-code field made of eggs. * * Each egg is two clipped copies of the same shape, split along one jagged * line. Digits rise into the even slots and drop into the odd ones. A right * code makes the row hop; a wrong one is refused with a shake, then the crack * draws itself down every shell, the shells quiver, hinge open along it and * tumble away along crossing diagonals before coming back together, empty. * * One invisible input owns the keyboard (and the platform's one-time-code * autofill); the eggs only draw what it holds. */ export default function OtpInput({ length = 6, code = "123456", verify, theme = "light", hint, autoFocus = false, caret = true, onSuccess, }: OtpInputProps) { const size = Math.max(2, Math.min(10, Math.round(length))); const half = Math.ceil(size / 2); const rowRef = useRef(null); const fieldRef = useRef(null); const hintRef = useRef(null); const cellsRef = useRef([]); const valueRef = useRef(""); const lockedRef = useRef(false); const statusRef = useRef("idle"); const aliveRef = useRef(true); const [status, setStatus] = useState("idle"); const verifyRef = useRef(verify); verifyRef.current = verify; const onSuccessRef = useRef(onSuccess); onSuccessRef.current = onSuccess; function paintStates() { const focused = typeof document !== "undefined" && document.activeElement === fieldRef.current; cellsRef.current.forEach((c, i) => { const s = statusRef.current; c.el.dataset.state = s === "ok" ? "ok" : s === "err" ? "err" : i === valueRef.current.length && focused ? "focus" : "idle"; /* whether this slot has its digit yet — the caret only shows in an empty one */ c.el.dataset.filled = String(i < valueRef.current.length); }); } function setPhase(next: Status) { statusRef.current = next; setStatus(next); } function showDigit(i: number, char: string, delay = 0) { const c = cellsRef.current[i]; if (!c) return; const from = dirOf(i) * TRAVEL; c.digits.forEach((d) => { d.textContent = char; animate( d, { y: [from, 0], opacity: [0, 1], filter: ["blur(5px)", "blur(0px)"] }, { duration: 0.46, delay, ease: OUT_EASE }, ); }); animate(c.el, { scale: [0.93, 1.05, 1] }, { duration: 0.48, delay, ease: OUT_EASE }); } function hideDigit(i: number) { const c = cellsRef.current[i]; if (!c) return; const to = dirOf(i) * TRAVEL; c.digits.forEach((d) => { animate(d, { y: [0, to], opacity: [1, 0], filter: ["blur(0px)", "blur(5px)"] }, { duration: 0.26, ease: "easeIn" }); setTimeout(() => { /* only if nothing was typed back into this slot meanwhile */ if (valueRef.current.length <= i) d.textContent = ""; }, 250); }); animate(c.el, { scale: [1, 0.94, 1] }, { duration: 0.3, ease: OUT_EASE }); } function clearDigit(i: number) { cellsRef.current[i]?.digits.forEach((d) => { d.textContent = ""; d.style.opacity = "0"; d.style.transform = "translateY(0px)"; d.style.filter = "none"; }); } function reset() { valueRef.current = ""; if (fieldRef.current) fieldRef.current.value = ""; setPhase("idle"); lockedRef.current = false; cellsRef.current.forEach((c, i) => { clearDigit(i); c.whole.style.opacity = ""; }); paintStates(); fieldRef.current?.focus({ preventScroll: true }); } async function succeed(value: string) { setPhase("ok"); lockedRef.current = true; paintStates(); cellsRef.current.forEach((c, i) => animate(c.el, { y: [0, -10, 0], scale: [1, 1.06, 1] }, { duration: 0.6, delay: i * 0.055, ease: OUT_EASE }), ); onSuccessRef.current?.(value); await wait(1600); if (aliveRef.current) reset(); } /* the shells crack, hinge open, then tumble away along crossing diagonals */ async function fail() { setPhase("err"); lockedRef.current = true; paintStates(); const cells = cellsRef.current; const last = cells.length - 1; const row = rowRef.current; /* 1 — a heavy refusal shake */ if (row) animate(row, { x: [0, -13, 12, -10, 8, -5, 3, 0] }, { duration: 0.66, ease: "easeInOut" }); await wait(300); if (!aliveRef.current) return; /* 2 — the crack draws itself down each shell, left to right */ cells.forEach((c, i) => { const len = c.path.getTotalLength(); c.path.style.strokeWidth = "1.25"; c.path.style.strokeDasharray = String(len); c.path.style.strokeDashoffset = String(len); c.crack.style.opacity = "1"; animate(c.path, { strokeDashoffset: [len, 0] }, { duration: 0.54, delay: i * 0.08, ease: [0.4, 0, 0.25, 1] }); }); await wait(540 + last * 80 + 140); if (!aliveRef.current) return; /* 3 — the tension beat: the shells quiver and the crack widens */ cells.forEach((c, i) => { animate(c.el, { scale: [1, 1.045, 1.015], x: [0, -1.4, 1.4, -0.9, 0] }, { duration: 0.46, delay: i * 0.02, ease: "easeInOut" }); animate(c.path, { strokeWidth: [1.25, 2.3] }, { duration: 0.46, delay: i * 0.02, ease: "easeOut" }); }); await wait(500); if (!aliveRef.current) return; /* 4 — the two halves hinge open along the crack */ cells.forEach((c, i) => { const [L, R] = c.halves; /* from here on the egg is two pieces; the uncut one under them steps out */ c.whole.style.opacity = "0"; const o = { duration: 0.38, delay: i * 0.035, ease: [0.2, 0.9, 0.3, 1] as const }; animate(L, { x: [0, -3.5], rotate: [0, -7] }, o); animate(R, { x: [0, 3.5], rotate: [0, 7] }, o); animate(c.path, { opacity: [1, 0.35] }, { duration: 0.38, delay: i * 0.035, ease: "easeOut" }); }); await wait(430); if (!aliveRef.current) return; /* 5 — they break away: out along an X, then down under gravity */ cells.forEach((c, i) => { const up = i % 2 === 0 ? -1 : 1; const push = 46 + i * 7; const [L, R] = c.halves; const o = { duration: 1.15, delay: i * 0.05, ease: [0.3, 0, 0.55, 1] as const }; animate(L, { x: [-3.5, -push * 0.62, -push], y: [0, up * 20, 104], rotate: [-7, up * -22, -56], scale: [1, 1, 0.9], opacity: [1, 1, 0] }, o); animate(R, { x: [3.5, push * 0.62, push], y: [0, -up * 20, 104], rotate: [7, up * 22, 56], scale: [1, 1, 0.9], opacity: [1, 1, 0] }, o); c.ends = [{ x: -push, y: 104, rotate: -56 }, { x: push, y: 104, rotate: 56 }]; animate(c.crack, { opacity: [1, 0] }, { duration: 0.5, delay: i * 0.05, ease: "easeOut" }); }); await wait(1150 + last * 50 + 260); if (!aliveRef.current) return; /* 6 — the shells come back together, empty */ cells.forEach((c, i) => { clearDigit(i); c.crack.style.opacity = "0"; c.path.style.strokeWidth = "1.25"; c.path.style.opacity = "1"; c.halves.forEach((h, k) => { const e = c.ends[k] ?? { x: 0, y: 0, rotate: 0 }; animate(h, { x: [e.x, 0], y: [e.y, 0], rotate: [e.rotate, 0], scale: [0.9, 1], opacity: [0, 1] }, { duration: 0.78, delay: i * 0.05, ease: OUT_EASE }); }); c.ends = [null, null]; }); await wait(1080); if (aliveRef.current) reset(); } async function check(value: string) { let ok: boolean; try { ok = verifyRef.current ? await verifyRef.current(value) : value === code; } catch { ok = false; } if (!aliveRef.current) return; if (ok) void succeed(value); else void fail(); } function onInput() { const field = fieldRef.current; if (!field) return; if (lockedRef.current) { field.value = valueRef.current; return; } const prev = valueRef.current; const next = field.value.replace(/\D/g, "").slice(0, size); field.value = next; if (next === prev) return; if (next.length > prev.length) { for (let i = prev.length; i < next.length; i += 1) showDigit(i, next[i] ?? "", (i - prev.length) * 0.06); } else { for (let i = next.length; i < prev.length; i += 1) hideDigit(i); } valueRef.current = next; paintStates(); if (next.length === size) { lockedRef.current = true; setTimeout(() => { if (aliveRef.current) void check(next); }, 340); } } /* collect the eggs, and bring the row in — before the first paint, so nothing flashes */ useLayoutEffect(() => { aliveRef.current = true; const row = rowRef.current; if (!row) return; cellsRef.current = Array.from(row.querySelectorAll(".potp__cell")).map((el) => ({ el, whole: el.querySelector(".potp__whole") as HTMLDivElement, halves: Array.from(el.querySelectorAll(".potp__half")), digits: Array.from(el.querySelectorAll(".potp__digit")), crack: el.querySelector(".potp__crack") as SVGSVGElement, path: el.querySelector(".potp__crack path") as SVGPathElement, ends: [null, null], })); cellsRef.current.forEach((c, i) => animate(c.el, { y: [14, 0], opacity: [0, 1], scale: [0.9, 1] }, { duration: 0.6, delay: 0.05 + i * 0.06, ease: OUT_EASE }), ); if (hintRef.current) { animate(hintRef.current, { y: [10, 0], opacity: [0, 1] }, { duration: 0.6, delay: 0.5, ease: OUT_EASE }); } if (autoFocus) fieldRef.current?.focus({ preventScroll: true }); paintStates(); return () => { aliveRef.current = false; }; /* the row is built once per length */ }, [size, autoFocus]); const defaultHint = ( <> Enter {code} to pass. ); return (

{ /* anywhere on the row puts the caret in the field */ event.preventDefault(); fieldRef.current?.focus({ preventScroll: true }); }} >

{Array.from({ length: size }, (_, i) => ( {i === half && ( )}

{/* Two clipped halves never quite meet: antialiasing leaves a hairline along the crack. An uncut egg drawn under them fills it, and is taken away only when the halves come apart. */} {[CLIP_L, CLIP_R].map((clip, k) => (

))} {caret &&

))}

{hint !== false && (

{status === "ok" ? ( Verified. ) : status === "err" ? ( Wrong code. ) : ( (hint ?? defaultHint) )}

)}

); } 1a:T1446,/* =========================================================================== OTP — a one-time-code field made of eggs. Every egg is two clipped copies of the same shape, split along one jagged line, so it can crack and come apart there. Two themes: pale eggs on white, and charcoal eggs on black. Success and failure keep their green and red in both, tuned so each still reads on its own ground. =========================================================================== */ .potp { --egg-w: 54px; --egg-h: 68px; --idle: #e6e6e6; --idle-ink: #2c2c2c; --focus-bd: #b4b4b4; --focus-bg: #dcdcdc; --ok: #00c514; --ok-bg: #edfced; --ok-ink: #0a9418; --err: #ff1414; --err-bg: #fdecec; --err-ink: #d01111; --sep: #a8a8a8; --hint: #a3a3a3; --hint-strong: #525252; --caret: #111111; display: flex; flex-direction: column; align-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .potp[data-theme="dark"] { --idle: #1f1f1f; --idle-ink: #ededed; --focus-bd: #5c5c5c; --focus-bg: #2a2a2a; --ok: #1fd735; --ok-bg: #0d2410; --ok-ink: #45e25a; --err: #ff3b3b; --err-bg: #2a1010; --err-ink: #ff6b6b; --sep: #5a5a5a; --hint: #737373; --hint-strong: #d4d4d4; --caret: #ffffff; } .potp__stage { position: relative; } .potp__row { display: flex; align-items: center; gap: 7px; user-select: none; -webkit-user-select: none; } /* the separator and the egg are both items of the row */ .potp__slot { display: contents; } /* ---- the egg ------------------------------------------------------------ */ .potp__cell { position: relative; flex: none; width: var(--egg-w); height: var(--egg-h); will-change: transform; } .potp__whole, .potp__half { position: absolute; inset: 0; will-change: transform, opacity; backface-visibility: hidden; } .potp__egg { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border: 3px solid transparent; border-radius: 50% 50% 48% 48% / 62% 62% 38% 38%; background: var(--idle); transition: background-color 0.28s ease, border-color 0.28s ease; } .potp__digit { font-size: 26px; font-weight: 400; line-height: 1; color: var(--idle-ink); opacity: 0; user-select: none; will-change: transform, opacity, filter; transition: color 0.28s ease; } .potp__cell[data-state="focus"] .potp__egg { border-color: var(--focus-bd); background: var(--focus-bg); } .potp__cell[data-state="ok"] .potp__egg { border-color: var(--ok); background: var(--ok-bg); } .potp__cell[data-state="ok"] .potp__digit { color: var(--ok-ink); } .potp__cell[data-state="err"] .potp__egg { border-color: var(--err); background: var(--err-bg); } .potp__cell[data-state="err"] .potp__digit { color: var(--err-ink); } /* the crack */ .potp__crack { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .potp__crack path { fill: none; stroke: var(--err); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; } /* ---- the caret --------------------------------------------------------- A blinking bar in the empty egg the next digit goes into, so where you are typing is never a guess. ------------------------------------------------------------------------- */ .potp__caret { position: absolute; left: 50%; top: 50%; width: 2px; height: 40%; margin: 0 0 0 -1px; border-radius: 2px; background: var(--caret); opacity: 0; transform: translateY(-50%); pointer-events: none; } .potp__cell[data-state="focus"][data-filled="false"] .potp__caret { animation: potpBlink 1.1s ease-in-out infinite; } /* a soft blink: it holds, fades out, holds, fades back — never a hard flash */ @keyframes potpBlink { 0%, 40% { opacity: 1; } 55%, 85% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .potp__cell[data-state="focus"][data-filled="false"] .potp__caret { animation: none; opacity: 1; } } .potp__sep { flex: none; width: 13px; font-size: 19px; line-height: 1; text-align: center; color: var(--sep); user-select: none; transition: color 0.28s ease; } /* the invisible field that actually owns the keyboard */ .potp__field { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; opacity: 0; cursor: default; } .potp__field:focus { outline: none; } .potp__hint { margin: 28px 0 0; font-size: 14px; line-height: 1.4; color: var(--hint); transition: color 0.28s ease; } .potp__hintStrong { color: var(--hint-strong); transition: color 0.28s ease; } .potp__hintOk { color: var(--ok-ink); } .potp__hintErr { color: var(--err-ink); } @media (max-width: 680px) { .potp { --egg-w: 44px; --egg-h: 56px; } .potp__digit { font-size: 22px; } .potp__sep { width: 11px; font-size: 16px; } } 10:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Egg OTP — Pin UI\",\"description\":\"A one-time-code field made of eggs that crack on a wrong code. Each egg is two clipped copies of one shape, split along a single jagged line that is also the crack's stroke, so an egg always breaks exactly where it cracked. A right code makes the row hop; a wrong one is refused with a shake, the cra\",\"url\":\"https://pinui.xyz/components/otp-input\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://pinui.xyz/#components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Egg OTP\",\"item\":\"https://pinui.xyz/components/otp-input\"}]}"}}]],["$","$L18",null,{"entry":{"slug":"otp-input","name":"Egg OTP","isNew":true,"creator":{"handle":"RachitThakur146","url":"https://x.com/RachitThakur146"},"tagline":"A one-time-code field made of eggs that crack on a wrong code.","blurb":"Each egg is two clipped copies of one shape, split along a single jagged line that is also the crack's stroke, so an egg always breaks exactly where it cracked. A right code makes the row hop; a wrong one is refused with a shake, the crack draws itself down every shell, and the halves hinge open and tumble away before coming back together, empty.","highlights":["Crack, hinge and tumble","Light and dark","One-time-code autofill","Your own verify"],"clip":"/clips/loop/otp-input-dark.mp4","poster":"/clips/loop/otp-input-dark.jpg","sound":false,"zoom":1.65,"stage":"#ffffff","stageDark":"#0b0b0b","clipStage":"#0b0b0b","spill":true,"usage":"import OtpInput from \"@/components/library/OtpInput\";\n\n check(code)} theme=\"light\" />","props":[{"name":"length","type":"number","fallback":"6","note":"How many digits. A dash splits the row in half."},{"name":"code","type":"string","fallback":"\"123456\"","note":"The code that passes, for demos. Ignored when verify is given."},{"name":"verify","type":"(value) => boolean | Promise","note":"Your own check, e.g. a request to your server."},{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"Pale eggs on white, or charcoal eggs on black."},{"name":"hint","type":"ReactNode | false","fallback":"\"Enter 123456 to pass.\"","note":"The line under the row; false hides it."},{"name":"autoFocus","type":"boolean","fallback":"false","note":"Take the keyboard as soon as it mounts."},{"name":"caret","type":"boolean","fallback":"true","note":"A softly blinking caret in the egg the next digit goes into."},{"name":"onSuccess","type":"(value) => void","note":"Fired once a full code has passed."}],"files":[{"name":"OtpInput.tsx","lang":"tsx"},{"name":"otp-input.css","lang":"css"}],"info":{"paragraphs":["Digits rise into the even eggs and drop into the odd ones, blurring in as they land, and the egg you are on is outlined. One invisible input owns the keyboard, so paste, backspace and the phone's one-time-code autofill all just work; the eggs only draw what it holds.","A right code turns the row green and makes it hop, egg by egg. A wrong one is refused with a heavy shake. Then the crack draws itself down each shell, the shells quiver as it widens, hinge open along it, and break away along crossing diagonals before gravity takes them — and the row comes back together, empty, ready for another try. Pass verify to check the code against your own server."]},"origin":{"label":"Egg OTP"}},"panes":[{"name":"OtpInput.tsx","lang":"tsx","code":"$19"},{"name":"otp-input.css","lang":"css","code":"$1a"}],"registryUrl":"https://pinui.xyz/r/otp-input.json"}]]

Egg OTP — Pin UI Component