64:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 70:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:["$","div","glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.56 0.21 300)"}}],["$","p",null,{"children":"oklch(0.56 0.21 300)"}]]}]}]]}] 53:["$","div","glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 54:["$","div","gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 95%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 95%)"}]]}]}]]}] 55:["$","div","gloss-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.3 0.03 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.3 0.03 285 / 10%)"}]]}]}]]}] 56:["$","div","gloss-depth",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-depth",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.32 0.03 285 / 20%)"}}],["$","p",null,{"children":"oklch(0.32 0.03 285 / 20%)"}]]}]}]]}] 57:["$","div","gloss-edge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-edge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.02 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.22 0.02 285 / 10%)"}]]}]}]]}] 58:["$","div","liquid-tint",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-tint",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 18%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 18%)"}]]}]}]]}] 59:["$","div","liquid-fallback",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-fallback",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 5a:["$","div","liquid-rim",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-rim",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 95%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 95%)"}]]}]}]]}] 5b:["$","div","liquid-edge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-edge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.2 0.02 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.2 0.02 285 / 10%)"}]]}]}]]}] 5c:["$","div","liquid-shadow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-shadow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.02 285 / 26%)"}}],["$","p",null,{"children":"oklch(0.22 0.02 285 / 26%)"}]]}]}]]}] 5d:["$","div","liquid-glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 5e:["$","div","liquid-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.25 0.03 285 / 14%)"}}],["$","p",null,{"children":"oklch(0.25 0.03 285 / 14%)"}]]}]}]]}] 5f:["$","$L64",null,{"orientation":"horizontal"}] 60:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L51",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.8 0.16 55)"}}],["$","p",null,{"children":"oklch(0.8 0.16 55)"}]]}]}]]}],["$","div","glow-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.05 40)"}}],["$","p",null,{"children":"oklch(0.22 0.05 40)"}]]}]}]]}],["$","div","glow-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.7 0.2 15)"}}],["$","p",null,{"children":"oklch(0.7 0.2 15)"}]]}]}]]}],["$","div","glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.65 0.2 300)"}}],["$","p",null,{"children":"oklch(0.65 0.2 300)"}]]}]}]]}],["$","div","glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.19 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(0.19 0 0 / 55%)"}]]}]}]]}],["$","div","gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 16%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 16%)"}]]}]}]]}],["$","div","gloss-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0 0 0 / 30%)"}}],["$","p",null,{"children":"oklch(0 0 0 / 30%)"}]]}]}]]}],["$","div","gloss-depth",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":"$L65"}],"$L66"]}],"$L67","$L68","$L69","$L6a","$L6b","$L6c","$L6d","$L6e"]}],"$L6f"]}]}]]}] 61:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L51",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow)"}]]}],["$","div","color-glow-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-foreground)"}]]}],["$","div","color-glow-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-2)"}]]}],["$","div","color-glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-3)"}]]}],["$","div","color-glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glass)"}]]}],["$","div","color-gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--gloss-highlight)"}]]}],["$","div","shadow-gloss",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-gloss",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 0 var(--gloss-highlight), inset 0 -1px 0 0 var(--gloss-shade), 0 0 0 1px var(--gloss-edge), 0 1px 2px 0 var(--gloss-depth), 0 4px 12px -4px var(--gloss-depth)"}]]}],["$","div","shadow-glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 0 var(--gloss-highlight), inset 0 -10px 24px -18px var(--gloss-shade), inset 0 0 0 1px var(--gloss-edge), 0 2px 6px -1px var(--gloss-depth), 0 18px 40px -12px var(--gloss-depth)"}]]}],["$","div","shadow-well",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-well",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 3px 0 var(--gloss-depth), inset 0 0 0 1px var(--gloss-edge), 0 1px 0 0 var(--gloss-highlight)"}]]}]]}],["$","$L64",null,{"orientation":"horizontal"}]]}]}]]}] 62:null 71:T278b,"use client" import * as React from "react" import { Mail } from "lucide-react" import { AnimateIcon } from "@/components/animate-ui/icons/icon" import { ArrowLeft } from "@/components/animate-ui/icons/arrow-left" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { AfterglowMark, GitHubMark, GoogleMark, SubmitLabel, checkEmail, useSubmit, type Provider, } from "@/components/ui/auth-parts" import { LiquidMetal, MetalRim } from "@/components/ui/liquid-metal" import { MetalButton } from "@/components/ui/metal-button" import { cn } from "@/lib/utils" type AuthSilkProps = { /** sends the magic link; throw to show an error under the field */ onSubmit?: (values: { email: string }) => Promise | void onProvider?: (provider: Provider) => void className?: string } const GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")" const quiet = "inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-[10px] border border-white/[0.08] bg-white/[0.04] text-[13px] font-medium text-white/90 shadow-[inset_0_1px_0_oklch(1_0_0/5%)] transition-[background-color,border-color,scale] duration-150 ease-out motion-reduce:transition-none outline-none hover:border-white/[0.14] hover:bg-white/[0.07] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/40 motion-safe:active:scale-[0.98] [&_svg]:size-4" // black, with satin drapes of liquid metal in two corners and one quiet column export function AuthSilk({ onSubmit, onProvider, className }: AuthSilkProps) { const reduceMotion = useReducedMotion() const id = React.useId() const [email, setEmail] = React.useState("") const [emailError, setEmailError] = React.useState() const [returning, setReturning] = React.useState(false) const { status, error, run, reset } = useSubmit(onSubmit) const problem = emailError ?? error function handleSubmit(event: React.FormEvent) { event.preventDefault() const next = checkEmail(email) setEmailError(next) if (!next) run({ email: email.trim() }) } // the resting state is the same either way, so server and client agree const swap = { initial: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 8, filter: "blur(4px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduceMotion ? { opacity: 0, transition: { duration: 0.12 } } : { opacity: 0, y: -6, filter: "blur(4px)", transition: { duration: 0.12 } }, transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] as const }, } return (

