Glass Forgot
Glassmorphism-style forgot password form with animated background blobs, gradient borders, and smooth state transitions. Features success state with checkmark animation.
Main Features of Glass Forgot
How to Use Glass Forgot in Next.js
Installation Guide for Glass Forgot
Props
Customize the component with these 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. |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.