0:00/0:00

Appearance

Recorded on iPhone. A studio's home screen, with its client flags rippling in from the right.

Shader

Waving Flag

A bunch of fabric flags fanned out from one edge of the screen, rippling in a slow wind.

$14

Or get it with Pro

Features

Your logos as stitched fabric flags, fanned out from one edge
A slow swell rolls through them, and the folds catch the light
Each flag moves at its own pace, so the motion never looks like a loop
Calm, breeze or gust, or set the wind yourself
Tie them on the left or the right
Nothing re-renders while it waves

Built with

Skia runtime shader
Reanimated

Installation

1Install dependencies

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

2Run a development build (Expo Go can't load Skia)

npx expo run:ios   # or: npx expo run:android

Usage

Give it your flags. They fill the box you put it in.

import { WavingFlag } from '@/components/waving-flag';

const flags = [
  require('./flags/north.png'),
  require('./flags/harbour.png'),
  require('./flags/orbit.png'),
];

export function Hero() {
  return <WavingFlag images={flags} style={{ height: 420 }} />;
}

How it works

Where each flag sits is composed by hand: a set of slots gives every flag's free end and lean, and shorter flags always draw over longer ones so no pole end shows. One Skia shader bends each image with a wave that grows towards the free end and shades its folds. A single clock on the UI thread drives every flag, and each starts at its own point in the wave and moves at a slightly different pace.

More once you own it

Examples, the full list of props and every advanced option for Waving Flag are here for owners.

Next componentRolling Carousel