{status === "done" ? (

Check your email

We sent a sign-in link to
{email.trim()}

Open Gmail Open Outlook

) : (

Log in to Afterglow

Don’t have an account?{" "} Sign up

Email setEmail(event.target.value)} aria-invalid={problem ? true : undefined} aria-describedby={problem ? `${id}-error` : undefined} className="mt-2 h-10 rounded-[10px] border border-white/10 bg-black/50 px-3 text-sm text-white shadow-[inset_0_1px_2px_oklch(0_0_0/60%)] transition-[border-color,box-shadow] duration-150 outline-none placeholder:text-white/25 focus:border-white/25 focus:ring-4 focus:ring-white/[0.06] aria-invalid:border-[oklch(0.7_0.15_25/55%)]" /> {problem && ( {problem} )} Continue with email

By continuing, you agree to our{" "} Terms {" "} and{" "} Privacy Policy .

)}

) } // a dark tile edged in moving chrome, for the logo and the inbox icon function Tile({ children }: { children: React.ReactNode }) { return ( {children} ) } function Drapes() { return (

{/* one sheet of satin metal, folded into long diagonals, showing only at two corners */}

{/* a pool of black behind the column, so text always sits on dark */}

) } 72:T9bf,"use client" import * as React from "react" import { motion, useReducedMotion, type HTMLMotionProps } from "motion/react" import { LiquidMetal, MetalRim } from "@/components/ui/liquid-metal" import { cn } from "@/lib/utils" const sizes = { sm: "h-9 gap-1.5 px-4 text-[13px] [&_svg]:size-3.5", md: "h-10 gap-2 px-5 text-sm [&_svg]:size-4", lg: "h-12 gap-2.5 px-6 text-[15px] [&_svg]:size-[18px]", } type MetalButtonProps = Omit, "children"> & { /** rim is a dark button ringed in flowing chrome; silver is solid brushed metal */ variant?: "rim" | "silver" size?: keyof typeof sizes children?: React.ReactNode } function MetalButton({ variant = "rim", size = "md", className, children, type = "button", ...props }: MetalButtonProps) { const reduceMotion = useReducedMotion() const silver = variant === "silver" return ( {silver ? ( ) : ( )} {/* a bevel: light along the top edge, shade along the bottom */} {children} ) } export { MetalButton, type MetalButtonProps } 73:T2bf3,"use client" import * as React from "react" import { useReducedMotion } from "motion/react" import { ringMask } from "@/lib/afterglow" import { cn } from "@/lib/utils" /* * Liquid metal: a slowly flowing metal surface, drawn by a small WebGL shader. * The surface is sine waves bent by other sine waves; each pixel reflects a * photo-studio backdrop (dark floor, bright horizon), which reads as metal. * Softness blurs that horizon, turning mirror chrome into brushed satin. * * Every piece on the page shares one WebGL context: it draws each piece in * turn and copies the frame into that piece's own canvas. Browsers cap live * contexts at about 16, so this keeps any number of pieces running. */ const VERTEX = ` attribute vec2 position; varying vec2 vUv; void main() { vUv = position * 0.5 + 0.5; gl_Position = vec4(position, 0.0, 1.0); }` const FRAGMENT = ` precision highp float; varying vec2 vUv; uniform vec2 uResolution; uniform float uTime; uniform vec3 uTint; uniform float uBrightness; uniform float uScale; uniform float uSoftness; uniform float uSilk; // round ripples, like a pool of mercury float liquid(vec2 p, float t) { vec2 q = p; q += 0.55 * vec2(sin(q.y * 1.3 + t * 1.1), sin(q.x * 1.1 - t * 0.9)); q += 0.28 * vec2(sin(q.y * 2.3 - t * 0.7), sin(q.x * 2.1 + t * 1.3)); return 0.5 * sin(q.x * 1.4 + t * 0.4) + 0.5 * sin(q.y * 1.7 - t * 0.3); } // long diagonal folds, like draped silk float silk(vec2 p, float t) { vec2 d = normalize(vec2(1.0, 0.55)); float u = dot(p, d); float v = dot(p, vec2(-d.y, d.x)); float w = u + 0.45 * sin(v * 0.9 + t * 0.8) + 0.2 * sin(v * 2.1 - t * 0.6); return 0.65 * sin(w * 1.7 + t * 0.35) + 0.35 * sin(w * 3.1 - v * 0.4 - t * 0.25); } float height(vec2 p, float t) { return mix(liquid(p, t), silk(p, t), uSilk); } float studio(float y, float soft) { float edge = mix(0.03, 0.5, soft); float ground = 0.05 + 0.12 * smoothstep(-1.2, -0.15, y); float sky = 0.5 + 0.42 * smoothstep(0.05, 1.0, y); float v = mix(ground, sky, smoothstep(-edge, edge, y)); v += mix(0.75, 0.28, soft) * exp(-pow((y - 0.03) * mix(26.0, 3.0, soft), 2.0)); v += 0.2 * exp(-pow((y - 0.6) * 8.0, 2.0)); return v; } void main() { vec2 p = (vUv - 0.5) * vec2(uResolution.x / uResolution.y, 1.0) * 2.2 * uScale; float t = uTime * 0.25; float e = 0.01; float h = height(p, t); float dx = (height(p + vec2(e, 0.0), t) - h) / e; float dy = (height(p + vec2(0.0, e), t) - h) / e; float k = mix(0.8, 0.32, uSoftness); vec3 n = normalize(vec3(-dx * k, -dy * k, 1.0)); vec3 r = reflect(vec3(0.0, 0.0, -1.0), n); float y = r.y * 1.1 + p.y * 0.12 + 0.12 + uBrightness; float v = studio(y, uSoftness) + mix(0.3, 0.12, uSoftness) * pow(max(r.x, 0.0), 5.0); vec3 color = vec3(v); color = mix(color, color * uTint, 0.4 * smoothstep(0.35, 1.0, v)); gl_FragColor = vec4(color, 1.0); }` // shown before the first frame, and wherever WebGL isn't available const CHROME_FALLBACK = "conic-gradient(from 200deg at 35% 45%, #18181b, #e9e2da 14%, #2a2a2e 27%, #a29c95 41%, #141416 55%, #f3ece4 69%, #38383c 83%, #18181b)" const SATIN_FALLBACK = "linear-gradient(155deg, #2a2a2e, #8d8984 40%, #d6d1cb 52%, #5a5a5e 75%, #1c1c1f)" type Settings = { speed: number tint: [number, number, number] brightness: number scale: number softness: number silk: number maxAspect: number still: boolean } type Piece = { canvas: HTMLCanvasElement context: CanvasRenderingContext2D settings: Settings start: number visible: boolean painted: boolean } type Renderer = { canvas: HTMLCanvasElement gl: WebGLRenderingContext uniforms: Record } const pieces = new Set() let renderer: Renderer | null = null let unavailable = false let frame = 0 function createRenderer(): Renderer | null { const canvas = document.createElement("canvas") const gl = canvas.getContext("webgl", { antialias: false, alpha: false }) if (!gl) return null const compile = (type: number, source: string) => { const shader = gl.createShader(type)! gl.shaderSource(shader, source) gl.compileShader(shader) return shader } const program = gl.createProgram()! gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX)) gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAGMENT)) gl.linkProgram(program) if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return null gl.useProgram(program) // one triangle that covers the whole viewport gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()) gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW) const position = gl.getAttribLocation(program, "position") gl.enableVertexAttribArray(position) gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0) const names = ["uResolution", "uTime", "uTint", "uBrightness", "uScale", "uSoftness", "uSilk"] const uniforms = Object.fromEntries(names.map((name) => [name, gl.getUniformLocation(program, name)])) canvas.addEventListener("webglcontextlost", (event) => { event.preventDefault() cancelAnimationFrame(frame) frame = 0 renderer = null for (const piece of pieces) { piece.painted = false piece.canvas.style.opacity = "0" } // build a fresh context once the browser has recovered window.setTimeout(wake, 1000) }) return { canvas, gl, uniforms } } function paint(piece: Piece, now: number) { const { canvas, gl, uniforms } = renderer! const { width, height } = piece.canvas // the shared canvas only grows, and each piece draws into its bottom-left corner if (canvas.width < width || canvas.height < height) { canvas.width = Math.max(canvas.width, width) canvas.height = Math.max(canvas.height, height) } const s = piece.settings gl.viewport(0, 0, width, height) gl.uniform2f(uniforms.uResolution, width, height) // under reduced motion, hold one pleasing frame gl.uniform1f(uniforms.uTime, s.still ? 3 : ((now - piece.start) / 1000) * s.speed + 3) gl.uniform3f(uniforms.uTint, ...s.tint) gl.uniform1f(uniforms.uBrightness, s.brightness) // past maxAspect, ripples stretch across wide shapes instead of repeating const aspect = width / height gl.uniform1f(uniforms.uScale, s.maxAspect && aspect > s.maxAspect ? (s.scale * s.maxAspect) / aspect : s.scale) gl.uniform1f(uniforms.uSoftness, s.softness) gl.uniform1f(uniforms.uSilk, s.silk) gl.drawArrays(gl.TRIANGLES, 0, 3) piece.context.drawImage(canvas, 0, canvas.height - height, width, height, 0, 0, width, height) piece.painted = true piece.canvas.style.opacity = "1" } function tick(now: number) { frame = 0 if (!renderer) return let moving = false for (const piece of pieces) { if (!piece.visible || piece.canvas.width < 2) continue if (piece.settings.still && piece.painted) continue paint(piece, now) if (!piece.settings.still) moving = true } if (moving) frame = requestAnimationFrame(tick) } function wake() { if (frame || unavailable) return if (!renderer) { renderer = createRenderer() if (!renderer) { unavailable = true return } } frame = requestAnimationFrame(tick) } type LiquidMetalProps = React.ComponentProps<"div"> & { /** 1 is a slow drift */ speed?: number /** warms or cools the highlights, as r, g, b from 0 to 1 */ tint?: [number, number, number] /** 0.5 renders at half resolution, plenty for thin rims */ quality?: number /** shifts the reflection toward the bright sky; 0.8 is mostly silver */ brightness?: number /** below 1 makes the ripples broader, good for small or wide shapes */ scale?: number /** 0 is mirror chrome, 1 is soft brushed satin */ softness?: number /** "silk" lays the ripples out as long diagonal folds */ pattern?: "liquid" | "silk" /** wider than this width-to-height ratio, ripples stretch instead of repeating */ maxAspect?: number } function LiquidMetal({ speed = 1, tint = [1, 0.82, 0.66], quality = 1, brightness = 0, scale = 1, softness = 0, pattern = "liquid", maxAspect = 0, className, style, ...props }: LiquidMetalProps) { const reduceMotion = useReducedMotion() const rootRef = React.useRef(null) const [r, g, b] = tint React.useEffect(() => { const root = rootRef.current if (!root) return const canvas = document.createElement("canvas") canvas.className = "absolute inset-0 size-full opacity-0 transition-opacity duration-300" const context = canvas.getContext("2d", { alpha: false }) if (!context) return root.appendChild(canvas) const piece: Piece = { canvas, context, settings: { speed, tint: [r, g, b], brightness, scale, softness, silk: pattern === "silk" ? 1 : 0, maxAspect, still: !!reduceMotion, }, start: performance.now(), visible: false, painted: false, } pieces.add(piece) const visibility = new IntersectionObserver(([entry]) => { piece.visible = entry.isIntersecting if (piece.visible) wake() }) visibility.observe(canvas) const sizing = new ResizeObserver(() => { const ratio = Math.min(window.devicePixelRatio || 1, 2) * quality canvas.width = Math.max(1, Math.round(canvas.clientWidth * ratio)) canvas.height = Math.max(1, Math.round(canvas.clientHeight * ratio)) // resizing clears the canvas, so paint again piece.painted = false wake() }) sizing.observe(canvas) return () => { visibility.disconnect() sizing.disconnect() pieces.delete(piece) canvas.remove() } }, [b, brightness, g, maxAspect, pattern, quality, r, reduceMotion, scale, softness, speed]) return (

= 0.5 ? SATIN_FALLBACK : CHROME_FALLBACK, ...style }} {...props} /> ) } type MetalRimProps = Omit, "children"> & { /** thickness of the ring in px */ width?: number brightness?: number quality?: number } /* * A hairline of chrome around its parent (give the parent a radius and * position). A steady edge, lit from above, sits under the moving metal; the * metal is screen-blended on top, so its dark patches never break the ring. */ function MetalRim({ width = 1, brightness = 0.35, quality = 0.6, className, style, ...props }: MetalRimProps) { return ( ) } export { LiquidMetal, MetalRim, type LiquidMetalProps, type MetalRimProps } 74:T2535,"use client" import * as React from "react" import { Eye, EyeOff, KeyRound } from "lucide-react" import { AnimateIcon } from "@/components/animate-ui/icons/icon" import { Fingerprint } from "@/components/animate-ui/icons/fingerprint" import { LoaderCircle as Loader2 } from "@/components/animate-ui/icons/loader-circle" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" /* Shared pieces for the auth blocks: brand marks, provider buttons, fields, a divider and a small hook that runs a submit with loading and error states. */ function GoogleMark({ mono = false, ...props }: React.ComponentProps<"svg"> & { mono?: boolean }) { // mono draws the G in the current text color, for quiet monochrome buttons const fill = (color: string) => (mono ? "currentColor" : color) return ( ) } // the afterglow mark: a sun setting on the horizon, centered in its 24px box function AfterglowMark(props: React.ComponentProps<"svg">) { return ( ) } function GitHubMark(props: React.ComponentProps<"svg">) { return ( ) } const providers = { google: { label: "Google", icon: }, github: { label: "GitHub", icon: }, sso: { label: "SSO", icon: }, passkey: { label: "passkey", icon: }, } type Provider = keyof typeof providers type ProviderButtonProps = Omit, "children"> & { provider: Provider /** "Continue with", "Log in with"… */ verb?: string /** a small "Last used" badge in the corner */ lastUsed?: boolean } function ProviderButton({ provider, verb = "Continue with", lastUsed, className, type = "button", ...props }: ProviderButtonProps) { const { label, icon } = providers[provider] return ( ) } function Divider({ children = "or", className }: { children?: React.ReactNode; className?: string }) { return (

