Компоненты/Спектральная волна

Спектральная волна

Pro
3 июня 2026

Анимированные цветные волны на шейдере Skia.

Установка

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

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

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

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

Файлы

index.tsx
НазадРябь SkiaДалееДуга-спиннер

Вручную

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

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

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

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

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

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

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

Пропсы

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

Тип number

height?

Тип number

borderRadius?

Тип number

iterations?

Тип number

scale?

Тип number

wavelengthOffset?

Тип number

wavelengthRange?

Тип number

timeScale?

Тип number

borderWidth?

Тип number

borderColor?

Тип string

borderGlow?

Тип number

glowRadius?

Тип number

brightness?

Тип number

colors?

Тип [string, string, string]

asChild?

Тип boolean

children?

Тип React.ReactNode

style?

Тип StyleProp<ViewStyle>