0:00/0:00

Recorded on iPhone. Labubu, Expo, Discord, PlayStation and Pizza Hut stickers scattered on a board, peeled up, dragged and stuck back down.

Gesture

Holographic Sticker

Die-cut foil stickers that catch rainbow light as you tilt the phone and peel up off the screen when you hold them.

$12

Or get it with Pro

Features

Stickers shine with rainbow foil as you tilt the phone
Hold one and it peels up from under your finger, with a light tap of feedback
Drag it around, twist it with two fingers, or pinch to zoom
Let go and it sticks back down, starting from the edge you lifted
Drop in a list of stickers and the board scatters them for you
Runs on iOS and Android from the same code

Built with

Skia mesh and shaders
Reanimated
Gesture Handler
expo-haptics
expo-image

Installation

1Install dependencies

npx expo install @shopify/react-native-skia react-native-reanimated react-native-worklets react-native-gesture-handler expo-haptics expo-image

2Wrap your app in GestureHandlerRootView

import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
    </GestureHandlerRootView>
  );
}

Without it nothing errors, but the stickers never respond to a touch.

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

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

Usage

import { StickerBoard } from '@/components/holographic-sticker';

export function Stickers() {
  return (
    <StickerBoard
      stickers={[
        { key: 'heart', source: require('./heart.png'), width: 100 },
        { key: 'pizza', source: require('./pizza.png'), width: 140 },
      ]}
    />
  );
}

The board fills its parent, tosses each sticker on at a random spot and angle, and brings the one you pick up to the front. Try it on a real device: a simulator can't be tilted, so the foil never shows.

How it works

Each sticker is drawn with Skia as a 16 × 16 mesh. Holding it starts a bend at your finger that sweeps to the far side, and each point rises the further the bend has passed it, with perspective so the lifted part grows toward you. The same mesh, blurred and flattened, is the shadow. One shader rides the bend with a bright crest and a dark trough so the crease reads as a crease; another adds the rainbow foil, clipped to the art's outline and driven by the phone's rotation sensor on the UI thread.

More once you own it

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

Next componentGeometric Carousel