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

Точечная монограмма

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
НазадДизеринг фотоДалееТочечный глобус

Компонент растрирует текст или SVG-контур в сетку точек и оживляет её на Skia: точки отталкиваются от пальца или курсора, по нажатию расходятся ударной волной, а по знаку периодически пробегает блик. Точки знака красятся в фирменный цвет, остальные — в цвет поля.

Источником может быть короткий текст (text) или путь SVG (svgPath). Кадры считаются на 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/dot-monogram/:

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

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

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

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

Пропсы

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

Тип string

svgPath?

Тип string

viewBox?

Тип number

size?

Тип number

resolution?

Тип number

dotScale?

Тип number

inkColor?

Тип string

inkOnly?

Тип boolean

shimmer?

Тип boolean

interactive?

Тип boolean

dotColor?

Тип string

background?

Тип string

floatAmplitude?

Тип number

repelRadius?

Тип number

repelStrength?

Тип number

pulseStrength?

Тип number

showPulseRing?

Тип boolean

theme?

Тип "dark" | "light"

ariaLabel?

Тип string

style?

Тип StyleProp<ViewStyle>