Horizontal paging onboarding with per-page accent tints, layered illustration tiles, depth parallax on swipe, animated progress dots, skip, and continue/get-started actions
import * as React from "react";
import { View, type AccessibilityActionEvent, type LayoutChangeEvent, } from "react-native";
import { useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, {
useAnimatedRef,
useSharedValue,
useAnimatedStyle,
useAnimatedScrollHandler,
withSpring,
} from "react-native-reanimated";
import { Button, Glass, Icon, Text, type IconName } from "@lumioui/ui";
import { cn, spring, useHaptic, useReducedMotion } from "@lumioui/core";
import { Display, Drift, Mount } from "../shared";
/** Accent tints a page's illustration tile, eyebrow, active dot, and CTA —
* the button follows the swiped page like modern onboarding (one accent
* per page instead of a single brand color). Only semantic tokens — every
* entry is light/dark correct by construction. */
type OnboardingAccent = "primary" | "success" | "warning" | "accent" | "pink";
const ACCENTS: Record<
OnboardingAccent,
{
/** Center disc behind the glyph. */
disc: string;
/** Icon + eyebrow color token. */
icon: "primary" | "success" | "warning" | "accentForeground";
/** Eyebrow text class. */
text: string;
/** Active dot class. */
dot: string;
/** CTA fill + label classes (override the Button's default primary). */
cta: string;
ctaText: string;
}
> = {
primary: {
disc: "bg-[#65A30D]/15",
icon: "primary",
text: "text-[#65A30D]",
dot: "bg-[#65A30D]",
cta: "bg-[#65A30D]",
ctaText: "text-primary-foreground",
},
success: {
disc: "bg-success/15",
icon: "success",
text: "text-success",
dot: "bg-success",
cta: "bg-success",
ctaText: "text-success-foreground",
},
warning: {
disc: "bg-warning/15",
icon: "warning",
text: "text-warning",
dot: "bg-warning",
cta: "bg-warning",
ctaText: "text-warning-foreground",
},
accent: {
disc: "bg-accent-foreground/10",
icon: "accentForeground",
text: "text-accent-foreground",
dot: "bg-accent-foreground",
cta: "bg-accent",
ctaText: "text-accent-foreground",
},
pink: {
disc: "bg-[#EC5C9E]/12",
icon: "accentForeground",
text: "text-[#EC5C9E]",
dot: "bg-[#EC5C9E]",
cta: "bg-[#EC5C9E]",
ctaText: "text-white",
},
};
/** Pages without an explicit accent cycle through these so a plain
* `[{title, description}, …]` payload still gets per-page color. */
const ACCENT_CYCLE: OnboardingAccent[] = ["primary", "success", "warning"];
function accentFor(page: OnboardingPage | undefined, index: number) {
return ACCENTS[page?.accent ?? ACCENT_CYCLE[index % ACCENT_CYCLE.length] ?? "primary"];
}
export interface OnboardingPage {
title: string;
description: string;
/** Small caps label above the title (e.g. "Track", "Save"). */
eyebrow?: string;
/** Lucide icon shown inside the illustration tile when no `illustration` is given. */
icon?: IconName;
/** Tints the tile, eyebrow, and active dot. Defaults to a per-index rotation. */
accent?: OnboardingAccent;
illustration?: React.ReactNode;
}
export interface OnboardingScreenProps {
pages: OnboardingPage[];
onDone?: () => void;
onSkip?: () => void;
}
/** Onboarding — tinted illustration tiles, per-page accents, depth parallax
* on swipe, staggered mount entrance, elongated active dot, skip/done. */
export function OnboardingScreen({ pages, onDone, onSkip }: OnboardingScreenProps) {
const haptics = useHaptic();
// Measure the container — useWindowDimensions() returns the browser window
// in web previews (the preview column caps at 440px), which would make each
// page window-wide and break paging.
const [width, setWidth] = useState(0);
const pageWidth = useSharedValue(0);
const insets = useSafeAreaInsets();
const scrollRef = useAnimatedRef<Animated.ScrollView>();
const [index, setIndex] = useState(0);
const progress = useSharedValue(0);
const last = index === pages.length - 1;
const activeAccent = accentFor(pages[index], index);
const onLayout = (e: LayoutChangeEvent) => {
const w = e.nativeEvent.layout.width;
if (w > 0 && w !== width) {
setWidth(w);
pageWidth.value = w;
}
};
// Page progress derived on the UI thread so the dots and the per-page
// parallax track the gesture without round-tripping through JS.
const onScroll = useAnimatedScrollHandler({
onScroll: (e) => {
progress.value = pageWidth.value > 0 ? e.contentOffset.x / pageWidth.value : 0;
},
});
const goTo = (i: number) => {
// Track the target immediately — onMomentumScrollEnd is unreliable after
// programmatic scrollTo on web (it can fire with a stale offset or not
// at all), which would leave dots/CTA/Skip stuck on the old page.
autoRef.current = false; // user input ends auto-advance
if (i !== index) {
setIndex(i);
haptics.selection();
}
scrollRef.current?.scrollTo({ x: i * width, animated: true });
};
// Granola-style auto-advance — the story cycles on its own until the
// user swipes or taps, then hands control over permanently.
const autoRef = React.useRef(true);
// Programmatic scrollTo fires onMomentumScrollEnd on native — flag it so
// the swipe handler doesn't mistake an auto-advance for user input.
const autoScrolling = React.useRef(false);
React.useEffect(() => {
const t = setInterval(() => {
if (!autoRef.current) return;
setIndex((i) => {
if (i >= pages.length - 1) {
autoRef.current = false;
return i;
}
autoScrolling.current = true;
scrollRef.current?.scrollTo({ x: (i + 1) * width, animated: true });
return i + 1;
});
}, 4000);
return () => clearInterval(t);
}, [pages.length, width, scrollRef]);
return (
<View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" onLayout={onLayout}>
{/* Top bar — skip sits top-right, clear of the status bar */}
<View
className="flex-row items-center justify-end px-4"
style={{ paddingTop: insets.top, height: insets.top + 48 }}
>
{!last && (
<Button
variant="glass"
size="sm"
onPress={() => {
haptics.light();
onSkip?.();
}}
accessibilityLabel="Skip onboarding"
>
Skip
</Button>
)}
</View>
<Animated.ScrollView
ref={scrollRef}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
onScroll={onScroll}
onMomentumScrollEnd={(e) => {
if (width > 0) {
if (autoScrolling.current) {
autoScrolling.current = false;
} else {
autoRef.current = false; // a manual swipe ends auto-advance
}
const next = Math.round(e.nativeEvent.contentOffset.x / width);
if (next !== index) {
setIndex(next);
haptics.selection();
}
}
}}
scrollEventThrottle={16}
className="flex-1"
>
{pages.map((p, i) => (
<Page key={i} page={p} index={i} width={width} progress={progress} />
))}
</Animated.ScrollView>
{/* Thumb zone — dots above a full-width primary CTA */}
<Mount delay={260}>
<View
className="items-center gap-7 px-6"
style={{ paddingBottom: insets.bottom + 24 }}
>
<View
className="flex-row items-center gap-2 overflow-hidden rounded-full px-4 py-2.5"
accessibilityRole="adjustable"
accessibilityLabel={`Page ${index + 1} of ${pages.length}`}
accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
onAccessibilityAction={(e: AccessibilityActionEvent) => {
const action = e.nativeEvent.actionName;
if (action === "increment" && index < pages.length - 1) goTo(index + 1);
else if (action === "decrement" && index > 0) goTo(index - 1);
}}
>
<Glass interactive effect="clear" sheen={0.5} className="absolute inset-0 rounded-full" pointerEvents="none" />
{pages.map((_, i) => (
<Dot
key={i}
index={i}
progress={progress}
active={i === index}
activeClassName={activeAccent.dot}
/>
))}
<Text variant="muted" className="ml-3 font-mono text-[11px]">
{index + 1}/{pages.length}
</Text>
</View>
<Button
className={cn("w-full", activeAccent.cta)}
textClassName={activeAccent.ctaText}
size="lg"
haptic="medium"
onPress={() => (last ? onDone?.() : goTo(index + 1))}>
{last ? "Get started" : "Continue"}
</Button>
</View>
</Mount>
</View>
);
}
interface PageProps {
page: OnboardingPage;
index: number;
width: number;
progress: ReturnType<typeof useSharedValue<number>>;
}
/** One page — a layered tinted tile plus title/description. Each layer
* drifts at its own rate against scroll progress, so swipes read as
* depth (near elements travel further) instead of a flat slide. */
function Page({ page, index, width, progress }: PageProps) {
const reduce = useReducedMotion();
const accent = accentFor(page, index);
// d = signed distance from this page to the scroll position, in pages.
// Tile drifts furthest (it reads "closest"), copy progressively less.
const tileStyle = useAnimatedStyle(() => {
const d = clamp(progress.value - index);
return {
opacity: 1 - Math.abs(d) * 0.45,
transform: reduce
? []
: [{ translateX: -d * 48 }, { scale: 1 - Math.abs(d) * 0.08 }],
};
});
const titleStyle = useAnimatedStyle(() => {
const d = clamp(progress.value - index);
return {
opacity: 1 - Math.abs(d) * 0.6,
transform: reduce ? [] : [{ translateX: -d * 32 }],
};
});
const descStyle = useAnimatedStyle(() => {
const d = clamp(progress.value - index);
return {
opacity: 1 - Math.abs(d) * 0.7,
transform: reduce ? [] : [{ translateX: -d * 20 }],
};
});
return (
<View style={{ width }} className="flex-1">
{/* Hero — full-bleed accent field filling the top half, the way modern
onboarding reads (one bold color field, not a floating card). A
custom `illustration` gets the same full width. */}
<Mount delay={0}>
<Animated.View style={tileStyle} className="w-full items-center justify-center">
{page.illustration ? (
<View className="h-[360px] w-full items-center justify-center">
{page.illustration}
</View>
) : (
<View className={cn("h-[360px] w-full items-center justify-center overflow-hidden rounded-b-[3rem]", accent.disc)}>
<Drift emoji="✨" cls="left-10 top-10" size="text-[36px]" rotate={-12} index={index * 2} />
<Drift emoji="🪄" cls="right-12 top-16" size="text-[30px]" rotate={14} index={index * 2 + 1} />
{/* Dealt fan — the arc-onboarding motif: three colored cards
fanned across the accent field, front card carries the page glyph. */}
<View className="items-center justify-center">
<View
className="absolute h-40 w-28 items-center justify-center rounded-2xl bg-[#FFD98E] shadow-md shadow-black/10"
style={{ transform: [{ rotate: "-16deg" }, { translateX: -84 }, { translateY: 8 }] }}
>
<Icon name="check" size="lg" color="#7A4A00" />
</View>
<View
className="absolute h-40 w-28 items-center justify-center rounded-2xl bg-[#A8D9F2] shadow-md shadow-black/10"
style={{ transform: [{ rotate: "14deg" }, { translateX: 84 }, { translateY: 8 }] }}
>
<Icon name="heart" size="lg" color="#0B4E75" />
</View>
<View className="h-48 w-32 items-center justify-center rounded-2xl bg-white shadow-lg shadow-black/15">
<Icon name={page.icon ?? "zap"} size="xl" color={accent.icon} />
</View>
</View>
</View>
)}
</Animated.View>
</Mount>
{/* Copy — eyebrow + display title drift as one layer, body as another */}
<View className="flex-1 items-center justify-center gap-6 px-8">
<Mount delay={90}>
<Animated.View style={titleStyle} className="items-center gap-3">
{page.eyebrow ? (
<Text
className={cn("text-xs font-semibold uppercase tracking-[0.2em]", accent.text)}
>
{page.eyebrow}
</Text>
) : null}
<Display className="text-4xl text-center tracking-tight">
{page.title}
</Display>
</Animated.View>
</Mount>
<Mount delay={170}>
<Animated.View style={descStyle} className="items-center">
<Text variant="muted" className="max-w-xs text-center text-base leading-relaxed">
{page.description}
</Text>
</Animated.View>
</Mount>
</View>
</View>
);
}
Page.displayName = "Page";
/** Clamp scroll distance to the [-1, 1] band where parallax applies —
* pages further out just stay at their resting offset. */
function clamp(d: number) {
"worklet";
return Math.max(-1, Math.min(1, d));
}
function Dot({
index,
progress,
active,
activeClassName,
}: {
index: number;
progress: ReturnType<typeof useSharedValue<number>>;
active: boolean;
activeClassName: string;
}) {
const reduce = useReducedMotion();
const style = useAnimatedStyle(() => {
const near = Math.abs(progress.value - index) < 0.5;
// iOS idiom — the active dot stretches into a pill.
const target = near ? 24 : 8;
// Snap when reduced motion is on; spring the width otherwise.
return { width: reduce ? target : withSpring(target, spring.layout) };
});
return (
<Animated.View
style={style}
className={cn("h-2 rounded-full", active ? activeClassName : "bg-muted-foreground/40")}
/>
);
}
Dot.displayName = "Dot";
Recreate the "Onboarding Screen" screen in React Native using LumioUI.
Goal: Horizontal paging onboarding with per-page accent tints, layered illustration tiles, depth parallax on swipe, animated progress dots, skip, and continue/get-started actions 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 auth-onboarding
```
Or pull just the components: `npx lumioui add button icon text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@^4.0.0
- 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>` ×2
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×3
### `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/auth/onboarding.tsx` exporting OnboardingScreen. 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, type AccessibilityActionEvent, type LayoutChangeEvent, } from "react-native";
import { useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, {
useAnimatedRef,
useSharedValue,
useAnimatedStyle,
useAnimatedScrollHandler,
withSpring,
} from "react-native-reanimated";
import { Button, Glass, Icon, Text, type IconName } from "@lumioui/ui";
import { cn, spring, useHaptic, useReducedMotion } from "@lumioui/core";
import { Display, Drift, Mount } from "../shared";
/** Accent tints a page's illustration tile, eyebrow, active dot, and CTA —
* the button follows the swiped page like modern onboarding (one accent
* per page instead of a single brand color). Only semantic tokens — every
* entry is light/dark correct by construction. */
type OnboardingAccent = "primary" | "success" | "warning" | "accent" | "pink";
const ACCENTS: Record<
OnboardingAccent,
{
/** Center disc behind the glyph. */
disc: string;
/** Icon + eyebrow color token. */
icon: "primary" | "success" | "warning" | "accentForeground";
/** Eyebrow text class. */
text: string;
/** Active dot class. */
dot: string;
/** CTA fill + label classes (override the Button's default primary). */
cta: string;
ctaText: string;
}
> = {
primary: {
disc: "bg-[#65A30D]/15",
icon: "primary",
text: "text-[#65A30D]",
dot: "bg-[#65A30D]",
cta: "bg-[#65A30D]",
ctaText: "text-primary-foreground",
},
success: {
disc: "bg-success/15",
icon: "success",
text: "text-success",
dot: "bg-success",
cta: "bg-success",
ctaText: "text-success-foreground",
},
warning: {
disc: "bg-warning/15",
icon: "warning",
text: "text-warning",
dot: "bg-warning",
cta: "bg-warning",
ctaText: "text-warning-foreground",
},
accent: {
disc: "bg-accent-foreground/10",
icon: "accentForeground",
text: "text-accent-foreground",
dot: "bg-accent-foreground",
cta: "bg-accent",
ctaText: "text-accent-foreground",
},
pink: {
disc: "bg-[#EC5C9E]/12",
icon: "accentForeground",
text: "text-[#EC5C9E]",
dot: "bg-[#EC5C9E]",
cta: "bg-[#EC5C9E]",
ctaText: "text-white",
},
};
/** Pages without an explicit accent cycle through these so a plain
* `[{title, description}, …]` payload still gets per-page color. */
const ACCENT_CYCLE: OnboardingAccent[] = ["primary", "success", "warning"];
function accentFor(page: OnboardingPage | undefined, index: number) {
return ACCENTS[page?.accent ?? ACCENT_CYCLE[index % ACCENT_CYCLE.length] ?? "primary"];
}
export interface OnboardingPage {
title: string;
description: string;
/** Small caps label above the title (e.g. "Track", "Save"). */
eyebrow?: string;
/** Lucide icon shown inside the illustration tile when no `illustration` is given. */
icon?: IconName;
/** Tints the tile, eyebrow, and active dot. Defaults to a per-index rotation. */
accent?: OnboardingAccent;
illustration?: React.ReactNode;
}
export interface OnboardingScreenProps {
pages: OnboardingPage[];
onDone?: () => void;
onSkip?: () => void;
}
/** Onboarding — tinted illustration tiles, per-page accents, depth parallax
* on swipe, staggered mount entrance, elongated active dot, skip/done. */
export function OnboardingScreen({ pages, onDone, onSkip }: OnboardingScreenProps) {
const haptics = useHaptic();
// Measure the container — useWindowDimensions() returns the browser window
// in web previews (the preview column caps at 440px), which would make each
// page window-wide and break paging.
const [width, setWidth] = useState(0);
const pageWidth = useSharedValue(0);
const insets = useSafeAreaInsets();
const scrollRef = useAnimatedRef<Animated.ScrollView>();
const [index, setIndex] = useState(0);
const progress = useSharedValue(0);
const last = index === pages.length - 1;
const activeAccent = accentFor(pages[index], index);
const onLayout = (e: LayoutChangeEvent) => {
const w = e.nativeEvent.layout.width;
if (w > 0 && w !== width) {
setWidth(w);
pageWidth.value = w;
}
};
// Page progress derived on the UI thread so the dots and the per-page
// parallax track the gesture without round-tripping through JS.
const onScroll = useAnimatedScrollHandler({
onScroll: (e) => {
progress.value = pageWidth.value > 0 ? e.contentOffset.x / pageWidth.value : 0;
},
});
const goTo = (i: number) => {
// Track the target immediately — onMomentumScrollEnd is unreliable after
// programmatic scrollTo on web (it can fire with a stale offset or not
// at all), which would leave dots/CTA/Skip stuck on the old page.
autoRef.current = false; // user input ends auto-advance
if (i !== index) {
setIndex(i);
haptics.selection();
}
scrollRef.current?.scrollTo({ x: i * width, animated: true });
};
// Granola-style auto-advance — the story cycles on its own until the
// user swipes or taps, then hands control over permanently.
const autoRef = React.useRef(true);
// Programmatic scrollTo fires onMomentumScrollEnd on native — flag it so
// the swipe handler doesn't mistake an auto-advance for user input.
const autoScrolling = React.useRef(false);
React.useEffect(() => {
const t = setInterval(() => {
if (!autoRef.current) return;
setIndex((i) => {
if (i >= pages.length - 1) {
autoRef.current = false;
return i;
}
autoScrolling.current = true;
scrollRef.current?.scrollTo({ x: (i + 1) * width, animated: true });
return i + 1;
});
}, 4000);
return () => clearInterval(t);
}, [pages.length, width, scrollRef]);
return (
<View className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" onLayout={onLayout}>
{/* Top bar — skip sits top-right, clear of the status bar */}
<View
className="flex-row items-center justify-end px-4"
style={{ paddingTop: insets.top, height: insets.top + 48 }}
>
{!last && (
<Button
variant="glass"
size="sm"
onPress={() => {
haptics.light();
onSkip?.();
}}
accessibilityLabel="Skip onboarding"
>
Skip
</Button>
)}
</View>
<Animated.ScrollView
ref={scrollRef}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
onScroll={onScroll}
onMomentumScrollEnd={(e) => {
if (width > 0) {
if (autoScrolling.current) {
autoScrolling.current = false;
} else {
autoRef.current = false; // a manual swipe ends auto-advance
}
const next = Math.round(e.nativeEvent.contentOffset.x / width);
if (next !== index) {
setIndex(next);
haptics.selection();
}
}
}}
scrollEventThrottle={16}
className="flex-1"
>
{pages.map((p, i) => (
<Page key={i} page={p} index={i} width={width} progress={progress} />
))}
</Animated.ScrollView>
{/* Thumb zone — dots above a full-width primary CTA */}
<Mount delay={260}>
<View
className="items-center gap-7 px-6"
style={{ paddingBottom: insets.bottom + 24 }}
>
<View
className="flex-row items-center gap-2 overflow-hidden rounded-full px-4 py-2.5"
accessibilityRole="adjustable"
accessibilityLabel={`Page ${index + 1} of ${pages.length}`}
accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
onAccessibilityAction={(e: AccessibilityActionEvent) => {
const action = e.nativeEvent.actionName;
if (action === "increment" && index < pages.length - 1) goTo(index + 1);
else if (action === "decrement" && index > 0) goTo(index - 1);
}}
>
<Glass interactive effect="clear" sheen={0.5} className="absolute inset-0 rounded-full" pointerEvents="none" />
{pages.map((_, i) => (
<Dot
key={i}
index={i}
progress={progress}
active={i === index}
activeClassName={activeAccent.dot}
/>
))}
<Text variant="muted" className="ml-3 font-mono text-[11px]">
{index + 1}/{pages.length}
</Text>
</View>
<Button
className={cn("w-full", activeAccent.cta)}
textClassName={activeAccent.ctaText}
size="lg"
haptic="medium"
onPress={() => (last ? onDone?.() : goTo(index + 1))}>
{last ? "Get started" : "Continue"}
</Button>
</View>
</Mount>
</View>
);
}
interface PageProps {
page: OnboardingPage;
index: number;
width: number;
progress: ReturnType<typeof useSharedValue<number>>;
}
/** One page — a layered tinted tile plus title/description. Each layer
* drifts at its own rate against scroll progress, so swipes read as
* depth (near elements travel further) instead of a flat slide. */
function Page({ page, index, width, progress }: PageProps) {
const reduce = useReducedMotion();
const accent = accentFor(page, index);
// d = signed distance from this page to the scroll position, in pages.
// Tile drifts furthest (it reads "closest"), copy progressively less.
const tileStyle = useAnimatedStyle(() => {
const d = clamp(progress.value - index);
return {
opacity: 1 - Math.abs(d) * 0.45,
transform: reduce
? []
: [{ translateX: -d * 48 }, { scale: 1 - Math.abs(d) * 0.08 }],
};
});
const titleStyle = useAnimatedStyle(() => {
const d = clamp(progress.value - index);
return {
opacity: 1 - Math.abs(d) * 0.6,
transform: reduce ? [] : [{ translateX: -d * 32 }],
};
});
const descStyle = useAnimatedStyle(() => {
const d = clamp(progress.value - index);
return {
opacity: 1 - Math.abs(d) * 0.7,
transform: reduce ? [] : [{ translateX: -d * 20 }],
};
});
return (
<View style={{ width }} className="flex-1">
{/* Hero — full-bleed accent field filling the top half, the way modern
onboarding reads (one bold color field, not a floating card). A
custom `illustration` gets the same full width. */}
<Mount delay={0}>
<Animated.View style={tileStyle} className="w-full items-center justify-center">
{page.illustration ? (
<View className="h-[360px] w-full items-center justify-center">
{page.illustration}
</View>
) : (
<View className={cn("h-[360px] w-full items-center justify-center overflow-hidden rounded-b-[3rem]", accent.disc)}>
<Drift emoji="✨" cls="left-10 top-10" size="text-[36px]" rotate={-12} index={index * 2} />
<Drift emoji="🪄" cls="right-12 top-16" size="text-[30px]" rotate={14} index={index * 2 + 1} />
{/* Dealt fan — the arc-onboarding motif: three colored cards
fanned across the accent field, front card carries the page glyph. */}
<View className="items-center justify-center">
<View
className="absolute h-40 w-28 items-center justify-center rounded-2xl bg-[#FFD98E] shadow-md shadow-black/10"
style={{ transform: [{ rotate: "-16deg" }, { translateX: -84 }, { translateY: 8 }] }}
>
<Icon name="check" size="lg" color="#7A4A00" />
</View>
<View
className="absolute h-40 w-28 items-center justify-center rounded-2xl bg-[#A8D9F2] shadow-md shadow-black/10"
style={{ transform: [{ rotate: "14deg" }, { translateX: 84 }, { translateY: 8 }] }}
>
<Icon name="heart" size="lg" color="#0B4E75" />
</View>
<View className="h-48 w-32 items-center justify-center rounded-2xl bg-white shadow-lg shadow-black/15">
<Icon name={page.icon ?? "zap"} size="xl" color={accent.icon} />
</View>
</View>
</View>
)}
</Animated.View>
</Mount>
{/* Copy — eyebrow + display title drift as one layer, body as another */}
<View className="flex-1 items-center justify-center gap-6 px-8">
<Mount delay={90}>
<Animated.View style={titleStyle} className="items-center gap-3">
{page.eyebrow ? (
<Text
className={cn("text-xs font-semibold uppercase tracking-[0.2em]", accent.text)}
>
{page.eyebrow}
</Text>
) : null}
<Display className="text-4xl text-center tracking-tight">
{page.title}
</Display>
</Animated.View>
</Mount>
<Mount delay={170}>
<Animated.View style={descStyle} className="items-center">
<Text variant="muted" className="max-w-xs text-center text-base leading-relaxed">
{page.description}
</Text>
</Animated.View>
</Mount>
</View>
</View>
);
}
Page.displayName = "Page";
/** Clamp scroll distance to the [-1, 1] band where parallax applies —
* pages further out just stay at their resting offset. */
function clamp(d: number) {
"worklet";
return Math.max(-1, Math.min(1, d));
}
function Dot({
index,
progress,
active,
activeClassName,
}: {
index: number;
progress: ReturnType<typeof useSharedValue<number>>;
active: boolean;
activeClassName: string;
}) {
const reduce = useReducedMotion();
const style = useAnimatedStyle(() => {
const near = Math.abs(progress.value - index) < 0.5;
// iOS idiom — the active dot stretches into a pill.
const target = near ? 24 : 8;
// Snap when reduced motion is on; spring the width otherwise.
return { width: reduce ? target : withSpring(target, spring.layout) };
});
return (
<Animated.View
style={style}
className={cn("h-2 rounded-full", active ? activeClassName : "bg-muted-foreground/40")}
/>
);
}
Dot.displayName = "Dot";
```
Screen: https://lumioui.dev/screens/auth-onboarding