52: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"] 53:T23d5,"use client" import * as React from "react" import { useCallback, useEffect, useRef, useState } from "react" import { cn } from "@/lib/utils" export type CheckpointLine = { id: string color: "blue" | "red" } export const CHECKPOINT_LINES: CheckpointLine[] = [ { id: "line-1", color: "blue" }, { id: "line-2", color: "red" }, { id: "line-3", color: "blue" }, { id: "line-4", color: "red" }, { id: "line-5", color: "blue" }, { id: "line-6", color: "red" }, ] export interface SecurityCheckpointProps extends React.ComponentProps<"div"> { title?: string subtitle?: string message?: string lines?: CheckpointLine[] } export interface SecurityCheckpointLineLayerProps extends React.ComponentProps<"div"> { lines: CheckpointLine[] mounted: boolean cardLeft: number } export function SecurityCheckpointBlueLines({ lines, mounted, cardLeft: _cardLeft, className, ...props }: SecurityCheckpointLineLayerProps) { return (

{lines.map((line, i) => line.color === "blue" ? (

) : (

) )}

) } export function SecurityCheckpointRedLines({ lines, mounted, cardLeft, className, ...props }: SecurityCheckpointLineLayerProps) { return (

{lines.map((line, i) => line.color === "red" ? (

0 ? cardLeft : 0, transition: `width 0.8s cubic-bezier(0.16, 1, 0.3, 1) ${i * 0.08 + 0.2}s`, background: "linear-gradient(90deg, transparent 0%, rgba(252,165,165,0.2) 10%, rgba(248,113,113,0.5) 40%, rgba(239,68,68,0.85) 100%)", }} /> 0 ? cardLeft - 12 : -100, top: "50%", transform: "translateY(-50%)", width: 24, height: 24, borderRadius: "50%", background: "radial-gradient(circle, rgba(252,165,165,0.4) 0%, rgba(252,165,165,0.15) 50%, transparent 70%)", opacity: mounted ? 1 : 0, transition: `opacity 0.3s ease ${i * 0.08 + 0.85}s`, }} /> 0 ? cardLeft - 7 : -100, top: "50%", transform: "translateY(-50%)", width: 7, height: 7, borderRadius: "50%", background: "#ef4444", opacity: mounted ? 1 : 0, transition: `opacity 0.3s ease ${i * 0.08 + 0.9}s`, }} />

) : (

) )}

) } export interface SecurityCheckpointCardProps extends React.ComponentProps<"div"> { title: string subtitle: string message: string mounted: boolean } export const SecurityCheckpointCard = React.forwardRef< HTMLDivElement, SecurityCheckpointCardProps >(function SecurityCheckpointCard( { title, subtitle, message, className, mounted, ...props }, ref ) { return (

{title}{" "} {subtitle}

{message}

) }) export function SecurityCheckpoint({ title = "Vercel", subtitle = "Security Checkpoint", message = "To ensure a smooth and safe experience, we're taking a few moments to verify your browser.", lines = CHECKPOINT_LINES, className, ...props }: SecurityCheckpointProps) { const [mounted, setMounted] = useState(false) const [cardLeft, setCardLeft] = useState(0) const containerRef = useRef(null) const cardRef = useRef(null) const measure = useCallback(() => { if (containerRef.current && cardRef.current) { const containerRect = containerRef.current.getBoundingClientRect() const cardRect = cardRef.current.getBoundingClientRect() setCardLeft(cardRect.left - containerRect.left) } }, []) useEffect(() => { measure() setMounted(true) window.addEventListener("resize", measure) return () => window.removeEventListener("resize", measure) }, [measure]) return (

) } export interface SecurityCheckpointDemoProps extends React.ComponentProps<"div"> {} export default function SecurityCheckpointDemo({ className, ...props }: SecurityCheckpointDemoProps) { return (

) } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/default/ui/security-checkpoint.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]