Кластер аватаров

Аватары участников по очереди влетают из-за края кадра — крупные, размытые и повёрнутые — и пружинно встают на свои места по кругу. В раскладке «розетка» первый аватар становится центральным, и по нему периодически пробегает блик. Когда группа собрана, кольцо начинает медленно вращаться, а сами аватары остаются ровными.

Радиус кольца подбирается под число участников и размер аватаров, а сам компонент ужимается под ширину контейнера. Анимацию можно повторить, сменив replayKey, или включить автоповтор. При «Уменьшении движения» аватары просто проявляются на местах без полёта и вращения. Работает на iOS, Android и в вебе.

Вручную

npm install expo-linear-gradient react-native-reanimated

pnpm add expo-linear-gradient react-native-reanimated

yarn add expo-linear-gradient react-native-reanimated

bun add expo-linear-gradient react-native-reanimated

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

Использование

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

images принимает адреса, require(...) или объекты { src, alt }.

Пропсы