Design System / Patterns

Gated State

pattern

Gating is a wrapper, not a per-module feature: ModuleGate takes any module and renders one of three states, so the client chooses what prompts visitors to create an account (e.g. a link-in-bio Discovery page where everything is open except the music). Locked, the real module stays rendered but blurs and goes inert — content teases through, never a placeholder — with a gate card floating inside the module bounds. The sign-up form appends on that same card, contained within the module.

Rules

01Three states: unlocked (untouched) · locked (blur + gate card) · signup (form appended on the card).
02The gated module renders its real content underneath — blurred (10px), pointer-inert, aria-hidden. Never a placeholder.
03The gate card is a module surface (data-dep-surface) inside the module bounds; lock badge paints accent-9/contrast so profiles remap it.
04Locked CTA is a solid Radix Button; the form is a soft email field + CtaRow, contained within the module.
05Auth is host-driven: onPrompt/onSignUp callbacks — the gate renders state, the platform owns the session.
06Which modules gate is a client choice in the builder (a universal "gated" toggle), not a module property.

In practice

Locked → sign up → unlockedInteractive — the Music module gated on a Discovery page; tap through the whole flow.
Sign up to listenFull tracks for members only.
Locked stateBlur + inert content with the gate card floating inside the module bounds.
Sign up to viewBackstage shots for members.
Sign-up form appendedThe form lives on the gate card, contained within the module.
Sign up to viewBackstage shots for members.
Already a member? Sign in

Used by

Music PlayerGalleryVideoFile DownloadGroup ChatsPage Lock