@myelophone/nuxt 0.18.2

package/app/components/ui/Skeleton.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { CSSProperties } from "vue";
+
+type SkeletonRounded = "none" | "sm" | "md" | "lg" | "full";
+
+interface Props {
+	as?: string | Component;
+	animated?: boolean;
+	rounded?: SkeletonRounded;
+	width?: string | number;
+	height?: string | number;
+	ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: "div",
+	animated: true,
+	rounded: "md",
+});
+
+const roundedClasses: Record<SkeletonRounded, string> = {
+	none: "rounded-none",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	full: "rounded-full",
+};
+
+const toCssSize = (value: string | number | undefined) =>
+	typeof value === "number" ? `${value}px` : value;
+
+const skeletonStyles = computed<CSSProperties>(() => ({
+	width: toCssSize(props.width),
+	height: toCssSize(props.height),
+}));
+</script>
+
+<template>
+	<component
+		:is="as"
+		:class="[
+			'ui-skeleton',
+			roundedClasses[rounded],
+			{ 'ui-skeleton--animated': animated },
+		]"
+		:style="skeletonStyles"
+		:role="ariaLabel ? 'status' : undefined"
+		:aria-label="ariaLabel"
+		:aria-hidden="ariaLabel ? undefined : 'true'"
+		data-nosnippet
+	/>
+</template>
+
+<style scoped>
+.ui-skeleton {
+	display: block;
+	flex-shrink: 0;
+	background-color: var(--ui-border);
+	background-color: color-mix(in srgb, var(--ui-text) 11%, var(--ui-bg));
+}
+
+.ui-skeleton--animated {
+	will-change: opacity;
+	animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes ui-skeleton-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.48;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ui-skeleton--animated {
+		animation: none;
+		will-change: auto;
+	}
+}
+
+@media (forced-colors: active) {
+	.ui-skeleton {
+		background-color: CanvasText;
+		opacity: 0.2;
+	}
+}
+</style>

package/app/components/ui/SmartContrast.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+const props = defineProps({
+	src: { type: String, default: "" },
+	gradient: { type: String, default: "" },
+	fixed: { type: Boolean, default: false },
+	auto: { type: Boolean, default: true },
+	height: { type: String, default: "100vh" },
+});
+
+const wrapperStyles = computed(() => {
+	const styles: Record<string, string> = {
+		height: props.height,
+	};
+
+	if (props.src) {
+		styles.backgroundImage = `url('${props.src}')`;
+	} else if (props.gradient) {
+		styles.background = props.gradient;
+	}
+
+	if (props.fixed) {
+		styles.backgroundAttachment = "fixed";
+	}
+
+	return styles;
+});
+</script>
+
+<template>
+	<section
+		class="smart-contrast-wrapper"
+		:class="{ 'auto-mode': auto }"
+		:style="wrapperStyles"
+	>
+		<slot />
+	</section>
+</template>
+
+<style scoped>
+.smart-contrast-wrapper {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	position: relative;
+	background-color: #888;
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	isolation: isolate;
+	z-index: 0;
+}
+
+.smart-contrast-wrapper.auto-mode :deep(h1),
+.smart-contrast-wrapper.auto-mode :deep(h2),
+.smart-contrast-wrapper.auto-mode :deep(h3),
+.smart-contrast-wrapper.auto-mode :deep(p),
+.smart-contrast-wrapper.auto-mode :deep(span),
+.smart-contrast-wrapper.auto-mode :deep(a) {
+	color: #fff !important;
+	mix-blend-mode: difference;
+}
+
+.smart-contrast-wrapper :deep(.invert-text) {
+	color: #fff !important;
+	mix-blend-mode: difference;
+}
+
+.smart-contrast-wrapper.auto-mode :deep(a) {
+	text-decoration: underline;
+}
+</style>

