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.
| 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. |
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer