Sports prediction splash: saturated canvas, drifting sticker confetti, frosted logo bubble, stacked SSO pills
import * as React from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Glass, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { AppleLogo, Drift, GoogleLogo, Mount } from "../shared";
/** Sticker confetti — big emoji standing in for 3D-rendered objects, parked
* around the edges so the center stays clear for the wordmark. `drift`
* staggers each bob so the field never moves in lockstep. */
const OBJECTS = [
{ emoji: "🎟️", cls: "-left-4 top-16", size: "text-[54px]", rotate: -14 },
{ emoji: "✈️", cls: "right-10 top-8", size: "text-[40px]", rotate: 14 },
{ emoji: "🥅", cls: "-right-3 top-36", size: "text-[64px]", rotate: 6 },
{ emoji: "🍔", cls: "left-2 top-56", size: "text-[38px]", rotate: -10 },
{ emoji: "🟨", cls: "left-1 top-72", size: "text-[40px]", rotate: -6 },
{ emoji: "🍜", cls: "right-8 top-64", size: "text-[44px]", rotate: 10 },
{ emoji: "🏸", cls: "left-24 top-4", size: "text-[34px]", rotate: -18 },
{ emoji: "⚽", cls: "left-14 bottom-44", size: "text-[52px]", rotate: 0 },
{ emoji: "👟", cls: "right-5 bottom-48", size: "text-[56px]", rotate: -14 },
{ emoji: "🏆", cls: "right-24 bottom-40", size: "text-[36px]", rotate: 12 },
{ emoji: "☕", cls: "-left-1 bottom-40", size: "text-[46px]", rotate: 8 },
] as const;
/** Prediction welcome — sportsbook-splash idiom: saturated brand canvas with
* sticker confetti drifting at the edges, a frosted logo bubble, oversized
* white display copy, then stacked SSO pills. */
export function PredictionWelcomeScreen({
onGoogle,
onApple,
onGuest,
}: {
onGoogle?: () => void;
onApple?: () => void;
onGuest?: () => void;
}) {
const haptics = useHaptic();
return (
<View className="flex-1 bg-[#129FE3]">
{OBJECTS.map((o, i) => (
<Drift key={o.emoji} emoji={o.emoji} cls={o.cls} size={o.size} rotate={o.rotate} index={i} />
))}
<SafeAreaView className="flex-1" edges={["top", "bottom"]}>
{/* Wordmark — frosted bubble over the confetti field. */}
<View className="flex-1 items-center justify-center gap-6 px-10">
<Mount className="items-center gap-6">
<View className="h-20 w-20 items-center justify-center overflow-hidden rounded-full">
<Glass effect="regular" sheen={0.6} className="absolute inset-0 rounded-full" pointerEvents="none" />
<Text className="text-4xl">⚡</Text>
</View>
<Text className="text-center text-4xl font-bold leading-tight tracking-tight text-white">
Meet Lumio,{"\n"}where live prediction{"\n"}meets social layer.
</Text>
</Mount>
</View>
<View className="gap-3 px-6 pb-2">
<Mount delay={80}>
<Button
variant="secondary"
size="lg"
className="w-full bg-white"
icon={<GoogleLogo size={18} />}
onPress={() => {
haptics.light();
onGoogle?.();
}}
accessibilityLabel="Continue with Google"
>
Continue with Google
</Button>
</Mount>
<Mount delay={140}>
<Button
variant="default"
size="lg"
className="w-full bg-[#0B0B0F]"
icon={<AppleLogo size={18} color="#FFF" />}
onPress={() => {
haptics.light();
onApple?.();
}}
accessibilityLabel="Continue with Apple"
>
Continue with Apple
</Button>
</Mount>
<Mount delay={200} className="items-center">
<Button
variant="ghost"
size="sm"
onPress={() => {
haptics.selection();
onGuest?.();
}}
accessibilityLabel="Browse as guest"
>
<Text className="text-white/85">Browse as guest</Text>
</Button>
</Mount>
</View>
</SafeAreaView>
</View>
);
}
PredictionWelcomeScreen.displayName = "PredictionWelcomeScreen";
Recreate the "Prediction Welcome Screen" screen in React Native using LumioUI.
Goal: Sports prediction splash: saturated canvas, drifting sticker confetti, frosted logo bubble, stacked SSO pills Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add misc-prediction-welcome
```
Or pull just the components: `npx lumioui add button glass text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×3
### `glass` — iOS 26 liquid-glass surface — real glass via expo-glass-effect (Expo Go) or @callstack/liquid-glass (dev builds), SVG refraction + specular rim on web, frosted fallback elsewhere; GlassContainer melts adjacent panes into one blob
- `<Glass>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×3
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/misc/prediction-welcome.tsx` exporting PredictionWelcomeScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Glass, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { AppleLogo, Drift, GoogleLogo, Mount } from "../shared";
/** Sticker confetti — big emoji standing in for 3D-rendered objects, parked
* around the edges so the center stays clear for the wordmark. `drift`
* staggers each bob so the field never moves in lockstep. */
const OBJECTS = [
{ emoji: "🎟️", cls: "-left-4 top-16", size: "text-[54px]", rotate: -14 },
{ emoji: "✈️", cls: "right-10 top-8", size: "text-[40px]", rotate: 14 },
{ emoji: "🥅", cls: "-right-3 top-36", size: "text-[64px]", rotate: 6 },
{ emoji: "🍔", cls: "left-2 top-56", size: "text-[38px]", rotate: -10 },
{ emoji: "🟨", cls: "left-1 top-72", size: "text-[40px]", rotate: -6 },
{ emoji: "🍜", cls: "right-8 top-64", size: "text-[44px]", rotate: 10 },
{ emoji: "🏸", cls: "left-24 top-4", size: "text-[34px]", rotate: -18 },
{ emoji: "⚽", cls: "left-14 bottom-44", size: "text-[52px]", rotate: 0 },
{ emoji: "👟", cls: "right-5 bottom-48", size: "text-[56px]", rotate: -14 },
{ emoji: "🏆", cls: "right-24 bottom-40", size: "text-[36px]", rotate: 12 },
{ emoji: "☕", cls: "-left-1 bottom-40", size: "text-[46px]", rotate: 8 },
] as const;
/** Prediction welcome — sportsbook-splash idiom: saturated brand canvas with
* sticker confetti drifting at the edges, a frosted logo bubble, oversized
* white display copy, then stacked SSO pills. */
export function PredictionWelcomeScreen({
onGoogle,
onApple,
onGuest,
}: {
onGoogle?: () => void;
onApple?: () => void;
onGuest?: () => void;
}) {
const haptics = useHaptic();
return (
<View className="flex-1 bg-[#129FE3]">
{OBJECTS.map((o, i) => (
<Drift key={o.emoji} emoji={o.emoji} cls={o.cls} size={o.size} rotate={o.rotate} index={i} />
))}
<SafeAreaView className="flex-1" edges={["top", "bottom"]}>
{/* Wordmark — frosted bubble over the confetti field. */}
<View className="flex-1 items-center justify-center gap-6 px-10">
<Mount className="items-center gap-6">
<View className="h-20 w-20 items-center justify-center overflow-hidden rounded-full">
<Glass effect="regular" sheen={0.6} className="absolute inset-0 rounded-full" pointerEvents="none" />
<Text className="text-4xl">⚡</Text>
</View>
<Text className="text-center text-4xl font-bold leading-tight tracking-tight text-white">
Meet Lumio,{"\n"}where live prediction{"\n"}meets social layer.
</Text>
</Mount>
</View>
<View className="gap-3 px-6 pb-2">
<Mount delay={80}>
<Button
variant="secondary"
size="lg"
className="w-full bg-white"
icon={<GoogleLogo size={18} />}
onPress={() => {
haptics.light();
onGoogle?.();
}}
accessibilityLabel="Continue with Google"
>
Continue with Google
</Button>
</Mount>
<Mount delay={140}>
<Button
variant="default"
size="lg"
className="w-full bg-[#0B0B0F]"
icon={<AppleLogo size={18} color="#FFF" />}
onPress={() => {
haptics.light();
onApple?.();
}}
accessibilityLabel="Continue with Apple"
>
Continue with Apple
</Button>
</Mount>
<Mount delay={200} className="items-center">
<Button
variant="ghost"
size="sm"
onPress={() => {
haptics.selection();
onGuest?.();
}}
accessibilityLabel="Browse as guest"
>
<Text className="text-white/85">Browse as guest</Text>
</Button>
</Mount>
</View>
</SafeAreaView>
</View>
);
}
PredictionWelcomeScreen.displayName = "PredictionWelcomeScreen";
```
Screen: https://lumioui.dev/screens/misc-prediction-welcome