# Auth 5

> Modern signup page with testimonial sidebar and social sign-in.

A shadcn/ui block from the [@efferd](https://efferd.com/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/efferd/auth-5).

- Page, with a live preview: https://shadcn.exchange/r/efferd/auth-5
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/efferd/auth-5-light-5e084af289be6909.png
- Registry item: https://efferd.com/r/auth-5.json
- Categories: auth
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://efferd.com/r/auth-5.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@efferd/logo`, `@efferd/auth-divider`, `@efferd/apple-icon`, `@efferd/github-icon`, `@efferd/google-icon`, `button`, `input-group`

## Files

### `registry/blocks/auth/5/index.tsx`

```tsx
"use client";

import { AppleIcon } from "@/components/icons/apple-icon";
import { GithubIcon } from "@/components/icons/github-icon";
import { GoogleIcon } from "@/components/icons/google-icon";
import { Logo } from "@/components/logo";
import { Button } from "@/components/ui/button";
import {
	InputGroup,
	InputGroupAddon,
	InputGroupInput,
} from "@/components/ui/input-group";
import { AuthDivider } from "@/components/auth-divider";
import { FloatingPaths } from "@/components/floating-paths";

export function AuthPage() {
	return (
		<main className="relative md:h-screen md:overflow-hidden lg:grid lg:grid-cols-2">
			<div className="relative hidden h-full flex-col border-r bg-secondary p-10 lg:flex dark:bg-secondary/20">
				<div className="absolute inset-0 bg-linear-to-b from-transparent via-transparent to-background" />
				<Logo className="mr-auto h-4.5" />

				<div className="z-10 mt-auto">
					<blockquote className="space-y-2">
						<p className="text-xl">
							&ldquo;This Platform has helped me to save time and serve my
							clients faster than ever before.&rdquo;
						</p>
						<footer className="font-mono font-semibold text-sm">
							~ Ali Hassan
						</footer>
					</blockquote>
				</div>
				<div className="absolute inset-0">
					<FloatingPaths position={1} />
					<FloatingPaths position={-1} />
				</div>
			</div>
			<div className="relative flex min-h-screen flex-col justify-center px-8">
				{/* Top Shades */}
				<div
					aria-hidden
					className="absolute inset-0 isolate -z-10 opacity-60 contain-strict"
				>
					<div className="absolute top-0 right-0 h-320 w-140 -translate-y-87.5 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,--theme(--color-foreground/.06)_0,hsla(0,0%,55%,.02)_50%,--theme(--color-foreground/.01)_80%)]" />
					<div className="absolute top-0 right-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)] [translate:5%_-50%]" />
					<div className="absolute top-0 right-0 h-320 w-60 -translate-y-87.5 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)]" />
				</div>
				<Button asChild className="absolute top-7 left-5" variant="ghost">
					<a href="#">
						<IconPlaceholder
							data-icon="inline-start"
							hugeicons="ArrowLeft01Icon"
							lucide="ChevronLeftIcon"
							phosphor="CaretLeftIcon"
							remixicon="RiArrowLeftSLine"
							tabler="IconChevronLeft"
						/>
						Home
					</a>
				</Button>

				<div className="mx-auto space-y-4 sm:w-sm">
					<Logo className="h-4.5 lg:hidden" />
					<div className="flex flex-col space-y-1">
						<h1 className="font-bold font-heading text-2xl tracking-wide">
							Sign In or Join Now!
						</h1>
						<p className="text-base text-muted-foreground">
							login or create your efferd account.
						</p>
					</div>
					<div className="space-y-2">
						<Button className="w-full">
							<GoogleIcon data-icon="inline-start" />
							Continue with Google
						</Button>
						<Button className="w-full">
							<AppleIcon data-icon="inline-start" />
							Continue with Apple
						</Button>
						<Button className="w-full">
							<GithubIcon data-icon="inline-start" />
							Continue with GitHub
						</Button>
					</div>

					<AuthDivider>OR</AuthDivider>

					<form className="space-y-2">
						<p className="text-start text-muted-foreground text-xs">
							Enter your email address to sign in or create an account
						</p>
						<InputGroup>
							<InputGroupInput
								placeholder="your.email@example.com"
								type="email"
							/>
							<InputGroupAddon align="inline-start">
								<IconPlaceholder
									hugeicons="AtIcon"
									lucide="AtSignIcon"
									phosphor="AtIcon"
									remixicon="RiAtLine"
									tabler="IconAt"
								/>
							</InputGroupAddon>
						</InputGroup>

						<Button className="w-full" type="button">
							Continue With Email
						</Button>
					</form>
					<p className="mt-8 text-muted-foreground text-sm">
						By clicking continue, you agree to our{" "}
						<a
							className="underline underline-offset-4 hover:text-primary"
							href="#"
						>
							Terms of Service
						</a>{" "}
						and{" "}
						<a
							className="underline underline-offset-4 hover:text-primary"
							href="#"
						>
							Privacy Policy
						</a>
						.
					</p>
				</div>
			</div>
		</main>
	);
}
```

### `registry/blocks/auth/5/floating-paths.tsx`

```tsx
import type { CSSProperties } from "react";

const PATH_COUNT = 36;

/**
 * Decorative flowing lines.
 *
 * Two rendering rules keep this cheap in every engine:
 *
 * 1. CSS keyframes, not a JS animation loop. The old motion/react version wrote
 *    3 attributes to 72 paths on every frame, so any other repaint on the page
 *    (hover, focus, scroll) collided with it and the frame flickered.
 * 2. Never animate `opacity` on an SVG child. Chrome has to render every
 *    translucent SVG element into its own offscreen transparency group the
 *    size of the element's bounds — here 72 near-full-column buffers per
 *    frame — which is what made Chrome flicker while Safari was fine.
 *    `stroke-opacity` is just alpha in the stroke paint, so we animate that.
 */
export function FloatingPaths({ position }: { position: number }) {
	const paths = Array.from({ length: PATH_COUNT }, (_, i) => ({
		id: i,
		d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${
			380 - i * 5 * position
		} -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${
			152 - i * 5 * position
		} ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${
			684 - i * 5 * position
		} ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,
		width: 0.5 + i * 0.03,
		// Peak stroke alpha; was `strokeOpacity * animated opacity` before.
		opacity: (0.06 + i * 0.018).toFixed(3),
		// Deterministic timing so SSR, hydration and re-renders agree.
		duration: 20 + (i % 6) * 2,
		delay: -(i * 0.7),
	}));

	return (
		// `isolate` + `contain-strict` keep the per-frame stroke repaints from
		// invalidating anything outside this box.
		<div className="pointer-events-none absolute inset-0 isolate contain-strict">
			<style href="floating-paths-keyframes" precedence="default">
				{
					"@keyframes floating-path{0%{stroke-dashoffset:1;stroke-opacity:0}15%,85%{stroke-opacity:var(--stroke-opacity)}100%{stroke-dashoffset:-1;stroke-opacity:0}}"
				}
			</style>
			<svg
				className="h-full w-full text-primary"
				fill="none"
				viewBox="0 0 696 316"
			>
				<title>Background Paths</title>
				{paths.map((path) => (
					<path
						className="motion-safe:animate-[floating-path_var(--duration)_linear_infinite]"
						d={path.d}
						key={path.id}
						// Normalise every path to length 1 so dash values are relative.
						pathLength={1}
						stroke="currentColor"
						// dash = full path, gap = full path; sweeping the offset from
						// 1 → -1 draws the line in from the start and then erases it,
						// ending invisible so the infinite loop has no seam.
						strokeDasharray="1 1"
						strokeOpacity={path.opacity}
						strokeWidth={path.width}
						style={
							{
								"--duration": `${path.duration}s`,
								"--stroke-opacity": path.opacity,
								animationDelay: `${path.delay}s`,
							} as CSSProperties
						}
					/>
				))}
			</svg>
		</div>
	);
}
```