Locked Overlay
Blur-gate wrapper for Results content behind the free Google login (Bunch D, Phase 1). Blur is applied to the content itself, faded with a solid-color gradient mask, topped with an opaque CTA card — never glassmorphism.
Locked state
Content clipped and blurred (blur-sm), fading to bg-background at the bottom, with the AuthCTA floating over the fade in normal document flow (not absolutely pinned over following sections).
Unlock your full feedback
Sign in with Google (free) to see recommendations and matched job openings.
Continue with Google
| Prop | Type | Default | Description |
|---|---|---|---|
| isUnlocked | boolean | — | true for authenticated users (or ?demo=1) — reveals children with a brief blur-sm -> blur-none transition. |
| cta | ReactNode | — | Rendered floating over the fade when locked — typically <AuthCTA />. |
| children | ReactNode | — | The actual gated content — stays mounted in the DOM at all times, just visually clipped + blurred when locked. |
| maxHeightClassName | string | 'max-h-64' | Clip height for the blurred preview in the locked state. |
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn