Micro InteractionsClerk Password
Clerk Password
A Clerk Password Vault animation with smooth transitions and visual feedback.
Preview
•
•
•
•
•
•
•
Passwords
Simple and secure password authentication, complete with breach detection and recovery options.
Code
"use client";
import { motion } from "motion/react";
import { useState } from "react";
import { GoShieldCheck, GoShieldX } from "react-icons/go";
export default function ClerkPassVault() {
const [isHovered, setIsHovered] = useState(false);
const childVariants = {
open: {
y: -10,
transition: {
duration: 0.3,
},
},
close: {
y: 0,
},
};
const parentVariants = {
open: {},
close: {},
};
const inputVariants = {
open: {
y: -7,
border: "1px solid var(--color-cyan-400)",
boxShadow: "0 0 10px 1px var(--color-cyan-400)",
transition: {
duration: 0.3,
staggerChildren: 0.3,
delayChildren: 0.3,
},
},
close: {
y: 0,
},
};
const passVariants = {
open: {
opacity: 1,
filter: "blur(0px)",
transition: {
duration: 0.8,
},
},
close: {
opacity: 0,
filter: "blur(10px)",
},
};
const passIconVariants = {
open: {
y: -80,
color: "red",
transition: {
delay: 3,
duration: 0.5,
},
},
close: {
y: 13,
color: "white",
},
};
const passIconSwitchVariants = {
open: {
y: -16,
color: "green",
transition: {
delay: 3,
duration: 0.5,
},
},
close: {
y: 80,
color: "white",
},
};
return (
<motion.div
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
variants={parentVariants}
animate={isHovered ? "open" : "close"}
initial={false}
exit="close"
className="w-100 h-60 rounded-2xl bg-linear-to-b from-[#212126] relative to-[#141417] border border-neutral-800 flex flex-col p-7 justify-between overflow-clip"
>
<div></div>
<motion.div
variants={childVariants}
className="absolute h-52 w-[80%] mx-auto flex justify-center items-center inset-0 mt-10 bg-neutral-400 [clip-path:polygon(10%_0,90%_0,100%_10%,100%_50%,0%_50%,0%_10%)] [mask-image:linear-gradient(to_bottom,black_40%,transparent_50%)]"
></motion.div>
<motion.div
variants={passVariants}
className="absolute h-52 w-[80%] mx-auto flex justify-center items-center inset-0 mt-10 bg-cyan-400 [clip-path:polygon(10%_0,90%_0,100%_10%,100%_50%,0%_50%,0%_10%)] [mask-image:linear-gradient(to_bottom,black_40%,transparent_50%)]"
></motion.div>
<motion.div
variants={childVariants}
className="absolute w-full h-1 bg-cyan-400 top-[45%] left-0"
></motion.div>
<motion.div
variants={passIconVariants}
className="absolute w-8 h-8 flex items-center justify-center left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2"
>
<GoShieldX className="w-8 h-8" />
</motion.div>
<motion.div
variants={passIconSwitchVariants}
className="absolute w-8 h-8 flex items-center justify-center left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2"
>
<GoShieldCheck className="w-8 h-8" />
</motion.div>
<div className="flex flex-col gap-2">
<motion.input
variants={inputVariants}
type="password"
placeholder="Enter your password"
className="w-full p-3 rounded-lg bg-neutral-800 border border-neutral-700 text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:border-transparent"
/>
<div className="flex justify-between items-center">
<motion.span
variants={inputVariants}
className="text-xs text-neutral-400"
>
Forgot password?
</motion.span>
<motion.button
variants={inputVariants}
className="px-4 py-2 bg-cyan-500 text-white rounded-lg text-sm font-medium hover:bg-cyan-600 transition-colors"
>
Sign In
</motion.button>
</div>
</div>
</motion.div>
);
}Requirements
Install the required dependencies:
npm install motion react-iconsOr with other package managers:
# pnpm
pnpm add motion react-icons
# yarn
yarn add motion react-icons
# bun
bun add motion react-iconsLast updated on