Компоненты/Море облаков

Море облаков

Pro
28 сентября 2026

Шейдерный вид из иллюминатора: облачная палуба плывёт под сумеречным небом с перистыми облаками.

Установка

import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";

Установка через CLIPro

Команда станет доступна после оформления Pro.

Оформить ProВойти

Файлы

index.tsx
НазадХромовый фонДалееКиматика

Облачная палуба уходит к горизонту и медленно плывёт навстречу, как в иллюминаторе самолёта, а над ней в синем сумеречном небе тянутся перистые облака. Вид чуть покачивается, будто самолёт идёт по воздуху. Когда палец ведёт по экрану (или в вебе движется курсор), кадр плавно смещается с параллаксом; parallax={false} отключает это.

Шейдер считается целиком на GPU через Skia, время и сглаживание параллакса идут на UI-потоке Reanimated — React не перерисовывается на каждом кадре. Анимация замирает, когда включено «Уменьшение движения», приложение свёрнуто, передан paused или (в вебе) поверхность ушла за пределы экрана. Работает на iOS, Android и в вебе.

Вручную

Поставьте зависимости:

npm install @shopify/react-native-skia react-native-reanimated react-native-gesture-handler
pnpm add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler
yarn add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler
bun add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler

Скопируйте эти файлы в src/shared/components/organisms/cloud-sea/:

index.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface CloudSeaProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function CloudSea({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: CloudSeaProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Море облаков» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Проверьте алиас путей. Импорты в коде выше записаны так, как их пишет astra-rn add: @/shared/components, @/shared/utils и @/shared/hooks. Нужен алиас "@/*": ["./src/*"] в tsconfig.json — или поправьте импорты под свои пути.

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

usage.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface CloudSeaProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function CloudSea({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: CloudSeaProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Море облаков» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Компонент растягивается на размер родителя (flex: 1). Цвета принимают строку ("#2161fa") или тройку RGB от 0 до 1.

Пропсы

Пропс
Описание
speed?

Тип number

horizon?

Тип number

parallax?

Тип boolean

skyColor?

Тип ShaderColor

zenithColor?

Тип ShaderColor

cloudColor?

Тип ShaderColor

shadowColor?

Тип ShaderColor

deckColor?

Тип ShaderColor

paused?

Тип boolean

children?

Тип ReactNode

style?

Тип StyleProp<ViewStyle>