Exploded Product Scroll

A scroll-driven bottle breakdown with separating layers and a cross-section, with configurable chapters, annotations, and fonts.

Why this one

The exploded view is live Skia geometry driven by the finger instead of a pre-rendered video. A real even-odd shell mask reveals the vacuum chamber. Delayed dimension lines draw themselves at rest; the closing spring and seam sweep give the assembly a tactile finish.

How it works

1. Measure the container with onLayout. A five-screen Animated.ScrollView produces one continuous chapter progress, p = scrollY / height.
2. Stack photos in chapter order, fading each incoming photo over the previous one. Dark top and bottom veils preserve readability.
3. Hold poses within 20% of each chapter boundary, then interpolate the cap, gasket, electronics, double wall, and base with smoothstep.
4. Render metallic gradients, 18 knurl lines, three LEDs, circuit traces, inner contours, and radial halos directly in Skia. Opening a hole in the shell's clip reveals the inner chamber.
5. Reveal callouts 120 ms after resting; withdraw them before motion. Final assembly uses an interruptible spring and a 560 ms seam sweep with a 3% scale pop.
6. Keep the final action in the scroll content. The demo drives goTo on a timer, stops on user input, then resets under black.

Install

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

Copy the files listed in piece.json. The demo/ folder is optional and contains the bundled Tidewell art. Follow the Skia web setup for your Expo app and wait for CanvasKit before mounting this component; this catalog uses its withSkia loader. Load your fonts once in the host app.

Usage

import { ExplodedProductScroll } from './exploded-product-scroll';

export function ProductScreen() {
  return <ExplodedProductScroll onAction={() => openCheckout()} />;
}

import { useRef } from 'react';
import {
  ExplodedProductScroll,
  type ExplodedProductScrollRef,
  type ProductChapters,
} from './exploded-product-scroll';

// Supply five chapters with bundled image sources and your own copy.
export function BrandedStory({ chapters }: { chapters: ProductChapters }) {
  const story = useRef<ExplodedProductScrollRef>(null);
  return (
    <ExplodedProductScroll
      ref={story}
      chapters={chapters}
      fontFamily="YourSans"
      titleFontFamily="YourSerif"
      italicFontFamily="YourSerifItalic"
      monoFontFamily="YourMono"
      springDamping={18}
      springStiffness={240}
      ctaLabel="Reserve yours — $58"
      shippingLabel="Ships in March · Free returns"
      onAction={() => openCheckout()}
    />
  );
}

Props

ref.goTo(chapter, duration = 900) uses the UI-thread scroll driver; ref.next() advances; ref.reset() returns to chapter one under a short blackout. Demo transitions last 1100 ms, with roughly 2600 ms between chapter starts. The entrance previews the closing seam sweep at 900 ms, within the first three autoplay seconds.

Compatibility

Targets Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, worklets 0.13.0, and Skia 2.14.0. No extra native dependencies beyond this stack.

Accessibility

Each chapter has a screen-reader block with a heading role and complete copy; callout labels are included in its description. The first chapter offers a 50 pt next action; intermediate chapters offer 44 pt actions, providing a tap alternative to scrolling. The final button is 56 pt tall, with its own press spring. Reduced motion removes the rising entrance, pose travel, rotation, zoom, and closing pop, uses a stationary inspection layout, and fades chapter presentation over 200 ms. Decorative images, visual headings, and dimension graphics do not duplicate the accessible content.

Art and layout notes

Its assembled height is 0.46 H. Exploded poses shrink to 76% and shift to 0.4 W, reserving a right-hand column for labels at 320 pt. Headings use two single-line text nodes with font fitting, body copy fits one line, and pills wrap naturally. No controls occupy the viewer's top-right close area. The shell window and seam light are drawn inside the product material, with no opaque effect block over text or photos.

Icons: Lucide (ISC). The Tidewell demo tile uses the kit's droplet and teal gradient.

Spring damping floors use Reanimated 4.7.1’s default mass of 4 when the configuration does not set a mass. Stiffness and mass remain unchanged.

Customization notes

Set chapters[].accent to theme each chapter, its annotations, and the bottle lighting.