block / loading

Splash Screen

A timed launch sequence with breathing mark, progress motion, and graceful exit.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

splash screenReduced-motion safe

INSTALL / SOURCE REGISTRY

Add Splash Screen to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/splash-screen.json

registry/default/blocks/splash-screen.tsx

"use client"

import * as React from "react"
import "@/components/designos/designos.css"

export function SplashScreen({ minimumDuration = 900, label = "Loading DesignOS", mark = "DO", onComplete }: { minimumDuration?: number; label?: string; mark?: React.ReactNode; onComplete?: () => void }) {
  const [leaving, setLeaving] = React.useState(false)
  const [visible, setVisible] = React.useState(true)
  React.useEffect(() => {
    const leave = window.setTimeout(() => setLeaving(true), minimumDuration)
    const remove = window.setTimeout(() => { setVisible(false); onComplete?.() }, minimumDuration + 520)
    return () => { window.clearTimeout(leave); window.clearTimeout(remove) }
  }, [minimumDuration, onComplete])
  if (!visible) return null
  return <div className="dos-splash" data-leaving={leaving} role="status" aria-label={label}><div className="dos-splash__inner"><div className="dos-splash__mark" aria-hidden="true">{mark}</div><div className="dos-splash__track" aria-hidden="true" /><span className="dos-eyebrow">{label}</span></div></div>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy