Skip to content
Native Animation
Launch Countdown Reveal animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add launch-countdown-reveal
Skia

Launch Countdown Reveal

A product launch story with a countdown-to-reservation transition and configurable product image, chapters, fonts, and accent color.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

A product launch story with a countdown-to-reservation transition and configurable product image, chapters, fonts, and accent color.

Why this one

A static launch photo gives away the product immediately. This story draws only its silhouette first, reveals the lens with side light, then illuminates the top plate. A fading floor reflection and three cascading studio lights finish the reveal. Every product highlight stays inside the image’s alpha mask.

How it works

  1. Measure the host with onLayout; the product is centered at 50% width and 46% height.
  2. Derive one continuous chapter progress from useAnimatedScrollHandler. Smoothstep poses rest within 20% of each chapter.
  3. Tint four image copies displaced by 1.5 points, subtract their interior with a black image, and reveal the remaining rim with an angular alpha mask.
  4. Stack radial side lighting, top lighting, and full illumination over the black silhouette. Reflect the image vertically with an alpha fade.
  5. Keep editorial text in disjoint entry/exit windows. The glass countdown stays inside the scroll content and expands into the final action.
  6. Advance the scroll through the imperative ref. The demo holds the first silhouette for three seconds, advances every 2.6 seconds, then resets through black. Touch stops autoplay.

Install

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

Use the SDK-compatible versions in piece.json. Load CanvasKit before mounting this component on web (for example, use Skia’s WithSkiaWeb boundary). Load custom fonts once in your host app. Supply an alpha-cutout product image; an opaque background prevents the silhouette effect.

Usage

import { LaunchCountdownReveal, type LaunchChapter } from './launch-countdown-reveal';

const chapters: [LaunchChapter, LaunchChapter, LaunchChapter, LaunchChapter] = [
  { title: 'A new perspective.', subtitle: 'Coming into focus.', eyebrow: 'INTRODUCTION' },
  { title: '24 megapixels.', subtitle: 'Capture every detail.', eyebrow: 'PRECISION' },
  { title: '212 grams.', subtitle: 'Carry less.', eyebrow: 'CRAFT' },
  { title: 'Meet the camera.', subtitle: 'Make it yours.', eyebrow: 'LAUNCH' },
];

<LaunchCountdownReveal
  productSource={require('./camera.png')}
  chapters={chapters}
  launchAt={Date.now() + 388928000}
  onReserve={() => openReservation()}
/>

For a different light treatment and external control:

const launchRef = useRef<LaunchCountdownRevealRef>(null);

<LaunchCountdownReveal
  ref={launchRef}
  productSource={require('./camera.png')}
  chapters={chapters}
  launchAt={deadline}
  accentColor="#A5B4FC"
  productWidth={0.78}
  transitionDuration={900}
  reserveLabel="Join the launch"
  fontFamily="YourInterfaceFont"
  titleFontFamily="YourSerifFont"
  italicFontFamily="YourItalicSerifFont"
  monoFontFamily="YourMonoFont"
/>
// From an event handler:
launchRef.current?.goTo(2);

Import the ref type from this folder. goTo(chapter, duration?) selects chapters 0–3, stop() interrupts the current programmatic scroll, and reset() fades through black and restarts the rim reveal. Autoplay belongs to the host, not the component.

Props

PropTypeDefaultPurpose
productSourceDataSourceParamrequiredTransparent local product image
chaptersfour LaunchChapter objectsrequiredTitles, subtitles, and editorial labels
launchAtnumberrequiredAbsolute deadline, milliseconds since Unix epoch
reserveLabelstringReserve yoursFinal button label and accessible name
onReserve() => void—Reservation action
onChapterChange(chapter: number) => void—Nearest chapter callback on the JS thread
onInteraction() => void—Touch/drag notification for stopping autoplay
brandReactNode—Host branding in the upper left
fontFamilystringsystemInterface font
titleFontFamilystringsystemHeadline font
italicFontFamilystringsystem italicAccent line font
monoFontFamilystringsystemTabular countdown and chapter label font
accentColorstring#93C5FDCold studio light and italic accent
productWidthnumber0.82Product width relative to the container
transitionDurationnumber1100Programmatic scroll duration in milliseconds
snapToChaptersbooleantrueNative snapping; always disabled on web
styleStyleProp<ViewStyle>—Host sizing and styling
testIDstring—Test identifier

Compatibility

Targets Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, Worklets 0.13.0, Skia 2.14.0, and Expo Blur 58. Uses BlurTargetView for Android background sampling. Works with the installed Expo Go modules; custom native dependency changes require a development build.

Supports iOS, Android, and web. Register this Skia demo through the host’s deferred Skia loader.

Accessibility

Headlines have header roles; inactive chapters are hidden from screen readers. Four labeled 44-point chapter controls provide a touch alternative to scrolling. The live countdown has a descriptive accessible label without an intrusive live region. The final CTA has a button role and the reservation label. Reduced motion removes drift, parallax, product zoom, the sweeping flash, and rolling translation; text and chapter transitions use 200 ms fades.

Icons: Lucide (ISC). The demo uses the Orrin brand and aperture glyph from the project kit. All product imagery is bundled locally.

More animations