Свечение

Мягкое розовое свечение на основе радиального градиента — тот же эффект, что используется в hero-секции главной страницы. Градиент переходит от прозрачного к малиновому (#f43f5e), розовому (#fda4af) и светлому (#fff1f2), создавая тёплое акцентное свечение у выбранного края контейнера. Используется как фоновый декоративный элемент для hero-секций, баннеров и CTA-блоков.

Интерактивное демо

Пропсы

Сторона

Прозрачность

<script lang="ts">
	export type GlowHorizonVariant = 'top' | 'bottom' | 'left' | 'right';

	type Props = {
		class?: string;
		variant?: GlowHorizonVariant;
		opacity?: number;
	};

	let {
		class: className = '',
		variant = 'top',
		opacity = 0.28
	}: Props = $props();

	const gradients: Record<GlowHorizonVariant, string> = {
		top: 'radial-gradient(125% 125% at 50% 0%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		bottom:
			'radial-gradient(125% 125% at 50% 100%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		left: 'radial-gradient(125% 125% at 0% 50%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		right:
			'radial-gradient(125% 125% at 100% 50%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)'
	};
</script>

<div
	class="glow-horizon {className}"
	style="background: {gradients[variant]}; opacity: {opacity};"
	aria-hidden="true"
></div>

<style>
	.glow-horizon {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}

	:global(.dark) .glow-horizon {
		opacity: calc(var(--glow-opacity, 0.28) * 0.79);
	}
</style>

<script lang="ts">
	export type GlowHorizonVariant = 'top' | 'bottom' | 'left' | 'right';

	type Props = {
		class?: string;
		variant?: GlowHorizonVariant;
		opacity?: number;
	};

	let {
		class: className = '',
		variant = 'top',
		opacity = 0.28
	}: Props = $props();

	const gradients: Record<GlowHorizonVariant, string> = {
		top: 'radial-gradient(125% 125% at 50% 0%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		bottom:
			'radial-gradient(125% 125% at 50% 100%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		left: 'radial-gradient(125% 125% at 0% 50%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		right:
			'radial-gradient(125% 125% at 100% 50%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)'
	};
</script>

<div
	class="glow-horizon {className}"
	style="background: {gradients[variant]}; opacity: {opacity};"
	aria-hidden="true"
></div>

<style>
	.glow-horizon {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}

	:global(.dark) .glow-horizon {
		opacity: calc(var(--glow-opacity, 0.28) * 0.79);
	}
</style>

Все варианты

top

bottom

left

right

<script lang="ts">
	export type GlowHorizonVariant = 'top' | 'bottom' | 'left' | 'right';

	type Props = {
		class?: string;
		variant?: GlowHorizonVariant;
		opacity?: number;
	};

	let {
		class: className = '',
		variant = 'top',
		opacity = 0.28
	}: Props = $props();

	const gradients: Record<GlowHorizonVariant, string> = {
		top: 'radial-gradient(125% 125% at 50% 0%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		bottom:
			'radial-gradient(125% 125% at 50% 100%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		left: 'radial-gradient(125% 125% at 0% 50%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		right:
			'radial-gradient(125% 125% at 100% 50%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)'
	};
</script>

<div
	class="glow-horizon {className}"
	style="background: {gradients[variant]}; opacity: {opacity};"
	aria-hidden="true"
></div>

<style>
	.glow-horizon {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}

	:global(.dark) .glow-horizon {
		opacity: calc(var(--glow-opacity, 0.28) * 0.79);
	}
</style>

<script lang="ts">
	export type GlowHorizonVariant = 'top' | 'bottom' | 'left' | 'right';

	type Props = {
		class?: string;
		variant?: GlowHorizonVariant;
		opacity?: number;
	};

	let {
		class: className = '',
		variant = 'top',
		opacity = 0.28
	}: Props = $props();

	const gradients: Record<GlowHorizonVariant, string> = {
		top: 'radial-gradient(125% 125% at 50% 0%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		bottom:
			'radial-gradient(125% 125% at 50% 100%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		left: 'radial-gradient(125% 125% at 0% 50%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)',
		right:
			'radial-gradient(125% 125% at 100% 50%, transparent 40%, #f43f5e 68%, #fda4af 86%, #fff1f2 100%)'
	};
</script>

<div
	class="glow-horizon {className}"
	style="background: {gradients[variant]}; opacity: {opacity};"
	aria-hidden="true"
></div>

<style>
	.glow-horizon {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}

	:global(.dark) .glow-horizon {
		opacity: calc(var(--glow-opacity, 0.28) * 0.79);
	}
</style>

Особенности

4 стороны свечения: top, bottom, left, right
Радиальный градиент: прозрачный → малиновый (#f43f5e) → розовый (#fda4af) → светлый (#fff1f2)
Настраиваемая прозрачность через пропс opacity (по умолчанию 0.28)
Автоматически приглушается в тёмной теме
Тот же эффект, что в hero-секции и CTA-блоке главной страницы
Статичная отрисовка — без анимации, видно сразу при загрузке
Не перехватывает события мыши (pointer-events: none)

Использование

Базовый пример

<script>
	import GlowHorizon from '$lib/components/ui-registry/glowhorizon.svelte';
</script>

<div class="relative h-[400px] w-full overflow-hidden rounded-lg bg-background-inset">
	<GlowHorizon variant="top" />
</div>

<script>
	import GlowHorizon from '$lib/components/ui-registry/glowhorizon.svelte';
</script>

<div class="relative h-[400px] w-full overflow-hidden rounded-lg bg-background-inset">
	<GlowHorizon variant="top" />
</div>

Стороны свечения

<GlowHorizon variant="bottom" />
<GlowHorizon variant="left" />
<GlowHorizon variant="right" />

<GlowHorizon variant="bottom" />
<GlowHorizon variant="left" />
<GlowHorizon variant="right" />

Настройка прозрачности

<GlowHorizon variant="top" opacity={0.4} />
<GlowHorizon variant="bottom" opacity={0.15} />

<GlowHorizon variant="top" opacity={0.4} />
<GlowHorizon variant="bottom" opacity={0.15} />

Hero-секция со свечением

<section class="relative overflow-hidden rounded-lg bg-background-inset">
	<GlowHorizon variant="top" />
	<div class="relative z-10 px-8 py-16 text-center">
		<h1>Заголовок секции</h1>
		<p>Описание поверх свечения</p>
	</div>
</section>

<section class="relative overflow-hidden rounded-lg bg-background-inset">
	<GlowHorizon variant="top" />
	<div class="relative z-10 px-8 py-16 text-center">
		<h1>Заголовок секции</h1>
		<p>Описание поверх свечения</p>
	</div>
</section>

Пропсы

Пропс	Тип	По умолчанию	Описание
`variant`	`'top'` `'bottom'` `'left'` `'right'`	`'top'`	Сторона свечения
`opacity`	`number`	`0.28`	Прозрачность свечения (0–1)
`class`	`string`	`''`	Дополнительные CSS-классы

Доступность

Чисто декоративный элемент (aria-hidden) — не перехватывает фокус и не мешает навигации с клавиатуры
Не влияет на читаемость контента при правильном позиционировании
Свечение статично — безопасно для чувствительности к движению