Чернила

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

Внутри — классический решатель несжимаемой жидкости: завихрённость, давление в 20 итерациях Якоби, перенос скорости и красителя. Поле скоростей считается в сетке 128 клеток по короткой стороне, краситель — в более плотной сетке, а готовый кадр выводится через Skia с мягким масштабированием. Анимация замирает, когда включено «Уменьшение движения» или приложение свёрнуто. Работает на 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 InkProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function Ink({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: InkProps) {
  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 InkProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function Ink({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: InkProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Компонент растягивается на весь родитель: положите его в контейнер с нужным размером или на весь экран.

Пропсы