{children}

) } type FieldProps = Omit, "size"> & { label: string /** shown under the field and announced by screen readers */ error?: string /** a link or action placed at the end of the label row, e.g. "Forgot?" */ aside?: React.ReactNode /** classes for the input's box, so each theme can style it */ boxClassName?: string labelClassName?: string } function Field({ label, error, aside, type = "text", className, boxClassName, labelClassName, id, ...props }: FieldProps) { const autoId = React.useId() const inputId = id ?? autoId const errorId = `${inputId}-error` const [reveal, setReveal] = React.useState(false) const password = type === "password" return (

{label} {aside}

{password && ( )}

{error && ( {error} )}

) } type Status = "idle" | "loading" | "done" /** * Runs an async submit with loading and error states. The block calls * `run(values)`; your `onSubmit` does the real work and throws to show an error. */ function useSubmit(onSubmit?: (values: T) => Promise | void) { const [status, setStatus] = React.useState("idle") const [error, setError] = React.useState() async function run(values: T) { setError(undefined) setStatus("loading") try { await onSubmit?.(values) setStatus("done") } catch (reason) { setError(reason instanceof Error ? reason.message : "Something went wrong. Try again.") setStatus("idle") } } return { status, error, setError, run, reset: () => setStatus("idle") } } // a label that swaps to a spinner while the form is busy function SubmitLabel({ loading, children }: { loading: boolean; children: React.ReactNode }) { const reduceMotion = useReducedMotion() return ( {loading ? : children} ) } const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ function checkEmail(value: string) { if (!value.trim()) return "Enter your email address." if (!EMAIL.test(value.trim())) return "That doesn't look like an email address." return undefined } export { AfterglowMark, Divider, Field, GitHubMark, GoogleMark, ProviderButton, SubmitLabel, checkEmail, useSubmit, type FieldProps, type Provider, type ProviderButtonProps, } 75:T705,import type { CSSProperties } from "react" import type { TargetAndTransition, Transition } from "motion/react" // shared spring presets, every component picks from these export const springs = { snappy: { stiffness: 520, damping: 34, mass: 0.6 }, soft: { stiffness: 260, damping: 26, mass: 0.8 }, glide: { stiffness: 120, damping: 20, mass: 1 }, } as const export type SpringName = keyof typeof springs export function spring(name: SpringName): Transition { return { type: "spring", ...springs[name] } } // how a glow fades once its source moves away: slow, with a long tail export const afterglow = { linger: 0.9, ease: [0.22, 1, 0.36, 1], } as const satisfies { linger: number; ease: Transition["ease"] } // paints only the padding ring of an element, used for glowing borders export const ringMask: CSSProperties = { WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", WebkitMaskComposite: "xor", mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", maskComposite: "exclude", } // small icon gestures, played when a control is pressed or selected export const iconGestures = { pop: { scale: [1, 1.2, 1] }, ring: { rotate: [0, -18, 14, -9, 4, 0], scale: [1, 1.12, 1] }, // a gear looks the same after half a turn, so it can rest there and snap back unseen turn: { rotate: [0, 180], scale: [1, 1.12, 1] }, hop: { y: [0, -3, 0], scale: [1, 1.1, 1] }, nudge: { x: [0, 2.5, 0], scale: [1, 1.1, 1] }, } satisfies Record export type IconGesture = keyof typeof iconGestures // leaving a gesture is instant: every gesture already ends at, or looks like, its resting pose export const iconRest: TargetAndTransition = { scale: 1, rotate: 0, x: 0, y: 0, transition: { duration: 0 } } 63:["$","$L70",null,{"files":[{"path":"components/blocks/auth-silk.tsx","content":"$71","type":"registry:block","target":"components/blocks/auth-silk.tsx"},{"path":"components/ui/metal-button.tsx","content":"$72","type":"registry:ui"},{"path":"components/ui/liquid-metal.tsx","content":"$73","type":"registry:ui"},{"path":"components/ui/auth-parts.tsx","content":"$74","type":"registry:ui"},{"path":"lib/afterglow.ts","content":"$75","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]