package/app/components/ui/SnapContainer.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+const props = defineProps<{ direction?: "vertical" | "horizontal" }>();
+const containerRef = ref<HTMLElement | null>(null);
+const wrapperRef = ref<HTMLElement | null>(null);
+const currentIndex = ref(0);
+const isAnimating = ref(false);
+const sectionsCount = ref(0);
+const isVertical = computed(
+	() => (props.direction || "vertical") === "vertical",
+);
+
+provide("snapActiveIndex", currentIndex);
+provide("snapIsVertical", isVertical);
+
+let isIntersecting = false;
+let intersectionRatio = 0;
+let touchStartY = 0;
+let touchStartX = 0;
+
+const scrollTo = (index: number, scrollPage: boolean = true) => {
+	if (isAnimating.value || index < 0 || index >= sectionsCount.value) return;
+
+	isAnimating.value = true;
+	currentIndex.value = index;
+
+	if (scrollPage && wrapperRef.value) {
+		const rect = wrapperRef.value.getBoundingClientRect();
+		const behavior = Math.abs(rect.top) > 50 ? "smooth" : "auto";
+		window.scrollTo({ top: window.scrollY + rect.top, behavior });
+	}
+
+	setTimeout(() => {
+		isAnimating.value = false;
+	}, 1200);
+};
+
+const processMove = (delta: number, preventDefault?: () => void) => {
+	if (!wrapperRef.value || !isIntersecting) return;
+	const rect = wrapperRef.value.getBoundingClientRect();
+	const isAligned = Math.abs(rect.top) < 10;
+
+	if (!isAligned) {
+		if (intersectionRatio > 0.5) {
+			if (rect.top > 0 && delta > 0) {
+				preventDefault?.();
+				scrollTo(0, true);
+				return;
+			}
+			if (rect.top < 0 && delta < 0) {
+				preventDefault?.();
+				scrollTo(sectionsCount.value - 1, true);
+				return;
+			}
+		}
+		return;
+	}
+
+	if (isAnimating.value) {
+		preventDefault?.();
+		return;
+	}
+
+	const isAtFirst = currentIndex.value === 0;
+	const isAtLast = currentIndex.value === sectionsCount.value - 1;
+
+	if ((isAtFirst && delta < 0) || (isAtLast && delta > 0)) return;
+
+	preventDefault?.();
+	if (Math.abs(delta) > 20) {
+		scrollTo(
+			delta > 0 ? currentIndex.value + 1 : currentIndex.value - 1,
+			true,
+		);
+	}
+};
+
+const handleWheel = (e: WheelEvent) => {
+	processMove(e.deltaY, () => e.preventDefault());
+};
+
+const onTouchStart = (e: TouchEvent) => {
+	const touch = e.touches[0];
+	if (!touch) return;
+
+	touchStartY = touch.clientY;
+	touchStartX = touch.clientX;
+};
+
+const onTouchMove = (e: TouchEvent) => {
+	if (!isIntersecting) return;
+
+	const touch = e.touches[0];
+	if (!touch) return;
+
+	const currentY = touch.clientY;
+	const currentX = touch.clientX;
+	const deltaY = touchStartY - currentY;
+	const deltaX = touchStartX - currentX;
+	const delta = isVertical.value ? deltaY : deltaX;
+
+	const rect = wrapperRef.value?.getBoundingClientRect();
+	const isAligned = rect && Math.abs(rect.top) < 10;
+
+	if (isAligned) {
+		const isAtFirst = currentIndex.value === 0;
+		const isAtLast = currentIndex.value === sectionsCount.value - 1;
+		const tryingToExitTop = isAtFirst && delta < 0;
+		const tryingToExitBottom = isAtLast && delta > 0;
+
+		if (!tryingToExitTop && !tryingToExitBottom) {
+			if (e.cancelable) e.preventDefault();
+		}
+	}
+};
+
+const onTouchEnd = (e: TouchEvent) => {
+	const touch = e.changedTouches[0];
+	if (!touch) return;
+
+	const endY = touch.clientY;
+	const endX = touch.clientX;
+	const delta = isVertical.value ? touchStartY - endY : touchStartX - endX;
+
+	if (Math.abs(delta) > 40) {
+		processMove(delta);
+	}
+};
+
+onMounted(() => {
+	sectionsCount.value =
+		containerRef.value?.querySelectorAll(".snap-section").length || 0;
+	window.addEventListener("wheel", handleWheel, { passive: false });
+
+	const el = wrapperRef.value;
+	if (el) {
+		el.addEventListener("touchstart", onTouchStart, { passive: true });
+		el.addEventListener("touchmove", onTouchMove, { passive: false });
+		el.addEventListener("touchend", onTouchEnd, { passive: true });
+	}
+
+	const observer = new IntersectionObserver(
+		(entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+
+			isIntersecting = entry.isIntersecting;
+			intersectionRatio = entry.intersectionRatio;
+		},
+		{ threshold: Array.from({ length: 11 }, (_, i) => i / 10) },
+	);
+	if (wrapperRef.value) observer.observe(wrapperRef.value);
+});
+
+onUnmounted(() => {
+	window.removeEventListener("wheel", handleWheel);
+});
+
+const resetToFirst = () => {
+	console.log("Сигнал получен: сбрасываю currentIndex в 0");
+	isAnimating.value = false;
+	scrollTo(0, false);
+	currentIndex.value = 0;
+};
+
+const { registerContainer } = useSnapScroll();
+registerContainer(resetToFirst);
+
+provide("snapActiveIndex", currentIndex);
+</script>
+
+<template>
+	<div
+		ref="wrapperRef"
+		class="relative w-full h-dvh overflow-hidden select-none1"
+		:style="{
+			backgroundColor: 'var(--ui-bg, #000)',
+			color: 'var(--ui-text, #fff)',
+		}"
+	>
+		<div
+			class="absolute z-50 flex gap-2"
+			:class="[
+				isVertical
+					? 'right-6 top-1/2 -translate-y-1/2 flex-col'
+					: 'bottom-6 left-1/2 -translate-x-1/2 flex-row',
+			]"
+		>
+			<button
+				v-for="(_, i) in sectionsCount"
+				:key="i"
+				@click="scrollTo(i)"
+				class="group flex items-center justify-center w-1 h-4 focus:outline-none"
+			>
+				<div
+					class="transition-all duration-500 rounded-full"
+					:style="{
+						backgroundColor:
+							'var(--loader-fill-color, currentColor)',
+					}"
+					:class="
+						currentIndex === i
+							? 'w-3 h-3 opacity-100'
+							: 'w-1.5 h-2 opacity-20 hover:opacity-100'
+					"
+				/>
+			</button>
+		</div>
+
+		<div
+			ref="containerRef"
+			class="w-full h-full will-change-transform flex transition-transform duration-1200 ease-[cubic-bezier(0.22,1,0.36,1)]"
+			:class="[isVertical ? 'flex-col' : 'flex-row']"
+			:style="{
+				transform: isVertical
+					? `translateY(-${currentIndex * 100}%)`
+					: `translateX(-${currentIndex * 100}%)`,
+			}"
+		>
+			<slot />
+		</div>
+	</div>
+</template>

