React Native Animated Painting Welcome Screen

A cinematic welcome that stages kinetic typography and glass controls over an oil painting that flows like wet pigment.

How it works

1. The component measures its own container and maps the supplied image into a centered cover crop without reading the window dimensions.
2. A Skia runtime shader applies two layers of slow sine-and-cosine displacement to the image coordinates. It moves the paint without recoloring the source artwork.
3. One linear intro shared value drives the measured entrance: the headline rises first, the two actions follow, legal copy fades in, and the optional logo finishes with a four-keyframe bounce.
4. An independent UI-thread clock keeps the paint moving and oscillates the glass gradient continuously without causing React renders.
5. The headline, actions, legal copy, and logo remain regular React Native views above the Canvas, so they stay crisp, accessible, and easy to customize.

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 LivingPaintWelcome from './LivingPaintWelcome';

export function WelcomeScreen() {
  return (
    <LivingPaintWelcome image={require('./assets/painting.jpg')} />
  );
}

Customize the identity and replay the entrance from a parent:

import { useRef } from 'react';
import { Text } from 'react-native';
import LivingPaintWelcome, {
  type LivingPaintWelcomeRef,
} from './LivingPaintWelcome';

export function WelcomeScreen() {
  const welcomeRef = useRef<LivingPaintWelcomeRef>(null);

  return (
    <LivingPaintWelcome
      ref={welcomeRef}
      image={require('./assets/painting.jpg')}
      headline={['Find', 'your next', 'bright idea']}
      logo={<Text>Studio</Text>}
      accentColor="#276749"
      glassColors={['#FF8A65', '#38B2AC']}
      flow={0.75}
      titleFontFamily="YourDisplayFont"
      fontFamily="YourSansFont"
      titleScale={1.08}
      onPrimaryPress={() => openWorkspace()}
      onSecondaryPress={() => openSignIn()}
      onEntranceEnd={() => trackWelcomeReady()}
    />
  );
}

The forwarded ref exposes replay().

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 by the project build
• Works in Expo Go because Skia, Reanimated, Worklets, and Linear Gradient are included in the SDK

Accessibility

Both actions are exposed as labeled buttons to screen readers. With reduced motion enabled, the paint freezes, every element stays in its final position, and the complete composition fades in over 300 ms.