# Rolling Scroll Gallery — React Native component from Motionary

> A horizontal gallery whose slides are wrapped around the inside of a cylinder — works squeeze hard as they roll off toward the edges while growing slightly taller, the way the inside of a partly unrolled scroll does. Drag, fling, or tap a slide that has rolled off to bring it back. Each slide is a Skia triangle mesh re-projected on the UI thread. Dressed as a small gallery archive — putty wall, numbered labels, a live catalogue counter — and hung with seven public-domain paintings, but drop it in for an editorial carousel, a product shelf, or any list that deserves more than a flat swipe.

Product page: https://motionary.dev/animations/rolling-scroll-gallery
Price: $8 USD (live price on the product page)
License: single developer, unlimited personal and commercial apps
Delivery: instant download of the full TypeScript source after checkout
Stack: expo, react native skia, shaders, reanimated
Rarity: legendary
Sold by: Motionary (https://motionary.dev)

## What it is

A horizontal gallery whose slides are wrapped around the inside of a cylinder — works squeeze hard as they roll off toward the edges while growing slightly taller, the way the inside of a partly unrolled scroll does. Drag, fling, or tap a slide that has rolled off to bring it back. Each slide is a Skia triangle mesh re-projected on the UI thread. Dressed as a small gallery archive — putty wall, numbered labels, a live catalogue counter — and hung with seven public-domain paintings, but drop it in for an editorial carousel, a product shelf, or any list that deserves more than a flat swipe.

## How it works

Built on React Native Skia. The strip of slides is wrapped around the inside of a vertical cylinder of radius R, tangent to the screen plane at the centre of the viewport, with the axis between the camera and the screen — so the middle of the strip is the far wall and both edges curl toward the viewer. For a pinhole camera of focal length f, a point at arc length s = R*theta projects with scale k = f / (f - R(1 - cos theta)) and offset x = k*R*sin(theta). dx/dtheta collapses toward the edges (the horizontal squeeze) while k grows (the edges are nearer, so they draw taller) — a convex cylinder shrinks the edges instead and reads as a spinning drum. dx/ds is exactly 1 at the tangent point, so a drag through the middle tracks the finger 1:1. Nothing is shaded; the curve is sold purely by the silhouette. Past cos(theta_fold) = -R/(f - R) the projection stops being one-to-one, so the mesh clamps there and slides beyond it collapse to a degenerate point. Every card is the same 3:2 frame, so the pitch is constant and the rolled sliver at each screen edge is identical whichever work holds the centre. Each slide's arc position comes from a wrapping modulo, so seven fixed meshes cover an endless strip with no recycling and no re-renders. Every vertex is rebuilt in a useDerivedValue worklet, so the whole strip re-projects on the UI thread. Requires the New Architecture (Fabric) and a custom dev build because true-sheet is native (npx expo run:ios / run:android). Tested on Expo SDK 56, iOS + Android.

## What you get

- TypeScript source (RollingList.tsx, Slide.tsx)
- Documented projection maths (cylinder.ts) — fold angle and index wrap included
- Slide baker that rasterises artwork + wall label into one texture (createSlideImage.ts)
- Seven CC0 works from the Art Institute of Chicago, cropped to a uniform 3:2
- Archive chrome — live catalogue counter and per-work position ticks

## Requirements

- Expo SDK: `expo@^56.0.4` (the version this drop is built and tested on)
- React Native: `react-native@0.85.3`
- Runtime dependencies: `@lodev09/react-native-true-sheet`, `@shopify/react-native-skia`, `expo-haptics`, `react-native-gesture-handler`, `react-native-reanimated`, `react-native-worklets`
- Requires a development build, not Expo Go, because it depends on the native module @lodev09/react-native-true-sheet.

## Install

```bash
npx expo install @lodev09/react-native-true-sheet @shopify/react-native-skia expo-haptics react-native-gesture-handler react-native-reanimated react-native-worklets
```

## How to get it

- Buy Rolling Scroll Gallery on its own at https://motionary.dev/animations/rolling-scroll-gallery for $8 USD. Secure Stripe checkout, instant download, no subscription and no renewal.
- Or get it with the Motionary lifetime pass: every drop and every build,
  current and future, for one payment with no renewal. https://motionary.dev/pricing
- A team license covers up to 10 developers, each with their own account.
  https://motionary.dev/pricing
- License terms: https://motionary.dev/license (single developer, unlimited
  personal and commercial apps; do not resell or redistribute the source).
- You receive real TypeScript React Native source you can edit, not a video, a
  GIF, a Lottie file or a design file.

## Related drops on Motionary

- Halo Button ($5 USD): https://motionary.dev/animations/halo-button
- Freeze Card ($9 USD): https://motionary.dev/animations/freeze-card
- Zipper Curtain ($12 USD): https://motionary.dev/animations/zipper-curtain
- Pool Water Shader ($12 USD): https://motionary.dev/animations/pool-water-shader

## About Motionary

Motionary (https://motionary.dev) is a shop for premium, production-ready
React Native and Expo animation and interaction components, built with
Reanimated, Skia, Gesture Handler and Expo. Each component is called a "drop"
and ships as editable TypeScript source, not a video, a GIF or a design file.
Motionary sells three things: individual drops (roughly $3 to $12 each, some
free), Builds (a complete app shipped end to end, with every drop inside it),
and a lifetime pass that covers every drop and every build, current and future,
for one payment with no subscription. A team license covers a whole squad, each
developer with their own account. Checkout is Stripe and delivery is an instant
download. Created and curated by Mehdi Davoodi (https://mahdidavoodi.com).

Catalog and key pages:
- All drops: https://motionary.dev/animations
- Builds (complete apps): https://motionary.dev/builds
- Pricing, lifetime pass and team license: https://motionary.dev/pricing
- Free React Native component reference: https://motionary.dev/components
- License: https://motionary.dev/license
- Machine-readable overview: https://motionary.dev/llms.txt
- Machine-readable full catalog: https://motionary.dev/llms-full.txt

## File metadata

Canonical URL of this file: https://motionary.dev/animations/rolling-scroll-gallery/llms.txt
Describes: https://motionary.dev/animations/rolling-scroll-gallery
Format: llms.txt (https://llmstxt.org)