0:00/0:00

Appearance

Recorded on iPhone. Seven posters on a prism, spun and tilted by hand, then bent into a cylinder.

Shader

Geometric Carousel

Your images on the walls of a 3D prism you spin and tilt with a finger, standing on a polished floor.

Or get it with Pro

Features

Your images on the walls of a 3D prism you spin with a finger
Drag up or down to tilt it and see over the rim
Switch to a cylinder and the walls bend into one smooth curve
A polished floor mirrors it, from a faint sheen to glass
Five images make a pentagon, six a hexagon
Flick it and it glides, then settles on the next image

Built with

Skia runtime shader
Ray tracing
Reanimated
Gesture Handler

Installation

1Install dependencies

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

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>
  );
}

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

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

Usage

Give it your images. Each one becomes a wall.

import { GeometricCarousel } from '@/components/geometric-carousel';

const posters = [
  require('./a.jpg'),
  require('./b.jpg'),
  require('./c.jpg'),
  require('./d.jpg'),
];

export function Gallery() {
  return <GeometricCarousel images={posters} width="90%" />;
}

How it works

The whole shape is drawn by one Skia shader that ray traces it: every pixel casts rays from a camera and finds the wall they hit. A flat wall and a round one are the same arc with a different radius, so one number morphs the prism into a cylinder. The images are packed into a single texture once, and rays that miss the walls bounce off an invisible floor to make the reflection. Spin and tilt are driven by the drag on the UI thread, so React never re-renders while it moves.

More once you own it

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

Next componentFireworks