Компоненты/Жидкий хром

Жидкий хром

Pro
21 августа 2026

Текст залит шейдером жидкого хрома, который течёт по ходу анимации

Установка

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-chrome-text/:

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

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

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

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

Пропсы

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

Тип string

width?

Тип number

height?

Тип number

borderRadius?

Тип number

skyColor?

Тип string

highlightColor?

Тип string

shadowColor?

Тип string

groundColor?

Тип string

baseColor?

Тип string

sparkColor?

Тип string

colors?

Тип Partial<IChromeColors>

fontSource?

Тип DataSourceParam

fontFamily?

Тип string

fontWeight?

Тип TextStyle["fontWeight"]

fontSizeRatio?

Тип number

widthRatio?

Тип number

letterSpacing?

Тип number

bulge?

Тип number

normalStrength?

Тип number

horizonSharpness?

Тип number

roughness?

Тип number

fresnel?

Тип number

sparkle?

Тип number

edgeSoftness?

Тип number

speed?

Тип number

drift?

Тип number

resolution?

Тип number

paused?

Тип boolean

asChild?

Тип boolean

children?

Тип ReactNode

style?

Тип StyleProp<ViewStyle>

onReady?

Тип () => void