Компоненты/Слипстрим

Слипстрим

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
НазадПризмаДалееСветовые шлейфы

Светящиеся ленты идут наискосок через кадр и медленно дрейфуют волнами: у нижнего края они толстые и яркие, к верху истончаются и гаснут. У каждой ленты светлое ядро, насыщенная середина и тёмная кромка. Когда палец или курсор проходит рядом, ленты расступаются вокруг него, как поток; с interactive={false} фон не реагирует на касания.

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

Вручную

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

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

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

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

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

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

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

Компонент растягивается на родителя, а содержимое из children ложится поверх лент.

Пропсы

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

Тип number

interactive?

Тип boolean

coreColor?

Тип RGB

midColor?

Тип RGB

rimColor?

Тип RGB

angle?

Тип number

spacing?

Тип number

paused?

Тип boolean

children?

Тип ReactNode

style?

Тип StyleProp<ViewStyle>