Компоненты/ASCII-рендер

ASCII-рендер

Pro
27 сентября 2026

Картинка или анимированная сцена, собранная из ASCII-символов прямо в шейдере

Установка

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

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

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

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

Файлы

index.tsx
НазадБегущая дугаДалееКластер аватаров

Рендер в ASCII-символах прямо в шейдере Skia: картинка делится на ячейки, для каждой берётся яркость, и в ячейке рисуется один из десяти символов от пробела до @. Глифы 5×7 закодированы числами внутри шейдера, поэтому шрифты и текстовые атласы не нужны.

Без source компонент показывает собственную анимированную сцену — планету с кольцом. С source (URI или require) рендерит изображение; в image можно передать SkImage или shared value с кадром, например currentFrame из useVideo Skia, чтобы получить ASCII-видео. sourceColors красит символы цветами исходника, scramble добавляет мерцание.

Работает на iOS, Android и в вебе.

Вручную

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

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

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

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

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

Исходник «ASCII-рендер» открывается с подпиской 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 AsciiRenderProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function AsciiRender({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: AsciiRenderProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

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

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

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

Пропсы

Пропс
Описание
width

Тип number

height

Тип number

source?

Тип DataSourceParam

image?

Тип SkImage | SharedValue<SkImage | null> | null

cellSize?

Тип number

contrast?

Тип number

scramble?

Тип number

invert?

Тип boolean

sourceColors?

Тип boolean

color?

Тип string

backgroundColor?

Тип string

speed?

Тип number

borderRadius?

Тип number

paused?

Тип boolean

style?

Тип StyleProp<ViewStyle>