> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# SplashScreen
The full-screen entrance for a cold start — the brand `Logo` over an indeterminate bar, shown once while the app boots. Never on a route change and never as a general loading veil: in-app waits belong to `Loader`, `Skeleton` or `Progress`, and `AppShell` ships its own first-load reveal, so run one or the other rather than both. You drive `visible` and nothing else — the phases between are internal — and since it enforces no minimum on-screen time, guarding against a flash on a fast boot is the caller’s job.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/SplashScreen) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/loading-splashscreen--overview)
```tsx
import { SplashScreen } from '@wallarm-org/design-system/SplashScreen';
export const Basic = () => ;
```
## Usage
```tsx
import { SplashScreen } from '@wallarm-org/design-system/SplashScreen';
```
## Examples
### Toggle
Flipping `visible` to false is the whole handover: with no `shrinkTarget` the splash fades out and unmounts, and any children are never shown.
```tsx
import { useState } from 'react';
import { Button } from '@wallarm-org/design-system/Button';
import { SplashScreen } from '@wallarm-org/design-system/SplashScreen';
import { VStack } from '@wallarm-org/design-system/Stack';
export const Toggle = () => {
const [visible, setVisible] = useState(true);
return (
);
};
```
### Shrink to card
With a `shrinkTarget` it morphs into that box and reveals its children inside — the entrance becomes the first view, typically a sign-in card.
```tsx
import { useEffect, useState } from 'react';
import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';
import { Button } from '@wallarm-org/design-system/Button';
import { SplashScreen } from '@wallarm-org/design-system/SplashScreen';
export const ShrinkToCard = () => {
const [visible, setVisible] = useState(true);
useEffect(() => {
if (!visible) return;
const timer = window.setTimeout(() => {
setVisible(false);
}, 2000);
return () => window.clearTimeout(timer);
}, [visible]);
return (
Welcome
Content revealed after splash animation.
);
};
```
### Measured height
The splash can measure its own content height when `shrinkTarget.height` is omitted — the animation shrinks to fit whatever you put inside, no hardcoded constant needed.
```tsx
import { useEffect, useState } from 'react';
import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';
import { Button } from '@wallarm-org/design-system/Button';
import { Input } from '@wallarm-org/design-system/Input';
import { SplashScreen } from '@wallarm-org/design-system/SplashScreen';
import { Text } from '@wallarm-org/design-system/Text';
export const MeasuredHeight = () => {
const [visible, setVisible] = useState(true);
useEffect(() => {
if (!visible) return;
const timer = window.setTimeout(() => {
setVisible(false);
}, 2000);
return () => window.clearTimeout(timer);
}, [visible]);
const handleSignIn = () => {
setVisible(true);
};
return (