React Native Aurora Welcome with Animated Silk Fold

A full-screen welcome pattern with a slowly breathing five-color aurora and a luminous silk fold drifting down one side.

How it works

1. The Skia runtime shader builds the background from five color fields, layered diagonal blends, and two soft highlights that travel on 23- and 31-second elliptical paths.
2. A signed distance from an animated S-curve creates the silk fold. A narrow cyan highlight sits on its left edge while a wider shadow falls to its right and fades before the lower content.
3. A Reanimated frame callback advances one shared clock on the UI thread. pause() and resume() ease a speed factor instead of resetting the clock, so the fold never jumps.
4. Palette changes interpolate all five RGB uniforms over 1.2 seconds, keeping the shader and its grain continuous during a theme transition.
5. Every position and size comes from the component's own onLayout dimensions, so the composition works inside a screen, modal, or fixed-size card.
6. The logo, greeting, actions, and footer enter in a 70 ms cascade. Button feedback stays on the UI thread with a short scale spring.

Why this one

Most animated welcome screens treat the background as the entire idea. This pattern pairs its living aurora with a deliberately spacious brand stage, smooth palette morphing, and restrained action hierarchy. The demo shows how a custom lockup can combine crisp white geometry, a soft aurora-colored glow, and a tracked Geist wordmark without baking a brand into the reusable component.

Install

npx expo install @shopify/react-native-skia react-native-reanimated

Skia on web needs its CanvasKit files. Copy them into the public directory and load Skia before rendering the app:

npx setup-skia-web

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

export default function App() {
  return (
    <LoadSkiaWeb
      getWasmPath={(file) => `/${file}`}
      opts={{ locateFile: (file) => `/${file}` }}
    >
      <WelcomeScreen />
    </LoadSkiaWeb>
  );
}

Usage

import SilkAuroraWelcome from './SilkAuroraWelcome';

export function WelcomeScreen() {
  return <SilkAuroraWelcome onPrimaryPress={() => openSignIn()} />;
}

Customize the palette, content, typography, and motion:

import { useRef } from 'react';
import SilkAuroraWelcome, {
  AURORA_PALETTES,
  type SilkAuroraWelcomeRef,
} from './SilkAuroraWelcome';

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

  return (
    <SilkAuroraWelcome
      ref={welcomeRef}
      palette={AURORA_PALETTES.tide}
      greeting="Welcome aboard"
      primaryLabel="Sign in"
      secondaryLabel="Create account"
      tertiaryLabel="Continue as guest"
      footer="A calmer way to travel"
      primaryTextColor="#146F6A"
      speed={0.8}
      fontFamily="YourSansFont"
      titleFontFamily="YourDisplayFont"
      onPrimaryPress={() => openSignIn()}
    />
  );
}

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: supported, verified by the Expo web export
• Works in Expo Go because the native dependencies are bundled with Expo SDK 57

Accessibility

All actions are native Pressable buttons with screen-reader labels derived from their visible text. When Reduce Motion is enabled, the aurora rests at a fixed frame, palette changes happen immediately, and the entrance cascade is skipped. Empty tertiary and footer strings remove those elements from both the visual layout and accessibility tree.