0:00/0:00

Recorded on iPhone. Six artworks tide in one after another from the centre of the screen, then loop back to the first.

Shader

Tideline Reveal

The next image washes in like a tide, along a ragged, noise-shaped edge with a warm glow.

Or get it with Pro

Features

Each new image washes in like a wave running up a beach
Smooth from start to finish, with no flicker
Starts wherever you tap, or from a spot you choose
A soft glow outlines the wave as it moves
Three ready-made styles: default, calm and stormy
A gentle vibration you can feel as each image arrives

Built with

Skia runtime shader
Baked fBm noise
Reanimated
Pulsar haptics

Installation

1Install dependencies

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

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

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

Usage

import { TidelineReveal } from '@/components/tideline-reveal';

const photos = [require('./a.jpg'), require('./b.jpg'), 'https://…/c.jpg'];

export function Gallery() {
  return <TidelineReveal images={photos} />;
}

Tap anywhere on the image to reveal the next one.

How it works

A Skia shader draws the edge as a line on a noise-warped map of distances from where the reveal starts. During a reveal only that line moves outward, so a pixel can never flip back, which is why the edge never flickers. The noise is baked into a texture once, so each frame costs a single texture read per pixel.

More once you own it

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

Next componentLiquid Metal Button