Window Seat Clouds

A flight-mode scene built around an airplane window: an endless cloud sea drifting past the glass, a sliding shade, and quiet controls for pause, ambient sound, and the shade.

How it works

1. Every window part is measured from the container via onLayout and sized off the glass width, so the whole assembly keeps its proportions in a modal, a card, or on a tablet.
2. Inside the glass, three copies of the panorama sit in a row — normal, mirrored, normal — so every seam shows the same edge pixels. A single offset shared value advances in a useFrameCallback worklet and folds back every two panorama widths, which makes the drift endless and the wrap invisible.
3. Pausing eases a speedFactor shared value between 1 and 0 over 700 ms; the drift, the bob, and the bank all read it, so the view decelerates without any jump in position.
4. The bob (translateY) and the bank (rotate) ride on a glass-sized wrapper, keeping their pivot at the window center; the panorama is 18 % taller than the glass so the motion never exposes an edge.
5. The shade is a panel inside the glass whose translateY follows one shade shared value: 6 % of the glass at rest (just the grip lip), the full glass when closed. The same value dims the light halo and drives the shade icon in the button.

Install

npx expo install expo-image expo-linear-gradient react-native-reanimated

Usage

import WindowSeatClouds from './WindowSeatClouds';

export function FlightScreen() {
  return <WindowSeatClouds skySource={require('./assets/cloud-sea.jpg')} />;
}

Use the knobs, callbacks, and imperative controls to adapt the pattern:

import { useRef } from 'react';
import WindowSeatClouds, {
  type WindowSeatCloudsRef,
} from './WindowSeatClouds';

export function FlightScreen() {
  const windowRef = useRef<WindowSeatCloudsRef>(null);

  return (
    <WindowSeatClouds
      ref={windowRef}
      skySource={require('./assets/cloud-sea.jpg')}
      horizonY={0.45}
      glassHorizonY={0.52}
      driftSpeed={0.03}
      turbulence={0.6}
      timeValue="40"
      timeUnit="min"
      distanceValue="205"
      distanceUnit="mi"
      accentColor="#C98B5A"
      fontFamily="YourSansFont"
      numberFontFamily="YourMonoFont"
      onPausedChange={(paused) => trackPause(paused)}
      onShadeChange={(closed) => trackShade(closed)}
      onSoundChange={(on) => trackSound(on)}
    />
  );
}

The forwarded ref exposes pause(), resume(), togglePause(), closeShade(), openShade(), and toggleShade().

The panorama should be a landscape image around 1600×914; horizonY is measured on that image, and the strip renders it at its own aspect ratio with contentFit="cover".

Props

Compatibility

• Expo SDK 57
• React Native 0.86
• Reanimated 4.5
• iOS: supported, not yet verified on a device
• Android: supported, not yet verified on a device
• Web: verified
• Works in Expo Go because all native dependencies are included in the SDK

Accessibility

The three controls are labeled buttons; the pause button announces its state, and the sound and shade buttons report theirs as checked. Every label can be overridden. When reduced motion is enabled, the drift and the turbulence stop (the panorama sits still) and the shade switches with a 200 ms opacity fade instead of sliding.