Киматика

Стальная пластина дрожит, и песок на ней собирается в узловые линии фигур Хладни. Сама по себе пластина раз в несколько секунд переключается на следующую резонансную моду, а песчинки при этом встряхиваются и заново укладываются в новую фигуру. Палец (или курсор в вебе) плавно меняет частоты: по горизонтали и вертикали задаются разные моды, а касание встряхивает песок. Стоит отпустить — пластина вернётся к собственному циклу.

Шейдер считается целиком на GPU через Skia, время, моды и сила толчка живут на UI-потоке Reanimated — React не перерисовывается на каждом кадре. Анимация замирает, когда включено «Уменьшение движения», приложение свёрнуто или передан paused. Работает на iOS, Android и в вебе.

Вручную

npm install @shopify/react-native-skia react-native-reanimated react-native-gesture-handler

pnpm add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler

yarn add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler

bun add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler

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

По умолчанию компонент занимает ширину родителя и высоту height. Чтобы растянуть его фоном на весь экран, передайте fill.

Пропсы