Компоненты/Рой букв

Рой букв

Pro
23 августа 2026

Атлас букв на Skia слетается в любой SVG-контур и разлетается от касания

Установка

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

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

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

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

Файлы

index.tsx
НазадТекст, въезжающий сбокуДалееЖидкий хром

Вручную

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

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/molecules/letter-swarm/:

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

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

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

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

Пропсы

Пропс
Описание
forms

Тип readonly TSwarmForm[]

active?

Тип number

cycle?

Тип boolean

hold?

Тип number

travel?

Тип number

tapToMorph?

Тип boolean

charset?

Тип string

palette?

Тип string[]

typeface?

Тип DataSourceParam

family?

Тип string

letterSize?

Тип number

weight?

Тип TextStyle["fontWeight"]

coverage?

Тип number

tracking?

Тип number

maxLetters?

Тип number

sway?

Тип number

lift?

Тип number

interactive?

Тип boolean

reach?

Тип number

repel?

Тип number

paused?

Тип boolean

seed?

Тип number

guide?

Тип SharedValue<readonly [number, number, number]>

onActiveChange?

Тип (active: number) => void

style?

Тип StyleProp<ViewStyle>