Блик по логотипу

Логотип растеризуется в поле расстояний, и шейдер Skia рисует вокруг него раскалённое ядро, мягкий ореол, игольчатые лучи с бегущими искрами и лепестки поверх плёночного зерна. При появлении вспышка разгорается за несколько секунд, а затем медленно пульсирует. По умолчанию светится знак Astra, собранный из векторного контура; через src можно передать своё растровое изображение.

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

Компонент растягивается на весь родитель. Цвет свечения tint задаётся тройкой RGB от 0 до 1, а center — смещением от центра кадра в долях его высоты.

Пропсы