Компоненты/Топография

Топография

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
НазадТонкая плёнкаДалееАэротруба

Топографическая карта из тонких изолиний и более жирных горизонталей. Рельеф медленно течёт, а там, где склон круче, линии сгущаются и становятся ярче. Палец (или курсор в вебе) работает как гравитационный колодец: закручивает и раздвигает линии вокруг себя и тянет их вслед за движением. Когда касания нет, колодец сам медленно блуждает по карте.

Изолинии считаются шейдером Skia на GPU с учётом плотности пикселей, поэтому линии остаются тонкими на любом экране; время и следование за пальцем идут на UI-потоке Reanimated. Анимация замирает при «Уменьшении движения», в фоне, при 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/topography/:

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

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

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

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

Компонент растягивается на размер родителя (flex: 1); interactive={false} отключает реакцию на касание.

Пропсы

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

Тип number

density?

Тип number

color?

Тип string

majorEvery?

Тип number

interactive?

Тип boolean

paused?

Тип boolean

children?

Тип ReactNode

style?

Тип StyleProp<ViewStyle>