Компоненты/Ртуть

Ртуть

Pro
31 января 2025

Анимированный шейдер поверхности жидкого металла с настройками

Установка

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

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

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

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

Файлы

index.tsx
НазадПревью ссылкиДалееБлик по логотипу

Вручную

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

npm install @shopify/react-native-skia react-native-reanimated
pnpm add @shopify/react-native-skia react-native-reanimated
yarn add @shopify/react-native-skia react-native-reanimated
bun add @shopify/react-native-skia react-native-reanimated

Скопируйте эти файлы в src/shared/components/organisms/liquid-metal/:

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

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

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

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

Пропсы

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

Тип DataSourceParam

width?

Тип number

height?

Тип number

lightColor?

Тип string

darkColor?

Тип string

patternScale?

Controls the width/frequency of the liquid pattern.

Тип number

refraction?

Controls RGB channel separation/refraction.

Тип number

edge?

Controls edge influence.

Тип number

patternBlur?

Softens the stripe transitions.

Тип number

liquid?

Controls the liquid edge distortion.

Тип number

speed?

Animation speed.

Тип number

edgeRadius?

Radius used for edge detection.

Тип number

rotation?

Rotates the liquid pattern in degrees.

Тип number

noiseStrength?

Strength of animated noise distortion.

Тип number

noiseScale?

Controls the frequency/scale of the noise.

Тип number

bulgeStrength?

Controls how pronounced the liquid bulge is.

Тип number

stripeWarp?

Controls RGB stripe distortion.

Тип number

edgeSoftness?

Controls how strongly the detected edge affects the liquid effect.

Тип number

paused?

Pauses the animation.

Тип boolean

style?

Тип StyleProp<ViewStyle>