About this animation
A touch-driven unboxing reveal with a product lift and light burst, with configurable product image, fonts, and accent color.
How it works
- A single
openshared value tracks the vertical lid gesture, including elastic resistance and release velocity. - The lid uses a perspective transform and a separate Skia prism to keep its volume visible while it lifts.
- Warm radial light escapes as the lid opens; once it settles,
revealraises the camera and turns on the feathered light rays. - Dark glass specification pills stagger into two columns beside the camera, then the setup action fades in. A shared blur target supports Android 12 and later, with a tinted fallback on older devices.
Install
npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets @shopify/react-native-skia expo-image expo-blurSkia is included for the box geometry, engraved aperture, and light rays. No additional web setup is required in an Expo SDK 58 app.
Usage
<UnboxingReveal productImage={require('./camera.png')} /><UnboxingReveal
ref={ref}
productImage={camera}
fontFamily="Geist_400Regular"
titleFontFamily="InstrumentSerif_400Regular"
monoFontFamily="GeistMono_400Regular"
onSetup={handleSetup}
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
productImage | ImageSourcePropType | Required | Product image shown inside the box. |
fontFamily | string | undefined | Main interface typeface. |
titleFontFamily | string | undefined | Editorial heading typeface. |
monoFontFamily | string | undefined | Monospaced metadata typeface. |
onOpen | () => void | undefined | Called when the reveal finishes. |
onSetup | () => void | undefined | Called by the setup button. |
accessibilityLabel | string | 'Lift the lid to open the Orrin One box' | Accessible label for the lid gesture. |
style | StyleProp<ViewStyle> | undefined | Optional outer styling. |
testID | string | undefined | Optional test identifier. |
accentColor | string | '#111214' | Background color of the setup action. |
Compatibility
Expo SDK 58, React Native 0.88, Reanimated 4.7, React Native Gesture Handler 3.3, Worklets 0.13, and Skia 2.14.0. It runs in Expo Go when Skia is available, otherwise use a development build.
Accessibility
The lid is an adjustable gesture surface with a tap alternative, and the setup action is a labeled button. Reduced motion removes the rays and replaces lifts with short fades while keeping the reveal understandable.
Icons: Lucide (ISC).
Why this one
Most unboxing interactions are passive videos. This one makes the lid respond to the user's finger, gives the box real three-quarter volume, and adds two authored details: the Orrin aperture engraved into the lid and specification pills that emerge from behind the camera.
Visual details
The rigid graphite carton uses separate shaded faces, a visible lid skirt, a one-point top highlight, a softly debossed kit aperture and Orrin wordmark, and a diffuse contact shadow. The lift keeps its interruptible spring and perspective; amber light appears before the camera rises. Specification cards occupy the two side gutters rather than stacking over the box.
Layout at 390×844 and 320×694: the camera spans 35.9–64.1% of the width; glass cards occupy 3–34% and 66–97%. Text can wrap inside each card, including “Instant transfer.” The header ends below the reserved viewer corner, and the elevated lid remains below the title. The box ends around 72.5% of the height, leaving room for the bottom action. Autoplay opens at 800 ms, with interior light and the camera reveal scheduled before 3 seconds. Lighting uses radial gradients and shaded geometry, with no rectangular effect over text.
Customization notes
Movement follows gestures, scroll position, or interruptible spring physics. A global duration is not exposed; reduced-motion fades retain their short fixed timing.
