Компоненты/Точечная сфера

Точечная сфера

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 с глубиной: дальние точки бледнее, ближние ярче. В режиме «Парение» точки мягко колышутся, отталкиваются от пальца или курсора и по нажатию расходятся ударной волной с тонким кольцом. В режиме «Вращение» сфера плавно крутится вокруг наклонной оси.

Кадры считаются на UI-потоке Reanimated и ставятся на паузу, когда приложение свёрнуто или (в вебе) сфера вне экрана, а при «Уменьшении движения» она остаётся статичной. Работает на 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/dotted-sphere/:

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

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

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

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

Пропсы

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

Тип number

dotCount?

Тип number

distribution?

Тип DottedSphereDistribution

behavior?

Тип DottedSphereBehavior

spinSpeed?

Тип number

tilt?

Тип number

dotRadius?

Тип number

floatAmplitude?

Тип number

repelRadius?

Тип number

repelStrength?

Тип number

pulseStrength?

Тип number

showPulseRing?

Тип boolean

interactive?

Тип boolean

dotColor?

Тип string

background?

Тип string

theme?

Тип "dark" | "light"

style?

Тип StyleProp<ViewStyle>