package/app/components/ui/SnapSection.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+const props = defineProps<{
+	id: string;
+	bgClass?: string;
+	bgImage?: string;
+	bgVideo?: string;
+	bgVideoMobile?: string;
+	poster?: string;
+	posterMobile?: string;
+	youtubeId?: string;
+	youtubeIdMobile?: string;
+	overlay?: boolean | string;
+	lazy?: boolean;
+	contentClass?: string;
+}>();
+
+const sectionRef = ref<HTMLElement | null>(null);
+const activeIndex = inject<Ref<number>>("snapActiveIndex", ref(0));
+const isVertical = inject<Ref<boolean>>("snapIsVertical");
+const myIndex = ref(-1);
+const videoRef = ref<HTMLVideoElement | null>(null);
+const ytFrameRef = ref<HTMLIFrameElement | null>(null);
+
+const windowWidth = ref(
+	typeof window !== "undefined" ? window.innerWidth : 1024,
+);
+
+const handleResize = () => {
+	windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+	window.addEventListener("resize", handleResize);
+	if (sectionRef.value?.parentElement) {
+		myIndex.value = Array.from(
+			sectionRef.value.parentElement.children,
+		).indexOf(sectionRef.value);
+	}
+});
+
+onUnmounted(() => {
+	window.removeEventListener("resize", handleResize);
+});
+
+const isMobile = computed(() => windowWidth.value < 768);
+
+const currentVideo = computed(() =>
+	isMobile.value && props.bgVideoMobile ? props.bgVideoMobile : props.bgVideo,
+);
+const currentPoster = computed(() =>
+	isMobile.value && props.posterMobile ? props.posterMobile : props.poster,
+);
+
+const currentYoutubeUrl = computed(() => {
+	const target =
+		isMobile.value && props.youtubeIdMobile
+			? props.youtubeIdMobile
+			: props.youtubeId;
+	return getYoutubeEmbed(target);
+});
+
+const currentYoutubePoster = computed(() => {
+	const target =
+		isMobile.value && props.youtubeIdMobile
+			? props.youtubeIdMobile
+			: props.youtubeId;
+	return getYoutubePoster(target);
+});
+
+const parallaxStyle = computed(() => {
+	if (activeIndex === undefined || myIndex.value === -1) return {};
+	const diff = activeIndex.value - myIndex.value;
+	const offset = diff * 20;
+	return {
+		transform: isVertical?.value
+			? `translate3d(0, ${offset}%, 0)`
+			: `translate3d(${offset}%, 0, 0)`,
+		transition: "transform 1200ms cubic-bezier(0.22, 1, 0.36, 1)",
+	};
+});
+
+const overlayStyle = computed(() => {
+	if (!props.overlay) return null;
+	return {
+		background:
+			typeof props.overlay === "string"
+				? props.overlay
+				: "rgba(0, 0, 0, 0.4)",
+	};
+});
+
+watch(activeIndex, (newIdx) => {
+	if (!videoRef.value) return;
+	if (newIdx === myIndex.value) {
+		videoRef.value.play().catch(() => {});
+	} else {
+		videoRef.value.pause();
+	}
+});
+
+const toggleVideo = () => {
+	if (!videoRef.value) return;
+
+	if (
+		activeIndex?.value === myIndex.value &&
+		document.visibilityState === "visible"
+	) {
+		videoRef.value.play().catch(() => {});
+	} else {
+		videoRef.value.pause();
+	}
+};
+
+watch(activeIndex, () => {
+	toggleVideo();
+});
+
+const sendCommand = (command: "playVideo" | "pauseVideo") => {
+	if (!ytFrameRef.value || !ytFrameRef.value.contentWindow) return;
+
+	ytFrameRef.value.contentWindow.postMessage(
+		JSON.stringify({
+			event: "command",
+			func: command,
+			args: [],
+		}),
+		"*",
+	);
+};
+
+const toggleYoutube = () => {
+	if (!currentYoutubeUrl.value) return;
+
+	if (
+		activeIndex?.value === myIndex.value &&
+		document.visibilityState === "visible"
+	) {
+		sendCommand("playVideo");
+	} else {
+		sendCommand("pauseVideo");
+	}
+};
+
+watch(activeIndex, () => {
+	toggleYoutube();
+});
+
+const handleVisibilityChange = () => {
+	toggleVideo();
+	toggleYoutube();
+};
+
+onMounted(() => {
+	document.addEventListener("visibilitychange", handleVisibilityChange);
+	toggleVideo();
+	setTimeout(toggleYoutube, 1000);
+});
+
+onUnmounted(() => {
+	document.removeEventListener("visibilitychange", handleVisibilityChange);
+});
+</script>
+
+<template>
+	<section
+		ref="sectionRef"
+		:id="id"
+		class="snap-section w-full h-full shrink-0 overflow-hidden flex relative"
+		:class="bgClass"
+		:style="
+			!bgClass && !bgImage && !bgVideo && !youtubeId
+				? { backgroundColor: 'var(--ui-bg, #000)' }
+				: {}
+		"
+	>
+		<div class="absolute inset-0 z-0 pointer-events-none select-none">
+			<div
+				v-if="currentYoutubeUrl"
+				class="absolute inset-0 overflow-hidden"
+			>
+				<iframe
+					ref="ytFrameRef"
+					:src="currentYoutubeUrl"
+					class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 yt-bg-frame"
+					frameborder="0"
+					allow="autoplay; encrypted-media; playsinline"
+					:loading="lazy ? 'lazy' : 'eager'"
+				></iframe>
+			</div>
+
+			<video
+				ref="videoRef"
+				v-else-if="currentVideo"
+				autoplay
+				muted
+				loop
+				loading="lazy"
+				playsinline
+				:poster="currentPoster"
+				class="absolute inset-0 w-full h-full object-cover"
+			>
+				<source :src="currentVideo" />
+			</video>
+
+			<div
+				v-else-if="bgImage || currentYoutubePoster"
+				class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+				:style="{
+					backgroundImage: bgImage
+						? `url(${bgImage})`
+						: currentYoutubePoster,
+				}"
+			>
+				<SafeNuxtImg
+					v-if="lazy && bgImage"
+					:src="bgImage"
+					class="hidden"
+					loading="lazy"
+					alt=""
+				/>
+			</div>
+
+			<div
+				v-if="overlay"
+				class="absolute inset-0 z-1"
+				:style="overlayStyle"
+			></div>
+		</div>
+
+		<div
+			class="w-full max-w-7xl mx-auto px-6 will-change-transform z-10 relative pointer-events-auto select-text"
+			:class="[
+				contentClass || 'flex flex-col items-center justify-center',
+				parallaxStyle,
+			]"
+			:style="parallaxStyle"
+		>
+			<div class="w-full"><slot /></div>
+		</div>
+
+		<div
+			v-if="myIndex === 0"
+			class="absolute z-20 transition-opacity duration-1000"
+			:class="[
+				isVertical
+					? 'bottom-8 left-1/2 -translate-x-1/2'
+					: 'right-8 top-1/2 -translate-y-1/2',
+				activeIndex === 0 ? 'opacity-40' : 'opacity-0',
+			]"
+		>
+			<div
+				class="relative overflow-hidden bg-current/20 rounded-full"
+				:class="isVertical ? 'w-[1.5px] h-12' : 'h-[1.5px] w-12'"
+				:style="{ color: 'var(--loader-fill-color, currentColor)' }"
+			>
+				<div
+					class="absolute bg-current rounded-full animate-premium-scroll"
+					:class="
+						isVertical
+							? 'w-full h-1/3 left-0'
+							: 'h-full w-1/3 top-0'
+					"
+				></div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<style scoped>
+.yt-bg-frame {
+	width: 100vw;
+	height: 56.25vw;
+	min-height: 100vh;
+	min-width: 177.77vh;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 140%;
+	height: 140%;
+	transform: translate(-50%, -50%);
+	aspect-ratio: 16 / 9;
+	min-width: 100%;
+	min-height: 100%;
+}
+
+@media (max-width: 768px) {
+	.yt-bg-frame {
+		height: 100%;
+		width: auto;
+		aspect-ratio: 16 / 9;
+		min-width: 200vw;
+	}
+}
+</style>

package/app/components/ui/SonnerStyle.vue

@@ -0,0 +1,7 @@
+<script setup>
+onMounted(() => {
+	import("vue-sonner/style.css");
+});
+</script>
+
+<template></template>