Компоненты/Текст в пыль

Текст в пыль

Pro
23 августа 2026

Текст рассыпается в летящие частицы пыли и собирается обратно

Установка

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

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

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

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

Файлы

index.tsx
НазадТекст DiaДалееСменный текст

Вручную

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

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/dust-text/:

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

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

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

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

Пропсы

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

Тип string

colors?

Тип string[]

visible?

Тип boolean

duration?

Тип number

stagger?

Тип number

particleSize?

Тип number

density?

Тип number

maxParticles?

Тип number

shape?

Тип TDustShape

drift?

Тип number

interactive?

Тип boolean

touchRadius?

Тип number

touchForce?

Тип number

fontSource?

Тип DataSourceParam

fontFamily?

Тип string

fontSize?

Тип number

fontWeight?

Тип TextStyle["fontWeight"]

autoFit?

Тип boolean

paused?

Тип boolean

style?

Тип StyleProp<ViewStyle>