React Native Psychedelic Splash Screen with Glitches

A full-bleed portrait splash that cuts between liquid neon, moving mirrors, clean frames, and RGB glitches.

How it works

1. The component measures its own container and asks an ImageShader to cover that exact rectangle, so the portrait remains centered without depending on the window size.
2. One Skia runtime effect contains all three looks. A mode uniform selects liquid warping with a luminance-driven neon map, six moving mirrored strips, or blocky RGB channel separation.
3. A useFrameCallback clock runs on the UI thread. Each effect ramps in and out over 120 ms, then yields to a short clean-photo interval before the next mode.
4. The wordmark is drawn in white, red, and cyan layers. Deterministic 60 ms jumps, plus a clipped text band, create the entrance glitch without React renders per frame.
5. The lower gradient, tagline, page dots, and home indicator remain native view layers above the image canvas for crisp layout and readable contrast.

Install

npx expo install @shopify/react-native-skia expo-linear-gradient react-native-reanimated react-native-worklets

On web, copy CanvasKit into the public directory and load it before mounting the component:

npx setup-skia-web public

import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';

await LoadSkiaWeb({ locateFile: () => '/canvaskit.wasm' });

Usage

import PsychedelicSplash from './PsychedelicSplash';

export function SplashScreen() {
  return <PsychedelicSplash image={require('./portrait.jpg')} />;
}

Customize the sequence and pause it from a parent:

import { useRef } from 'react';
import PsychedelicSplash, {
  type PsychedelicSplashRef,
} from './PsychedelicSplash';

export function SplashScreen() {
  const splashRef = useRef<PsychedelicSplashRef>(null);

  return (
    <PsychedelicSplash
      ref={splashRef}
      image={require('./portrait.jpg')}
      effects={['liquid', 'mirror', 'rgbSplit']}
      effectSeconds={1.1}
      cleanSeconds={0.2}
      intensity={0.85}
      neon={['#FF375F', '#FFD60A', '#32D74B', '#64D2FF']}
      wordmark="Studio"
      tagline="Make every frame yours"
      pageCount={4}
      activePage={1}
      onEffectChange={(effect) => trackEffect(effect)}
    />
  );
}

The forwarded ref exposes pause() and resume().

Props

Compatibility

• Expo SDK 57
• React Native 0.86
• Reanimated 4.5
• React Native Skia 2.6
• iOS: supported, not yet verified on a device
• Android: supported, not yet verified on a device
• Web: verified
• Works in Expo Go because Skia, Reanimated, Worklets, and Linear Gradient are included in the SDK

Accessibility

The complete splash is exposed as one image with a label made from the wordmark and tagline. When reduced motion is enabled, the shader stays on the clean portrait and the wordmark renders once in white without channel jumps.