Skip to content
Native Animation
Glass Bubble Welcome animation preview
WelcomeGlassSkia

Glass Bubble Welcome

A glass onboarding bubble rises, contracts into an interactive fountain button, and releases a field of luminous marbles.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

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.

npx nativeanimation add glass-bubble-welcome

About this animation

A glass onboarding bubble rises, contracts into an interactive fountain button, and releases a field of luminous marbles.

How it works

  1. The component measures its own container and derives every position and size from its width and height.
  2. One entry progress value drives the opening glass bubble, the button morph, the headline, and the staggered actions.
  3. A UI-thread frame callback updates compact shared arrays for position, velocity, size, lifetime, and particle state without React renders per frame.
  4. Up to 70 bubbles are drawn in one Skia canvas with layered radial gradients, specular highlights, inner shading, and occasional marble rings.
  5. A pan applies a soft radial force to nearby bubbles, a tap splits a bubble into six short-lived droplets, and holding the glass button accelerates the fountain.

Why this one

The transformation is only the opening moment. The resulting scene stays tactile: bubbles yield to a finger, individual marbles burst into droplets, and the source visibly strains when held. Reduced motion replaces the fountain with a composed field of 18 still bubbles instead of merely slowing the same effect.

Install

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

Skia web support is configured automatically by Expo. The first CanvasKit load can take longer than native startup, so the component keeps its opening copy and glass surface in regular React Native views.

Usage

import GlassBubbleWelcome from './GlassBubbleWelcome';

export function WelcomeScreen() {
  return (
    <GlassBubbleWelcome
      primaryAction={{ label: 'Continue with email', onPress: signInWithEmail }}
      secondaryAction={{ label: 'Continue with passkey', onPress: signInWithPasskey }}
    />
  );
}

Customize the personality and control the sequence:

import { useRef } from 'react';
import GlassBubbleWelcome, { type GlassBubbleWelcomeRef } from './GlassBubbleWelcome';

export function StudioWelcome() {
  const welcomeRef = useRef<GlassBubbleWelcomeRef>(null);

  return (
    <GlassBubbleWelcome
      ref={welcomeRef}
      title="Meet your studio."
      subtitle={'Shape an idea.\nShip something real.'}
      rate={18}
      maxBubbles={60}
      palette={[
        ['#3478FF', '#32D9F4', '#C7F8FF'],
        ['#7557FF', '#E05BFF', '#F1C7FF'],
      ]}
      onEnter={() => trackWelcomeComplete()}
    />
  );
}

The forwarded ref exposes enter(), reset(), and burst().

Props

PropTypeDefaultDescription
titlestring'Welcome.'Main headline after the morph.
subtitlestring'Your personal\ncreative studio.'Supporting message.
introTextstring'A new era of\napps is here.'Opening message.
swipeHintstring'Swipe up to enter'Hint inside the opening bubble.
primaryAction{ label: string; onPress: () => void }Email actionLight action.
secondaryAction{ label: string; onPress: () => void }Passkey actionDark action.
palette[string, string, string][]Six curated color setsBubble gradient colors.
ratenumber14Bubbles emitted per second.
maxBubblesnumber70Live simulation slots, clamped from 18 to 70.
autoplaybooleanfalseEnters automatically after 600 ms.
fontFamilystringSystem fontSupporting copy and controls.
titleFontFamilystringSystem fontIntro and main headline.
onEnter() => void—Called when the entry morph finishes.
styleStyleProp<ViewStyle>—Outer-container style.
testIDstring—Test identifier.

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5, Worklets 0.10, and Skia 2.6
  • iOS: supported, not yet verified on a device
  • Android: supported, not yet verified on a device
  • Web: supported, not yet verified
  • Works in Expo Go because its native dependencies are included in Expo SDK 57

Accessibility

The fountain and both actions expose button roles and labels, and tapping the opening scene provides an alternative to swiping. With reduced motion enabled, the morph becomes a short fade, continuous emission and parallax stop, and 18 static bubbles appear as a decorative composition.

More animations