Компоненты/ASCII WebGL

ASCII WebGL

Pro
28 сентября 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 по яркости — от точки до плотного знака. Тор медленно вращается, а освещение с бликом делает объём читаемым даже в символах.

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

Вручную

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

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

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

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

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

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

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

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

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

Компонент заполняет родителя; children рисуются поверх холста.

Пропсы

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

Тип number

cellSize?

Тип number

color?

Тип string

background?

Тип string

interactive?

Тип boolean

thickness?

Тип number

paused?

Тип boolean

children?

Тип ReactNode

style?

Тип StyleProp<ViewStyle>