Glass Forgot
Glassmorphism-style forgot password form with animated background blobs, gradient borders, and smooth state transitions. Features success state with checkmark animation.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | "Reset Password" | Title text displayed at the top of the form. |
| subtitle | string | "Enter your email to receive a reset link." | Subtitle text displayed below the title. |
| onSendLink | (email: string) => Promise<void> | undefined | Callback function called when reset link is sent. |
| onBack | () => void | undefined | Callback function called when back button is clicked. |
| className | string | undefined | Additional CSS classes for custom styling. |
| successMessage | string | "We've sent a password reset link to your email address." | Success message displayed after link is sent. |
When to Use
Ideal for creative agencies, design tools, and Next.js sites that want a modern 'Glassmorphism' aesthetic. Use this React component for a forgot-password flow with blurred background blobs and soft, crystalline borders.
Best Practices
Maintain consistent spacing within your design system by using it on vibrant or photo-based backgrounds for maximum 'Glass' impact. Follow React best practices by pairing it with clear typography. Optimize for performance by managed the backdrop-blur intensity.
Why This Component Matters
Glassmorphism creates a sense of depth and digital premium. This production-ready UI component helpsคุณ build an interface that feels lightweight and high-end, turning a standard recovery form into a visual highlight.
FAQ
QHow is the glass effect made?
The component uses `backdrop-filter: blur()` and semi-transparent white/gray backgrounds to simulate physical frosted glass.
QAre the background blobs animated?
Yes, the component features slow-moving ambient blobs that drift behind the glass container to reinforce the sense of depth.
QIs it readable on light backgrounds?
The 'Glass' effect works best on medium-to-dark colors; for pure white backgrounds, adjust the `className` to increase the border opacity.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.