Anatomy of a Waitlist Landing Block
A waitlist page has one job: convert curiosity into an email address before launch. This block builds the whole page around that goal, layering an animated aurora background, a gradient headline, a single email capture form, social proof, and a row of perk highlights into a full-screen React component.
The visual centerpiece is a hand-written WebGL shader rendered onto a canvas, producing a slowly drifting aurora in violet, purple, and sky tones over a near-black backdrop. Radial gradient overlays, a subtle SVG noise texture, and a bottom fade give the page depth that flat CSS backgrounds cannot match.
Launches That Benefit From a Waitlist
Waitlists suit any product that wants demand signals before shipping: SaaS startups validating an idea, indie developers building an audience, and established companies gating a beta. The scarcity framing, reinforced here by a limited early access badge and a joined counter, consistently lifts signup rates.
The block also plays well with its neighbors. It can serve as the pre-launch face of a future SaaS landing page, or replace a plain coming soon page when you want to capture emails rather than just announce a date.
The Stack: React Hook Form, Zod, and WebGL
The email form is managed by React Hook Form with a Zod schema wired in through the resolver, requiring a non-empty, valid email before submission. While the request is in flight, the submit button swaps its label for a spinning loader driven by the form's isSubmitting state, and on success the form is replaced by a confirmation state with a check icon.
Submission goes through a small submitToWaitlist function that currently simulates a network call and includes commented example code for posting to an API route. The aurora itself is a WebGL2 fragment shader with configurable color stops, amplitude, blend, and speed props, animated in a React effect without any heavyweight animation library.
Restyling the Aurora and the Form
This block intentionally commits to a dark, cinematic look: the backdrop is fixed near-black and the typography uses layered white opacities for hierarchy. The fastest way to rebrand it is through the Aurora component's colorStops prop, which accepts any three hex colors, plus the Tailwind gradient classes on the headline and avatar stack.
The form controls are Shadcn UI components, so they still respect your component conventions, and teams that want a token-driven light variant can swap the fixed background and white text utilities for the CSS variable tokens defined in globals.css. Every visual effect, from the noise overlay to the glow on the status badge, is plain Tailwind and inline SVG, so nothing is locked away.
What Ships in the Box
The block is composed from the Shadcn UI Form family, Form, FormField, FormControl, FormItem, and FormMessage, plus Input and Button, alongside three custom pieces: the Aurora canvas, the waitlist form, and the page shell with social proof avatars and feature highlights. React, Vuejs, and Svelte versions are all available, with the Vuejs and Svelte editions building on the shadcn-vue and shadcn-svelte ports.
Everything is client-side, so the page works identically in Next.js, Vite, or any other modern React setup, and the WebGL background degrades gracefully where hardware acceleration is limited.
Wiring Up Real Signups
Install the block with the shadcn CLI command at the top of the example page, available for npm, pnpm, yarn, and bun, or copy the three component files from the code tab. This is a pro example, so both paths unlock with the All Access plan.
Going live takes one edit: replace the simulated submitToWaitlist body with a POST to your API route, then forward the email to a provider such as Resend, Loops, or Mailchimp. The loading spinner, validation errors, and success state all keep working because they hang off the form state rather than the transport.