Animation

Animation отводит место под анимацию: пустой экран, иллюстрация ошибки 404, декоративный персонаж. Размер задают width и height, плеер приходит children — canvas Rive, svg Lottie или видео. Плееры и файлы анимаций в канон не входят; без содержимого область стоит пустой подложкой.

Статус: experimental · в системе с 2026-09 · интерактивность: none (нет)

Когда использовать

Иллюстрация пустого экрана или ошибки.
Декоративная анимация на экране входа.

Не использовать:

Статичная картинка — это Thumbnail.
Индикатор ожидания — это Loader.

Альтернативы:

thumbnail — статичная картинка
loader — ожидание вместо декоративной анимации

Место под анимацию

Область 200×200 с простой svg-анимацией и пустая область рядом.

<!--
  🟢

  Область 200×200 с простой svg-анимацией — пульсирующий круг — и пустая
  область рядом.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Animation from "$lib/ui/Animation.svelte";
</script>

<div style="display: flex; gap: var(--sp-2);">
	<Animation label={t("Пульс")}>
		<svg viewBox="0 0 100 100" width="120" height="120" aria-hidden="true">
			<circle cx="50" cy="50" r="30" fill="var(--c-accent)">
				<animate attributeName="r" values="24;36;24" dur="2s" repeatCount="indefinite" />
			</circle>
		</svg>
	</Animation>
	<Animation width={120} height={120} />
</div>